/** Shopify CDN: Minification failed

Line 5159:21 Expected identifier but found whitespace
Line 5159:23 Unexpected "{"
Line 5159:32 Expected ":"
Line 7656:21 Expected identifier but found whitespace
Line 7656:23 Unexpected "{"
Line 7656:32 Expected ":"
Line 8023:21 Expected identifier but found whitespace
Line 8023:23 Unexpected "{"
Line 8023:32 Expected ":"
Line 8820:21 Expected identifier but found whitespace
... and 2 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar-v2 (INDEX:0) */
.ab-v2 {
    /* Merchant pixels from the Height settings. The text size is its OWN
       setting (--ab-fs) and never follows the height. The indirection
       through --band-h-d/-m exists because the inline values are
       element-level declarations, which no media query could override. */
    --band-h: var(--band-h-d, 38px);
    --band-bg: var(--surface-sunken);
    /* No-JS fallback (basev2's --dur-marquee, 22s); the custom element
       overwrites it with copy-width / px-per-second so perceived speed is
       message-count independent. */
    --marquee-dur: var(--dur-marquee, 22s);
    /* Never the `background` shorthand: it resets background-image and would
       wipe the grid layered on this same element. */
    background-color: var(--band-bg);
    overflow: hidden;
  }

  /* --- Band height ---------------------------------------------------- */
  /* Mobile height is its own setting rather than a ratio of the desktop one:
     a 108px band is a deliberate statement on a wide viewport and simply eats
     a phone screen. */
  @media (max-width: 749px) {
    .ab-v2 {
      --band-h: var(--band-h-m, 38px);
    }
  }

  /* --- Background presets ---------------------------------------------- */
  /* Presets rebind the same custom property the element already consumes, so
     preset and custom share ONE code path: the class sets the token, the
     custom option sets it inline instead. `--bg-custom` and `--sepc-custom`
     deliberately declare nothing, leaving the inline value — or the base
     fallback, if the picker was left blank — to stand. */
  .ab-v2--bg-page {
    --band-bg: var(--surface-page);
  }
  .ab-v2--bg-card {
    --band-bg: var(--surface-card);
  }
  .ab-v2--bg-raised {
    --band-bg: var(--surface-raised);
  }
  /* --red-900, not --red-500: a full-bleed band at THE red would own the whole
     page and break the one-red-element rule. */
  .ab-v2--bg-red {
    --band-bg: var(--red-900);
  }
  /* The red band is a fixed dark-red ground in both themes, so its ink pins
     white — the theme-following item colors above only fit the surface
     presets. */
  .shftd-v2.ab-v2--bg-red .ab-v2__item,
  .shftd-v2.ab-v2--bg-red .ab-v2__accent--default {
    color: oklch(0.99 0 0);
  }
  .shftd-v2.ab-v2--bg-red.ab-v2--sepc-default .ab-v2__sep {
    --sep-color: oklch(0.99 0 0);
  }

  /* --- Grid overlay ----------------------------------------------------- */
  /* Consumes basev2's --grid-fine-light token via a pseudo-element rather than
     its `.texture-grid` class (basev2 does ship an `&.texture-grid` variant
     that would match this scope root). The reason is --grid-opacity: applied
     to the root it would fade the messages too, so the texture needs its own
     layer. */
  .ab-v2--grid {
    position: relative;
    isolation: isolate;
  }
  .ab-v2--grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Full strength by default: the tokens carry their own alpha, so 100%
       here is exactly the grid the footer and mega menu paint. */
    opacity: var(--grid-opacity, 1);
    background-image: var(--grid-fine-light);
  }
  /* Light and dark use basev2's own texture tokens, so the two default grids
     stay on the design system rather than being re-mixed here. */
  .ab-v2--gridc-dark::before {
    background-image: var(--grid-fine);
  }
  /* Red and custom cannot: the tokens bake their colour into the gradient, so a
     tintable grid has to be rebuilt locally from --grid-color. Same 28px pitch
     and 1px line as the tokens, so all four read as one grid. */
  .ab-v2--gridc-red::before,
  .ab-v2--gridc-custom::before {
    background-image:
      repeating-linear-gradient(
        0deg,
        var(--grid-color, var(--red-500)) 0 1px,
        transparent 1px 28px
      ),
      repeating-linear-gradient(
        90deg,
        var(--grid-color, var(--red-500)) 0 1px,
        transparent 1px 28px
      );
  }

  /* --- Viewport --------------------------------------------------------- */
  .ab-v2__in {
    overflow: hidden;
  }

  .ab-v2__viewport {
    display: flex;
    align-items: center;
    min-height: var(--band-h);
    overflow: hidden;
    border-block: 1px solid var(--line-hairline);
  }

  /* --- Marquee track ---------------------------------------------------- */
  .ab-v2__track {
    display: flex;
    flex: 0 0 auto;
    width: max-content;
    animation: shftd-marquee var(--marquee-dur) linear infinite;
  }

  /* Floored at 100vw: the loop translates the track by -50% (one copy), so a
     seamless wrap needs EACH copy to be at least as wide as the viewport —
     at 50vw a blank hole scrolled through once per cycle on short message
     lists. `space-around` spreads the slack instead of pooling it into one
     hole, and puts half a gap at each copy edge so the seam gap matches the
     in-copy gaps. */
  .ab-v2__copy {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-around;
    min-width: 100vw;
  }

  /* --- Scroll right ----------------------------------------------------- */
  /* The keyframes are a pure linear translate (0 -> -50%) over two
     byte-identical copies, so playing them backwards IS rightward motion and
     the seam still lands. No mirror, so nothing downstream needs a
     counter-flip — matches marquee-v2. */
  .ab-v2--marquee.ab-v2--right .ab-v2__track {
    animation-direction: reverse;
  }

  /* --- Static mode ------------------------------------------------------ */
  /* Centred, and allowed to wrap: a fixed row would clip on a narrow screen,
     and there is no animation here to carry the overflow back into view.
     The reduced-motion block below re-uses this same rule for the surviving
     marquee copy, which is in exactly the same situation. */
  .ab-v2__static {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: calc(var(--band-h) * 0.12);
  }
  .ab-v2--static .ab-v2__viewport {
    /* The viewport is min-height, not height, so a wrapped row can grow past
       the band height instead of having its extra lines clipped. */
    padding-block: calc(var(--band-h) * 0.1);
  }
  .ab-v2--static .ab-v2__item {
    white-space: normal;
  }

  /* --- Message type ------------------------------------------------------ */
  .ab-v2__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    white-space: nowrap;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: var(--weight-semibold);
    font-size: var(--ab-fs, 14px);
    line-height: 1.2;
    letter-spacing: var(--track-widest);
    text-transform: uppercase;
    color: var(--n-0);
    transition: opacity var(--dur-1) var(--ease-out);
  }
  @media (max-width: 749px) {
    .ab-v2__item {
      font-size: var(--ab-fs-m, 12px);
      letter-spacing: var(--track-wider);
    }
  }
  /* --- Highlight ----------------------------------------------------------- */
  /* The Highlight text setting: the matching phrase inside the message gets its
     own colour in place ("4X" red inside "4X entries live"). It is a span
     inside the message span, so it inherits the item's size, tracking and
     uppercase and stays inside the anchor when the message is linked. */
  .ab-v2__accent {
    font-weight: var(--weight-bold);
  }
  .ab-v2__accent--red {
    color: var(--red-500);
  }
  .ab-v2__accent--default {
    color: var(--n-0);
  }
  .ab-v2__accent--muted {
    color: var(--n-400);
  }
  /* Blank picker falls through to red rather than painting nothing. */
  .ab-v2__accent--custom {
    color: var(--accent-custom, var(--red-500));
  }

  /* Bold in either text field is weight only, never colour: the Accent text
     setting is the one way to get a second colour into a message, so bold stays
     plain emphasis and nothing changes colour without the merchant asking. */
  .ab-v2__item strong,
  .ab-v2__item b {
    font-weight: var(--weight-bold);
  }

  /* --n-400, matching marquee-v2's "muted": the neutral ramp has no --n-300,
     and an undefined token here would silently leave the item white. */
  .ab-v2__item--muted {
    color: var(--n-400);
  }
  .ab-v2__item--red {
    color: var(--red-500);
  }
  /* --item-color is written inline per block; the fallback is the default
     white, so the message stays legible if the picker was left blank. */
  .ab-v2__item--custom {
    color: var(--item-color, var(--n-0));
  }

  /* --- Linked messages --------------------------------------------------- */
  /* Linked messages look exactly like plain ones — no hover treatment. Only
     the keyboard focus ring marks them out. */
  .ab-v2__item--linked {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .ab-v2__item--linked:focus-visible {
    outline: 1px solid var(--line-accent);
    outline-offset: 3px;
  }

  /* --- Separators -------------------------------------------------------- */
  /* One element, three geometries, all reading the same --sep-color /
     --sep-size / --sep-gap. margin-inline (not a one-sided margin) so the
     merchant's gap value is the gap on EACH side and spacing stays symmetric
     whichever direction the band scrolls. */
  .ab-v2__sep {
    flex: 0 0 auto;
    align-self: center;
    margin-inline: var(--sep-gap, 24px);
    background-color: var(--sep-color, var(--red-500));
  }
  /* With separators off there is no element left to carry the spacing, so the
     items take it on themselves. Half the gap per side reproduces the same
     message-to-message distance the separator layout produces, so toggling
     separators changes what sits between the messages, not how far apart they
     are. */
  .ab-v2--sep-none .ab-v2__item {
    margin-inline: calc(var(--sep-gap, 24px) / 2);
  }
  /* Square is the default shape. 2px radius: the design system caps radii at
     3px, so "near-square" is as round as anything here gets. */
  .ab-v2--sep-square .ab-v2__sep {
    width: var(--sep-size, 4px);
    height: var(--sep-size, 4px);
    border-radius: 2px;
  }
  /* Bar and slash share a box: a thin vertical hairline three times as tall as
     the nominal size. max(1px, …) keeps it visible at the smallest sizes. */
  .ab-v2--sep-bar .ab-v2__sep,
  .ab-v2--sep-slash .ab-v2__sep {
    width: max(1px, calc(var(--sep-size, 4px) / 4));
    height: calc(var(--sep-size, 4px) * 3);
  }
  .ab-v2--sep-slash .ab-v2__sep {
    transform: rotate(20deg);
  }

  .ab-v2--sepc-default .ab-v2__sep {
    --sep-color: var(--n-0);
  }
  .ab-v2--sepc-muted .ab-v2__sep {
    --sep-color: var(--n-600);
  }
  .ab-v2--sepc-red .ab-v2__sep {
    --sep-color: var(--red-500);
  }

  /* --- Hover speed -------------------------------------------------------- */
  /* Speed changes are driven by JS `playbackRate` (see the web component), which
     rescales the animation in place instead of snapping the track back to the
     start. A full stop is the one case CSS handles alone, so the band still
     stops without JS. Gated on real pointers so a tap never latches a touch
     device into a stopped band. */
  @media (hover: hover) and (pointer: fine) {
    .ab-v2--hover-stop .ab-v2__viewport:hover .ab-v2__track {
      animation-play-state: paused;
    }
  }
  /* Focus pause is NOT a setting and fires regardless of the hover setting: a
     link inside a moving track is unhittable for keyboard and screen-magnifier
     users (WCAG 2.2.2). Inert on bars with no links, since nothing inside is
     then focusable. */
  .ab-v2__viewport:focus-within .ab-v2__track {
    animation-play-state: paused;
  }

  /* --- Reduced motion ---------------------------------------------------- */
  /* The clone is removed and the remaining copy is laid out like the static
     row: without the animation, a nowrap track wider than the viewport would
     leave the overflowing messages permanently unreachable. */
  @media (prefers-reduced-motion: reduce) {
    .ab-v2__track {
      animation: none;
      width: 100%;
    }
    .ab-v2__copy:nth-child(2) {
      display: none;
    }
    .ab-v2__copy {
      flex: 1 1 auto;
      flex-wrap: wrap;
      justify-content: center;
      min-width: 0;
      row-gap: calc(var(--band-h) * 0.12);
    }
    .ab-v2__item {
      white-space: normal;
    }
    .ab-v2--marquee .ab-v2__viewport {
      padding-block: calc(var(--band-h) * 0.1);
    }
  }
/* END_SECTION:announcement-bar-v2 */

/* START_SECTION:announcement-bar (INDEX:1) */
.announcement-bar {
  --bar-color: var(--color-primary, #ff0000);
  --ab-rotate-duration: 600ms;
  background: linear-gradient(120deg, rgba(var(--bar-color-r, 255), var(--bar-color-g, 0), var(--bar-color-b, 0), 0.92),
                                      rgba(var(--bar-color-r, 255), var(--bar-color-g, 0), var(--bar-color-b, 0), 0.96),
                                      rgba(var(--bar-color-r, 255), var(--bar-color-g, 0), var(--bar-color-b, 0), 0.92));
  background-size: 200% 100%;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 6px 0!important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(var(--bar-color-r, 255), var(--bar-color-g, 0), var(--bar-color-b, 0), 0.18);
  position: relative;
  z-index: 10;
  animation: gradientFlow 15s ease-in-out infinite alternate;
  overflow: hidden;
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 25%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 75%; }
  100% { background-position: 0% 50%; }
}

.shine-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}

.shine-effect {
  position: absolute;
  top: 0;
  left: -150%;
  width: 90%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 12%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 88%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shine 7s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  transform: skewX(-15deg);
}

@keyframes shine {
  0% {
    left: -150%;
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    left: 150%;
    opacity: 0;
  }
  100% {
    left: 150%;
    opacity: 0;
  }
}

.announcement-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.announcement-bar__content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}

.announcement-bar__viewport {
  position: relative;
  width: 100%;
  max-width: 900px;
  min-height: 1.4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.announcement-bar__message {
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  max-width: 900px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--ab-rotate-duration) ease,
    transform var(--ab-rotate-duration) ease,
    visibility 0s linear var(--ab-rotate-duration);
  will-change: opacity, transform;
}

.announcement-bar__message.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--ab-rotate-duration) ease,
    transform var(--ab-rotate-duration) ease,
    visibility 0s linear 0s;
}

.announcement-bar--anim-fade .announcement-bar__message {
  transform: translateY(-50%);
}
.announcement-bar--anim-fade .announcement-bar__message.is-active {
  transform: translateY(-50%);
}

.announcement-bar--anim-slide-up .announcement-bar__message {
  transform: translateY(calc(-50% + 14px));
}
.announcement-bar--anim-slide-up .announcement-bar__message.is-active {
  transform: translateY(-50%);
}
.announcement-bar--anim-slide-up .announcement-bar__message.is-leaving {
  transform: translateY(calc(-50% - 14px));
  opacity: 0;
}

.announcement-bar--anim-slide-left .announcement-bar__message {
  transform: translate(24px, -50%);
}
.announcement-bar--anim-slide-left .announcement-bar__message.is-active {
  transform: translate(0, -50%);
}
.announcement-bar--anim-slide-left .announcement-bar__message.is-leaving {
  transform: translate(-24px, -50%);
  opacity: 0;
}

.announcement-bar__message p {
  margin: 0;
  position: relative;
  display: inline-block;
  transition: transform 0.2s ease;
}

@media screen and (min-width: 768px) {
  .announcement-bar:hover .announcement-bar__message.is-active p {
    transform: scale(1.01);
  }

  .announcement-bar:hover .shine-effect {
    animation-duration: 4s;
  }
}

@media screen and (max-width: 767px) {
  .announcement-bar {
    padding: 7px 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-bar__message,
  .announcement-bar__message.is-active {
    transition: opacity 0s, visibility 0s;
    transform: translateY(-50%) !important;
  }
}
/* END_SECTION:announcement-bar */

/* START_SECTION:build-details-hero (INDEX:2) */
.build-details-hero {
  --accent-color: var(--theme-accent-color, #e60000);
  --accent-color-rgb: 230, 0, 0;
  position: relative;
  height: calc(80vh - var(--announcement-height) + 4px);
  min-height: 650px;
  color: #ffffff;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
}

/* Improved background with texture and better gradients */
.build-details-hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #1a1010 0%, #090909 100%);
  z-index: 1;
  overflow: hidden;
}

.build-details-hero__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 25% 25%, rgba(var(--accent-color-rgb), 0.1), transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(var(--accent-color-rgb), 0.15), transparent 50%);
  animation: shift-gradient 15s ease-in-out infinite alternate;
  opacity: 0.8;
}

/* Add noise texture to background */
.build-details-hero__noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  z-index: 2;
}

/* Velocity shapes for dynamic feel */
.build-details-hero__velocity-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
}

.velocity-shape {
  position: absolute;
  opacity: 0.15;
  pointer-events: none;
}

.velocity-shape--1 {
  width: 300px;
  height: 15px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.5), transparent);
  transform: rotate(-30deg) translate(-50%, -50%);
  top: 30%;
  left: 60%;
  filter: blur(5px);
  animation: move-line 8s linear infinite;
}

.velocity-shape--2 {
  width: 400px;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.3), transparent);
  transform: rotate(-15deg) translate(-50%, -50%);
  top: 40%;
  left: 55%;
  filter: blur(3px);
  animation: move-line 12s linear infinite;
}

.velocity-shape--3 {
  width: 200px;
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.4), transparent);
  transform: rotate(-40deg) translate(-50%, -50%);
  top: 60%;
  left: 50%;
  filter: blur(2px);
  animation: move-line 7s linear infinite;
}

.velocity-shape--4 {
  width: 250px;
  height: 12px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.4), transparent);
  transform: rotate(-25deg) translate(-50%, -50%);
  top: 50%;
  left: 45%;
  filter: blur(4px);
  animation: move-line 10s linear infinite;
}

.velocity-shape--5 {
  width: 350px;
  height: 20px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.2), transparent);
  transform: rotate(-20deg) translate(-50%, -50%);
  top: 45%;
  left: 40%;
  filter: blur(6px);
  animation: move-line 15s linear infinite;
}

.velocity-shape--dots {
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 15px 15px;
  animation: move-dots 20s linear infinite;
  opacity: 0.1;
}

@keyframes move-line {
  0% {
    transform: translateX(-100%) rotate(-30deg);
  }
  100% {
    transform: translateX(200%) rotate(-30deg);
  }
}

@keyframes move-dots {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

@keyframes shift-gradient {
  0% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.02); }
  100% { opacity: 0.5; transform: scale(1); }
}

.build-details-hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  justify-content: center;
  padding: 0 20px;
  align-items: flex-start;
}

/* Left column - Vertical Motorcycle stats */
.build-details-hero__stats {
  width: 20%;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 120px;
}

.build-details-hero__stats--left {
  padding-right: 20px;
}

.build-details-hero__stats--right {
  padding-left: 20px;
  align-items: flex-end;
}

.build-details-hero__specs-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.build-details-hero__stats--right .build-details-hero__specs-wrapper {
  align-items: flex-end;
}

.build-details-hero__spec {
  position: relative;
  padding-left: 15px;
  transition: transform 0.3s ease, filter 0.3s ease;
  will-change: transform;
  cursor: pointer;
  user-select: none;
}

.build-details-hero__stats--right .build-details-hero__spec {
  padding-left: 0;
  padding-right: 15px;
  text-align: right;
}

.build-details-hero__spec:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  z-index: 1;
}

.build-details-hero__spec:hover .build-details-hero__spec-value {
  color: var(--accent-color);
}

.build-details-hero__spec::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.build-details-hero__stats--right .build-details-hero__spec::before {
  left: auto;
  right: 0;
}

.build-details-hero__spec:hover::before {
  background-color: var(--accent-color);
  box-shadow: 0 0 8px rgba(var(--accent-color-rgb), 0.5);
}

/* Remove the accent color from highlight-spec line */
.highlight-spec::before {
  background-color: rgba(255, 255, 255, 0.3); /* Changed from accent color to match other lines */
  box-shadow: none; /* Removed shadow */
}

.build-details-hero__spec-value {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #ffffff;
  transition: color 0.3s ease;
}

.mod-list {
  font-size: 14px;
  max-width: 200px;
}

.build-details-hero__spec-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
}

/* Center - Centered motorcycle and title */
.build-details-hero__center {
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.build-details-hero__motorcycle {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  width: 100%;
}

/* Updated styles for giveaway container at the top */
.build-details-hero__giveaway-container--top {
  margin-bottom: 20px;
  text-align: center;
  padding-top: -15px;
}

/* Parallax effect only on image */
.parallax-element {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.build-details-hero__image-container {
  height: 430px; 
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 35px; /* Increased from 20px to add more space below the bike image */
}

.build-details-hero__image-container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(var(--accent-color-rgb), 0.2), transparent 70%);
  filter: blur(8px);
  z-index: 1;
}

.build-details-hero__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  z-index: 2;
  position: relative;
}

.build-details-hero__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(34, 34, 34, 0.3);
  color: #ffffff;
  font-size: 18px;
  border-radius: 10px;
}

/* Neon text effect styles */
.build-details-hero__giveaway-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 3;
}

.neon-text-container {
  position: relative;
  padding: 5px 15px;
  margin-bottom: 10px;
  overflow: visible;
}

.build-details-hero__giveaway {
  font-size: 56px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1;
  position: relative;
}

.neon-text {
  color: rgba(255, 255, 255, 0.92);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 0 5px var(--accent-color));
  position: relative;
  display: inline-block;
}

.neon-text span {
  display: inline-block;
  animation: neon-flicker 3s ease-in-out infinite;
  text-shadow: 
    0 0 5px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(255, 255, 255, 0.6),
    0 0 15px rgba(var(--accent-color-rgb), 0.7),
    0 0 25px rgba(var(--accent-color-rgb), 0.6),
    0 0 35px rgba(var(--accent-color-rgb), 0.5),
    0 0 50px rgba(var(--accent-color-rgb), 0.4);
}

/* Randomized floating animations for each letter with subtle, slower movements */
.neon-text span:nth-child(1) { animation: neon-flicker 3s ease-in-out infinite, float-letter-1 6.7s ease-in-out infinite; }
.neon-text span:nth-child(2) { animation: neon-flicker 3s ease-in-out infinite, float-letter-2 7.1s ease-in-out infinite; }
.neon-text span:nth-child(3) { animation: neon-flicker 3s ease-in-out infinite, float-letter-3 8.3s ease-in-out infinite; }
.neon-text span:nth-child(4) { animation: neon-flicker 3s ease-in-out infinite, float-letter-4 7.8s ease-in-out infinite; }
.neon-text span:nth-child(5) { animation: neon-flicker 3s ease-in-out infinite, float-letter-5 6.2s ease-in-out infinite; }

/* Less intense flickering with reduced frequency */
@keyframes neon-flicker {
  0%, 92%, 94%, 96%, 98%, 100% {
    opacity: 0.95;
    text-shadow: 
      0 0 5px rgba(255, 255, 255, 0.8),
      0 0 10px rgba(255, 255, 255, 0.6),
      0 0 15px rgba(var(--accent-color-rgb), 0.7),
      0 0 25px rgba(var(--accent-color-rgb), 0.6),
      0 0 35px rgba(var(--accent-color-rgb), 0.5),
      0 0 50px rgba(var(--accent-color-rgb), 0.4);
  }
  93%, 95%, 97%, 99% {
    opacity: 0.75;
    text-shadow: none;
  }
}

/* Individual letter floating animations - each with unique subtle movements */
@keyframes float-letter-1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1px, -4px); }
}

@keyframes float-letter-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-1.2px, -3.5px); }
}

@keyframes float-letter-3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1.5px, -5px); }
}

@keyframes float-letter-4 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-0.8px, -4.2px); }
}

@keyframes float-letter-5 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0.7px, -3.8px); }
}

/* Add a subtle hover effect for the neon text container */
.neon-text-container:after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(ellipse at center, rgba(var(--accent-color-rgb), 0.25), transparent 70%);
  filter: blur(15px);
  opacity: 0.6;
  z-index: -1;
  animation: glow-hover 8s ease-in-out infinite alternate;
}

@keyframes glow-hover {
  0% {
    opacity: 0.4;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.92);
  }
}

.build-details-hero__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.9;
}

/* Countdown overlay styles (moved to match hero-video section) */
.build-details-hero__countdown-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.15) 80%, rgba(0, 0, 0, 0) 100%);
  padding: 0 0 55px;
  z-index: 4;
}

.build-details-hero__countdown-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.build-details-hero__countdown-text {
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-color); /* Already using the theme accent color */
  letter-spacing: 0.05em;
}

.pulse-glow {
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% {
    text-shadow: 0 0 5px rgba(var(--accent-color-rgb), 0.5), 0 0 10px rgba(var(--accent-color-rgb), 0.3);
  }
  50% {
    text-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.8), 0 0 25px rgba(var(--accent-color-rgb), 0.5), 0 0 35px rgba(var(--accent-color-rgb), 0.3);
  }
  100% {
    text-shadow: 0 0 5px rgba(var(--accent-color-rgb), 0.5), 0 0 10px rgba(var(--accent-color-rgb), 0.3);
  }
}

.build-details-hero__countdown {
  display: flex;
  gap: 15px;
}

.build-details-hero__countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.build-details-hero__countdown-number {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

/* Animation for number change */
@keyframes number-update {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.number-changed {
  animation: number-update 0.3s ease-out;
}

.build-details-hero__countdown-label {
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments */
@media screen and (max-height: 1080px) {
  .build-details-hero__giveaway-container--top {
    padding-top: 80px;
    margin-bottom: 0px;
  }

  .build-details-hero__countdown-overlay {
    padding: 0;
    bottom: -5px;
  }

  .build-details-hero__motorcycle {
    max-width: 700px;
  }
}

@media screen and (max-width: 991px) {
  .build-details-hero__content {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
    align-items: center;
  }
  
  .build-details-hero__stats,
  .build-details-hero__center {
    width: 100%;
    margin-top: 0;
  }
  
  .build-details-hero__center {
    order: 1; /* Move center content (with the neon text at top) to the top */
  }
  
  .build-details-hero__giveaway-container--top {
    padding-top: 20px; /* Reset to smaller padding on mobile layouts */
  }
  
  .build-details-hero__stats--left {
    order: 2;
    margin-top: 30px;
    padding: 0;
  }
  
  .build-details-hero__stats--right {
    order: 3;
    margin-top: 30px;
    padding: 0;
  }
  
  .build-details-hero__specs-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 30px;
  }
  
  .build-details-hero__stats--right .build-details-hero__specs-wrapper {
    align-items: center;
  }
  
  .build-details-hero__spec {
    width: calc(50% - 30px);
    text-align: left;
    /* Adjust hover behavior for tablet */
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  
  .build-details-hero__spec:hover {
    transform: translateY(-2px);
  }
  
  .build-details-hero__stats--right .build-details-hero__spec {
    text-align: left;
    padding-left: 15px;
    padding-right: 0;
  }
  
  .build-details-hero__stats--right .build-details-hero__spec::before {
    left: 0;
    right: auto;
  }
  
  .build-details-hero {
    height: auto;
    min-height: 100vh;
  }
  
  .build-details-hero__image-container {
    height: 300px;
    margin-top: 20px;
  }
  
  .build-details-hero__giveaway {
    font-size: 42px;
  }
  
  .velocity-shape--1,
  .velocity-shape--2,
  .velocity-shape--3,
  .velocity-shape--4,
  .velocity-shape--5 {
    opacity: 0.1;
  }
  
  .build-details-hero__countdown-text {
    font-size: 1.6rem;
  }
  
  .build-details-hero__countdown-number {
    font-size: 2.8rem;
  }
  
  .build-details-hero__countdown-wrapper {
    flex-direction: column;
    gap: 10px;
  }
}

@media screen and (max-width: 767px) {
  .build-details-hero__specs-wrapper {
    gap: 15px;
  }
  
  .build-details-hero__spec {
    width: 100%;
    text-align: center;
    padding-left: 0;
  }
  
  .build-details-hero__stats--right .build-details-hero__spec {
    text-align: center;
    padding-left: 0;
  }
  
  .build-details-hero__spec::before,
  .build-details-hero__stats--right .build-details-hero__spec::before {
    display: none;
  }
  
  .build-details-hero__spec:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
  }
  
  .build-details-hero__spec-value,
  .mod-list {
    font-size: 16px;
    max-width: none;
  }
  
  .build-details-hero__spec-label {
    font-size: 11px;
  }
  
  .build-details-hero__image-container {
    height: 250px;
  }
  
  .build-details-hero__giveaway {
    font-size: 36px;
    letter-spacing: 2px;
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.3);
  }
  
  .build-details-hero__title {
    font-size: 22px;
  }
  
  .build-details-hero__countdown-text {
    font-size: 1.5rem;
  }
  
  .build-details-hero__countdown {
    gap: 10px;
  }
  
  .build-details-hero__countdown-item {
    min-width: 60px;
  }
  
  .build-details-hero__countdown-number {
    font-size: 2.4rem;
  }
  
  .build-details-hero__countdown-label {
    font-size: 1rem;
  }
  
  .neon-text span {
    text-shadow: 
      0 0 4px rgba(255, 255, 255, 0.8),
      0 0 8px rgba(255, 255, 255, 0.6),
      0 0 12px rgba(var(--accent-color-rgb), 0.7),
      0 0 18px rgba(var(--accent-color-rgb), 0.5);
    filter: drop-shadow(0 0 3px var(--accent-color));
  }
  
  @keyframes float-letter-1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0.5px, -3px); }
  }
  
  @keyframes float-letter-2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-0.7px, -2.5px); }
  }
  
  @keyframes float-letter-3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0.8px, -3.2px); }
  }
  
  @keyframes float-letter-4 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-0.4px, -2.8px); }
  }
  
  @keyframes float-letter-5 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0.3px, -2.7px); }
  }
}
/* END_SECTION:build-details-hero */

/* START_SECTION:cart-drawer-v2 (INDEX:5) */
.shftd-v2.cdrawer {
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;
    visibility: hidden;
    /* The .shftd-v2 scope root paints the page surface — on a fixed inset-0
       element that becomes an opaque full-viewport sheet behind the scrim,
       which is exactly the "whole black screen" instead of a see-through
       veil. The overlay root must paint nothing itself. */
    background: none;
  }
  .shftd-v2.cdrawer[data-open] {
    pointer-events: auto;
    visibility: visible;
  }

  /* Paint comes from basev2's shared .drawer-scrim recipe; this only wires
     the open/close fade. */
  .shftd-v2 .cdrawer__scrim {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--dur-3) var(--ease-out);
  }
  .shftd-v2.cdrawer[data-open] .cdrawer__scrim {
    opacity: 1;
  }

  .shftd-v2 .cdrawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
    border-left: 1px solid var(--line-soft);
    translate: 100% 0;
    transition: translate var(--dur-3) var(--ease-out);
    overflow: hidden;
  }
  .shftd-v2.cdrawer[data-open] .cdrawer__panel {
    translate: 0 0;
  }

  .shftd-v2 .cdrawer__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  /* Only the item/upsell region scrolls — head, meter and the summary footer
     stay pinned so the totals and checkout are always visible. */
  .shftd-v2 .cdrawer__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .shftd-v2.cdrawer.is-busy .cdrawer__content {
    opacity: 0.6;
    pointer-events: none;
  }

  .shftd-v2 .cdrawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-8);
    border-bottom: 1px solid var(--line-hairline);
    flex: 0 0 auto;
  }
  .shftd-v2 .cdrawer__title {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    font: var(--type-h3);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    color: var(--text-primary);
  }
  .shftd-v2 .cdrawer__close {
    color: var(--text-secondary);
  }
  .shftd-v2 .cdrawer__close:hover {
    color: var(--text-primary);
  }

  /* Cart Tiers — a split pill per boost stage (threshold | reward) over its
     own slice of a segmented progress rail. Reached stages wear the filled
     red pill, the next stage the red outline, locked stages stay neutral.
     Cells are a third of the strip each, so exactly three stages sit in
     view; the strip scrolls and the component keeps the window anchored on
     the stage the cart holds. */
  .shftd-v2 .cdrawer__tiers {
    padding: var(--space-6) var(--space-8);
    border-bottom: 1px solid var(--line-hairline);
    flex: 0 0 auto;
  }
  /* Mobile: the block competes with the items list for drawer height, so
     everything tightens a notch. */
  @media (max-width: 749px) {
    .shftd-v2 .cdrawer__tiers {
      padding: var(--space-5) var(--space-5);
    }
    .shftd-v2 .cdrawer__tiers-head {
      margin-bottom: var(--space-5);
      font-size: 13px;
    }
    .shftd-v2 .cdrawer__tiers-bar {
      margin-top: var(--space-5);
    }
  }
  /* The headline is the pitch, not a readout: display face, expanded width,
     big enough to lead the block (the $ amount and reward spans carry the
     white/red emphasis). */
  .shftd-v2 .cdrawer__tiers-head {
    margin: 0 0 var(--space-6);
    font: 700 15px/1.25 var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .shftd-v2 .cdrawer__tiers-head strong {
    font-weight: 500;
    color: var(--text-primary);
  }
  .shftd-v2 .cdrawer__tiers-goal {
    color: var(--red-400);
  }
  .shftd-v2 .cdrawer__tiers-steps {
    display: flex;
    column-gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .shftd-v2 .cdrawer__tiers-steps::-webkit-scrollbar {
    display: none;
  }
  .shftd-v2 .cdrawer__tiers-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 calc((100% - var(--space-2) * 2) / 3);
    min-width: 96px;
  }
  /* Stage pill: threshold | reward are readouts, so mono overrides the pill
     recipe's inherited display face, and the cells run tighter than the
     recipe's --sm paddings — seven stages have to share the strip. A
     transparent border on every state keeps the outlined ones the same
     height as the filled red. */
  .shftd-v2 .cdrawer__tiers-pill {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: var(--track-wide);
    border: 1px solid transparent;
  }
  .shftd-v2 .cdrawer__tiers-pill .pill__main {
    padding: 7px 8px;
  }
  .shftd-v2 .cdrawer__tiers-pill .pill__mult {
    padding: 7px 7px;
  }
  .shftd-v2 .cdrawer__tiers-step.is-next .cdrawer__tiers-pill {
    border-color: var(--red-500);
    color: var(--red-400);
  }
  .shftd-v2 .cdrawer__tiers-step.is-next .cdrawer__tiers-pill .pill__mult {
    background: oklch(1 0 0 / 0.05);
    box-shadow: inset 1px 0 0 var(--red-500);
  }
  .shftd-v2 .cdrawer__tiers-step.is-locked .cdrawer__tiers-pill {
    background: var(--surface-card);
    border-color: var(--line-strong);
    color: var(--text-secondary);
  }
  .shftd-v2 .cdrawer__tiers-step.is-locked .cdrawer__tiers-pill .pill__mult {
    background: oklch(1 0 0 / 0.05);
    box-shadow: inset 1px 0 0 var(--line-strong);
  }
  /* Segment bar: each stage owns its slice of the rail. Reached slices run
     full red, the next fills to the live subtotal, locked stay track-only. */
  .shftd-v2 .cdrawer__tiers-bar {
    position: relative;
    display: block;
    align-self: stretch;
    margin-top: var(--space-6);
    height: 6px;
    border-radius: var(--r-xs);
    background: var(--n-850);
    overflow: hidden;
  }
  .shftd-v2 .cdrawer__tiers-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--fill, 0%);
    background: var(--metal-red);
  }

  .shftd-v2 .cdrawer__meter {
    padding: var(--space-6) var(--space-8);
    border-bottom: 1px solid var(--line-hairline);
    flex: 0 0 auto;
  }
  .shftd-v2 .cdrawer__meter-text {
    margin: 0 0 var(--space-4);
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .shftd-v2 .cdrawer__meter--done .cdrawer__meter-text {
    color: var(--text-primary);
  }

  .shftd-v2 .cdrawer__items {
    flex: 0 0 auto;
  }
  .shftd-v2 .cdrawer__item {
    position: relative;
    display: flex;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--line-hairline);
  }
  .shftd-v2 .cdrawer__item.is-pending {
    opacity: 0.5;
  }
  .shftd-v2 .cdrawer__item-thumb {
    flex: 0 0 auto;
    width: 88px;
    aspect-ratio: 4 / 5;
    background: var(--surface-media);
    overflow: hidden;
  }
  .shftd-v2 .cdrawer__item-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .shftd-v2 .cdrawer__item-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    flex: 1;
    padding-right: var(--space-4);
  }
  .shftd-v2 .cdrawer__item-title {
    font: 700 14px/1.25 var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-primary);
  }
  .shftd-v2 .cdrawer__item-variant {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  /* Entries pill pins to the item's bottom-right corner, on the same right
     edge as the remove X above it. */
  .shftd-v2 .cdrawer__item-pill {
    position: absolute;
    right: var(--space-8);
    bottom: var(--space-7);
  }
  /* Narrow drawers: stepper and pill share ONE line — the pill rejoins the
     flow at the row's right and the stepper runs tiny so both fit. */
  @media (max-width: 749px) {
    .shftd-v2 .cdrawer__item-pill {
      position: static;
      flex: 0 1 auto;
      min-width: 0;
    }
    .shftd-v2 .cdrawer__item .qty--sm {
      height: 30px;
    }
    .shftd-v2 .cdrawer__item .qty--sm .qty__btn {
      width: 26px;
    }
    .shftd-v2 .cdrawer__item .qty--sm .qty__btn .ico {
      width: 12px;
      height: 12px;
    }
    .shftd-v2 .cdrawer__item .qty--sm .qty__input {
      width: 22px;
    }
    .shftd-v2 .cdrawer__item-pill .pill--sm {
      font-size: 9px;
    }
    .shftd-v2 .cdrawer__item-pill .pill--sm .pill__main {
      padding: 7px 8px;
    }
    .shftd-v2 .cdrawer__item-pill .pill--sm .pill__mult {
      padding: 7px 7px;
    }
  }
  .shftd-v2 .cdrawer__item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    /* Pins the quantity stepper to the bottom of the line, level with the
       entries pill in the corner, whatever the title/variant height. */
    margin-top: auto;
    padding-top: var(--space-3);
  }
  .shftd-v2 .cdrawer__item-price {
    font: var(--type-mono);
    letter-spacing: var(--track-wide);
    color: var(--text-primary);
  }
  .shftd-v2 .cdrawer__item-remove {
    position: absolute;
    top: var(--space-7);
    right: var(--space-8);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
  }
  .shftd-v2 .cdrawer__item-remove:hover {
    color: var(--text-primary);
  }
  .shftd-v2 .cdrawer__item-remove .ico {
    width: 14px;
    height: 14px;
  }

  .shftd-v2 .cdrawer__upsells {
    padding: var(--space-7) var(--space-8);
    display: grid;
    gap: var(--space-6);
    flex: 0 0 auto;
  }
  .shftd-v2 .cdrawer__upsells-title {
    margin: 0;
  }

  /* min-width: 0 breaks the min-content chain: without it, a long nowrap
     checkout label ("Checkout · 1940 entries") sets the footer's minimum
     width, the grid stretches every summary row to match, and the whole
     footer paints past the panel's edge and gets clipped. */
  .shftd-v2 .cdrawer__foot {
    padding: var(--space-3) var(--space-5) var(--space-4);
    border-top: 1px solid var(--line-soft);
    display: grid;
    gap: var(--space-6);
    flex: 0 0 auto;
    background: var(--surface-page);
    min-width: 0;
  }
  .shftd-v2 .cdrawer__foot > * {
    min-width: 0;
  }
  .shftd-v2 .cdrawer__sum {
    display: grid;
    gap: var(--space-4);
  }
  .shftd-v2 .cdrawer__sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
  }
  .shftd-v2 .cdrawer__sum-label {
    font: var(--type-label);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  /* The gray aside after a label ("$121.00 · 4X", "Free shipping"): the
     working, not the claim — muted, no caps. */
  .shftd-v2 .cdrawer__sum-note {
    margin-left: var(--space-3);
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wide);
    text-transform: none;
    color: var(--text-muted);
  }
  .shftd-v2 .cdrawer__sum-value {
    font: var(--type-mono);
    letter-spacing: var(--track-wide);
    color: var(--text-primary);
  }
  .shftd-v2 .cdrawer__sum-row--boost .cdrawer__sum-value {
    color: var(--text-accent);
  }
  /* TOTAL ENTRIES is the summary's headline number: the one big red element
     of the drawer's foot. */
  .shftd-v2 .cdrawer__sum-row--entries {
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-hairline);
  }
  .shftd-v2 .cdrawer__sum-row--entries .cdrawer__sum-label {
    color: var(--text-primary);
  }
  .shftd-v2 .cdrawer__sum-row--entries .cdrawer__sum-value {
    font: 700 26px/1 var(--font-mono);
    color: var(--text-accent);
  }
  .shftd-v2 .cdrawer__sum-row--total {
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-hairline);
  }
  .shftd-v2 .cdrawer__sum-row--total .cdrawer__sum-label {
    color: var(--text-primary);
  }
  .shftd-v2 .cdrawer__sum-row--total .cdrawer__sum-value {
    font: 500 20px/1 var(--font-mono);
  }
  .shftd-v2 .cdrawer__checkout-form {
    margin: 0;
  }
  /* Wallet buttons (Shop Pay, PayPal…): Shopify renders its own markup in
     here; we only slot it under the checkout button and stretch it full
     width. */
  .shftd-v2 .cdrawer__dynamic {
    margin-top: var(--space-4);
  }
  .shftd-v2 .cdrawer__dynamic [data-shopify-buttoncontainer] {
    justify-content: stretch;
  }
  /* The label carries the entries suffix and stays ONE line always — the
     font steps down on narrow screens instead of the label wrapping. */
  .shftd-v2 .cdrawer__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-width: 0;
    white-space: nowrap;
    height: auto;
    min-height: 56px;
  }
  @media (max-width: 420px) {
    .shftd-v2 .cdrawer__checkout {
      font-size: 12px;
      letter-spacing: var(--track-wide);
    }
  }
  .shftd-v2 .cdrawer__continue {
    justify-self: center;
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-secondary);
  }
  .shftd-v2 .cdrawer__continue:hover {
    color: var(--text-primary);
  }

  .shftd-v2 .cdrawer__empty {
    flex: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-5);
    padding: var(--space-10) var(--space-8);
    text-align: center;
  }
  .shftd-v2 .cdrawer__empty-ico {
    width: 32px;
    height: 32px;
    color: var(--text-muted);
  }
  .shftd-v2 .cdrawer__empty-title {
    margin: 0;
    font: var(--type-h4);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    color: var(--text-primary);
  }
  .shftd-v2 .cdrawer__empty-text {
    margin: 0;
    font: var(--type-body-sm);
    color: var(--text-secondary);
    max-width: 30ch;
  }
  .shftd-v2 .cdrawer__empty-btn {
    margin-top: var(--space-4);
  }
/* END_SECTION:cart-drawer-v2 */

/* START_SECTION:collection-banner (INDEX:10) */
.shftd-v2.cban {
    position: relative;
    display: flex;
    overflow: hidden;
    isolation: isolate;
  }

  .shftd-v2.cban--tall {
    --cban-h: 420px;
  }
  .shftd-v2.cban--medium {
    --cban-h: 320px;
  }
  .shftd-v2.cban--slim {
    --cban-h: 220px;
  }

  /* The banner is a media band: dark ground, dark veil and light ink are
     ABSOLUTE — pinned in both themes, the light toggle never touches it. */
  .shftd-v2.cban--flat {
    background: oklch(0.1 0.004 30);
  }

  .shftd-v2 .cban__media {
    position: absolute;
    inset: 0;
    z-index: -3;
  }
  .shftd-v2 .cban__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Uniform dark veil (merchant-controlled) over the image */
  .shftd-v2 .cban__veil {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: oklch(0 0 0 / var(--cban-ov, 0.5));
  }

  /* The banner always settles into dark at the bottom (the dark-theme page
     value — identical to before in dark; in light it hard-edges against the
     white page like the hero does). */
  .shftd-v2 .cban__fade {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 30%, oklch(0.145 0.004 30) 100%);
  }

  .shftd-v2 .cban__in {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-9);
    min-height: var(--cban-h, 320px);
    padding-block: var(--space-8);
  }
  /* Fluid bands still need page gutters; the container-- classes bring their own. */
  .shftd-v2 .cban__in.container--fluid {
    padding-inline: var(--gutter-page);
  }
  @media (min-width: 990px) {
    .shftd-v2 .cban__in.container--fluid {
      padding-inline: var(--gutter-page-lg);
    }
  }

  .shftd-v2 .cban__main {
    display: grid;
    gap: var(--space-6);
    min-width: 0;
  }

  .shftd-v2 .cban__crumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .shftd-v2 .cban__crumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
  /* Red square separators between crumbs */
  .shftd-v2 .cban__crumb-item + .cban__crumb-item::before {
    content: "";
    width: 3px;
    height: 3px;
    background: var(--line-accent);
  }
  .shftd-v2 .cban__crumb-link {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    text-decoration: none;
    color: oklch(0.7 0.003 30);
  }
  .shftd-v2 a.cban__crumb-link:hover {
    color: oklch(0.99 0 0);
  }

  .shftd-v2 .cban__title {
    margin: 0;
    color: oklch(0.99 0 0);
    overflow-wrap: break-word;
  }

  .shftd-v2 .cban__meta {
    display: grid;
    gap: var(--space-4);
    justify-items: end;
    flex: 0 1 auto;
    text-align: right;
  }
  .shftd-v2 .cban__count {
    margin: 0;
    font: var(--type-mono);
    letter-spacing: var(--track-wide);
    color: oklch(0.99 0 0);
  }
  .shftd-v2 .cban__desc {
    margin: 0;
    max-width: 40ch;
    font: var(--type-body-sm);
    color: oklch(0.7 0.003 30);
  }

  @media (max-width: 749px) {
    .shftd-v2.cban--tall {
      --cban-h: 340px;
    }
    .shftd-v2.cban--medium {
      --cban-h: 280px;
    }
    .shftd-v2.cban--slim {
      --cban-h: 200px;
    }

    /* Meta column drops under the title, left aligned */
    .shftd-v2 .cban__in {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-end;
      gap: var(--space-6);
    }
    .shftd-v2 .cban__meta {
      justify-items: start;
      text-align: left;
    }

    /* The global display tokens bottom out at desktop-headline sizes — at
       type-hero's 44px floor, "ACCESSORIES" in the expanded face is wider
       than a phone. Step each preset down so long collection names fit. */
    .shftd-v2 .cban__title.type-hero {
      font-size: clamp(30px, 8.6vw, 40px);
    }
    .shftd-v2 .cban__title.type-h1 {
      font-size: clamp(26px, 7.2vw, 34px);
    }
    .shftd-v2 .cban__title.type-h2 {
      font-size: 24px;
    }
  }
/* END_SECTION:collection-banner */

/* START_SECTION:collection-grid-v2 (INDEX:11) */
/* The head row only earns its bottom hairline when the grid is inset; edge to
     edge it would collide with the first tile. */
  .colgrid-v2__cap {
    margin-bottom: var(--space-6);
  }
  .container--fluid > .colgrid-v2__cap {
    padding-inline: var(--gutter-page);
  }
  @media (min-width: 990px) {
    .container--fluid > .colgrid-v2__cap {
      padding-inline: var(--gutter-page-lg);
    }
  }

  .colgrid-v2__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: var(--gap, 1px);
    /* The seams between tiles show this ground through the gaps. The tiles
       are pinned-dark media, so the seams pin with them — in light mode the
       page surface would slice bright white lines through the imagery. */
    background: oklch(0.145 0.004 30);
  }
  @media (max-width: 989px) {
    .colgrid-v2__grid {
      grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr));
    }
  }
  @media (max-width: 749px) {
    .colgrid-v2__grid {
      grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr));
    }
  }

  /* In custom-height mode the height lands on the card's media box through
     the snippet's own custom property, so the section never reaches into
     .colcard's internals. --colcard-h is only declared here in that mode: the
     snippet's `height: var(--colcard-h, auto)` must stay auto for the
     aspect-ratio (passed as a render param) to drive the box. */
  .colgrid-v2__item {
    min-width: 0;
  }
  .colgrid-v2--custom-h .colgrid-v2__item {
    --colcard-h: var(--card-h, 700px);
  }
  @media (max-width: 749px) {
    .colgrid-v2--custom-h .colgrid-v2__item {
      --colcard-h: var(--card-h-m, 420px);
    }
  }
/* END_SECTION:collection-grid-v2 */

/* START_SECTION:cta-banner-v2 (INDEX:13) */
.shftd-v2.cta-banner-v2 {
    /* Merchant pixels from the Height settings — a min-height, so content
       wraps and grows the band rather than spilling. The indirection through
       --band-h-d/-m exists because the inline values are element-level
       declarations, which no media query could override.

       --band-py is a thin safety pad, NOT the height driver: at the old 32px
       it put a ~108px floor under the band (padding + button), so any Height
       below that silently did nothing. The content is vertically centred, so
       the height setting alone decides how slim the band can go. */
    --band-min-h: var(--band-h-d, 108px);
    --band-py: var(--space-4);
    /* Ink is absolute here (the merchant's Text color choice against their
       Background color hex or image) — this is the DARK-theme and media
       baseline. Colour bands FOLLOW the light theme via the
       :root[data-shftd-theme="light"] overrides further down; image bands
       (--media) stay pinned in both themes, because photography doesn't
       change with a toggle. */
    --band-fg: oklch(0.99 0 0);
    --band-fg-2: oklch(0.7 0.003 30);
    --band-overlay: oklch(0.1 0.004 30);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--band-bg, var(--surface-card));
  }
  @media (max-width: 749px) {
    .shftd-v2.cta-banner-v2 {
      --band-min-h: var(--band-h-m, 108px);
    }
  }

  /* Tall bands (height >= 160, derived in Liquid) breathe with more vertical
     padding; the height itself comes from the setting. Must match the base
     block's specificity (.shftd-v2.cta-banner-v2) to win. */
  .shftd-v2.cta-banner-v2--tall {
    --band-py: clamp(40px, 6vw, 72px);
  }

  /* Light background variant — dark ink, equally absolute. */
  .shftd-v2.cta-banner-v2--text-dark {
    --band-fg: oklch(0.1 0.004 30);
    --band-fg-2: oklch(0.38 0.004 30);
    --band-overlay: oklch(0.99 0 0);
  }

  /* Light theme, colour band (no image): the band JOINS the page — token
     surface, token ink. The Background color hex and the Text color select
     were chosen against the dark theme, so both step aside here; media
     bands are exempt and keep their pinned palette above. */
  :root[data-shftd-theme="light"] .shftd-v2.cta-banner-v2:not(.cta-banner-v2--media) {
    --band-fg: var(--text-primary);
    --band-fg-2: var(--text-secondary);
    background-color: var(--surface-card);
  }

  .cta-banner-v2--bt {
    border-top: 1px solid var(--line-soft);
  }
  .cta-banner-v2--bb {
    border-bottom: 1px solid var(--line-soft);
  }

  /* --- Layers ------------------------------------------------------------- */
  .cta-banner-v2__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .cta-banner-v2 .cta-banner-v2__media-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cta-banner-v2__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--band-overlay);
    opacity: var(--overlay-opacity, 0.5);
    pointer-events: none;
  }

  .cta-banner-v2__texture {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  /* Same story for the grid: constant white hairlines over the band's own
     ground — the .texture-grid recipe reads --grid-fine-light, which flips
     with the theme and would vanish here. text-dark keeps --grid-fine,
     which is ink in both themes. */
  .shftd-v2.cta-banner-v2 .cta-banner-v2__texture {
    background-image:
      repeating-linear-gradient(
        0deg,
        oklch(0.99 0 0 / 0.02) 0 1px,
        transparent 1px 28px
      ),
      repeating-linear-gradient(
        90deg,
        oklch(0.99 0 0 / 0.02) 0 1px,
        transparent 1px 28px
      );
  }
  .shftd-v2.cta-banner-v2--text-dark .cta-banner-v2__texture {
    background-image: var(--grid-fine);
  }
  /* Light-theme colour band: ink hairlines on the token surface. */
  :root[data-shftd-theme="light"]
    .shftd-v2.cta-banner-v2:not(.cta-banner-v2--media)
    .cta-banner-v2__texture {
    background-image: var(--grid-fine-light);
  }
  /* Ghost buttons follow the same split: pinned to the Text color choice on
     the dark/media ground, back to theme ink on the light-theme colour band
     (primary red is already invariant). */
  .shftd-v2.cta-banner-v2 .btn--ghost {
    background: oklch(0.99 0 0 / 0.06);
    color: oklch(0.99 0 0);
    border-color: oklch(0.99 0 0 / 0.24);
  }
  .shftd-v2.cta-banner-v2 .btn--ghost:hover {
    color: oklch(0.99 0 0);
    border-color: oklch(0.99 0 0 / 0.4);
  }
  .shftd-v2.cta-banner-v2--text-dark .btn--ghost {
    background: oklch(0.1 0.004 30 / 0.05);
    color: oklch(0.1 0.004 30);
    border-color: oklch(0.15 0.01 30 / 0.28);
  }
  .shftd-v2.cta-banner-v2--text-dark .btn--ghost:hover {
    color: oklch(0.1 0.004 30);
    border-color: oklch(0.15 0.01 30 / 0.45);
  }
  :root[data-shftd-theme="light"]
    .shftd-v2.cta-banner-v2:not(.cta-banner-v2--media)
    .btn--ghost {
    background: oklch(0.1 0.01 30 / 0.04);
    color: var(--text-primary);
    border-color: var(--line-soft);
  }
  :root[data-shftd-theme="light"]
    .shftd-v2.cta-banner-v2:not(.cta-banner-v2--media)
    .btn--ghost:hover {
    color: var(--text-primary);
    border-color: var(--line-strong);
  }

  /* --- Content ------------------------------------------------------------ */
  .cta-banner-v2__in {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    min-height: var(--band-min-h);
    padding-block: var(--band-py);
  }
  /* Fluid bands still need page gutters; the container-- classes bring their own. */
  .cta-banner-v2__in.container--fluid {
    padding-inline: var(--gutter-page);
  }
  @media (min-width: 990px) {
    .cta-banner-v2__in.container--fluid {
      padding-inline: var(--gutter-page-lg);
    }
  }

  .cta-banner-v2__row {
    display: flex;
    width: 100%;
    gap: clamp(20px, 3vw, 40px);
  }
  .cta-banner-v2--split .cta-banner-v2__row {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .cta-banner-v2--center .cta-banner-v2__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(20px, 3vw, 32px);
  }
  @media (max-width: 749px) {
    .cta-banner-v2--split .cta-banner-v2__row {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .cta-banner-v2__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
  }
  .cta-banner-v2--center .cta-banner-v2__copy {
    align-items: center;
    max-width: 720px;
  }

  .cta-banner-v2__heading {
    color: var(--band-fg);
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: var(--weight-black);
    line-height: 1;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
  }
  /* Slim tracks the --type-h2 token (700 / 32px) the mockup's h2 resolves to. */
  .cta-banner-v2__heading--s {
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: var(--weight-bold);
  }
  .cta-banner-v2__heading--m {
    font-size: clamp(26px, 3.6vw, 44px);
  }
  .cta-banner-v2__heading--l {
    font-size: clamp(32px, 5vw, 64px);
    letter-spacing: -0.03em;
  }

  .cta-banner-v2__text {
    color: var(--band-fg-2);
    max-width: var(--max-prose);
  }
  .cta-banner-v2__text--s {
    font: var(--type-body-sm);
  }
  .cta-banner-v2__text--m {
    font: var(--type-body);
  }
  .cta-banner-v2__text--l {
    font: var(--type-body-lg);
  }
  .cta-banner-v2__text > * + * {
    margin-top: var(--space-4);
  }
  .cta-banner-v2__text a {
    color: inherit;
    text-decoration: underline;
  }

  .cta-banner-v2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    flex: 0 0 auto;
  }
  .cta-banner-v2--center .cta-banner-v2__actions {
    justify-content: center;
  }

  /* --- Mobile sizing -------------------------------------------------------
     Declared last so the --m-* classes win over their desktop counterparts at
     equal specificity. The desktop clamps are vw-driven and bottom out at their
     minimum on a phone, so these use steeper vw factors to keep scaling. */
  @media (max-width: 749px) {
    .cta-banner-v2__heading--m-s {
      font-size: clamp(22px, 6.5vw, 30px);
      font-weight: var(--weight-bold);
      letter-spacing: var(--track-tight);
    }
    .cta-banner-v2__heading--m-m {
      font-size: clamp(26px, 8vw, 40px);
      font-weight: var(--weight-black);
      letter-spacing: var(--track-tight);
    }
    .cta-banner-v2__heading--m-l {
      font-size: clamp(30px, 10vw, 52px);
      font-weight: var(--weight-black);
      letter-spacing: -0.03em;
    }

    .cta-banner-v2__text--m-s {
      font: var(--type-body-sm);
    }
    .cta-banner-v2__text--m-m {
      font: var(--type-body);
    }
    .cta-banner-v2__text--m-l {
      font: var(--type-body-lg);
    }

    /* Full-width buttons need the actions row to fill the band too. */
    .shftd-v2.cta-banner-v2 .cta-banner-v2__actions:has(.btn--m-full) {
      width: 100%;
    }
    .shftd-v2.cta-banner-v2 .cta-banner-v2__actions:has(.btn--m-full) .btn {
      flex: 1 1 auto;
    }

    /* Mobile alignment override — "auto" emits no class and inherits desktop. */
    .shftd-v2.cta-banner-v2--m-left .cta-banner-v2__row {
      align-items: flex-start;
      text-align: left;
    }
    .shftd-v2.cta-banner-v2--m-left .cta-banner-v2__copy,
    .shftd-v2.cta-banner-v2--m-left .cta-banner-v2__actions {
      align-items: flex-start;
      justify-content: flex-start;
    }
    .shftd-v2.cta-banner-v2--m-center .cta-banner-v2__row {
      align-items: center;
      text-align: center;
    }
    .shftd-v2.cta-banner-v2--m-center .cta-banner-v2__copy,
    .shftd-v2.cta-banner-v2--m-center .cta-banner-v2__actions {
      align-items: center;
      justify-content: center;
    }
  }

  /* The ghost recipe is built for dark surfaces — restate it for light ones. */
  .shftd-v2.cta-banner-v2--text-dark .btn--ghost {
    background: oklch(0 0 0 / 0.05);
    border-color: oklch(0 0 0 / 0.2);
    color: var(--n-1000);
  }
  .shftd-v2.cta-banner-v2--text-dark .btn--ghost:hover {
    border-color: oklch(0 0 0 / 0.4);
    color: var(--n-1000);
  }
/* END_SECTION:cta-banner-v2 */

/* START_SECTION:entry-pass-tiers (INDEX:15) */
.shftd-v2.ept {
    display: block;
  }
  .shftd-v2 .ept__cap {
    margin-bottom: var(--space-9);
  }
  .shftd-v2 .ept__grid {
    display: grid;
    grid-template-columns: repeat(var(--ept-cols, 3), minmax(0, 1fr));
    gap: var(--space-8);
    align-items: stretch;
  }
  .shftd-v2 .ept__cell {
    display: flex;
  }
  .shftd-v2 .ept__cell > .tcard {
    flex: 1;
  }

  @media (max-width: 989px) {
    .shftd-v2 .ept__grid {
      grid-template-columns: repeat(min(2, var(--ept-cols, 2)), minmax(0, 1fr));
    }
  }
  @media (max-width: 749px) {
    .shftd-v2 .ept__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-10);
    }
  }
/* END_SECTION:entry-pass-tiers */

/* START_SECTION:featured-products-v2 (INDEX:17) */
.shftd-v2 .fp-v2__cap {
    margin-bottom: var(--space-7);
  }
/* END_SECTION:featured-products-v2 */

/* START_SECTION:footer-v2 (INDEX:19) */
.shftd-v2.footv2 {
    border-top: 1px solid var(--line-hairline);
    padding-top: 54px;


    /*
   50vw includes the scrollbar on platforms with persistent scrollbars —
   clip the few stray pixels instead of growing a horizontal scroll.
*/
    overflow-x: clip;
  }

  .shftd-v2 .footv2__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--foot-align, space-between);
    gap: var(--space-10) var(--foot-gap, 48px);
  }


  /*
   Desktop only: mobile always stacks (the live block goes full width there
   anyway) . Blocks shrink to fit instead of wrapping — the width settings
   below are targets, not hard floors, precisely so this can hold.
*/
  @media (min-width: 750px) {
    .shftd-v2 .footv2__grid--nowrap {
      flex-wrap: nowrap;
    }
  }


  /*
   Per-block width overrides (footv2__w-auto keeps each block's default).
   flex-shrink is 1, NOT 0: a hard basis that can't give way is what made a
   row wrap no matter which width the merchant picked.
*/
  .shftd-v2 .footv2__w-s {
    flex: 0 1 min(160px, 100%);
    max-width: none;
  }
  .shftd-v2 .footv2__w-m {
    flex: 0 1 min(240px, 100%);
    max-width: none;
  }
  .shftd-v2 .footv2__w-l {
    flex: 0 1 min(320px, 100%);
    max-width: none;
  }
  .shftd-v2 .footv2__w-xl {
    flex: 0 1 min(460px, 100%);
    max-width: none;
  }
  .shftd-v2 .footv2__w-fill {
    flex: 1 1 240px;
    max-width: none;
  }

  /* Live status */
  .shftd-v2 .footv2__live {
    flex: 0 1 min(460px, 100%);
  }
  .shftd-v2 .footv2__live-label {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .shftd-v2 .footv2__dot {
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--red-500);
    animation: shftd-pulse-glow 2s ease-in-out infinite;
  }
  .shftd-v2 .footv2__live-text {
    margin-top: var(--space-6);
    font: var(--type-mono);
    font-size: clamp(16px, 1.4vw, 20px);
    letter-spacing: var(--track-wide);
    color: var(--n-0);
  }
  .shftd-v2 .footv2__legal {
    margin-top: var(--space-7);
    color: var(--text-muted);
  }
  .shftd-v2 .footv2__legal strong,
  .shftd-v2 .footv2__legal b {
    color: var(--text-secondary);
  }

  /* Columns */
  .shftd-v2 .footv2__col {
    flex: 0 1 auto;
    min-width: 150px;
    max-width: 320px;
  }
  .shftd-v2 .footv2__col-head {
    margin-bottom: var(--space-7);
  }
  .shftd-v2 .footv2__social {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
  .shftd-v2 .footv2__social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line-hairline);
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    transition: color var(--dur-1) var(--ease-out)
    , border-color var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .footv2__social a:hover {
    color: var(--n-0);
    border-color: var(--line-strong);
  }
  .shftd-v2 .footv2__social .ico {
    width: 16px;
    height: 16px;
  }
  .shftd-v2 .footv2__links li {
    margin-bottom: var(--space-5);
  }
  .shftd-v2 .footv2__links a {
    font: var(--type-body);
    color: var(--text-secondary);
    text-decoration: none;
  }
  .shftd-v2 .footv2__links a:hover {
    color: var(--n-0);
  }

  /* Newsletter */
  .shftd-v2 .footv2__nl {
    flex: 0 1 320px;
  }
  .shftd-v2 .footv2__nl-row {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-6);
  }
  .shftd-v2 .footv2__nl-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding-inline: var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    color: var(--text-primary);
  }
  .shftd-v2 .footv2__nl-input::placeholder {
    color: var(--text-muted);
  }
  .shftd-v2 .footv2__nl-success {
    margin-top: var(--space-6);
    color: var(--success);
  }
  .shftd-v2 .footv2__nl-error {
    margin-top: var(--space-4);
    color: var(--red-400);
  }


  /*
   Wordmark band — the wrapper is shorter than the mark's intrinsic
   109/18 ratio, so the letters' bottom ~22% is cropped by the bottom bar:
   "partially hidden behind it" per the mockup.
*/
  .shftd-v2 .footv2__markwrap {
    margin-top: 70px;
    overflow: hidden;
    aspect-ratio: 109 / 14;
  }
  .shftd-v2 .mark.footv2__mark {
    width: 100%;
    background: var(--text-primary);
  }


  /*
   Bottom bar — opaque so the grid texture (and the wordmark bleed) never
   shows through it. It breaks OUT of the container's side gutters
   (negative margins + matching padding), or the grid ground shows as bare
   strips beside the bar on phones; the content stays on the container's
   grid because the padding puts it right back.
*/
  .shftd-v2 .footv2__bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-8);
    position: relative;
    padding-block: var(--space-3);
    border-top: 1px solid var(--line-hairline);
    background: var(--surface-page);
  }


  /*
   True viewport-wide breakout: 50% − 50vw reaches the screen edge from
   inside a CENTRED container too, so wide desktops don't keep grid strips
   beyond the contained width (a gutter-sized negative margin only reached
   the container's own edge). The matching padding puts the content back
   exactly on the container's grid. Fluid containers need nothing — they
   have no gutters to cancel.
*/
  .shftd-v2 .container--contained > .footv2__bottom,
  .shftd-v2 .container--narrow > .footv2__bottom {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
  }
  .shftd-v2 .footv2__right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-9);
  }


  /*
   The theme toggle rides in a text-height row: the stock 40px iconbtn
   inflates the whole bottom bar, so it runs compact here.
*/
  .shftd-v2 .footv2__bottom .thtog .iconbtn {
    width: 28px;
    height: 28px;
  }
  .shftd-v2 .footv2__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-7);
  }
  .shftd-v2 .footv2__payments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .shftd-v2 .footv2__payicon {
    display: block;
    width: 34px;
    height: auto;
    opacity: 0.85;
  }
  .shftd-v2 .footv2__meta a {
    text-decoration: none;
  }
  .shftd-v2 .footv2__meta a:hover {
    color: var(--red-400);
  }

  @media (max-width: 749px) {
    .shftd-v2.footv2 {
      padding-top: 40px;
    }
    .shftd-v2 .footv2__grid {
      gap: var(--space-9) var(--space-10);
    }
    .shftd-v2 .footv2__live {
      flex-basis: 100%;
    }
    .shftd-v2 .footv2__markwrap {
      margin-top: 48px;
    }
    .shftd-v2 .footv2__bottom {
      padding-block: 24px;
      flex-direction: column;
      align-items: flex-start;
    }
  }
/* END_SECTION:footer-v2 */

/* START_SECTION:giveaway-rules (INDEX:21) */
/* Override theme's global `.main-content { overflow-x: hidden }` — it
   creates a new scroll container and breaks `position: sticky` on descendants.
   `overflow-x: clip` prevents horizontal overflow without establishing a
   scroll context. Scoped to this template only. */
body.template-page-rules .main-content {
  overflow-x: clip;
  overflow-y: visible;
}

.gr {
  background: #f9f8f6;
  color: #1a1a1a;
  padding: 56px 0 100px;
  min-height: 100vh;
}

.gr__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 72px;
  align-items: start;
}

/* ── Side nav ─────────────────────────────────────── */
.gr__sidenav {
  align-self: start;
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}


.gr__sidenav-inner {
  padding-bottom: 8px;
}

.gr__sidenav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 14px;
}

.gr__sidenav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid #e5e5e5;
}

.gr__sidenav-list li {
  margin: 0;
}

.gr__sidenav-link {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #7a7a7a;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1.4;
  -webkit-user-drag: none;
}

.gr__sidenav-link:hover {
  color: #1a1a1a;
}

.gr__sidenav-link.is-active {
  color: #1a1a1a;
  border-left-color: #1a1a1a;
  font-weight: 600;
}

/* ── Main content ─────────────────────────────────── */
.gr__header {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 2px solid #e5e5e5;
}

.gr__hashtag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary, #ff0000);
  margin: 0 0 10px;
}

.gr__title {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0;
  color: #111;
}

.gr__disclaimer {
  background: #f0ede8;
  border-radius: 6px;
  padding: 18px 22px;
  margin-bottom: 20px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  color: #555;
}

.gr__disclaimer p {
  margin: 0;
}

.gr__scam-warning {
  background: #fff5f5;
  border: 1px solid #ffd0d0;
  border-left: 3px solid var(--color-primary, #ff0000);
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 44px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.gr__body {
  font-size: 16.5px;
  line-height: 1.8;
  color: #2a2a2a;
}

.gr__body > p {
  margin: 0 0 18px;
}

.gr__body ul {
  margin: 0 0 18px;
  padding-left: 24px;
}

.gr__body li {
  margin-bottom: 10px;
}

.gr__section-heading {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #111;
  margin: 60px 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #ddd;
  scroll-margin-top: 140px;
}

.gr__sub-heading {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  margin: 30px 0 12px;
}

.gr__callout-note {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #444 !important;
  background: #f4f3ef;
  border-left: 3px solid #c8c4bb;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 4px 0 18px !important;
}

.gr__callout-note strong {
  color: #111;
}

.gr__address {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 10px 0 18px !important;
  color: #222;
  white-space: pre-line;
  line-height: 1.6;
}

.gr__link {
  color: var(--color-primary, #ff0000);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gr__link:hover {
  opacity: 0.75;
}

/* ── Components table ─────────────────────────────── */
.gr__table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 10px 0 18px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
}

.gr__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  min-width: 640px;
}

.gr__table th,
.gr__table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ececec;
}

.gr__table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
  background: #f4f3ef;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}

.gr__table tbody tr:last-child td {
  border-bottom: none;
}

.gr__table tfoot td {
  border-top: 2px solid #ddd;
  border-bottom: none;
  background: #faf9f7;
  color: #111;
}

.gr__table-value {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gr__footer-note {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1.5px solid #ddd;
  font-size: 13.5px;
  color: #888;
}

.gr__footer-note p {
  margin: 0;
}

/* ── Responsive ───────────────────────────────────── */
@media screen and (max-width: 960px) {
  /* minmax(0,1fr) + min-width:0 — a bare 1fr track can't shrink below its
     content's intrinsic width (the nav pill row), which blew the whole
     column past the viewport; .main-content clips overflow-x, so the
     excess was cropped and unreachable. */
  .gr__wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 24px;
  }

  .gr__sidenav,
  .gr__main {
    min-width: 0;
  }

  .gr__sidenav {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid #e5e5e5;
  }

  /* One-row chip bar, scrollable sideways, scrollbar hidden */
  .gr__sidenav-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    border-left: none;
    padding: 0 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gr__sidenav-list::-webkit-scrollbar {
    display: none;
  }

  .gr__sidenav-list li {
    flex: 0 0 auto;
  }

  .gr__sidenav-link {
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    margin-left: 0;
    white-space: nowrap;
    background: #fff;
  }

  .gr__sidenav-link.is-active {
    background: #111;
    color: #fff;
    border-color: #111;
  }

  .gr__body {
    font-size: 16px;
  }

  .gr__section-heading {
    font-size: 20px;
    margin: 44px 0 14px;
  }
}

@media screen and (max-width: 600px) {
  .gr {
    padding: 32px 0 72px;
  }

  .gr__wrap {
    padding: 0 16px;
  }

  .gr__section-heading {
    font-size: 18px;
  }

  .gr__sub-heading {
    font-size: 16px;
  }
}
/* END_SECTION:giveaway-rules */

/* START_SECTION:header-v2 (INDEX:22) */
.sec-header-v2:has(.hdr--sticky) {
    position: sticky;
    top: 0;
    z-index: 200;
  }

  /* The old theme paints EVERY .shopify-section wrapper opaque
     (theme.css: background-color on .shopify-section) — behind the bar that
     opaque sheet is exactly what backdrop-filter samples, so the frost had
     nothing to see through. The header's own wrapper must stay transparent;
     the bar paints its own surface (frosted or opaque). */
  .shopify-section.sec-header-v2 {
    background-color: transparent;
  }
  .shftd-v2.hdr {
    display: block;
    position: relative;
    background: transparent;
  }

  /* With the blur setting on, the bar carries basev2's .bar-frost recipe in
     the markup (frost composites to the plain surface until content passes
     beneath, so no is-scrolled gate is needed); the opaque fallback below
     only applies when the frost class is absent. */
  .shftd-v2 .hdr__bar {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: 64px;
    padding-inline: clamp(16px, 2vw, 40px);
    border-bottom: 1px solid var(--line-hairline);
  }
  .shftd-v2 .hdr__bar:not(.bar-frost) {
    background: var(--surface-page);
  }

  .shftd-v2 .hdr__logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--n-0);
    text-decoration: none;
  }
  .shftd-v2 .hdr__logo-img,
  .shftd-v2 .hdr__logo-mark {
    width: var(--logo-w, 100px);
    height: auto;
  }

  /* The nav chain stretches to the bar's full height so the active
     underline (inset box-shadow on the link) sits ON the bar's bottom edge,
     meeting the mega panel below it — not floating under the label. The
     link's own align-items keeps the label vertically centred. */
  .shftd-v2 .hdr__nav {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 0;
  }
  .shftd-v2 .hdr__item {
    display: flex;
    align-items: stretch;
  }
  .shftd-v2 .hdr__navlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .hdr__navlink:hover {
    color: var(--n-0);
  }
  .shftd-v2 .hdr__item.is-open .hdr__navlink {
    color: var(--red-400);
    box-shadow: inset 0 -2px 0 var(--red-500);
  }
  .shftd-v2 .hdr__chev {
    width: 12px;
    height: 12px;
    transition: rotate var(--dur-2) var(--ease-out);
  }
  .shftd-v2 .hdr__item.is-open .hdr__chev {
    rotate: 180deg;
  }

  .shftd-v2 .hdr__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
  }
  .shftd-v2 .hdr__cart {
    position: relative;
  }
  .shftd-v2 .hdr__cart-count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: var(--r-xs);
    background: var(--red-500);
    color: var(--text-on-red);
    font: var(--type-mono-sm);
    font-size: 9px;
    line-height: 1;
  }
  .shftd-v2 .hdr__cart-count:empty {
    display: none;
  }

  /* ---- Panels (mega + dropdown) ----
     Open/close animates opacity + translate; visibility is delayed on close
     so the fade-out stays visible, and removes the closed panel from the
     tab order / accessibility tree. */
  .shftd-v2 .hdr__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-page);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--elev-3);
    opacity: 0;
    translate: 0 -10px;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--dur-3) var(--ease-out),
      translate var(--dur-3) var(--ease-out),
      visibility 0s linear var(--dur-3);
  }
  .shftd-v2 .hdr__item.is-open .hdr__panel {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity var(--dur-3) var(--ease-out),
      translate var(--dur-3) var(--ease-out);
  }
  .shftd-v2 .hdr__panel-in {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vw, 56px);
    padding: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 40px);
  }
  .shftd-v2 .hdr__panel-in--promo {
    grid-template-columns: 1fr minmax(300px, 420px);
  }

  .shftd-v2 .hdr__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: clamp(24px, 3vw, 56px);
    align-content: start;
  }
  .shftd-v2 .hdr__col-title {
    display: block;
    margin-bottom: var(--space-6);
    text-decoration: none;
  }
  .shftd-v2 a.hdr__col-title:hover {
    color: var(--red-400);
  }
  .shftd-v2 .hdr__mlink {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: 9px;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--n-100);
    text-decoration: none;
  }
  .shftd-v2 .hdr__mlink:hover {
    color: var(--red-400);
  }
  .shftd-v2 .hdr__count {
    color: var(--text-muted);
  }

  .shftd-v2 .hdr__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-content: start;
  }
  .shftd-v2 .hdr__promo {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .shftd-v2 .hdr__drop {
    max-width: 360px;
    padding: var(--space-7) clamp(16px, 2vw, 40px);
  }

  /* ---- Predictive search panel ---- */
  .shftd-v2 .hdr__search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-page);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--elev-3);
    opacity: 0;
    translate: 0 -10px;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--dur-3) var(--ease-out),
      translate var(--dur-3) var(--ease-out),
      visibility 0s linear var(--dur-3);
  }
  .hdr.is-search-open .hdr__search {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity var(--dur-3) var(--ease-out),
      translate var(--dur-3) var(--ease-out);
  }
  .shftd-v2 .hdr__search-form {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: 72px;
    padding-inline: clamp(16px, 2vw, 40px);
    border-bottom: 1px solid var(--line-hairline);
  }
  .shftd-v2 .hdr__search-form > .ico {
    color: var(--text-muted);
  }
  .shftd-v2 .hdr__search-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 700;
    font-size: clamp(16px, 2vw, 24px);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--n-0);
  }
  .shftd-v2 .hdr__search-input::placeholder {
    color: var(--text-muted);
  }
  .shftd-v2 .hdr__search-input::-webkit-search-cancel-button {
    display: none;
  }
  .shftd-v2 .hdr__search-input:focus-visible {
    box-shadow: none;
  }
  .shftd-v2 .hdr__search-results {
    padding: var(--space-8) clamp(16px, 2vw, 40px) var(--space-9);
    max-height: min(60vh, 560px);
    overflow-y: auto;
  }
  .shftd-v2 .hdr__search-results[hidden] {
    display: none;
  }
  .shftd-v2 .hdr__search-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: clamp(24px, 3vw, 56px);
  }
  @media (max-width: 749px) {
    .shftd-v2 .hdr__search-grid {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }
  }
  .shftd-v2 .hdr__search-group .lbl {
    display: block;
    margin-bottom: var(--space-5);
  }
  .shftd-v2 .hdr__search-item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-block: 7px;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--n-100);
    text-decoration: none;
  }
  .shftd-v2 .hdr__search-item:hover {
    color: var(--red-400);
  }
  .shftd-v2 .hdr__search-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--surface-raised);
    flex: none;
  }
  .shftd-v2 .hdr__search-empty {
    color: var(--text-secondary);
  }
  .shftd-v2 .hdr__search-all {
    margin-top: var(--space-7);
  }

  /* ---- Mobile drawer ---- */
  /* Paint comes from basev2's shared .drawer-scrim recipe; this only wires
     the open/close fade. */
  .shftd-v2 .hdr__scrim {
    position: fixed;
    inset: 0;
    z-index: 210;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-3) var(--ease-out);
  }
  .hdr.is-drawer-open .hdr__scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .shftd-v2 .hdr__drawer {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 220;
    width: min(420px, 88vw);
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
    border-right: 1px solid var(--line-soft);
    translate: -102% 0;
    transition: translate var(--dur-3) var(--ease-out);
    overflow-y: auto;
  }
  .hdr.is-drawer-open .hdr__drawer {
    translate: 0 0;
  }

  .shftd-v2 .hdr__drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    flex: none;
    padding-inline: var(--space-7) var(--space-5);
  }

  .shftd-v2 .hdr__drawer-nav {
    padding-inline: var(--space-7);
  }
  .shftd-v2 .hdr__acc summary {
    list-style: none;
  }
  .shftd-v2 .hdr__acc summary::-webkit-details-marker {
    display: none;
  }
  .shftd-v2 .hdr__acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: 14px;
    border-top: 1px solid var(--line-hairline);
    cursor: pointer;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--n-0);
    text-decoration: none;
  }
  .shftd-v2 .hdr__acc-ico {
    width: 14px;
    height: 14px;
    --icon: var(--icon-plus);
    color: var(--text-secondary);
  }
  .shftd-v2 .hdr__acc[open] .hdr__acc-ico {
    --icon: var(--icon-minus);
    color: var(--red-400);
  }
  .shftd-v2 .hdr__acc-list {
    padding: 0 0 var(--space-7) var(--space-6);
    border-left: 1px solid var(--line-hairline);
    margin-left: var(--space-1);
  }
  .shftd-v2 .hdr__acc-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: 9px;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--n-100);
    text-decoration: none;
  }

  .shftd-v2 .hdr__acc-link--all {
    justify-content: flex-start;
    gap: var(--space-4);
    font-size: 11px;
    letter-spacing: var(--track-wider);
    color: var(--text-secondary);
  }
  .shftd-v2 .hdr__acc-link--all .ico {
    width: 12px;
    height: 12px;
  }

  .shftd-v2 .hdr__drawer-secondary {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-7);
    border-top: 1px solid var(--line-hairline);
  }
  .shftd-v2 .hdr__drawer-secondary a {
    padding-block: 16px;
    border-bottom: 1px solid var(--line-hairline);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
  }
  .shftd-v2 .hdr__drawer-secondary a:hover {
    color: var(--n-0);
  }

  .shftd-v2 .hdr__drawer-cta {
    margin-top: auto;
    flex: none;
    padding: var(--space-6) var(--space-7) var(--space-8);
  }

  /* Language row pins to the drawer bottom, directly above the CTA. When
     both render, only the language row takes the auto margin — two auto
     margins would split the free space and float the row mid-drawer. */
  .shftd-v2 .hdr__drawer-lang {
    margin-top: auto;
    flex: none;
    padding: var(--space-6) var(--space-7) var(--space-8);
  }
  .shftd-v2 .hdr__drawer-lang:not(:last-child) {
    padding-bottom: var(--space-6);
  }
  .shftd-v2 .hdr__drawer-lang + .hdr__drawer-cta {
    margin-top: 0;
    padding-top: 0;
  }

  /* ---- Responsive split ---- */
  .shftd-v2 .hdr__burger {
    display: none;
  }
  @media (max-width: 989px) {
    .shftd-v2 .hdr__bar {
      height: 60px;
    }
    .shftd-v2 .hdr__nav {
      display: none;
    }
    .shftd-v2 .hdr__burger {
      display: grid;
    }
    .shftd-v2 .hdr__account {
      display: none;
    }
    /* The mobile drawer carries its own full-width language row */
    .shftd-v2 .hdr__actions .langsw {
      display: none;
    }
  }
/* END_SECTION:header-v2 */

/* START_SECTION:help-articles-v2 (INDEX:25) */
.help-articles-v2__wrap {
    display: block;
  }

  /* --- Search band (full-bleed background, contained content) ------------- */
  /* Shared band height model: indirection through --band-h-d/-m exists because
     the inline values are element-level and can't be swapped by a media query. */
  .help-articles-v2__band {
    --band-h: var(--band-h-d, 64px);
    border-bottom: 1px solid var(--line-hairline);
  }
  @media (max-width: 749px) {
    .help-articles-v2__band {
      --band-h: var(--band-h-m, 56px);
    }
  }
  /* The field stretches to the full band height, so the height setting reads
     as padding inside the search box — not as empty space around a fixed-height
     field. The icon and count stay centred beside it. */
  .help-articles-v2__band-in {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--band-h);
  }
  /* Fluid content still needs page gutters; the container-- classes bring theirs. */
  .help-articles-v2__band-in.container--fluid,
  .help-articles-v2__in.container--fluid {
    padding-inline: var(--gutter-page);
  }
  @media (min-width: 990px) {
    .help-articles-v2__band-in.container--fluid,
    .help-articles-v2__in.container--fluid {
      padding-inline: var(--gutter-page-lg);
    }
  }

  .help-articles-v2__band-ico {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
  }
  /* No resting border: the box is a focus affordance only. The inset ring
     replaces basev2's outset ring so the field never shifts on focus. */
  .help-articles-v2__input {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    padding-inline: 10px;
    border: 0;
    border-radius: var(--r-sm);
    box-shadow: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
  }
  .help-articles-v2__input:focus-visible {
    box-shadow: inset 0 0 0 1px var(--action-focus-ring);
  }
  .help-articles-v2__input::placeholder {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--track-wider);
  }
  .help-articles-v2__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }
  .help-articles-v2__count {
    flex: none;
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
  }

  .help-articles-v2__cap {
    margin-top: var(--space-8);
  }

  /* --- Card grid: hairline gridlines via a 1px gap over the hairline color;
     cards paint --surface-page so they blend with the section background. --- */
  .help-articles-v2__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line-hairline);
    border-bottom: 1px solid var(--line-hairline);
  }
  @media (max-width: 989px) {
    .help-articles-v2__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 749px) {
    .help-articles-v2__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .help-articles-v2__card {
    background: var(--surface-page);
    min-height: 200px;
  }
  .help-articles-v2__card[hidden] {
    display: none;
  }

  /* The whole card is one anchor: one accessible name, no nested links. */
  .help-articles-v2__cardlink {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    height: 100%;
    padding: var(--space-8) var(--space-7);
    text-decoration: none;
    color: inherit;
  }
  @media (prefers-reduced-motion: no-preference) {
    .help-articles-v2__cardlink {
      transition:
        transform var(--dur-2) var(--ease-out),
        background var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out);
    }
  }
  /* Hover and keyboard focus get the identical treatment. */
  a.help-articles-v2__cardlink:hover,
  a.help-articles-v2__cardlink:focus-visible {
    background: var(--surface-card);
    box-shadow: var(--elev-2);
  }
  @media (prefers-reduced-motion: no-preference) {
    a.help-articles-v2__cardlink:hover,
    a.help-articles-v2__cardlink:focus-visible {
      transform: var(--lift-hover);
    }
  }
  a.help-articles-v2__cardlink:hover .help-articles-v2__title,
  a.help-articles-v2__cardlink:focus-visible .help-articles-v2__title {
    color: var(--red-400);
  }
  a.help-articles-v2__cardlink:active {
    transform: var(--press);
  }

  .shftd-v2 .help-articles-v2__cat {
    display: block;
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .help-articles-v2__title {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: break-word;
  }
  @media (prefers-reduced-motion: no-preference) {
    .help-articles-v2__title {
      transition: color var(--dur-1) var(--ease-out);
    }
  }
  .help-articles-v2__excerpt {
    margin: 0;
    font: var(--type-body-sm);
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .help-articles-v2__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
  }

  .help-articles-v2__card--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-7);
    min-height: 200px;
    color: var(--text-muted);
  }

  .help-articles-v2__heading {
    margin: 0;
    font: inherit;
    color: inherit;
  }

  .help-articles-v2__none {
    margin: var(--space-8) 0 0;
    font: var(--type-body-sm);
    color: var(--text-secondary);
  }
/* END_SECTION:help-articles-v2 */

/* START_SECTION:help-categories-v2 (INDEX:26) */
/* container--fluid has no gutters of its own; text should never touch the
     viewport edge. */
  .shftd-v2.help-categories-v2.container--fluid {
    padding-inline: var(--gutter-page);
  }
  @media (min-width: 990px) {
    .shftd-v2.help-categories-v2.container--fluid {
      padding-inline: var(--gutter-page-lg);
    }
  }

  .help-categories-v2__acc {
    display: block;
  }

  .help-categories-v2__item {
    border-bottom: 1px solid var(--line-hairline);
  }
  .help-categories-v2__item:first-child {
    border-top: 1px solid var(--line-hairline);
  }

  .help-categories-v2__head {
    display: flex;
    align-items: center;
    gap: var(--space-7);
    width: 100%;
    /* Row spacing is a setting: section-level for metaobject rows, overridable
       per block via --hc-row-pt/-pb on the item. */
    padding-block: var(--hc-row-pt, var(--space-7)) var(--hc-row-pb, var(--space-7));
    padding-inline: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
  }
  /* Rendered as a <span> (not a button) so a zero-article row offers no
     false affordance; it still needs the button's box. */
  .help-categories-v2__head--static {
    display: flex;
    cursor: default;
  }

  .help-categories-v2__name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: var(--weight-black);
    font-size: var(--hc-cat-s, 36px);
    line-height: 1;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    overflow-wrap: break-word;
    transition: color var(--dur-2) var(--ease-out);
  }
  .help-categories-v2__head:hover .help-categories-v2__name {
    color: var(--text-accent);
  }

  .help-categories-v2__num {
    flex: none;
    font: var(--type-mono);
    color: var(--red-400);
  }

  /* CSS-drawn plus that loses its vertical bar when the row is open. */
  .help-categories-v2__pm {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
  }
  .help-categories-v2__pm::before,
  .help-categories-v2__pm::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--text-secondary);
  }
  .help-categories-v2__pm::before {
    width: 16px;
    height: 2px;
  }
  .help-categories-v2__pm::after {
    width: 2px;
    height: 16px;
    transition: opacity var(--dur-2) var(--ease-out);
  }
  .help-categories-v2__item.is-open .help-categories-v2__pm::after {
    opacity: 0;
  }
  .help-categories-v2__head:hover .help-categories-v2__pm::before,
  .help-categories-v2__head:hover .help-categories-v2__pm::after {
    background: var(--text-primary);
  }

  /* grid-rows collapse trick; the transition sits alone inside the
     no-preference query so reduced-motion rows still open, just instantly.
     `visibility` (plus the `inert` attribute toggled in JS) keeps collapsed
     links out of the tab order and the accessibility tree — overflow: hidden
     alone only hides them visually. */
  .help-categories-v2__panel {
    display: grid;
    grid-template-rows: 0fr;
  }
  @media (prefers-reduced-motion: no-preference) {
    .help-categories-v2__panel {
      transition: grid-template-rows var(--dur-3) var(--ease-out);
    }
  }
  .help-categories-v2__item.is-open .help-categories-v2__panel {
    grid-template-rows: 1fr;
  }
  .help-categories-v2__panel-in {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
  }
  .help-categories-v2__item.is-open .help-categories-v2__panel-in {
    visibility: visible;
  }

  /* The head buttons are wrapped in <h3> for the document outline; the
     heading itself must contribute no box or type of its own. */
  .help-categories-v2__h {
    margin: 0;
    font: inherit;
    color: inherit;
  }

  .help-categories-v2__item--empty {
    padding: var(--space-6) 0;
    color: var(--text-muted);
  }

  .help-categories-v2__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-9);
    margin: 0;
    /* Bottom-only: the head's own padding already separates the panel from the
       category title, so a top value just doubles that gap. Section-level
       default, overridable per block on the item. */
    padding: 0 0 var(--hc-panel-pb, var(--space-8));
    list-style: none;
  }

  .help-categories-v2__li {
    border-bottom: 1px solid var(--line-hairline);
  }
  .help-categories-v2__li a,
  .help-categories-v2__li span {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: var(--space-5) 0;
    font: var(--type-body-sm);
    color: var(--text-secondary);
    text-decoration: none;
  }
  .help-categories-v2__li a::before,
  .help-categories-v2__li span::before {
    content: "–";
    flex: none;
    color: var(--text-muted);
  }
  .help-categories-v2__li a:hover {
    color: var(--text-primary);
  }
  .help-categories-v2__li a:hover::before {
    color: var(--red-400);
  }

  @media (max-width: 749px) {
    .help-categories-v2__list {
      grid-template-columns: minmax(0, 1fr);
      padding-bottom: var(--hc-panel-pb-m, var(--hc-panel-pb, var(--space-8)));
    }
    .help-categories-v2__head {
      gap: var(--space-5);
      padding-block: var(--hc-row-pt-m, var(--hc-row-pt, var(--space-7)))
        var(--hc-row-pb-m, var(--hc-row-pb, var(--space-7)));
    }
    .help-categories-v2__name {
      font-size: var(--hc-cat-s-m, 28px);
    }
  }
/* END_SECTION:help-categories-v2 */

/* START_SECTION:help-hero-v2 (INDEX:30) */
/* container--fluid has no gutters of its own; a text hero should never
     touch the viewport edge. */
  .shftd-v2.help-hero-v2.container--fluid {
    padding-inline: var(--gutter-page);
  }
  @media (min-width: 990px) {
    .shftd-v2.help-hero-v2.container--fluid {
      padding-inline: var(--gutter-page-lg);
    }
  }

  /* Breadcrumb — the PDP crumb (main-product's .pdp__crumb) ported over: same
     ordered-list structure, same mono voice, same 3px accent square between
     items. The height here is a merchant setting rather than the PDP's fixed
     block padding, so the row centres its list instead of relying on padding. */
  .help-hero-v2__crumb {
    display: flex;
    align-items: center;
    min-height: var(--hh-crumb-h, 37px);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--line-hairline);
  }
  .help-hero-v2__crumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .help-hero-v2__crumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
  .help-hero-v2__crumb-item + .help-hero-v2__crumb-item::before {
    content: "";
    width: 3px;
    height: 3px;
    flex: none;
    background: var(--line-accent);
  }
  .help-hero-v2__crumb-link {
    font: var(--type-mono-sm);
    font-size: var(--hh-crumb-s, 10px);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--hh-crumb-c, var(--text-secondary));
  }
  .help-hero-v2__crumb a.help-hero-v2__crumb-link:hover {
    color: var(--text-primary);
  }
  /* The PDP emits this modifier without styling it; here the current page reads
     one step brighter than the link beside it so the trail has a clear end. */
  .help-hero-v2__crumb-link--current {
    color: var(--hh-crumb-c, var(--text-primary));
  }

  /* Breadcrumb colour presets. Each preset rebinds the same custom property the
     crumb already consumes, so preset and custom share one code path; the
     `custom` class deliberately declares nothing, leaving the inline value (or
     the base fallback, if the picker was left blank) to stand. */
  .help-hero-v2--crumbc-dim {
    --hh-crumb-c: var(--n-700);
  }
  .help-hero-v2--crumbc-bright {
    --hh-crumb-c: var(--n-200);
  }
  .help-hero-v2--crumbc-primary {
    --hh-crumb-c: var(--text-primary);
  }
  .help-hero-v2--crumbc-red {
    --hh-crumb-c: var(--red-400);
  }

  /* Horizontal placement of the crumb row's own content. Independent of the
     hero's text alignment: the crumb is page furniture and often wants to stay
     left while a centred hero sits under it. */
  .help-hero-v2--crumb-center .help-hero-v2__crumb {
    justify-content: center;
  }
  .help-hero-v2--crumb-right .help-hero-v2__crumb {
    justify-content: flex-end;
  }

  /* Page-width crumb: the rule and the row break out of a contained hero to span
     the viewport, while the label stays on the content grid. */
  .help-hero-v2--crumb-bleed .help-hero-v2__crumb {
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--gutter-page);
  }
  @media (min-width: 990px) {
    .help-hero-v2--crumb-bleed .help-hero-v2__crumb {
      padding-inline: var(--gutter-page-lg);
    }
  }

  .shftd-v2.help-hero-v2 .eyebrow {
    margin: 0 0 var(--space-5);
    font-size: var(--hh-eyebrow-s, 10px);
    color: var(--hh-eyebrow-c, var(--red-400));
  }
  .help-hero-v2--eyebrowc-muted .eyebrow {
    --hh-eyebrow-c: var(--text-muted);
  }
  .help-hero-v2--eyebrowc-secondary .eyebrow {
    --hh-eyebrow-c: var(--text-secondary);
  }
  .help-hero-v2--eyebrowc-primary .eyebrow {
    --hh-eyebrow-c: var(--text-primary);
  }

  .help-hero-v2__title {
    margin: 0;
    max-width: var(--hh-heading-w, none);
    color: var(--hh-heading-c, var(--text-primary));
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: var(--weight-black);
    font-size: var(--hh-heading-s, 72px);
    line-height: 0.98;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  .help-hero-v2--headingc-secondary .help-hero-v2__title {
    --hh-heading-c: var(--text-secondary);
  }
  .help-hero-v2--headingc-muted .help-hero-v2__title {
    --hh-heading-c: var(--text-muted);
  }
  .help-hero-v2--headingc-red .help-hero-v2__title {
    --hh-heading-c: var(--red-400);
  }

  .help-hero-v2__body {
    margin: var(--space-7) 0 0;
    max-width: var(--hh-body-w, none);
    color: var(--hh-body-c, var(--text-secondary));
    font-size: var(--hh-body-s, 16px);
    line-height: 1.55;
    overflow-wrap: break-word;
  }
  .help-hero-v2--bodyc-primary .help-hero-v2__body {
    --hh-body-c: var(--text-primary);
  }
  .help-hero-v2--bodyc-muted .help-hero-v2__body {
    --hh-body-c: var(--text-muted);
  }
  .help-hero-v2--bodyc-red .help-hero-v2__body {
    --hh-body-c: var(--red-400);
  }

  .help-hero-v2--center .help-hero-v2__stack {
    text-align: center;
  }
  .help-hero-v2--center .help-hero-v2__title,
  .help-hero-v2--center .help-hero-v2__body {
    margin-inline: auto;
  }

  .help-hero-v2--right .help-hero-v2__stack {
    text-align: right;
  }
  .help-hero-v2--right .help-hero-v2__title,
  .help-hero-v2--right .help-hero-v2__body {
    margin-inline-start: auto;
  }

  @media (max-width: 749px) {
    /* Gap below the crumb mirrors the section's side gutter, as on the PDP. */
    .help-hero-v2__crumb {
      min-height: var(--hh-crumb-h-m, 37px);
      margin-bottom: var(--gutter-page);
    }
    .help-hero-v2__title {
      font-size: var(--hh-heading-s-m, 40px);
    }
  }
/* END_SECTION:help-hero-v2 */

/* START_SECTION:hero-v2 (INDEX:32) */
/* Height is viewport-relative, set by two vh sliders emitted inline as
     --hero-h-d / --hero-h-m (svh, so mobile browser chrome never causes a
     jump). Same indirection as the band height model: inline values can't
     be media-queried, the alias can. */
  .hero-v2 {
    --hero-h: var(--hero-h-d, 100svh);
    position: relative;
    display: block;
    min-height: min(var(--hero-h), 100svh);
    overflow: hidden;
    isolation: isolate;
    /* The hero is a media band: ground, overlay and ink are ABSOLUTE — the
       imagery doesn't change with the light theme, so nothing on it may. */
    background: oklch(0.1 0.004 30);
  }
  @media (max-width: 749px) {
    .hero-v2 {
      --hero-h: var(--hero-h-m, var(--hero-h-d, 100svh));
    }
  }

  .container--contained .hero-v2,
  .container--narrow .hero-v2 {
    border-radius: var(--r-lg);
  }

  .hero-v2__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
  }
  .hero-v2--split .hero-v2__media {
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 749px) {
    .hero-v2--split .hero-v2__media {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
    }
  }

  .hero-v2__frame {
    position: relative;
    overflow: hidden;
  }
  .hero-v2 .hero-v2__media-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-v2--parallax img.hero-v2__media-el {
    scale: 1.14;
    will-change: translate;
  }

  .hero-v2__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: oklch(0.1 0.004 30);
    opacity: var(--overlay-opacity, 0.5);
    pointer-events: none;
  }

  .hero-v2__content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: min(var(--hero-h), 100svh);
    padding: clamp(24px, 5vw, 64px) var(--gutter-page);
  }
  @media (min-width: 990px) {
    .hero-v2__content {
      padding-inline: var(--gutter-page-lg);
    }
  }

  .hero-v2--pos-center .hero-v2__content {
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .hero-v2--pos-bottom-left .hero-v2__content {
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
  }
  .hero-v2--pos-bottom-center .hero-v2__content {
    align-items: flex-end;
    justify-content: center;
    text-align: center;
  }

  .hero-v2__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--content-max-w, 840px);
  }
  .hero-v2--pos-bottom-left .hero-v2__stack {
    align-items: flex-start;
  }

  .hero-v2__kicker {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 800;
    font-size: clamp(22px, 3vw, 44px);
    line-height: 1;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    color: oklch(0.99 0 0);
  }

  .hero-v2__heading {
    color: oklch(0.99 0 0);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }
  .hero-v2__heading--xl {
    font: var(--weight-black) clamp(52px, 9vw, 132px) / 0.92 var(--font-display);
  }
  .hero-v2__heading--l {
    font: var(--weight-black) clamp(44px, 7vw, 96px) / 0.92 var(--font-display);
  }
  .hero-v2__heading--m {
    font: var(--weight-black) clamp(32px, 5vw, 64px) / 0.96 var(--font-display);
  }

  .hero-v2__sub {
    margin-top: var(--space-5);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(15px, 2vw, 30px);
    line-height: 1.2;
    letter-spacing: var(--track-widest);
    text-transform: uppercase;
    color: oklch(0.7 0.003 30);
  }

  /* Ghost buttons sit on the media too: pinned white, not theme tokens
     (primary red is already invariant). */
  .shftd-v2 .hero-v2 .btn--ghost {
    background: oklch(0.99 0 0 / 0.06);
    color: oklch(0.99 0 0);
    border-color: oklch(0.99 0 0 / 0.24);
  }
  .shftd-v2 .hero-v2 .btn--ghost:hover {
    color: oklch(0.99 0 0);
    border-color: oklch(0.99 0 0 / 0.4);
  }

  .hero-v2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-9);
  }
  .hero-v2--pos-center .hero-v2__actions,
  .hero-v2--pos-bottom-center .hero-v2__actions {
    justify-content: center;
  }
/* END_SECTION:hero-v2 */

/* START_SECTION:hero-video (INDEX:33) */
:root {
  /* Fallback defaults; real values are measured at runtime by the script
     at the bottom of this file and pushed onto :root as CSS variables. */
  --header-height: 80px;
  --announcement-height: 35px;
}

.hero-video {
  position: relative;
  /* Fallback for older browsers that don't support dynamic viewport units */
  height: calc(100vh - var(--announcement-height));
  /* Dynamic viewport height tracks mobile browser chrome (URL bar) show/hide,
     so the hero always ends exactly at the visible bottom of the screen. */
  height: calc(100dvh - var(--announcement-height));
  min-height: 500px;
  color: #ffffff;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #000000;
  margin: 0;
  padding: 0;
  border: none;
}

/* If announcement bar is hidden, the hero should take the full visible viewport */
.no-announcement-bar .hero-video {
  height: 100vh;
  height: 100dvh;
}

.hero-video__video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Poster sits behind the video; both fill the container so the video can
   cross-fade in over the identical first frame. */
.hero-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-video__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video__fallback-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video__placeholder {
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.hero-video__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.hero-video__content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
  padding: var(--spacing-extra-loose) 0;
  margin-top: 35vh;
}

.hero-video__subheading {
  font-size: 2.2rem;
  text-transform: uppercase;
  margin-bottom: var(--spacing-tight);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.7);
}

.hero-video__heading {
  font-size: 8.5rem;
  line-height: 1.1;
  margin-bottom: var(--spacing-unit);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.07em;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 30px color-mix(in srgb, var(--color-primary) 60%, transparent);
  position: relative;
  display: inline-block;
}

.hero-video__heading::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.3);
  z-index: -1;
  /* Inherit from the heading so spacing stays in lock-step across breakpoints
     (was hard-coded to 0.07em, which caused the ghost to be wider than the
     mobile 0.05em main text and wrap inside the inline-block container). */
  letter-spacing: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  white-space: nowrap;
  pointer-events: none;
}

/* Cash prize tag — anchored to the right end of the subheading text and
   removed from layout flow, so "WIN THIS BMW" stays exactly centered and
   the tag floats beside it over empty video. The flex row shrink-wraps
   the subheading (block would be full-width, breaking the 100% anchor).
   On small phones the tag drops to its own centered line instead of
   clipping at the viewport edge. NOTE: keep the tag out of the h1 —
   theme.js feeds the heading's ghost ::after from h1.textContent and
   would duplicate the tag text into the outline. */
.hero-video__subheading-row {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-tight);
}

.hero-video__subheading-row .hero-video__subheading {
  margin-bottom: 0;
  position: relative;
}

.hero-video__cash-tag {
  --cash-tag-base-y: -50%;
  position: absolute;
  left: calc(100% + 14px);
  top: calc(50% + 11px);
  display: inline-flex;
  align-items: baseline;
  padding: 0.55em 1em 0.6em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 30%, transparent);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  transform: translateY(var(--cash-tag-base-y)) rotate(4deg);
  animation: hero-cash-tag-float 4s ease-in-out infinite;
  will-change: transform;
}

.hero-video__subheading-row--tag-only .hero-video__cash-tag {
  --cash-tag-base-y: 0%;
  position: static;
}

.hero-video__cash-tag-plus {
  color: var(--color-primary);
  font-weight: 900;
  text-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 70%, transparent);
}

@keyframes hero-cash-tag-float {
  0%, 100% { transform: translateY(var(--cash-tag-base-y)) rotate(4deg); }
  50%      { transform: translateY(calc(var(--cash-tag-base-y) - 3px)) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video__cash-tag {
    animation: none;
  }
}

/* The tag renders twice: inside the subheading (desktop/tablet, absolute
   beside the centered text) and as a sibling of the h1 in the heading row
   (small phones). Each variant is display:none at the other size. */
.hero-video__heading-row > .hero-video__cash-tag {
  display: none;
}

/* Small phones: subheading stays pure and centered; the tag pairs with
   the heading instead — "S1000 RR  [+ $5,000 CASH]" centered together
   as one flex unit (~340px total, fits 320px viewports). */
@media screen and (max-width: 480px) {
  .hero-video__subheading .hero-video__cash-tag {
    display: none;
  }

  .hero-video__heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .hero-video__heading-row > .hero-video__cash-tag {
    --cash-tag-base-y: 0%;
    position: static;
    display: inline-flex;
    font-size: 1.2rem;
  }
}

/* Narrow Androids (360px): shave the tag so the heading pair still fits
   on one line; on truly tiny screens the row wraps gracefully. */
@media screen and (max-width: 375px) {
  .hero-video__heading-row > .hero-video__cash-tag {
    font-size: 1rem;
  }
}

.hero-video__text {
  font-size: 1.8rem;
  margin-bottom: var(--spacing-unit);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
}

.hero-video__button-wrapper {
  margin-top: var(--spacing-base);
}

.hero-video__button {
  min-width: 220px;
  background: linear-gradient(
    to bottom,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 80%, #000)
  );
  color: #ffffff;
  border: none;
  font-weight: 700;
  padding: 18px 35px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.hero-video__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}

.hero-video__button:hover {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-primary) 90%, #fff),
    var(--color-primary)
  );
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.hero-video__button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-primary) 80%, #000),
    color-mix(in srgb, var(--color-primary) 65%, #000)
  );
}

/* Entries Ratio Line (under the hero button) */
.hero-video__entries-ratio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: calc(var(--spacing-tight) + 4px);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.hero-video__entries-ratio-rule {
  flex: 0 1 60px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
}

.hero-video__entries-ratio-text {
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.hero-video__entries-ratio-text strong {
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
}

.hero-video__entries-ratio-equals {
  display: inline-block;
  margin: 0 2px;
  opacity: 0.7;
  font-weight: 700;
}

.hero-video__entries-ratio-number {
  color: var(--color-primary);
  font-size: 1.6rem;
  padding: 0 2px;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--color-primary) 60%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Countdown Overlay Styles */
.hero-video__countdown-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 50%, transparent);
  padding: 20px 0;
  z-index: 4;
}

.hero-video__countdown-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.hero-video__countdown-text {
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

/* Pulse Glow Animation — tints from theme primary */
@keyframes pulse-glow {
  0% {
    text-shadow:
      0 0 5px color-mix(in srgb, var(--color-primary) 50%, transparent),
      0 0 10px color-mix(in srgb, var(--color-primary) 30%, transparent);
  }
  50% {
    text-shadow:
      0 0 15px color-mix(in srgb, var(--color-primary) 80%, transparent),
      0 0 25px color-mix(in srgb, var(--color-primary) 50%, transparent),
      0 0 35px color-mix(in srgb, var(--color-primary) 30%, transparent);
  }
  100% {
    text-shadow:
      0 0 5px color-mix(in srgb, var(--color-primary) 50%, transparent),
      0 0 10px color-mix(in srgb, var(--color-primary) 30%, transparent);
  }
}

.pulse-glow {
  animation: pulse-glow 2s infinite;
}

.hero-video__countdown {
  display: flex;
  gap: 15px;
}

.hero-video__countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.hero-video__countdown-number {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

/* Animation for number change */
@keyframes number-update {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.number-changed {
  animation: number-update 0.3s ease-out;
}

.hero-video__countdown-label {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 5px;
  color: #ffffff;
}

@media screen and (max-width: 990px) {
  .hero-video {
    min-height: 500px;
    /* The homepage main-content has a negative top margin of -header-height
       (see assets/theme.css), so the hero visually sits behind the header.
       Only the announcement bar takes real space above the hero. */
    height: calc(100vh - var(--announcement-height));
    height: calc(100dvh - var(--announcement-height));
  }
  
  .hero-video__content {
    margin-top: 32vh;
  }
  
  .hero-video__heading {
    font-size: 6.5rem;
    letter-spacing: 0.06em;
  }
  
  .hero-video__subheading {
    font-size: 1.9rem;
    letter-spacing: 0.12em;
  }

  .hero-video__cash-tag {
    font-size: 1.4rem;
    left: calc(100% + 10px);
  }

  .hero-video__countdown-wrapper {
    flex-direction: column;
    gap: 10px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    /* Match mobile header height from header.css */
    --header-height: 60px;
    /* Mobile announcement bar might be taller due to text wrapping */
    --announcement-height: 40px;
  }
  
  .hero-video {
    min-height: 450px;
    height: calc(100vh - var(--announcement-height));
    height: calc(100dvh - var(--announcement-height));
  }
  
  .hero-video__content {
    margin-top: 34vh;
  }
  
  .hero-video__heading {
    font-size: 4rem;
    letter-spacing: 0.05em;
  }
  
  .hero-video__text {
    font-size: 1.6rem;
  }
  
  .hero-video__subheading {
    font-size: 1.7rem;
    letter-spacing: 0.1em;
  }

  .hero-video__cash-tag {
    font-size: 1.15rem;
    left: calc(100% + 8px);
  }

  .hero-video__countdown-text {
    font-size: 1.6rem;
  }
  
  .hero-video__countdown {
    gap: 10px;
  }
  
  .hero-video__countdown-item {
    min-width: 50px;
  }
  
  .hero-video__countdown-number {
    font-size: 2.4rem;
  }
  
  .hero-video__countdown-label {
    font-size: 1rem;
  }
  
  .hero-video__button {
    min-width: 180px;
    padding: 15px 25px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    border-radius: 5px;
  }
  
  .hero-video__button:hover {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-primary) 90%, #fff),
      var(--color-primary)
    );
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 12px color-mix(in srgb, var(--color-primary) 30%, transparent);
  }

  .hero-video__entries-ratio {
    gap: 10px;
    margin-top: var(--spacing-tight);
  }

  .hero-video__entries-ratio-rule {
    flex-basis: 30px;
  }

  .hero-video__entries-ratio-text {
    font-size: 1.1rem;
    letter-spacing: 0.14em;
  }

  .hero-video__entries-ratio-number {
    font-size: 1.35rem;
  }
}
/* END_SECTION:hero-video */

/* START_SECTION:info-accordion (INDEX:41) */
/* The cap's bottom hairline doubles as the region's top border: the list
     and media column sit flush against it, and the first item adds no border
     of its own. */
  .shftd-v2 .accv2__cap {
    margin-bottom: 0;
  }

  .shftd-v2 .accv2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: stretch;
  }
  .shftd-v2 .accv2--media-left .accv2__list {
    order: 2;
  }
  .shftd-v2 .accv2--media-left .accv2__media {
    order: 1;
  }
  .shftd-v2 .accv2--media-none {
    grid-template-columns: 1fr;
  }

  .shftd-v2 .accv2__item {
    border-bottom: 1px solid var(--line-hairline);
  }

  .shftd-v2 .accv2__head {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    padding: 26px var(--space-2);
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
  }
  .shftd-v2 .accv2__num {
    flex: none;
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    color: var(--text-muted);
    transition: color var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .accv2__item.is-open .accv2__num {
    color: var(--red-400);
  }
  .shftd-v2 .accv2__title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 800;
    font-size: clamp(18px, 1.8vw, 26px);
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    color: var(--n-0);
  }
  .shftd-v2 .accv2__ico {
    flex: none;
    width: 15px;
    height: 15px;
    --icon: var(--icon-plus);
    color: var(--text-secondary);
    transition: rotate var(--dur-2) var(--ease-out);
  }
  .shftd-v2 .accv2__item.is-open .accv2__ico {
    --icon: var(--icon-minus);
    color: var(--n-0);
  }

  /* Expand/collapse: animatable grid-rows, class-driven only */
  .shftd-v2 .accv2__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-3) var(--ease-out);
  }
  .shftd-v2 .accv2__item.is-open .accv2__panel {
    grid-template-rows: 1fr;
  }
  .shftd-v2 .accv2__panel-in {
    overflow: hidden;
    min-height: 0;
    padding-left: calc(var(--space-8) + 18px);
    padding-right: var(--space-8);
  }
  .shftd-v2 .accv2__body {
    padding-top: var(--space-2);
  }
  .shftd-v2 .accv2__facts {
    margin: var(--space-7) 0 0;
  }
  .shftd-v2 .accv2__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    padding-block: 13px;
    border-top: 1px solid var(--line-hairline);
  }
  .shftd-v2 .accv2__fact dd {
    margin: 0;
  }
  .shftd-v2 .accv2__fact-val {
    font: var(--type-mono);
    letter-spacing: var(--track-wide);
    color: var(--n-0);
    text-align: right;
  }
  .shftd-v2 .accv2__btn {
    margin-block: var(--space-8) var(--space-8);
  }
  .shftd-v2 .accv2__panel-in > :last-child {
    margin-bottom: var(--space-8);
  }

  /* Media panel: absolutely-stacked crossfade layers */
  .shftd-v2 .accv2__media {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    background: var(--surface-sunken);
  }
  .shftd-v2 .accv2__media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--dur-4) var(--ease-out);
  }
  .shftd-v2 .accv2__media-item.is-active {
    opacity: 1;
  }
  .shftd-v2 .accv2__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .shftd-v2 .accv2__media-cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-8) var(--space-7);
    background: linear-gradient(180deg, transparent, oklch(0 0 0 / 0.55));
  }
  .shftd-v2 .accv2__cap-title {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    color: var(--n-0);
  }
  .shftd-v2 .accv2__cap-sub {
    flex: none;
  }

  @media (max-width: 989px) {
    .shftd-v2 .accv2 {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .shftd-v2 .accv2__media {
      order: 1;
      min-height: 0;
      aspect-ratio: 4 / 3;
      margin-block: var(--space-6) var(--space-2);
    }
    .shftd-v2 .accv2__list {
      order: 2;
    }
    .shftd-v2 .accv2__head {
      gap: var(--space-6);
      padding-block: 16px;
    }
    .shftd-v2 .accv2__title {
      font-size: 15px;
    }
    .shftd-v2 .accv2__panel-in {
      padding-left: calc(var(--space-6) + 18px);
      padding-right: var(--space-4);
    }
  }
/* END_SECTION:info-accordion */

/* START_SECTION:info-columns (INDEX:42) */
.info-columns {
  --accent-color-rgb: {{ section.settings.accent_color | color_to_rgb | default: settings.accent_color | color_to_rgb | default: '230, 0, 0' }};
  position: relative;
  background-color: var(--background-color);
  color: var(--text-color);
  overflow: hidden;
}

/* Background styling */
.info-columns__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.info-columns__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 25% 20%, rgba(var(--accent-color-rgb), 0.08), transparent 35%),
    radial-gradient(circle at 75% 80%, rgba(var(--accent-color-rgb), 0.06), transparent 35%);
  opacity: 0.7;
}

.info-columns__noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: overlay;
}

/* Accent shapes */
.info-columns__accent-shape {
  position: absolute;
  background-color: var(--accent-color);
  z-index: 1;
}

.info-columns__accent-shape--1 {
  width: 250px;
  height: 120px;
  top: -60px;
  right: -120px;
  transform: rotate(-25deg);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
  opacity: 0.12;
  animation: float-shape 18s ease-in-out infinite alternate;
}

.info-columns__accent-shape--2 {
  width: 120px;
  height: 120px;
  bottom: -60px;
  left: -60px;
  transform: rotate(15deg);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  opacity: 0.12;
  animation: float-shape 15s ease-in-out infinite alternate-reverse;
}

.info-columns__accent-line {
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 35px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.5) 20%, rgba(var(--accent-color-rgb), 0.5) 80%, transparent);
  opacity: 0.25;
}

@keyframes float-shape {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(10px, -10px) rotate(2deg);
  }
  100% {
    transform: translate(-5px, 5px) rotate(-1deg);
  }
}

/* Layout structure */
.info-columns__wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 30px;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 60px;
  padding-right: 60px;

  padding-top: 60px;
  padding-bottom: 60px;
}

.info-columns__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.info-columns__right {
  flex: 1;
  min-height: 100%;
}

/* Info Box Styling */
.info-box {
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 4px;
  padding: 30px;
  height: calc(50% - 15px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.info-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent-color);
  opacity: 0.8;
}

.info-box__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info-box__title {
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 20px;
  color: var(--text-color);
  line-height: 1.1;
}

.info-box__description {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
  flex: 1;
}

.info-box__description p {
  margin-bottom: 1em;
}

.info-box__description p:last-child {
  margin-bottom: 0;
}

.info-box__description strong {
  color: var(--text-color);
  font-weight: 600;
}

.info-box__button {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  text-decoration: none;
  align-self: flex-start;
  margin-top: auto;
  position: relative;
  overflow: hidden;
}

.info-box__button:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0.15);
  transform-origin: left;
  transition: transform 0.3s ease;
  opacity: 0.6;
}

.info-box__button:hover:after {
  transform: scaleX(1);
}

.info-box__button--primary {
  background-color: var(--accent-color);
  color: #ffffff;
  border: 1px solid var(--accent-color);
  box-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.3);
}

.info-box__button--primary:hover {
  background-color: transparent;
  color: var(--accent-color);
}

.info-box__button--secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.info-box__button--secondary:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}

.info-box__button--secondary:hover {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
}

.info-box__button--secondary:hover:before {
  transform: scaleX(1);
}

/* Video Box Styling */
.video-box {
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 4px;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.video-box:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: var(--accent-color);
  opacity: 0.8;
}

.video-box__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-box__title {
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 20px;
  color: var(--text-color);
  line-height: 1.1;
}

.video-box__player-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  min-height: 300px;
}

.responsive-video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  width: 100%;
}

.responsive-video-container iframe,
.responsive-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}

.video-box__placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}

.video-box__placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-box__placeholder--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
}

.video-box__placeholder--empty span {
  margin-top: 20px;
}

.video-box__play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.video-box__placeholder:hover .video-box__play-button {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-box__description {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-top: auto;
}

.video-box__description p {
  margin-bottom: 1em;
}

.video-box__description p:last-child {
  margin-bottom: 0;
}

/* Responsive styles */
@media (max-width: 991px) {
  .info-columns__wrapper {
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .info-box, .video-box {
    height: auto;
    padding: 25px;
  }
  
  .info-box__title, .video-box__title {
    font-size: 28px;
  }
  
  .video-box__player-container {
    min-height: 200px;
  }
}

@media (max-width: 767px) {
  .info-columns {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  .info-columns__wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .info-box__title, .video-box__title {
    font-size: 24px;
  }
  
  .info-box__description, .video-box__description {
    font-size: 14px;
  }
}
/* END_SECTION:info-columns */

/* START_SECTION:main-collection-grid (INDEX:46) */
.shftd-v2.mcol {
    display: block;
  }

  /* ---- Toolbar ---- */
  /* Sticky bars carry basev2's .bar-frost (translucent + blur) so products
     scroll readably beneath; the opaque surface only applies unfrosted. */
  .shftd-v2 .mcol__bar {
    border-block: 1px solid var(--line-hairline);
  }
  .shftd-v2 .mcol__bar:not(.bar-frost) {
    background: var(--surface-page);
  }
  /* --mcol-top is measured at runtime from the sticky sections above
     (announcement bar + header), so the bar always lands exactly under them. */
  .mcol__bar--sticky {
    position: sticky;
    top: var(--mcol-top, 0px);
    z-index: 90;
  }
  .shftd-v2 .mcol__bar-in {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: 58px;
    padding-block: var(--space-4);
  }

  .shftd-v2 .mcol__tbtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    height: 40px;
    padding-inline: var(--space-6);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--n-0);
    white-space: nowrap;
    transition: border-color var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .mcol__tbtn:hover {
    border-color: var(--line-strong);
  }
  .shftd-v2 .mcol__tbtn .ico {
    width: 14px;
    height: 14px;
  }
  .shftd-v2 .mcol__tbtn b {
    display: inline-block;
    max-width: 11em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-weight: 700;
  }
  .shftd-v2 .mcol__badge {
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: var(--r-xs);
    background: var(--red-500);
    color: var(--n-0);
    font: var(--type-mono-sm);
    font-size: 10px;
  }

  .shftd-v2 .mcol__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    min-width: 0;
  }
  .shftd-v2 .mcol__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    height: 40px;
    padding-inline: var(--space-6);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
  }
  .shftd-v2 .mcol__chip:hover {
    color: var(--n-0);
    border-color: var(--line-strong);
  }
  .shftd-v2 .mcol__chip .ico {
    width: 11px;
    height: 11px;
  }

  .shftd-v2 .mcol__count {
    margin-left: auto;
    flex: none;
  }

  /* ---- Grid area ---- */
  .shftd-v2 .mcol .pgrid {
    margin-top: 0;
  }
  .shftd-v2 .mcol__paginate {
    display: flex;
    justify-content: center;
    padding-block: var(--space-10);
  }
  .shftd-v2 .mcol__sentinel {
    text-align: center;
    letter-spacing: var(--track-widest);
  }
  .shftd-v2 .mcol__pages a,
  .shftd-v2 .mcol__pages span {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding-inline: 8px;
    margin-inline: 2px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font: var(--type-mono);
    color: var(--text-secondary);
    text-decoration: none;
  }
  .shftd-v2 .mcol__pages span.current {
    color: var(--n-0);
    border-color: var(--red-500);
  }

  .shftd-v2 .mcol__empty {
    padding-block: var(--space-13);
    text-align: center;
  }
  .shftd-v2 .mcol__empty .type-body {
    margin-top: var(--space-6);
  }
  .shftd-v2 .mcol__empty-link {
    color: var(--red-400);
  }

  .shftd-v2 .mcol.is-loading [data-collection-target] {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-out);
  }

  /* ---- Drawer ---- */
  /* Paint comes from basev2's shared .drawer-scrim recipe; this only wires
     the open/close fade. */
  .shftd-v2 .mcol__scrim {
    position: fixed;
    inset: 0;
    z-index: 230;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-3) var(--ease-out);
  }
  .mcol.is-drawer-open .mcol__scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .shftd-v2 .mcol__drawer {
    position: fixed;
    inset-block: 0;
    right: 0;
    z-index: 240;
    width: min(440px, 92vw);
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
    border-left: 1px solid var(--line-soft);
    overflow-x: hidden;
    translate: 102% 0;
    transition: translate var(--dur-3) var(--ease-out);
  }
  .mcol.is-drawer-open .mcol__drawer {
    translate: 0 0;
  }
  .shftd-v2 .mcol__drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex: none;
    height: 60px;
    padding-inline: var(--space-8) var(--space-5);
    border-bottom: 1px solid var(--line-hairline);
  }
  .shftd-v2 .mcol__drawer-title {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }
  .shftd-v2 .mcol__drawer-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .shftd-v2 .mcol__panel {
    display: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-8);
  }
  .mcol__drawer[data-open="filter"] [data-panel="filter"],
  .mcol__drawer[data-open="sort"] [data-panel="sort"],
  .mcol__drawer[data-open="quick"] [data-panel="quick"] {
    display: block;
  }
  .mcol__drawer[data-open="quick"] [data-drawer-foot] {
    display: none;
  }

  .shftd-v2 .mcol__group {
    margin: 0 0 var(--space-9);
    padding: 0;
    border: 0;
  }
  .shftd-v2 .mcol__group legend {
    margin-bottom: var(--space-6);
  }

  .shftd-v2 .mcol__checks li {
    border-bottom: 1px solid var(--line-hairline);
  }
  .shftd-v2 .mcol__check {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-block: 12px;
    cursor: pointer;
  }
  .shftd-v2 .mcol__check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .shftd-v2 .mcol__check-box {
    width: 16px;
    height: 16px;
    flex: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    background: transparent;
    transition: background var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .mcol__check input:checked + .mcol__check-box {
    background: var(--red-500) var(--icon-check) center / 12px no-repeat;
    border-color: var(--red-500);
  }
  .shftd-v2 .mcol__check input:focus-visible + .mcol__check-box {
    box-shadow: var(--ring-focus);
  }
  .shftd-v2 .mcol__check-swatch {
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: var(--r-xs);
    background: var(--sw, var(--surface-raised));
    box-shadow: inset 0 0 0 1px oklch(0.99 0 0 / 0.18);
  }
  .shftd-v2 .mcol__check-name {
    flex: 1;
    min-width: 0;
    font: var(--type-body);
    color: var(--text-primary);
  }
  .shftd-v2 .mcol__check-count {
    flex: none;
  }
  .shftd-v2 .mcol__check.is-disabled {
    opacity: 0.35;
    cursor: default;
  }

  .shftd-v2 .mcol__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .shftd-v2 .mcol__size {
    cursor: pointer;
  }
  .shftd-v2 .mcol__size input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .shftd-v2 .mcol__size span {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 40px;
    padding-inline: var(--space-5);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    transition:
      color var(--dur-1) var(--ease-out),
      border-color var(--dur-1) var(--ease-out),
      background var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .mcol__size input:checked + span {
    background: var(--red-500);
    border-color: var(--red-500);
    color: var(--n-0);
  }
  .shftd-v2 .mcol__size input:focus-visible + span {
    box-shadow: var(--ring-focus);
  }
  .shftd-v2 .mcol__size.is-disabled {
    opacity: 0.35;
    cursor: default;
  }

  .shftd-v2 .mcol__range {
    display: flex;
    align-items: flex-end;
    gap: var(--space-5);
  }
  .shftd-v2 .mcol__range-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .shftd-v2 .mcol__range-field input {
    height: 42px;
    width: 100%;
    padding-inline: var(--space-5);
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font: var(--type-mono);
  }
  .shftd-v2 .mcol__range-sep {
    padding-bottom: 12px;
    color: var(--text-muted);
  }

  .shftd-v2 .mcol__radio {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-block: 13px;
    border-bottom: 1px solid var(--line-hairline);
    cursor: pointer;
  }
  .shftd-v2 .mcol__radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .shftd-v2 .mcol__radio-dot {
    width: 16px;
    height: 16px;
    flex: none;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  .shftd-v2 .mcol__radio input:checked + .mcol__radio-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red-500);
  }
  .shftd-v2 .mcol__radio input:focus-visible + .mcol__radio-dot {
    box-shadow: var(--ring-focus);
  }
  .shftd-v2 .mcol__radio-name {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-primary);
  }

  /* Quick-view panel (filled by JS): stripped PDP — image, title/price,
     option groups, quantity, add to cart. */
  .shftd-v2 .mcol__qv-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--r-md);
    background: var(--n-0);
  }
  .shftd-v2 .mcol__qv-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
    margin-block: var(--space-7) var(--space-8);
  }
  .shftd-v2 .mcol__qv-title {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--n-0);
    min-width: 0;
  }
  .shftd-v2 .mcol__qv-opt {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 40px;
    padding-inline: var(--space-5);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    transition:
      color var(--dur-1) var(--ease-out),
      border-color var(--dur-1) var(--ease-out),
      background var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .mcol__qv-opt:hover {
    border-color: var(--line-strong);
  }
  .shftd-v2 .mcol__qv-opt.is-active {
    background: var(--red-500);
    border-color: var(--red-500);
    color: var(--n-0);
  }
  .shftd-v2 .mcol__qty {
    display: flex;
    align-items: stretch;
    width: max-content;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .shftd-v2 .mcol__qty button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--n-0);
    font-size: 16px;
  }
  .shftd-v2 .mcol__qty button:hover {
    background: oklch(0.99 0 0 / 0.06);
  }
  .shftd-v2 .mcol__qty input {
    width: 56px;
    text-align: center;
    background: none;
    border: 0;
    border-inline: 1px solid var(--line-hairline);
    color: var(--n-0);
    font: var(--type-mono);
    -moz-appearance: textfield;
  }
  .shftd-v2 .mcol__qty input::-webkit-outer-spin-button,
  .shftd-v2 .mcol__qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  .shftd-v2 .mcol__qv-atc {
    margin-top: var(--space-4);
  }
  .shftd-v2 .mcol__qv-atc.is-added {
    background: var(--success);
    color: var(--n-1000);
    box-shadow: none;
  }

  .shftd-v2 .mcol__drawer-foot {
    display: flex;
    gap: var(--space-4);
    flex: none;
    padding: var(--space-6);
    border-top: 1px solid var(--line-hairline);
  }
  .shftd-v2 .mcol__drawer-foot .btn {
    flex: 1;
    min-width: 0;
    padding-inline: var(--space-5);
    font-size: 11px;
  }

  /* ---- Responsive ---- */
  @media (max-width: 749px) {
    .shftd-v2 .mcol__chips,
    .shftd-v2 .mcol__count {
      display: none;
    }
    .shftd-v2 .mcol__tbtn--sort {
      margin-left: auto;
      min-width: 0;
    }
    .shftd-v2 .mcol__tbtn--sort b {
      max-width: 34vw;
    }
    .shftd-v2 .mcol__bar-in {
      overflow-x: auto;
      scrollbar-width: none;
    }
    .shftd-v2 .mcol__bar-in::-webkit-scrollbar {
      display: none;
    }
  }
/* END_SECTION:main-collection-grid */

/* START_SECTION:main-page-v2 (INDEX:48) */
/* Paints the token surface like every v2 section. It used to stay
     transparent over the v1 body's black, but a transparent root can't
     follow the light theme — the dark v1 body would show through under
     light-flipped ink. */
  .shftd-v2.mainpage-v2 {
    background: var(--surface-page);
  }

  .mainpage-v2__in {
    max-width: var(--measure, none);
  }

  /*
   A capped measure left-aligned inside the 1280 grid leaves a void the width
   of the column itself; centring it is what makes the page read as designed.
*/
  .mainpage-v2--al-center .mainpage-v2__in {
    margin-inline: auto;
  }
  .mainpage-v2--al-left .mainpage-v2__in {
    margin-inline: 0;
  }
  .mainpage-v2--prose {
    --measure: var(--page-measure, var(--max-prose));
  }
  .mainpage-v2--narrow {
    --measure: none;
  }

  /* Breadcrumb — 52px rule above the page head. */
  .mainpage-v2__crumb {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 52px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line-hairline);
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .mainpage-v2__crumb a {
    color: var(--text-secondary);
    text-decoration: none;
  }
  .mainpage-v2__crumb a:hover {
    color: var(--red-400);
  }
  .mainpage-v2__crumb i {
    width: 3px;
    height: 3px;
    background: var(--red-500);
    flex: none;
  }

  .mainpage-v2__head .eyebrow {
    display: block;
    margin-bottom: var(--space-5);
  }

  .mainpage-v2__title {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: var(--weight-black);
    line-height: 0.98;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    text-wrap: balance;
  }
  .mainpage-v2__title--s {
    font-size: clamp(28px, 3.4vw, 40px);
  }
  .mainpage-v2__title--m {
    font-size: clamp(34px, 4.4vw, 54px);
  }
  .mainpage-v2__title--l {
    font-size: clamp(40px, 6vw, 76px);
    letter-spacing: -0.03em;
  }

  .mainpage-v2__rule {
    margin-top: var(--space-8);
  }


  /*
   The head row and the toc own the space below them, so the prose block never
   needs a top margin of its own.
*/
  .mainpage-v2__head + .prose-v2,
  .mainpage-v2__rule + .prose-v2,
  .mainpage-v2__toc + .prose-v2 {
    margin-top: var(--space-10);
  }


  /*
   --- Two-column layout --------------------------------------------------
   Centered keeps everything in one measure and lets the sidebar stack above
   the content. Sidebar splits the row and pins the nav while the body
   scrolls past it.
*/
  .mainpage-v2--layout-sidebar .mainpage-v2__in {
    max-width: none;
  }
  .mainpage-v2--layout-sidebar .mainpage-v2__body {
    --prose-measure: var(--measure, none);
  }
  /* The measure is centred inside its column, not flushed to the divider. */
  .mainpage-v2--layout-sidebar .prose-v2 {
    margin-inline: auto;
  }
  @media (min-width: 990px) {
    .mainpage-v2--layout-sidebar .mainpage-v2__cols {
      display: grid;
      grid-template-columns: var(--side-w, 240px) minmax(0, 1fr);
      gap: var(--space-12);
      align-items: start;
    }
    .mainpage-v2--layout-sidebar.mainpage-v2--side-right .mainpage-v2__cols {
      grid-template-columns: minmax(0, 1fr) var(--side-w, 240px);
    }
    .mainpage-v2--layout-sidebar.mainpage-v2--side-right .mainpage-v2__side {
      order: 2;
    }
    /* sticky needs a non-stretched grid item, hence align-items: start above */
    .mainpage-v2--layout-sidebar .mainpage-v2__side {
      position: sticky;
      top: 88px;
      padding: 44px 36px 56px 0;
    }
    .mainpage-v2--layout-sidebar.mainpage-v2--side-right .mainpage-v2__side {
      padding: 44px 0 56px 36px;
    }
    .mainpage-v2--layout-sidebar .mainpage-v2__body {
      border-left: 1px solid var(--line-hairline);
      padding-left: var(--space-12);
    }
    .mainpage-v2--layout-sidebar.mainpage-v2--side-right .mainpage-v2__body {
      border-left: 0;
      border-right: 1px solid var(--line-hairline);
      padding-left: 0;
      padding-right: var(--space-12);
    }
  }

  /* Secondary nav under the table of contents */
  .mainpage-v2__side {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .mainpage-v2__more {
    display: block;
  }
  .mainpage-v2__toc + .mainpage-v2__more {
    padding-top: 26px;
    border-top: 1px solid var(--line-hairline);
  }
  .mainpage-v2__more-title {
    margin-bottom: var(--space-5);
  }
  .mainpage-v2__more-list li + li {
    margin-top: var(--space-5);
  }
  .mainpage-v2__more-list a {
    font-family: var(--font-display);
    font-variation-settings: "wdth" 112;
    font-weight: var(--weight-bold);
    font-size: 12px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
  }
  .mainpage-v2__more-list a:hover,
  .mainpage-v2__more-list a[aria-current="page"] {
    color: var(--red-400);
  }

  .mainpage-v2__toc {
    display: block;
    margin-top: var(--space-10);
    padding: var(--space-7);
    border: 1px solid var(--line-hairline);
    border-radius: var(--r-md);
    background: var(--surface-card);
  }
  /* In the sidebar the toc is the column itself — no card, no numerals. */
  @media (min-width: 990px) {
    .mainpage-v2--layout-sidebar .mainpage-v2__toc {
      margin-top: 0;
      padding: 0;
      border: 0;
      background: none;
    }
    .mainpage-v2--layout-sidebar .mainpage-v2__toc-list li {
      padding-left: 0;
    }
    .mainpage-v2--layout-sidebar .mainpage-v2__toc-list li::before {
      content: none;
    }
  }
  .mainpage-v2__toc[hidden] {
    display: none;
  }
  .mainpage-v2__toc-title {
    margin-bottom: var(--space-5);
  }
  .mainpage-v2__toc-list {
    counter-reset: toc-item;
  }
  .mainpage-v2__toc-list li {
    counter-increment: toc-item;
    position: relative;
    padding-left: var(--space-8);
  }
  .mainpage-v2__toc-list li + li {
    margin-top: var(--space-4);
  }
  .mainpage-v2__toc-list li::before {
    content: counter(toc-item, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.2em;
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wide);
    color: var(--red-400);
  }
  .mainpage-v2__toc-list a {
    font-family: var(--font-display);
    font-variation-settings: "wdth" 112;
    font-weight: var(--weight-bold);
    font-size: 13px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    text-decoration: none;
  }
  .mainpage-v2__toc-list a:hover,
  .mainpage-v2__toc-list a.is-active {
    color: var(--red-400);
  }
  .mainpage-v2__toc-list a {
    color: var(--text-secondary);
    transition: color var(--dur-1) var(--ease-out);
  }

  /* Anchor jumps land under any sticky header rather than behind it. */
  .mainpage-v2 .prose-v2 h2 {
    scroll-margin-top: var(--space-14);
  }
/* END_SECTION:main-page-v2 */

/* START_SECTION:main-product (INDEX:50) */
.shftd-v2.pdp {
    display: block;
  }

  .shftd-v2 .pdp__crumb {
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--line-hairline);
    margin-bottom: var(--space-8);
  }
  /* One line, always: the trail never wraps. The earlier crumbs keep their
     full labels; the current page's title is the one that gives way, fading
     out through an ellipsis. overflow on the list is the backstop for a
     pathologically long collection name. */
  .shftd-v2 .pdp__crumb-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    overflow: hidden;
  }
  .shftd-v2 .pdp__crumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 0 0 auto;
  }
  .shftd-v2 .pdp__crumb-item:last-child {
    flex: 0 1 auto;
    min-width: 0;
  }
  .shftd-v2 .pdp__crumb-item:last-child .pdp__crumb-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shftd-v2 .pdp__crumb-item + .pdp__crumb-item::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    background: var(--line-accent);
  }
  .shftd-v2 .pdp__crumb-link {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-secondary);
  }
  .shftd-v2 a.pdp__crumb-link:hover {
    color: var(--text-primary);
  }

  .shftd-v2 .pdp__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-11);
    align-items: start;
  }

  /* ---- Gallery ---- */
  .shftd-v2 .pdp__gallery {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--space-5);
    align-self: start;
  }
  .shftd-v2 .pdp__gallery--carousel,
  .shftd-v2 .pdp__gallery:not(:has(.pdp__thumbs)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .shftd-v2 .pdp__thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    max-height: 640px;
    scrollbar-width: none;
  }
  .shftd-v2 .pdp__thumbs::-webkit-scrollbar {
    display: none;
  }
  .shftd-v2 .pdp__thumb {
    padding: 0;
    /* flex: none, or the rail's max-height squashes every thumb (flex items
       shrink before a scroll container scrolls) and the 4:5 ratio collapses
       into landscape slivers on media-heavy products. */
    flex: 0 0 auto;
    border: 1px solid var(--line-hairline);
    background: none;
    cursor: pointer;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    transition: border-color var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .pdp__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .shftd-v2 .pdp__thumb.is-active {
    border-color: var(--line-accent);
  }

  .shftd-v2 .pdp__viewport {
    position: relative;
    min-width: 0;
  }
  .shftd-v2 .pdp__pill {
    position: absolute;
    top: var(--space-6);
    left: var(--space-6);
    z-index: 2;
  }
  .shftd-v2 .pdp__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .shftd-v2 .pdp__track::-webkit-scrollbar {
    display: none;
  }
  .shftd-v2 .pdp__media {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
    background: var(--surface-media);
    cursor: zoom-in;
  }
  .shftd-v2 .pdp__gallery:not([data-zoom]) .pdp__media {
    cursor: default;
  }
  .shftd-v2 .pdp__media img,
  .shftd-v2 .pdp__media video,
  .shftd-v2 .pdp__media model-viewer,
  .shftd-v2 .pdp__media iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .shftd-v2 .pdp__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
    background: oklch(0 0 0 / 0.6);
    color: oklch(0.99 0 0);
  }
  .shftd-v2 .pdp__nav--prev {
    left: var(--space-5);
  }
  .shftd-v2 .pdp__nav--next {
    right: var(--space-5);
  }

  .shftd-v2 .pdp__zoom {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    background: oklch(0 0 0 / 0.92);
    overflow: auto;
    cursor: zoom-out;
  }
  .shftd-v2 .pdp__zoom[hidden] {
    display: none;
  }
  .shftd-v2 .pdp__zoom-img {
    max-width: min(92vw, 1400px);
    height: auto;
  }
  .shftd-v2 .pdp__zoom-close {
    position: fixed;
    top: var(--space-6);
    right: var(--space-6);
    background: oklch(0 0 0 / 0.6);
    color: oklch(0.99 0 0);
  }

  /* ---- Buy column ---- */
  .shftd-v2 .pdp__buy {
    display: grid;
    gap: var(--space-6);
    align-content: start;
    min-width: 0;
  }
  @media (min-width: 750px) {
    /* The information card is the sticky side on desktop */
    .shftd-v2 .pdp__buy {
      position: sticky;
      top: calc(var(--pdp-top, 64px) + var(--space-8));
    }
    /* Grid layout: media stacked in a two-column grid, first image full width */
    .shftd-v2 .pdp__gallery--grid .pdp__track {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2px;
      overflow: visible;
      scroll-snap-type: none;
    }
    .shftd-v2 .pdp__gallery--grid .pdp__media {
      flex: none;
    }
    .shftd-v2 .pdp__gallery--grid .pdp__media:first-child {
      grid-column: 1 / -1;
    }
  }

  .shftd-v2 .pdp__text--eyebrow {
    margin: 0;
    font: var(--type-eyebrow);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-accent);
  }
  .shftd-v2 .pdp__text--lbl {
    margin: 0;
    font: var(--type-label);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .shftd-v2 .pdp__text--body {
    margin: 0;
    font: var(--type-body);
    color: var(--text-secondary);
  }

  .shftd-v2 .pdp__title {
    margin: 0;
  }

  .shftd-v2 .pdp__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
  }
  .shftd-v2 .pdp__price .price {
    font: 500 18px/1 var(--font-mono);
    letter-spacing: var(--track-wide);
    color: var(--text-primary);
  }
  .shftd-v2 .pdp__price .price--promo {
    color: var(--text-accent);
  }
  .shftd-v2 .pdp__price .price--compare {
    font: var(--type-mono);
    color: var(--text-muted);
  }

  .shftd-v2 .pdp__short {
    margin: 0;
    font: var(--type-body);
    color: var(--text-secondary);
    max-width: 52ch;
  }

  /* The red left edge is the capsule's signature and always stays; the
     hairline frame is opt-in (Divider blocks cover separation). */
  .shftd-v2 .pdp__capsule {
    border-left: 2px solid var(--line-accent);
    background: var(--surface-card);
  }
  .shftd-v2 .pdp__capsule--bordered {
    border: 1px solid var(--line-hairline);
    border-left: 2px solid var(--line-accent);
  }
  .shftd-v2 .pdp__capsule-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-7);
  }
  .shftd-v2 .pdp__capsule-count {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
  }
  .shftd-v2 .pdp__capsule-count b {
    font: 500 26px/1 var(--font-mono);
    color: var(--text-primary);
  }
  .shftd-v2 .pdp__capsule-lbl {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .shftd-v2 .pdp__capsule-badges {
    display: flex;
    gap: var(--space-3);
    flex: 0 0 auto;
  }
  .shftd-v2 .pdp__capsule-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-7);
    border-top: 1px solid var(--line-hairline);
  }
  .shftd-v2 .pdp__capsule-meta {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .shftd-v2 .pdp__opt {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: var(--space-4);
  }
  .shftd-v2 .pdp__picker {
    display: grid;
    gap: var(--space-6);
  }
  .shftd-v2 .pdp__opt-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
  }
  .shftd-v2 .pdp__opt-value {
    color: var(--text-primary);
  }
  /* Rendered as an <a> (page fallback) or a <button> (metafield-driven
     drawer) — the resets keep both identical. */
  .shftd-v2 .pdp__sizeguide {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
  }
  .shftd-v2 .pdp__sizeguide:hover {
    color: var(--text-primary);
  }
  .shftd-v2 .pdp__opt-values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .shftd-v2 .pdp__lowstock,
  .shftd-v2 .pdp__stock {
    margin: 0;
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-accent);
  }
  .shftd-v2 .pdp__lowstock::before,
  .shftd-v2 .pdp__stock::before {
    content: "■ ";
    font-size: 8px;
    vertical-align: 1px;
  }

  .shftd-v2 .pdp__form {
    display: grid;
    gap: var(--space-4);
  }
  .shftd-v2 .pdp__buy-row {
    display: flex;
    gap: var(--space-4);
  }
  .shftd-v2 .pdp__atc {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }
  .shftd-v2 .pdp__atc.is-busy {
    opacity: 0.7;
    pointer-events: none;
  }
  .shftd-v2 .pdp__atc.is-added {
    background: var(--ok, #1d7a3d);
  }
  .shftd-v2 .pdp__form-error {
    margin: 0;
    font: var(--type-body-sm);
    color: var(--text-accent);
  }

  /* Dynamic checkout (Shop Pay etc.) and the add-to-cart share ONE height.
     Branded wallet buttons render at their own 48px block size we can't grow,
     so the whole buy row aligns down to it instead. */
  .shftd-v2 .pdp__form {
    --shopify-accelerated-checkout-button-block-size: 48px;
    --shopify-accelerated-checkout-button-border-radius: var(--r-sm);
  }
  .shftd-v2 .pdp__atc.btn--lg,
  .shftd-v2 .pdp__stickybar-btn.btn--lg {
    height: 48px;
  }
  .shftd-v2 .pdp__form .shopify-payment-button {
    width: 100%;
  }
  .shftd-v2 .pdp__form .shopify-payment-button__button {
    min-height: 48px;
    border-radius: var(--r-sm);
  }
  .shftd-v2 .pdp__form .shopify-payment-button__button--unbranded {
    background: var(--surface-inverse);
    color: var(--text-inverse);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
  }
  .shftd-v2 .pdp__form .shopify-payment-button__more-options {
    color: var(--text-secondary);
  }

  /* Band height comes from the block's own setting (min-height, so the text
     can never be clipped); the type does NOT scale with it. */
  .shftd-v2 .pdp-tick--bordered {
    border-block: 1px solid var(--line-hairline);
  }
  .shftd-v2 .pdp-tick {
    display: flex;
    align-items: center;
    min-height: var(--tick-h, 32px);
    overflow: hidden;
    background: var(--surface-sunken);
    padding-block: var(--space-4);
    /* Content dissolves at both edges instead of hitting them */
    mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
  }
  .shftd-v2 .pdp-tick__track {
    display: flex;
    width: max-content;
    animation: shftd-marquee var(--tick-dur, 22s) linear infinite;
  }
  .shftd-v2 .pdp-tick__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .shftd-v2 .pdp-tick__item {
    font: var(--weight-bold) 12px / 1.2 var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
  }
  .shftd-v2 .pdp-tick__item--red,
  .shftd-v2 .pdp-tick__count {
    color: var(--text-accent);
  }
  /* Same Archivo bold as the rest of the strip — declared explicitly so
     nothing can diverge it — with tabular figures so the ticking digits
     hold a stable width and match the caps' visual weight. */
  .shftd-v2 .pdp-tick__count {
    font: inherit;
    letter-spacing: inherit;
    font-variant-numeric: tabular-nums;
  }
  .shftd-v2 .pdp-tick__sep {
    color: var(--text-muted);
    font-size: 8px;
    margin-inline: var(--space-6);
  }

  /* Icon row: equal-width centred cells, icon over micro-caps label, with
     hairline dividers BETWEEN cells only. The cells carry the vertical
     padding (not the row), so the dividers run the full band height. */
  .shftd-v2 .pdp-usp-row {
    display: flex;
  }
  .shftd-v2 .pdp-usp-row--bordered {
    border-block: 1px solid var(--line-hairline);
  }
  .shftd-v2 .pdp-usp-row__cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-7) var(--space-4);
    text-align: center;
  }
  .shftd-v2 .pdp-usp-row__cell + .pdp-usp-row__cell {
    border-inline-start: 1px solid var(--line-hairline);
  }
  .shftd-v2 .pdp-usp-row__cell .ico {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
  }
  .shftd-v2 .pdp-usp-row__text {
    color: var(--text-secondary);
  }

  /* Divider block — basev2's .rule as a placeable block. The strength
     variants are the system's three hairlines, nothing else. */
  .shftd-v2 .pdp__divider .rule {
    display: block;
  }
  .shftd-v2 .pdp__divider--hairline .rule {
    background: var(--line-hairline);
  }
  .shftd-v2 .pdp__divider--soft .rule {
    background: var(--line-soft);
  }
  .shftd-v2 .pdp__divider--strong .rule {
    background: var(--line-strong);
  }

  .shftd-v2 .pdp-acc-wrap {
    display: block;
  }
  /* Consecutive accordions form one contiguous group: swallow the buy-column
     gap so a closed item has the same space below its head as above it. */
  .shftd-v2 .pdp-acc-wrap + .pdp-acc-wrap {
    margin-top: calc(var(--space-6) * -1);
  }
  .shftd-v2 .pdp-acc {
    border-top: 1px solid var(--line-hairline);
  }
  .shftd-v2 .pdp-acc-wrap:last-of-type .pdp-acc {
    border-bottom: 1px solid var(--line-hairline);
  }
  .shftd-v2 .pdp-acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-6);
    cursor: pointer;
    list-style: none;
  }
  .shftd-v2 .pdp-acc__head::-webkit-details-marker {
    display: none;
  }
  .shftd-v2 .pdp-acc__title {
    font: var(--type-label);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-primary);
  }
  .shftd-v2 .pdp-acc__icon {
    position: relative;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
  }
  .shftd-v2 .pdp-acc__icon::before,
  .shftd-v2 .pdp-acc__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--text-secondary);
  }
  .shftd-v2 .pdp-acc__icon::before {
    width: 12px;
    height: 1px;
  }
  .shftd-v2 .pdp-acc__icon::after {
    width: 1px;
    height: 12px;
    transition: opacity var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .pdp-acc[open] .pdp-acc__icon::after {
    opacity: 0;
  }
  .shftd-v2 .pdp-acc__body {
    padding-bottom: var(--space-7);
    font: var(--type-body-sm);
    color: var(--text-secondary);
    max-width: 60ch;
    overflow: hidden;
  }
  .shftd-v2 .pdp-acc__body p {
    margin: 0 0 var(--space-4);
  }

  .shftd-v2 .pdp__facts {
    display: grid;
  }
  .shftd-v2 .pdp__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--line-hairline);
  }
  .shftd-v2 .pdp__fact-value {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wide);
    color: var(--text-primary);
  }

  /* ---- Sticky ATC bar (all viewports): shows while the buy box is off
     screen — the IO in this section's JS toggles .is-active ---- */
  .shftd-v2 .pdp__stickybar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
    background: var(--surface-page);
    border-top: 1px solid var(--line-soft);
    translate: 0 100%;
    transition: translate var(--dur-3) var(--ease-out);
  }
  .shftd-v2 .pdp__stickybar.is-active {
    translate: 0 0;
  }
  /* Selected-variant thumb + product name (desktop only) */
  .shftd-v2 .pdp__stickybar-prod {
    display: none;
  }
  @media (min-width: 750px) {
    .shftd-v2 .pdp__stickybar-prod {
      display: flex;
      align-items: center;
      gap: var(--space-5);
      min-width: 0;
    }
  }
  .shftd-v2 .pdp__stickybar-thumb {
    flex: 0 0 auto;
    width: 40px;
    aspect-ratio: 1;
    background: var(--surface-media);
    overflow: hidden;
  }
  .shftd-v2 .pdp__stickybar-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .shftd-v2 .pdp__stickybar-title {
    font: 700 13px/1.2 var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shftd-v2 .pdp__stickybar-btn {
    flex: 0 1 420px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }

  @media (max-width: 749px) {
    .shftd-v2 .pdp__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
    }
    /* Gap above the gallery mirrors the section's side gutter exactly */
    .shftd-v2 .pdp__crumb {
      margin-bottom: var(--gutter-page);
    }
    .shftd-v2 .pdp__gallery {
      position: static;
      grid-template-columns: minmax(0, 1fr);
    }
    .shftd-v2 .pdp__thumbs {
      display: none;
    }
    .shftd-v2 .pdp__buy-row {
      flex-wrap: wrap;
    }
    .shftd-v2 .pdp__atc {
      flex: 1 1 100%;
      order: 2;
    }
    .shftd-v2 .pdp__stickybar-btn {
      flex: 1;
    }

    .shftd-v2 .pdp__stickybar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 90;
      display: flex;
      align-items: center;
      gap: var(--space-5);
      padding: var(--space-4) var(--space-6);
      background: var(--surface-page);
      border-top: 1px solid var(--line-soft);
      translate: 0 100%;
      transition: translate var(--dur-3) var(--ease-out);
    }
    .shftd-v2 .pdp__stickybar.is-active {
      translate: 0 0;
    }
    .shftd-v2 .pdp__stickybar-meta {
      display: grid;
      gap: var(--space-1);
      flex: 0 0 auto;
    }
    .shftd-v2 .pdp__stickybar-meta .price {
      font: var(--type-mono);
      color: var(--text-primary);
    }
    .shftd-v2 .pdp__stickybar-entries {
      font: var(--type-mono-sm);
      letter-spacing: var(--track-wide);
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .shftd-v2 .pdp__stickybar-btn {
      flex: 1;
    }
  }

  /* --- Boost upsell block --------------------------------------------------
     A framed tier card in the buy box. Metals mean tier identity, so each
     style sets a hairline tint, a faint top wash and one gradient used as
     TEXT (highlight + price) — never a filled plate. The + / check toggle is
     the add-ons strip's interaction on the same .iconbtn recipe. */
  /* Square corners on purpose: the boost card sits flush in the buy box and
     the tier plate look reads sharpest with no radius at all. --boost-ink is
     the flat tier tone the cap icon paints with (an .ico mask can't take a
     gradient); the gradient itself goes on text only. */
  .shftd-v2 .pdp-boost {
    --boost-metal: var(--metal-gold);
    --boost-ink: oklch(0.72 0.11 85);
    --boost-line: oklch(0.62 0.09 85 / 0.5);
    --boost-wash: oklch(0.62 0.09 85 / 0.08);
    display: block;
    border: 1px solid var(--boost-line);
    background:
      linear-gradient(180deg, var(--boost-wash), oklch(0 0 0 / 0) 70%),
      var(--surface-card);
  }
  .shftd-v2 .pdp-boost--platinum {
    --boost-metal: var(--metal-platinum);
    --boost-ink: oklch(0.8 0.01 260);
    --boost-line: oklch(0.78 0.01 260 / 0.4);
    --boost-wash: oklch(0.78 0.01 260 / 0.07);
  }
  .shftd-v2 .pdp-boost--diamond {
    --boost-metal: var(--metal-diamond);
    --boost-ink: oklch(0.82 0.05 220);
    --boost-line: oklch(0.82 0.05 220 / 0.4);
    --boost-wash: oklch(0.82 0.05 220 / 0.07);
  }
  .shftd-v2 .pdp-boost--steel {
    --boost-metal: var(--metal-steel);
    --boost-ink: oklch(0.65 0.01 260);
    --boost-line: oklch(0.6 0.01 260 / 0.45);
    --boost-wash: oklch(0.6 0.01 260 / 0.07);
  }

  .shftd-v2 .pdp-boost__cap {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--boost-line);
    color: var(--boost-ink);
  }
  .shftd-v2 .pdp-boost__cap .ico {
    width: 14px;
    height: 14px;
  }
  .shftd-v2 .pdp-boost__cap-text {
    background-image: var(--boost-metal);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .shftd-v2 .pdp-boost__row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
    min-width: 0;
  }
  .shftd-v2 .pdp-boost__thumb {
    flex: 0 0 auto;
    width: 64px;
    aspect-ratio: 1;
    overflow: hidden;
  }
  .shftd-v2 .pdp-boost__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .shftd-v2 .pdp-boost__info {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
  }
  .shftd-v2 .pdp-boost__title {
    font: 700 15px/1.2 var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Gradient text, never a filled plate: the metal IS the tier identity. */
  .shftd-v2 .pdp-boost__hl,
  .shftd-v2 .pdp-boost__price {
    font: var(--type-mono);
    letter-spacing: var(--track-wide);
    background-image: var(--boost-metal);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .shftd-v2 .pdp-boost__sub {
    font: var(--type-body-sm);
    color: var(--text-muted);
  }
  .shftd-v2 .pdp-boost__right {
    display: grid;
    gap: var(--space-4);
    justify-items: end;
    flex: 0 0 auto;
  }

  .shftd-v2 .pdp-boost__add {
    border: 1px solid var(--boost-line);
    background: transparent;
    color: var(--text-primary);
  }
  /* Hover and armed both fill with the tier metal — the button becomes the
     gold (or platinum/diamond/steel) plate, dark ink on top. Armed swaps the
     + for the check on the same plate. */
  .shftd-v2 .pdp-boost__add:hover,
  .shftd-v2 .pdp-boost__add.is-selected {
    background: var(--boost-metal);
    border-color: transparent;
    color: oklch(0.1 0.004 30);
  }
  .shftd-v2 .pdp-boost__add .pdp-boost__ico-check {
    display: none;
  }
  .shftd-v2 .pdp-boost__add.is-selected .pdp-boost__ico-plus {
    display: none;
  }
  .shftd-v2 .pdp-boost__add.is-selected .pdp-boost__ico-check {
    display: block;
  }

  @media (max-width: 749px) {
    .shftd-v2 .pdp-boost__row {
      gap: var(--space-5);
      padding: var(--space-5);
    }
    .shftd-v2 .pdp-boost__thumb {
      width: 52px;
    }
  }

  /* --- Entries progress block ---------------------------------------------
     Step slices divide by --grow alone (flex-basis 0), so the bar reads as
     the values' proportions. Blank steps never reach the DOM, so :last-child
     is the last DISPLAYED step — the one red element this block gets; the
     steps before it alternate dark/light grey. */
  .shftd-v2 .pdp-eprog {
    display: block;
  }
  .shftd-v2 .pdp-eprog__steps {
    display: flex;
    gap: 5px;
  }
  .shftd-v2 .pdp-eprog__step {
    display: flex;
    flex-direction: column;
    flex: var(--grow, 1) 1 0;
    min-width: 52px;
  }
  /* One tone per step, worn by BOTH the value and its bar slice, so the
     number always reads as a caption of the slice under it. n-600 (not
     n-700) for the odd steps: the value has to stay legible on the page
     surface at 18px. */
  .shftd-v2 .pdp-eprog__step:nth-child(odd) {
    --step-tone: var(--n-600);
  }
  .shftd-v2 .pdp-eprog__step:nth-child(even) {
    --step-tone: var(--n-400);
  }
  .shftd-v2 .pdp-eprog__step:last-child {
    --step-tone: var(--red-500);
  }
  .shftd-v2 .pdp-eprog__val {
    font: 500 18px/1.1 var(--font-mono);
    letter-spacing: var(--track-wide);
    color: var(--step-tone);
  }
  .shftd-v2 .pdp-eprog__lbl {
    margin-top: var(--space-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* margin-top auto pins every slice to one baseline even when a step has no
     label. Square ends, no radius. */
  .shftd-v2 .pdp-eprog__bar {
    display: block;
    margin-top: auto;
    padding-top: var(--space-4);
    height: 8px;
    box-sizing: content-box;
    background: linear-gradient(var(--step-tone), var(--step-tone)) bottom / 100% 8px no-repeat;
  }
  .shftd-v2 .pdp-eprog__total {
    margin: var(--space-8) 0 0;
    text-align: center;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: var(--weight-black);
    font-size: clamp(34px, 4.5vw, 64px);
    line-height: 0.95;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    color: var(--red-500);
    /* The one light here: a soft red halo on the number. The --glow-* tokens
       are box-shadows, so the text glow is restated as a text-shadow in the
       same hue. */
    text-shadow: 0 0 48px oklch(0.55 0.235 30 / 0.45);
  }
  .shftd-v2 .pdp-eprog__sub {
    margin: var(--space-5) 0 0;
    text-align: center;
  }
  @media (max-width: 749px) {
    .shftd-v2 .pdp-eprog__step {
      min-width: 40px;
    }
    .shftd-v2 .pdp-eprog__val {
      font-size: 14px;
    }
  }
/* END_SECTION:main-product */

/* START_SECTION:marquee-v2 (INDEX:53) */
.marquee-v2 {
    /* Merchant pixels from the Height settings. The text size is its OWN
       preset (--mq-fs, below) and never follows the height. The indirection
       through --band-h-d/-m exists because the inline values are
       element-level declarations, which no media query could override. */
    --band-h: var(--band-h-d, 72px);
    --band-bg: var(--surface-sunken);
    /* No-JS fallback; <shftd-marquee> overwrites it with width / px-per-second. */
    --marquee-dur: var(--dur-marquee, 25s);
    /* Never the `background` shorthand: it resets background-image and wipes
       the texture layered on this same element. */
    background-color: var(--band-bg);
    overflow: hidden;
  }
  /* Presets rebind the same custom properties the element already consumes, so
     preset and custom share one code path: the class sets the token, and the
     custom option instead sets it inline. `--bg-custom` / `--sepc-custom` /
     `--gridc-custom` deliberately declare nothing, leaving the inline value (or
     the base fallback, if the picker was left blank) to stand. */
  .marquee-v2--bg-page {
    --band-bg: var(--surface-page);
  }
  .marquee-v2--bg-card {
    --band-bg: var(--surface-card);
  }
  .marquee-v2--bg-raised {
    --band-bg: var(--surface-raised);
  }
  /* --red-900, not --red-500: a full-bleed band at THE red would own the whole
     page and break the one-red-element rule. */
  .marquee-v2--bg-red {
    --band-bg: var(--red-900);
  }

  .marquee-v2--sepc-dim {
    --sep-color: var(--n-700);
  }
  .marquee-v2--sepc-bright {
    --sep-color: var(--n-400);
  }
  .marquee-v2--sepc-red {
    --sep-color: var(--red-500);
  }


  /* Mobile height is its own setting rather than a scale of the desktop one: a
     tall band is a deliberate statement on a wide viewport and simply eats a
     phone screen, and the right small-screen height depends on the copy, not on
     a fixed ratio. */
  @media (max-width: 749px) {
    .marquee-v2 {
      --band-h: var(--band-h-m, 38px);
    }
  }

  .marquee-v2__in {
    overflow: hidden;
  }

  /* Linked items look exactly like plain ones — no hover treatment. Only the
     keyboard focus ring marks them out. */
  .marquee-v2__item--linked {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .marquee-v2__item--linked:focus-visible {
    outline: 1px solid var(--line-accent);
    outline-offset: 3px;
  }

  .marquee-v2__viewport {
    display: flex;
    align-items: center;
    min-height: var(--band-h);
    overflow: hidden;
    border-block: 1px solid var(--line-hairline);
  }

  .marquee-v2__track {
    display: flex;
    flex: 0 0 auto;
    width: max-content;
    animation: shftd-marquee var(--marquee-dur) linear infinite;
  }
  .marquee-v2--right .marquee-v2__track {
    animation-direction: reverse;
  }

  /* A hover speed of 0 gets this CSS-only path so it works before the
     component upgrades; JS handles every other speed. Hover is gated on real
     pointers so a tap never latches a touch device into a stopped band. */
  @media (hover: hover) and (pointer: fine) {
    .marquee-v2--hover-stop:hover .marquee-v2__track {
      animation-play-state: paused;
    }
  }
  .marquee-v2--hover-stop:focus-within .marquee-v2__track {
    animation-play-state: paused;
  }

  /* Floored at 100vw: the loop translates the track by -50% (one copy), so a
     seamless wrap needs EACH copy to be at least as wide as the viewport — at
     50vw a blank hole scrolled through once per cycle on short item lists.
     `space-around` spreads the slack instead of pooling it into one visible
     hole.

     The separators are their own flex children (`.marquee-v2__sep`), NOT an
     `::after` on the item: as part of the item's box, space-around's slack all
     landed after the separator and none before it, so the split sat hard
     against the item it trailed. As siblings they get slack on both sides. */
  .marquee-v2__copy {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-around;
    min-width: 100vw;
  }

  /* Text size is a preset (XL/L/M/S), fixed in px and independent of the
     band height — resizing the band never resizes the type. Tracking is
     --track-wide, not --track-widest — at these sizes the wider tracking
     reads as gaps, not as a strip. */
  .marquee-v2--fs-xl {
    --mq-fs: 52px;
    --mq-fs-m: 30px;
  }
  .marquee-v2--fs-l {
    --mq-fs: 36px;
    --mq-fs-m: 22px;
  }
  .marquee-v2--fs-m {
    --mq-fs: 24px;
    --mq-fs-m: 16px;
  }
  .marquee-v2--fs-s {
    --mq-fs: 16px;
    --mq-fs-m: 12px;
  }

  .marquee-v2__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    white-space: nowrap;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: var(--weight-black);
    font-size: var(--mq-fs, 36px);
    line-height: 1;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--n-0);
    transition: opacity var(--dur-1) var(--ease-out);
  }
  @media (max-width: 749px) {
    .marquee-v2__item {
      font-size: var(--mq-fs-m, 22px);
    }
  }

  /* Trails every item: the loop is infinite, so suppressing it on the last one
     would open a gap at the seam. Centred by equal margins on a standalone box
     rather than by the item's own padding. */
  .marquee-v2__sep {
    flex: 0 0 auto;
    margin-inline: var(--sep-gap, 24px);
    color: var(--sep-color, var(--n-600));
    font-family: var(--font-display);
    font-size: var(--mq-fs, 36px);
    font-weight: var(--weight-regular);
    line-height: 1;
    letter-spacing: normal;
    /* Optical centring: a glyph's ink is rarely centred in its advance width,
       so the box is trimmed to the ink and the halves stay equal. */
    text-align: center;
  }
  @media (max-width: 749px) {
    .marquee-v2__sep {
      margin-inline: var(--sep-gap-m, var(--sep-gap, 24px));
      font-size: var(--mq-fs-m, 22px);
    }
    .marquee-v2--sep-none .marquee-v2__sep {
      margin-inline: calc(var(--sep-gap-m, var(--sep-gap, 24px)) / 2);
    }
  }
  /* "None" renders an empty separator box that still spaces the items apart. */
  .marquee-v2--sep-none .marquee-v2__sep {
    margin-inline: calc(var(--sep-gap, 24px) / 2);
  }

  .marquee-v2__item--muted {
    color: var(--n-400);
  }
  .marquee-v2__item--red {
    color: var(--red-500);
  }
  /* --item-color is written inline per block. The fallback is the default
     white, so the item stays legible if the picker was left blank. Flat colour
     only, with no gradient clip, so it inherits down to the text and the clock
     without the metal path's `color: transparent`. */
  .marquee-v2__item--custom {
    color: var(--item-color, var(--n-0));
  }
  .marquee-v2__item--w-regular {
    font-weight: var(--weight-regular);
  }
  .marquee-v2__item--w-medium {
    font-weight: var(--weight-medium);
  }
  .marquee-v2__item--w-semibold {
    font-weight: var(--weight-semibold);
  }
  .marquee-v2__item--w-bold {
    font-weight: var(--weight-bold);
  }
  .marquee-v2__item--w-extrabold {
    font-weight: var(--weight-black);
  }

  /* The clock inherits the item's display type — same family, width, weight
     and tracking as the words around it, per the mockup. Tabular figures stop
     the digits jittering the item's width every second and shoving the track
     sideways. */
  .marquee-v2__clock {
    font-variant-numeric: tabular-nums;
  }

  /* Metals = tier identity. Gradient text, never a filled plate. */
  .marquee-v2__item--gold {
    --metal: var(--metal-gold);
  }
  .marquee-v2__item--platinum {
    --metal: var(--metal-platinum);
  }
  .marquee-v2__item--diamond {
    --metal: var(--metal-diamond);
  }
  .marquee-v2__item--gold .marquee-v2__text,
  .marquee-v2__item--gold .marquee-v2__clock,
  .marquee-v2__item--platinum .marquee-v2__text,
  .marquee-v2__item--platinum .marquee-v2__clock,
  .marquee-v2__item--diamond .marquee-v2__text,
  .marquee-v2__item--diamond .marquee-v2__clock {
    background-image: var(--metal);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* Two classes deep to outrank `.marquee-v2__item`'s own `display` without
     !important. The separator now being a sibling, a hidden item has to take its
     trailing separator with it or the band collects orphaned dots. */
  .marquee-v2__item.is-ended-hidden,
  .marquee-v2__item.is-ended-hidden + .marquee-v2__sep,
  .marquee-v2.is-ended-hidden {
    display: none;
  }

  /* An ended countdown shows its ended text ALONE. Prefix and suffix are both
     dropped, because they were written to wrap a live number ("Boost ends in
     02:18:57 left") and read as fragments once the clock is gone. */
  .marquee-v2__item.is-ended .marquee-v2__text {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee-v2__track {
      animation: none;
    }
    .marquee-v2__copy:nth-child(2) {
      display: none;
    }
  }
/* END_SECTION:marquee-v2 */

/* START_SECTION:motorcycle-gallery (INDEX:54) */
.motorcycle-gallery {
  --accent-color-rgb: {{ section.settings.accent_color | color_to_rgb | default: settings.accent_color | color_to_rgb | default: '230, 0, 0' }};
  position: relative;
  padding: 60px 0;
  background-color: #000000;
  color: #ffffff;
  overflow: hidden;
  margin-top: -1px;
}

.motorcycle-gallery__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.motorcycle-gallery__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(var(--accent-color-rgb), 0.08), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(var(--accent-color-rgb), 0.06), transparent 45%);
  opacity: 0.8;
}

.motorcycle-gallery__noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
}

.motorcycle-gallery__header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.motorcycle-gallery__title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.motorcycle-gallery__title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: var(--accent-color);
}

.motorcycle-gallery__subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
}

.motorcycle-gallery__content {
  position: relative;
  z-index: 1;
}

.motorcycle-gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 25px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.motorcycle-gallery__main-container {
  display: flex;
  align-items: center;
  position: relative;
  gap: 15px;
}

.motorcycle-gallery__main {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.5), rgba(20, 20, 20, 0.5));
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 
              0 1px 3px rgba(255, 255, 255, 0.05) inset, 
              0 -1px 2px rgba(0, 0, 0, 0.2) inset;
  flex: 1;
}

.motorcycle-gallery__main-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 66.67%; /* 3:2 Aspect Ratio */
  overflow: hidden;
}

.motorcycle-gallery__main-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.motorcycle-gallery__main-image-wrapper:hover .motorcycle-gallery__main-image {
  transform: scale(1.02);
}

.motorcycle-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7) 50%, transparent);
  color: #ffffff;
  font-size: 14px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.motorcycle-gallery__main-image-wrapper:hover .motorcycle-gallery__caption {
  opacity: 1;
  transform: translateY(0);
}

.motorcycle-gallery__thumbnails-container {
  overflow: hidden;
  margin-top: 15px;
  position: relative;
}

.motorcycle-gallery__thumbnails {
  display: flex;
  gap: 15px;
  transition: transform 0.3s ease;
  will-change: transform;
}

.motorcycle-gallery__thumbnail-wrapper {
  flex: 0 0 120px;
  position: relative;
  padding-top: 90px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(40, 40, 40, 0.4), rgba(20, 20, 20, 0.4));
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 
              0 1px 2px rgba(255, 255, 255, 0.05) inset;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.motorcycle-gallery__nav--main {
  position: relative;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.8), rgba(30, 30, 30, 0.8));
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 
              0 1px 2px rgba(255, 255, 255, 0.1) inset;
  z-index: 5;
}

.motorcycle-gallery__nav--main:hover {
  background: linear-gradient(135deg, var(--accent-color), rgba(var(--accent-color-rgb), 0.8));
}

.motorcycle-gallery__nav {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2;
}

.motorcycle-gallery__nav:hover {
  background: var(--accent-color);
  transform: scale(1.1);
}

.motorcycle-gallery__nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.1);
  transform: none;
}

.motorcycle-gallery__nav svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.motorcycle-gallery__nav:hover svg {
  transform: scale(1.1);
}

.motorcycle-gallery__placeholder {
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  text-align: center;
  border-radius: 8px;
}

.motorcycle-gallery__thumbnail-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 
              0 1px 2px rgba(255, 255, 255, 0.1) inset;
}

.motorcycle-gallery__thumbnail-wrapper.active {
  position: relative;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.motorcycle-gallery__thumbnail-wrapper.active::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(var(--accent-color-rgb), 0.5);
}

.motorcycle-gallery__thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.motorcycle-gallery__thumbnail-wrapper:hover .motorcycle-gallery__thumbnail {
  transform: scale(1.05);
}

.motorcycle-gallery__thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
  opacity: 1;
  transition: opacity 0.3s ease;
}

.motorcycle-gallery__thumbnail-wrapper:hover .motorcycle-gallery__thumbnail-overlay,
.motorcycle-gallery__thumbnail-wrapper.active .motorcycle-gallery__thumbnail-overlay {
  opacity: 0;
}

@media screen and (max-width: 991px) {
  .motorcycle-gallery {
    padding: 50px 0;
  }

  .motorcycle-gallery__title {
    font-size: 26px;
  }

  .motorcycle-gallery__grid {
    gap: 20px;
    padding: 0 15px;
  }

  .motorcycle-gallery__thumbnail-wrapper {
    flex: 0 0 100px;
    padding-top: 75px;
  }
}

@media screen and (max-width: 767px) {
  .motorcycle-gallery {
    padding: 40px 0;
  }

  .motorcycle-gallery__title {
    font-size: 24px;
  }

  .motorcycle-gallery__subtitle {
    font-size: 14px;
    margin-bottom: 30px;
  }

  .motorcycle-gallery__grid {
    gap: 15px;
    padding: 0 10px;
  }

  .motorcycle-gallery__thumbnail-wrapper {
    flex: 0 0 80px;
    padding-top: 60px;
  }

  .motorcycle-gallery__nav {
    width: 36px;
    height: 36px;
  }

  .motorcycle-gallery__nav svg {
    width: 18px;
    height: 18px;
  }

  .motorcycle-gallery__caption {
    padding: 15px;
    font-size: 13px;
  }

  .motorcycle-gallery__nav--main {
    width: 40px;
    height: 40px;
  }
  
  .motorcycle-gallery__nav--main svg {
    width: 16px;
    height: 16px;
  }
}
/* END_SECTION:motorcycle-gallery */

/* START_SECTION:motorcycle-specs-showcase (INDEX:55) */
.motorcycle-specs-showcase {
  --accent-color-rgb: {{ section.settings.accent_color | color_to_rgb | default: settings.accent_color | color_to_rgb | default: '230, 0, 0' }};
  position: relative;
  margin-top: -100px; /* Create overlap with previous section */
  padding: 160px 0 60px; /* Increased top padding to compensate for negative margin */
  background-color: #000000;
  color: #ffffff;
  overflow: hidden;
}

/* Background styling with professional look */
.motorcycle-specs-showcase__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.motorcycle-specs-showcase__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% -50%, rgba(var(--accent-color-rgb), 0.08), transparent 45%),
    radial-gradient(circle at 70% 100%, rgba(var(--accent-color-rgb), 0.06), transparent 45%),
    linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.03), transparent 70%);
  opacity: 0.8;
}

.motorcycle-specs-showcase__noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* Grid background for 3D effect */
.motorcycle-specs-showcase__grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  perspective: 1000px;
  transform: rotateX(45deg) scale(1.5);
  transform-origin: center bottom;
  opacity: 0.15;
  animation: grid-movement 20s linear infinite;
}

@keyframes grid-movement {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

/* Accent lines for visual interest */
.motorcycle-specs-showcase__accent-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.accent-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.7), transparent);
  opacity: 0.2;
  transform-origin: left center;
}

.accent-line--1 {
  width: 60%;
  top: 30%;
  left: 5%;
  animation: accent-line-float 15s ease-in-out infinite alternate;
}

.accent-line--2 {
  width: 80%;
  top: 50%;
  left: 15%;
  animation: accent-line-float 18s ease-in-out infinite alternate-reverse;
}

.accent-line--3 {
  width: 70%;
  top: 70%;
  left: 10%;
  animation: accent-line-float 12s ease-in-out infinite alternate;
}

@keyframes accent-line-float {
  0% {
    transform: translateY(0) scaleX(1);
    opacity: 0.1;
  }
  50% {
    transform: translateY(10px) scaleX(1.05);
    opacity: 0.3;
  }
  100% {
    transform: translateY(0) scaleX(1);
    opacity: 0.1;
  }
}

/* Decorative dots */
.motorcycle-specs-showcase__decorative-dots {
  position: absolute;
  width: 100%;
  height: 100%;
}

.decorative-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-color);
  opacity: 0.4;
  filter: blur(1px);
  animation: pulse-dot 3s infinite ease-in-out;
}

.decorative-dot--1 {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.decorative-dot--2 {
  top: 25%;
  right: 15%;
  animation-delay: 0.5s;
}

.decorative-dot--3 {
  top: 65%;
  left: 20%;
  animation-delay: 1s;
}

.decorative-dot--4 {
  top: 75%;
  right: 25%;
  animation-delay: 1.5s;
}

.decorative-dot--5 {
  top: 45%;
  right: 8%;
  animation-delay: 2s;
}

@keyframes pulse-dot {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
}

/* Content layout */
.motorcycle-specs-showcase__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 60px;
  padding-right: 60px;
}

/* Motorcycle model container (left side) */
.motorcycle-specs-showcase__model-container {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
}

.motorcycle-specs-showcase__model-wrapper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  cursor: move;
}

.motorcycle-specs-showcase__model {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.motorcycle-specs-showcase__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.motorcycle-specs-showcase__model-wrapper:hover .motorcycle-specs-showcase__image {
  transform: translateZ(20px);
}

.motorcycle-specs-showcase__reflection {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%) rotateX(80deg) scaleY(0.2);
  width: 80%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(var(--accent-color-rgb), 0.3), transparent 70%);
  filter: blur(10px);
  opacity: 0.3;
  z-index: -1;
}

/* Placeholder */
.motorcycle-specs-showcase__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  text-align: center;
}

/* Controls for mobile */
.motorcycle-specs-showcase__controls {
  display: none;
  justify-content: space-between;
  margin-top: 15px;
}

.motorcycle-specs-showcase__control {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.motorcycle-specs-showcase__control:hover {
  background-color: var(--accent-color);
  transform: scale(1.1);
}

/* Interactive hotspots */
.hotspot {
  position: absolute;
  top: var(--hotspot-y);
  left: var(--hotspot-x);
  z-index: 10;
  transform: translate(-50%, -50%);
}

.hotspot__dot {
  width: 12px;
  height: 12px;
  background-color: var(--accent-color);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hotspot__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(var(--accent-color-rgb), 0.7);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  70% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.hotspot:hover .hotspot__dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 5px rgba(var(--accent-color-rgb), 0.3);
}

.hotspot__tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--accent-color-rgb), 0.3);
  border-radius: 4px;
  padding: 10px 15px;
  width: 180px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  pointer-events: none;
  z-index: 1;
}

.hotspot:hover .hotspot__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.hotspot__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.hotspot__title {
  font-weight: bold;
  margin-bottom: 5px;
  color: var(--accent-color);
  font-size: 14px;
}

.hotspot__description {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

/* Specs container (right side) */
.motorcycle-specs-showcase__specs {
  flex: 1;
  min-width: 300px;
}

.motorcycle-specs-showcase__title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.motorcycle-specs-showcase__title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 60px;
  height: 2px;
  background-color: var(--accent-color);
}

.motorcycle-specs-showcase__subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 30px;
}

/* Tabs for switching between specs and mods */
.motorcycle-specs-showcase__tabs {
  display: flex;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.motorcycle-specs-showcase__tab-button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 500;
  padding: 10px 25px;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
}

.motorcycle-specs-showcase__tab-button::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent-color);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.motorcycle-specs-showcase__tab-button:hover {
  color: #ffffff;
}

.motorcycle-specs-showcase__tab-button.active {
  color: #ffffff;
}

.motorcycle-specs-showcase__tab-button.active::after {
  transform: scaleX(1);
}

/* Tab content container - Add/modify these styles */
.motorcycle-specs-showcase__tabs-content {
  position: relative;
  min-height: 400px; /* Adjust this value based on your content */
  height: auto;
}

.motorcycle-specs-showcase__tab-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow-y: auto; /* Allow scrolling if content is too long */
}

.motorcycle-specs-showcase__tab-content.active {
  display: block;
  animation: fade-in 0.3s ease;
}

/* Update the fade-in animation to avoid layout shifts */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure lists take full height */
.mods-list,
.specs-list {
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Specifications list */
.specs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.specs-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.specs-list__item:hover {
  transform: translateX(5px);
  background-color: rgba(255, 255, 255, 0.03);
  padding-left: 10px;
}

.specs-list__label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.specs-list__value {
  font-weight: bold;
  color: #ffffff;
  font-size: 16px;
}

/* Modifications list */
.mods-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mods-list__item {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border-left: 3px solid var(--accent-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mods-list__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.mods-list__name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
  color: #ffffff;
}

.mods-list__brand {
  font-size: 14px;
  color: var(--accent-color);
  margin-bottom: 8px;
}

.mods-list__description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

/* Responsive styles */
@media (max-width: 991px) {
  .motorcycle-specs-showcase {
    margin-top: -80px;
    padding-top: 140px;
  }
  
  .accent-shape--connector {
    top: -150px;
    height: 300px;
  }
  
  .motorcycle-specs-showcase__content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  .motorcycle-specs-showcase {
    margin-top: -60px;
    padding-top: 100px;
  }
  
  .accent-shape--connector {
    top: -100px;
    height: 200px;
  }
  
  .motorcycle-specs-showcase__title {
    font-size: 24px;
  }
  
  .motorcycle-specs-showcase__model {
    height: 280px;
  }
  
  .hotspot__tooltip {
    width: 150px;
  }
  
  .motorcycle-specs-showcase__content {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Update the accent shapes styles */
.motorcycle-specs-showcase__accent-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.accent-shape {
  position: absolute;
  opacity: 0.12;
}

/* Connector shape that extends from previous section */
.accent-shape--connector {
  position: absolute;
  top: -200px; /* Increased overlap area */
  right: 0;
  width: 100%; /* Full width for better coverage */
  height: 400px; /* Taller shape for smoother transition */
  background: linear-gradient(180deg, 
    transparent,
    rgba(0, 0, 0, 0.3) 20%,
    rgba(0, 0, 0, 0.8) 40%,
    #000000 60%
  );
  transform: skewY(-3deg); /* More subtle angle */
  opacity: 1; /* Full opacity for solid transition */
  z-index: 0;
}

/* Add a secondary connector for accent color blend */
.accent-shape--connector::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    transparent 30%,
    rgba(var(--accent-color-rgb), 0.05) 70%,
    rgba(var(--accent-color-rgb), 0.1)
  );
  opacity: 0.5;
}

/* Main decorative panel */
.accent-shape--tech-panel {
  position: absolute;
  top: 20%;
  right: -100px;
  width: 400px;
  height: 300px;
  background-color: var(--accent-color);
  clip-path: polygon(
    0 0,
    100% 20%,
    85% 85%,
    15% 100%
  );
  opacity: 0.08;
  animation: panel-float 20s ease-in-out infinite;
}

/* Technical stripes */
.accent-shape--stripes {
  position: absolute;
  bottom: 15%;
  left: -50px;
  width: 300px;
  height: 200px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent-color),
    var(--accent-color) 2px,
    transparent 2px,
    transparent 15px
  );
  clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
  opacity: 0.1;
  animation: stripes-float 18s ease-in-out infinite;
}

/* Update animations to be more subtle */
@keyframes connector-float {
  0%, 100% {
    transform: skewY(-15deg) translateY(0);
    opacity: 0.05;
  }
  50% {
    transform: skewY(-15deg) translateY(-20px);
    opacity: 0.08;
  }
}

@keyframes panel-float {
  0%, 100% {
    transform: translateX(0) translateY(0);
    opacity: 0.08;
  }
  50% {
    transform: translateX(-20px) translateY(10px);
    opacity: 0.12;
  }
}

@keyframes stripes-float {
  0%, 100% {
    transform: translateX(0) skewY(0);
    opacity: 0.1;
  }
  50% {
    transform: translateX(20px) skewY(-5deg);
    opacity: 0.15;
  }
}

/* Remove the bottom accent line since we have better transitions now */
.motorcycle-specs-showcase__accent-line {
  display: none;
}

/* Add the new corner shape styles */
.accent-shape--corner-tech {
  position: absolute;
  top: 40px;
  left: -20px;
  width: 200px;
  height: 200px;
  opacity: 0.06;
  background: 
    linear-gradient(45deg, var(--accent-color) 25%, transparent 25%) -10px 0,
    linear-gradient(-45deg, var(--accent-color) 25%, transparent 25%) -10px 0,
    linear-gradient(45deg, transparent 75%, var(--accent-color) 75%),
    linear-gradient(-45deg, transparent 75%, var(--accent-color) 75%);
  background-size: 20px 20px;
  clip-path: polygon(
    0 0,
    100% 0,
    60% 100%,
    0 60%
  );
  transform: rotate(-15deg);
  animation: corner-float 15s ease-in-out infinite;
  z-index: 0;
}

.accent-shape--corner-tech::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--accent-color), transparent);
  opacity: 0.3;
  mix-blend-mode: overlay;
}

@keyframes corner-float {
  0%, 100% {
    transform: rotate(-15deg) translateY(0);
    opacity: 0.06;
  }
  50% {
    transform: rotate(-12deg) translateY(-5px);
    opacity: 0.08;
  }
}
/* END_SECTION:motorcycle-specs-showcase */

/* START_SECTION:prize-overview (INDEX:58) */
.prize-overview {
  --accent-color: var(--theme-accent-color, #e60000);
  --accent-color-rgb: {{ section.settings.accent_color | color_to_rgb | default: '230, 0, 0' }};
  position: relative;
  color: #ffffff;
  padding-top: 85px;
  padding-bottom: 60px;
  overflow: visible; /* Changed from hidden to allow connector to overlap */
  margin-top: 0; /* Removed negative margin to prevent overlapping issues */
}

/* Connector element that overlaps with hero section for seamless transition */
.prize-overview__connector {
  position: absolute;
  top: -140px; /* Overlap with hero section */
  left: 0;
  width: 100%;
  height: 140px;
  background: linear-gradient(to bottom, 
    rgba(9, 9, 9, 0) 0%,
    rgba(12, 12, 12, 0.5) 45%, 
    rgba(12, 12, 12, 0.95) 75%,
    #0c0c0c 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Background elements */
.prize-overview__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0c0c0c; /* Dark background matching hero's base tone */
  z-index: -1;
  overflow: hidden;
}

.prize-overview__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 15% 25%, rgba(var(--accent-color-rgb), 0.08), transparent 30%),
    radial-gradient(circle at 85% 75%, rgba(var(--accent-color-rgb), 0.06), transparent 30%);
  opacity: 0.8;
}

/* Add subtle noise texture */
.prize-overview__noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: overlay;
}

/* Geometric accent shapes */
.prize-overview__accent-shape {
  position: absolute;
  background-color: var(--accent-color);
  opacity: 0.15;
  filter: blur(1px);
  z-index: 1;
}

.prize-overview__accent-shape--1 {
  width: 400px;
  height: 160px;
  top: -80px;
  right: -180px;
  transform: rotate(-25deg);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
  animation: float-shape 15s ease-in-out infinite alternate;
}

.prize-overview__accent-shape--2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -100px;
  transform: rotate(15deg);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: float-shape 18s ease-in-out infinite alternate-reverse;
}

.prize-overview__accent-shape--3 {
  width: 120px;
  height: 120px;
  top: 40%;
  right: 5%;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  animation: float-shape 12s ease-in-out infinite alternate;
  opacity: 0.08;
}

.prize-overview__accent-shape--4 {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 8%;
  clip-path: circle(50% at 50% 50%);
  animation: float-shape 20s ease-in-out infinite alternate-reverse;
  opacity: 0.08;
}

.prize-overview__accent-line {
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  top: 35px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.5) 20%, rgba(var(--accent-color-rgb), 0.5) 80%, transparent);
  z-index: 1;
  opacity: 0.3;
}

@keyframes float-shape {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(10px, -10px) rotate(2deg);
  }
  100% {
    transform: translate(-5px, 5px) rotate(-1deg);
  }
}

/* Content styling */
.prize-overview__wrapper {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.prize-overview__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 30px;
  line-height: 1.2;
}

.prize-overview__giveaway-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 5px;
  background: linear-gradient(90deg, #ffffff, var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.3);
  position: relative;
}

.prize-overview__giveaway-number:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 50px;
  height: 2px;
  background-color: var(--accent-color);
  box-shadow: 0 0 8px 1px rgba(var(--accent-color-rgb), 0.5);
}

.prize-overview__heading {
  font-size: 42px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.prize-overview__description {
  font-size: 18px;
  line-height: 1.6;
  max-width: 780px;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
}

.prize-overview__description strong {
  color: #ffffff;
  font-weight: 600;
}

.prize-overview__description p {
  margin-bottom: 1.2em;
  position: relative;
}

.prize-overview__description p:last-child {
  margin-bottom: 0;
}

/* Highlight important terms like ARV */
.prize-overview__description p:last-child {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  padding-left: 15px;
  border-left: 2px solid var(--accent-color);
}

/* Responsive styling */
@media screen and (max-width: 991px) {
  .prize-overview__heading {
    font-size: 36px;
  }
  
  .prize-overview__accent-shape--1 {
    top: -60px;
    right: -150px;
    width: 320px;
    height: 140px;
  }
  
  .prize-overview__accent-shape--3 {
    display: none;
  }
  
  .prize-overview__connector {
    height: 80px;
  }
}

@media screen and (max-width: 767px) {
  .prize-overview {
    padding: 50px 0;
  }
  
  .prize-overview__title {
    margin-bottom: 20px;
  }
  
  .prize-overview__giveaway-number {
    font-size: 20px;
  }
  
  .prize-overview__heading {
    font-size: 30px;
  }
  
  .prize-overview__description {
    font-size: 16px;
  }
  
  .prize-overview__description p:last-child {
    font-size: 14px;
  }
  
  .prize-overview__accent-shape--2,
  .prize-overview__accent-shape--4 {
    opacity: 0.06;
  }
  
  .prize-overview__connector {
    height: 60px;
    top: -40px;
  }
}
/* END_SECTION:prize-overview */

/* START_SECTION:product-addons-v2 (INDEX:59) */
.shftd-v2.padd {
    display: block;
    border-block: 1px solid var(--line-hairline);
    background: var(--surface-page);
  }
  .shftd-v2 .padd__in.container--fluid {
    padding-inline: var(--gutter-page);
  }
  @media (min-width: 990px) {
    .shftd-v2 .padd__in.container--fluid {
      padding-inline: var(--gutter-page-lg);
    }
  }
  .shftd-v2 .padd__status {
    flex: 0 0 auto;
  }

  /* Option picker popover (appended to body, carries the scope class).
     Mirrors the product page's option groups at a compact size. */
  .shftd-v2.padd__pop {
    position: fixed;
    z-index: 350;
    min-width: 240px;
    max-width: 320px;
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    box-shadow:
      inset 0 1px 0 oklch(0.99 0 0 / 0.06),
      0 16px 40px oklch(0 0 0 / 0.55);
    animation: shftd-fade-up var(--dur-2) var(--ease-out) both;
  }
  .shftd-v2.padd__pop .padd__pop-group {
    display: grid;
    gap: var(--space-4);
  }
  .shftd-v2.padd__pop .padd__pop-values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .shftd-v2.padd__pop .optbtn {
    min-width: 40px;
    padding: 10px 12px;
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wide);
  }
  .shftd-v2 .padd__row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: var(--space-6);
  }
  .shftd-v2 .padd__row::-webkit-scrollbar {
    display: none;
  }
  .shftd-v2 .padd__cell {
    padding-inline: var(--space-7);
    border-inline-start: 1px solid var(--line-hairline);
  }
  .shftd-v2 .padd__cell:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  @media (max-width: 749px) {
    .shftd-v2 .padd__head {
      flex-wrap: wrap;
      gap: var(--space-3);
    }
    .shftd-v2 .padd__cap {
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-5);
    }
  }
/* END_SECTION:product-addons-v2 */

/* START_SECTION:stats-strip-v2 (INDEX:62) */
.shftd-v2.stats-strip-v2 {
    background-color: var(--band-bg, var(--surface-page));
  }

  /* The mockup uses two different hairline strengths — soft on top, hairline
     underneath — so the band reads as sitting under the section above it. */
  .stats-strip-v2--bt {
    border-top: 1px solid var(--line-soft);
  }
  .stats-strip-v2--bb {
    border-bottom: 1px solid var(--line-hairline);
  }

  /* Fluid bands still need page gutters; the container-- classes bring theirs.
     Below 1080px the cells take the inset over instead — see that block. */
  .stats-strip-v2__in.container--fluid {
    padding-inline: var(--gutter-page);
  }
  @media (min-width: 990px) {
    .stats-strip-v2__in.container--fluid {
      padding-inline: var(--gutter-page-lg);
    }
  }

  /* Dividers are a border on every cell's top and left edge, with the grid
     pulled 1px up and left inside an overflow-hidden clip. That drops the first
     row's and first column's borders at any column count — nth-child math can't,
     because the count changes per breakpoint. */
  .stats-strip-v2__clip {
    overflow: hidden;
  }

  .stats-strip-v2__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: var(--space-8) var(--space-5);
  }

  .stats-strip-v2__item {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
  }

  .stats-strip-v2__t {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }

  .stats-strip-v2__label {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--n-400);
  }

  .stats-strip-v2__value {
    color: var(--text-primary);
    line-height: 1;
    white-space: nowrap;
  }
  .stats-strip-v2__value--mono {
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    letter-spacing: var(--track-wide);
  }
  .stats-strip-v2__value--display {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: var(--weight-black);
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
  }
  .stats-strip-v2__value--hl {
    color: var(--red-400);
  }

  .stats-strip-v2__value--s {
    font-size: clamp(16px, 1.6vw, 19px);
  }
  .stats-strip-v2__value--m {
    font-size: clamp(19px, 2vw, 24px);
  }
  .stats-strip-v2__value--l {
    font-size: clamp(23px, 2.6vw, 30px);
  }

  .shftd-v2.stats-strip-v2 .stats-strip-v2__icon {
    width: var(--icon-size, 34px);
    height: var(--icon-size, 34px);
  }
  .stats-strip-v2__icon--red {
    color: var(--red-500);
  }
  .stats-strip-v2__icon--muted {
    color: var(--n-600);
  }
  .stats-strip-v2__icon--light {
    color: var(--text-primary);
  }

  /* Custom icon in original-colours mode: a real <img>, not a mask, so it needs
     its own box. object-fit keeps non-square uploads from stretching. */
  .shftd-v2.stats-strip-v2 .stats-strip-v2__icon--img {
    width: var(--icon-size, 34px);
    height: var(--icon-size, 34px);
    object-fit: contain;
    flex: 0 0 auto;
  }

  /* Icon placement reorders rather than reflows, so the label/value stack keeps
     its reading order in the DOM. */
  .stats-strip-v2--ic-left .stats-strip-v2__icon {
    order: -1;
  }
  .stats-strip-v2--ic-hidden .stats-strip-v2__icon {
    display: none;
  }
  .stats-strip-v2--al-center .stats-strip-v2__item {
    justify-content: center;
  }
  .stats-strip-v2--al-left .stats-strip-v2__item {
    justify-content: flex-start;
  }

  /* Divider mode replaces the gap with padded cells so the borders meet and read
     as continuous rules instead of dashes floating in the gutter. */
  .shftd-v2.stats-strip-v2--div-always .stats-strip-v2__grid {
    gap: 0;
    margin: -1px 0 0 -1px;
  }
  .shftd-v2.stats-strip-v2--div-always .stats-strip-v2__item {
    border-top: 1px solid var(--line-hairline);
    border-left: 1px solid var(--line-hairline);
    padding: var(--space-6) var(--gutter-page-lg);
  }

  /* --- Below 1080px ---------------------------------------------------------
     The mockup hands the horizontal inset from the band to the cells here: the
     grid closes up, each cell carries gutter-width padding, and the row packs
     left. That is what lets the dividers run edge to edge. */
  @media (max-width: 1080px) {
    .shftd-v2.stats-strip-v2 .stats-strip-v2__in {
      padding-inline: 0;
    }
    .stats-strip-v2__grid {
      grid-template-columns: repeat(var(--cols-t, 3), minmax(0, 1fr));
      gap: 0;
    }
    .stats-strip-v2__item {
      gap: 16px;
      padding: 24px var(--gutter-page-lg);
    }
    .shftd-v2.stats-strip-v2--m-al-center .stats-strip-v2__item {
      justify-content: center;
    }
    .shftd-v2.stats-strip-v2--m-al-left .stats-strip-v2__item {
      justify-content: flex-start;
    }
    .shftd-v2.stats-strip-v2--div-mobile .stats-strip-v2__grid {
      margin: -1px 0 0 -1px;
    }
    .shftd-v2.stats-strip-v2--div-mobile .stats-strip-v2__item {
      border-top: 1px solid var(--line-hairline);
      border-left: 1px solid var(--line-hairline);
    }
  }

  /* --- Mobile ---------------------------------------------------------------
     749px, not the mockup's 760px, so this section switches on the same line as
     basev2's .shftd-section padding scaling and .btn--m-* modifiers. The two
     only disagree between 750 and 760px, a width no common device sits at.
     Declared last so the --m-* classes win at equal specificity. */
  @media (max-width: 749px) {
    .stats-strip-v2__grid {
      grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr));
    }
    /* Cells take the mobile page gutter, not the desktop one — 24px a side
       eats a third of each cell in a two-column phone grid. Written at full
       strength so it also beats the div-always padding rule above. */
    .shftd-v2.stats-strip-v2 .stats-strip-v2__item {
      gap: 12px;
      padding: 18px var(--gutter-page);
    }
    .stats-strip-v2__label {
      font-size: 9px;
    }
    .shftd-v2.stats-strip-v2 .stats-strip-v2__icon,
    .shftd-v2.stats-strip-v2 .stats-strip-v2__icon--img {
      width: var(--icon-size-m, 24px);
      height: var(--icon-size-m, 24px);
    }

    .stats-strip-v2__value--m-s {
      font-size: clamp(16px, 4.6vw, 19px);
    }
    .stats-strip-v2__value--m-m {
      font-size: clamp(19px, 5.6vw, 24px);
    }
    .stats-strip-v2__value--m-l {
      font-size: clamp(23px, 7vw, 30px);
    }

    .shftd-v2.stats-strip-v2--m-ic-hidden .stats-strip-v2__icon {
      display: none;
    }
    .shftd-v2.stats-strip-v2--m-ic-left .stats-strip-v2__icon {
      display: inline-block;
      order: -1;
    }
    .shftd-v2.stats-strip-v2--m-ic-right .stats-strip-v2__icon {
      display: inline-block;
      order: 0;
    }
  }
/* END_SECTION:stats-strip-v2 */

/* START_SECTION:sub-collections (INDEX:64) */
/* Sticky lives on the .shopify-section wrapper (via the schema class) so the
     collection grid's sticky-height measurement can see and stack under it. */
  .sec-subcol-v2:has(.subcol--sticky) {
    position: sticky;
    top: var(--subcol-top, 0px);
    z-index: 150;
  }

  .shftd-v2.subcol {
    display: block;
    background: var(--surface-page);
    border-block: 1px solid var(--line-hairline);
  }

  .shftd-v2 .subcol__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .shftd-v2 .subcol__list::-webkit-scrollbar {
    display: none;
  }

  .shftd-v2 .subcol__item {
    flex: 0 0 auto;
    display: flex;
    border-inline-end: 1px solid var(--line-hairline);
  }

  .shftd-v2 .subcol__link {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-9);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease-out);
  }

  .shftd-v2 .subcol__label {
    font: var(--weight-bold) 13px / 1.2 var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: color var(--dur-1) var(--ease-out);
  }

  .shftd-v2 .subcol__count {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wide);
    color: var(--text-muted);
    transition: color var(--dur-1) var(--ease-out);
  }

  .shftd-v2 .subcol__link:hover .subcol__label {
    color: var(--text-primary);
  }

  /* Active: 2px red inset underline + red count */
  .shftd-v2 .subcol__link.is-active {
    box-shadow: inset 0 -2px 0 var(--line-accent);
  }
  .shftd-v2 .subcol__link.is-active .subcol__label {
    color: var(--text-primary);
  }
  .shftd-v2 .subcol__link.is-active .subcol__count {
    color: var(--text-accent);
  }

  @media (max-width: 749px) {
    .shftd-v2 .subcol__link {
      padding: var(--space-5) var(--space-7);
    }
  }
/* END_SECTION:sub-collections */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:addon-row-v2 (INDEX:67) */
.shftd-v2 .arow {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-width: 0;
  }
  .shftd-v2 .arow__thumb {
    flex: 0 0 auto;
    width: 56px;
    aspect-ratio: 1;
    background: var(--n-0);
    overflow: hidden;
  }
  .shftd-v2 .arow__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .shftd-v2 .arow__info {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
  }
  .shftd-v2 .arow__title {
    font: 700 13px/1.2 var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shftd-v2 .arow__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
  }
  .shftd-v2 .arow__price {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wide);
    color: var(--text-primary);
  }
  .shftd-v2 .arow__entries {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-accent);
  }
  .shftd-v2 .arow__add {
    flex: 0 0 auto;
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--text-primary);
  }
  .shftd-v2 .arow__add:hover {
    border-color: var(--line-strong);
  }
  .shftd-v2 .arow__add .arow__ico-check {
    display: none;
  }
  /* Toggled on (add-ons strip): red border + check icon */
  .shftd-v2 .arow__add.is-selected {
    border-color: var(--line-accent);
    color: var(--text-accent);
  }
  .shftd-v2 .arow__add.is-selected .arow__ico-plus {
    display: none;
  }
  .shftd-v2 .arow__add.is-selected .arow__ico-check {
    display: block;
  }
  .shftd-v2 .arow__add.is-added {
    border-color: var(--ok, #1d7a3d);
    color: var(--ok, #1d7a3d);
  }
  .shftd-v2 .arow__add:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
/* END_SNIPPET:addon-row-v2 */

/* START_SNIPPET:collection-card-v2 (INDEX:73) */
/* The card is imagery under basev2's constant-dark .scrim: its ink and
     loading backdrop are ABSOLUTE — the light theme never touches media. */
  .shftd-v2 .colcard {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--r-md);
    color: oklch(0.99 0 0);
    text-decoration: none;
  }
  .shftd-v2 .colcard:hover {
    color: oklch(0.99 0 0);
  }

  /* Flush tiles sit in a hairline grid, where a radius would break the seam. */
  .shftd-v2 .colcard--flush {
    border-radius: 0;
  }

  .shftd-v2 .colcard__media {
    position: relative;
    display: block;
    /* width must be explicit: with an auto width, a definite height plus
       aspect-ratio makes the box derive its width from the ratio, so a fixed
       700px tile would compute to 1244px wide and get clipped by the card.
       Pinning it to 100% lets the ratio drive the height when there is no
       fixed one, and be ignored when there is. */
    width: 100%;
    aspect-ratio: var(--colcard-ratio, 16 / 9);
    height: var(--colcard-h, auto);
    background: oklch(0.225 0.004 30);
  }
  .shftd-v2 .colcard__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--dur-3) var(--ease-out);
  }
  /* Every tile carries a flat dark wash under basev2's bottom scrim, so a
     bright studio shot still reads as part of the dark banner and the white
     title always has ground — constant in both themes, like all media. */
  .shftd-v2 .colcard__media.scrim::after {
    background:
      linear-gradient(180deg, transparent 45%, oklch(0 0 0 / 0.85) 100%),
      oklch(0 0 0 / 0.3);
  }
  .shftd-v2 .colcard:hover .colcard__img {
    scale: 1.04;
  }
  .shftd-v2 .colcard--nozoom:hover .colcard__img {
    scale: 1;
  }

  .shftd-v2 .colcard__row {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-6);
  }
  .shftd-v2 .colcard__title {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 800;
    font-size: var(--colcard-title-size, 15px);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* letter-spacing trails the last glyph too, so every title carries one
       tracking-width of phantom space that trips the ellipsis a letter
       early. Reclaim it (em: scales with the title size). */
    margin-inline-end: calc(var(--track-wide) * -1);
  }
  /* Hover tint is opt-in from whatever renders the card: consumers set
     --colcard-title-hover to a token, and cards that never set it stay put. */
  .shftd-v2 .colcard__title {
    transition: color var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .colcard:hover .colcard__title {
    color: var(--colcard-title-hover, inherit);
  }

  .shftd-v2 .colcard__price {
    flex: none;
    font: var(--type-mono);
    font-size: var(--colcard-price-size, 12px);
    letter-spacing: var(--track-wide);
  }

  /* Titles never wrap, so a desktop-sized title truncates in a two-column
     phone grid. Consumers emit --colcard-title-size-m; without it the
     desktop size carries through. */
  @media (max-width: 749px) {
    .shftd-v2 .colcard__title {
      font-size: var(--colcard-title-size-m, var(--colcard-title-size, 15px));
    }
  }
/* END_SNIPPET:collection-card-v2 */

/* START_SNIPPET:product-card-v2 (INDEX:99) */
.shftd-v2 .pcard {
    position: relative;
    display: block;
    /* keeps the title row visually attached to ITS card, not the one below */
    padding-bottom: var(--space-5);
    color: var(--text-primary);
    text-decoration: none;
  }
  .shftd-v2 .pcard__link {
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .shftd-v2 .pcard:hover .pcard__title {
    color: var(--red-400);
  }

  .shftd-v2 .pcard__media {
    position: relative;
    display: block;
    aspect-ratio: var(--card-ratio, 4 / 5);
    background: var(--surface-media);
    overflow: hidden;
  }
  .shftd-v2 .pcard__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    /* Hosts opt into `contain` by setting --pcard-fit on any ancestor (the
       collection grid exposes it as a section setting). */
    object-fit: var(--pcard-fit, cover);
    transition: scale var(--dur-3) var(--ease-out);
  }
  .shftd-v2 .pcard:hover .pcard__img {
    scale: 1.05;
  }

  .shftd-v2 .pcard__pill {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 1;
    pointer-events: none;
  }

  .shftd-v2 .pcard__qa {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: 3;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-sm);
    background: oklch(0.1 0.004 30 / 0.82);
    color: oklch(0.99 0 0);
    cursor: pointer;
    opacity: 0;
    transition:
      opacity var(--dur-2) var(--ease-out),
      background var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .pcard:hover .pcard__qa,
  .shftd-v2 .pcard__qa:focus-visible {
    opacity: 1;
  }
  .shftd-v2 .pcard__qa:hover {
    background: var(--red-500);
  }
  .shftd-v2 .pcard__qa.is-added {
    opacity: 1;
    background: var(--success);
    color: oklch(0.1 0.004 30);
  }
  @media (hover: none), (max-width: 749px) {
    .shftd-v2 .pcard__qa {
      opacity: 1;
    }
  }

  /* Wrapping row: a title that can't share the line with the price takes the
     full card width and the price steps down a line — the ellipsis then only
     fires when the title alone overflows the card, not because the price
     reserved a third of the row. */
  .shftd-v2 .pcard__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding: var(--space-6) var(--space-5);
    background: var(--surface-page);
  }
  .shftd-v2 .pcard__title {
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* letter-spacing trails the last glyph — reclaim that phantom space so
       it can't trip the ellipsis on its own. */
    margin-inline-end: calc(var(--track-wide) * -1);
    transition: color var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .pcard__prices {
    display: flex;
    gap: var(--space-4);
    flex: none;
  }

  /* Swatches live in the media box, bottom-left: hover-revealed on desktop,
     always visible on touch. */
  .shftd-v2 .pcard__swatches {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    line-height: 0;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
  }
  .shftd-v2 .pcard__swatch-more {
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding-inline: 3px;
    border-radius: var(--r-xs);
    background: oklch(0.1 0.004 30 / 0.82);
    color: oklch(0.99 0 0);
    font: var(--type-mono-sm);
    font-size: 9px;
    line-height: 1;
    pointer-events: none;
  }
  .shftd-v2 .pcard:hover .pcard__swatches,
  .shftd-v2 .pcard:focus-within .pcard__swatches {
    opacity: 1;
  }
  .shftd-v2 .pcard__swatch {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    cursor: pointer;
    border-radius: var(--r-xs);
    background: var(--sw, var(--surface-raised));
    box-shadow:
      inset 0 0 0 1px oklch(0 0 0 / 0.25),
      0 1px 4px oklch(0 0 0 / 0.35);
  }
  .shftd-v2 .pcard__swatch.is-active {
    box-shadow:
      0 0 0 1px oklch(0.99 0 0 / 0.95),
      0 0 0 2px oklch(0.15 0 0 / 0.85);
  }
  @media (hover: none), (max-width: 749px) {
    .shftd-v2 .pcard__swatches {
      opacity: 1;
    }
  }

  /* Mobile: 2-up cards are ~180px wide — scale the row type and the pill
     down so titles stay legible instead of truncating to one word. */
  @media (max-width: 749px) {
    .shftd-v2 .pcard__row {
      padding: var(--space-5) var(--space-2);
      gap: var(--space-1) var(--space-4);
    }
    .shftd-v2 .pcard__title {
      font-size: 11px;
    }
    .shftd-v2 .pcard__row .price {
      font-size: 12px;
    }
    .shftd-v2 .pcard__pill .pill--sm {
      font-size: 9px;
    }
    .shftd-v2 .pcard__pill .pill--sm .pill__main {
      padding: 5px 6px;
    }
    .shftd-v2 .pcard__pill .pill--sm .pill__mult {
      padding: 5px 5px;
    }
  }
/* END_SNIPPET:product-card-v2 */

/* START_SNIPPET:product-grid-v2 (INDEX:100) */
.shftd-v2 .pgrid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 1px;
    background: var(--n-1000);
  }
  @media (max-width: 749px) {
    .shftd-v2 .pgrid:not(.pgrid--carousel) {
      grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr));
    }
  }

  .shftd-v2 .pgrid--carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .shftd-v2 .pgrid--carousel::-webkit-scrollbar {
    display: none;
  }
  .shftd-v2 .pgrid--carousel .pgrid__item {
    flex: 0 0 calc((100% - (var(--cols, 4) - 1) * 1px) / var(--cols, 4));
    scroll-snap-align: start;
  }
  @media (max-width: 749px) {
    .shftd-v2 .pgrid--carousel .pgrid__item {
      flex-basis: calc((100% - (var(--cols-m, 2) - 1) * 1px) / var(--cols-m, 2));
    }
  }

  .shftd-v2 .pgrid-scroller {
    position: relative;
    display: block;
  }
  /* basev2's .iconbtn display:grid would override the UA [hidden] rule */
  .shftd-v2 .pgrid-scroller__btn[hidden] {
    display: none;
  }
  .shftd-v2 .pgrid-scroller__btn {
    position: absolute;
    top: 40%;
    translate: 0 -50%;
    z-index: 2;
    background: oklch(0 0 0 / 0.6);
    color: oklch(0.99 0 0);
  }
  .shftd-v2 .pgrid-scroller__btn:hover {
    background: oklch(0 0 0 / 0.8);
    color: oklch(0.99 0 0);
  }
  .shftd-v2 .pgrid-scroller__btn:disabled {
    opacity: 0.35;
    pointer-events: none;
  }
  .shftd-v2 .pgrid-scroller__btn--prev {
    left: var(--space-5);
  }
  .shftd-v2 .pgrid-scroller__btn--next {
    right: var(--space-5);
  }
  @media (max-width: 749px) {
    .shftd-v2 .pgrid-scroller__btn {
      display: none;
    }
  }
/* END_SNIPPET:product-grid-v2 */

/* START_SNIPPET:size-guide-v2 (INDEX:105) */
/* Right-side drawer, same language as the cart drawer: scrim + sliding
     panel, hairline structure, red reserved for the active tab and the
     measure lines in the diagram. */
  .shftd-v2.sgv2 {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 400;
    pointer-events: none;
    /* The .shftd-v2 scope root paints the page surface — on a fixed inset-0
       element that becomes a full-viewport sheet blacking out the page, so
       the overlay root must explicitly paint nothing. */
    background: none;
  }
  /* Paint comes from basev2's shared .drawer-scrim recipe; this only wires
     the open/close fade. */
  .shftd-v2 .sgv2__scrim {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
  }
  .shftd-v2 .sgv2__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* Never full-bleed: a 48px scrim strip stays tappable on phones, so
       "tap outside to close" — the universal drawer gesture — always works. */
    width: min(440px, calc(100% - 48px));
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
    border-left: 1px solid var(--line-soft);
    transform: translateX(100%);
    transition: transform var(--dur-3) var(--ease-out);
    outline: none;
  }
  .shftd-v2.sgv2[data-open] {
    pointer-events: auto;
  }
  .shftd-v2.sgv2[data-open] .sgv2__scrim {
    opacity: 1;
  }
  .shftd-v2.sgv2[data-open] .sgv2__panel {
    transform: none;
  }

  .shftd-v2 .sgv2__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-7);
    border-bottom: 1px solid var(--line-hairline);
  }
  .shftd-v2 .sgv2__title {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: var(--weight-bold);
    font-size: 17px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-primary);
  }

  .shftd-v2 .sgv2__tabs {
    display: flex;
    border-bottom: 1px solid var(--line-hairline);
  }
  .shftd-v2 .sgv2__tab {
    flex: 1;
    padding: var(--space-5) 0 calc(var(--space-5) - 2px);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-muted);
    transition:
      color var(--dur-1) var(--ease-out),
      border-color var(--dur-1) var(--ease-out);
  }
  .shftd-v2 .sgv2__tab:hover {
    color: var(--text-secondary);
  }
  .shftd-v2 .sgv2__tab.is-active {
    color: var(--text-primary);
    border-bottom-color: var(--red-500);
  }

  .shftd-v2 .sgv2__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-7);
  }

  /* Sizes are rows, measurements are columns — fits the panel with no
     horizontal scroll; figures are mono so columns stay aligned. */
  .shftd-v2 .sgv2__table {
    width: 100%;
    border-collapse: collapse;
  }
  .shftd-v2 .sgv2__table th,
  .shftd-v2 .sgv2__table td {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    border-bottom: 1px solid var(--line-hairline);
  }
  .shftd-v2 .sgv2__table thead th {
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wider);
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line-strong);
  }
  .shftd-v2 .sgv2__table td {
    font: var(--type-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
  }
  .shftd-v2 .sgv2__table th[scope='row'] {
    text-align: left;
    font-family: var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    font-weight: var(--weight-bold);
    font-size: 13px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-primary);
    white-space: nowrap;
  }

  .shftd-v2 .sgv2__fit {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin: var(--space-6) 0 0;
    font: var(--type-body-sm);
    font-weight: 600;
    color: var(--text-primary);
  }
  .shftd-v2 .sgv2__fit::before {
    content: "";
    flex: 0 0 auto;
    width: 2px;
    align-self: stretch;
    background: var(--red-500);
  }
  .shftd-v2 .sgv2__tol {
    margin: var(--space-4) 0 0;
    font: var(--type-mono-sm);
    letter-spacing: var(--track-wide);
    color: var(--text-muted);
  }
  .shftd-v2 .sgv2__tol b {
    color: var(--text-secondary);
  }
  .shftd-v2 .sgv2__notes {
    margin: var(--space-3) 0 0;
    font: var(--type-body-sm);
    color: var(--text-muted);
  }

  .shftd-v2 .sgv2__diagram {
    display: flex;
    justify-content: center;
    padding: var(--space-6);
    background: var(--surface-card);
    border: 1px solid var(--line-hairline);
  }
  .shftd-v2 .sgv2__diagram svg {
    width: auto;
    height: 210px;
    max-width: 100%;
  }
  /* Diagram ink: hairline garment, red measure lines, white lettered
     markers — the same reading as the rest of the system. */
  .shftd-v2 .sgv2__diagram .sgv2-o {
    fill: oklch(0.99 0 0 / 0.03);
    stroke: var(--n-400);
    stroke-width: 1.6;
    stroke-linejoin: round;
  }
  .shftd-v2 .sgv2__diagram .sgv2-d {
    fill: none;
    stroke: var(--n-400);
    stroke-width: 1;
    opacity: 0.45;
  }
  .shftd-v2 .sgv2__diagram .sgv2-m {
    fill: none;
    stroke: var(--red-500);
    stroke-width: 1.4;
    stroke-dasharray: 4 3;
  }
  .shftd-v2 .sgv2__diagram .sgv2-c {
    fill: var(--n-0);
  }
  .shftd-v2 .sgv2__diagram .sgv2-t {
    fill: var(--n-1000);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
  }

  .shftd-v2 .sgv2__steps {
    list-style: none;
    margin: var(--space-7) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-6);
  }
  .shftd-v2 .sgv2__step {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
  }
  .shftd-v2 .sgv2__step-letter {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xs);
    font: var(--type-mono-sm);
    font-weight: 700;
    color: var(--text-primary);
  }
  .shftd-v2 .sgv2__step-label {
    margin: 0;
    font: var(--type-body-sm);
    font-weight: 600;
    color: var(--text-primary);
  }
  .shftd-v2 .sgv2__step-help {
    margin: var(--space-2) 0 0;
    font: var(--type-body-sm);
    color: var(--text-muted);
  }
/* END_SNIPPET:size-guide-v2 */

/* START_SNIPPET:tier-card-v2 (INDEX:108) */
.shftd-v2 .tcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  /* Featured: the lighter panel bleeds OUTWARD via negative margins so the
     content stays exactly grid-aligned with the sibling cards. The side bleed
     stays under half the grid gap so it never overlaps the neighbours. */
  .shftd-v2 .tcard--featured {
    background: var(--surface-card);
    box-shadow: var(--elev-2);
    padding: var(--space-6) var(--space-4) var(--space-6);
    margin: calc(var(--space-6) * -1) calc(var(--space-4) * -1) calc(var(--space-6) * -1);
  }

  /* Metal accent per tier: plate gradient + name/check colour */
  .shftd-v2 .tcard--gold {
    --tc-plate: var(--metal-gold);
    --tc-accent: #e0b54a;
  }
  .shftd-v2 .tcard--platinum {
    --tc-plate: var(--metal-platinum);
    --tc-accent: var(--n-0);
  }
  .shftd-v2 .tcard--diamond {
    --tc-plate: var(--metal-diamond);
    --tc-accent: #9ccdea;
  }
  .shftd-v2 .tcard--steel {
    --tc-plate: var(--metal-steel);
    --tc-accent: var(--n-200);
  }
  .shftd-v2 .tcard--red {
    --tc-plate: var(--metal-red);
    --tc-accent: var(--red-400);
  }

  /* ---- Plate ---- */
  .shftd-v2 .tcard__plate {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--space-4);
    aspect-ratio: 10 / 3;
    min-height: 170px;
    /* An explicit width, or Safari transfers the min-height back through the
       aspect-ratio into the inline size (170px × 10/3 ≈ 567px) and the card
       overflows the viewport on phones. A definite width stops the transfer. */
    width: 100%;
    max-width: 100%;
    background: var(--grid-fine), var(--tc-plate);
    margin-bottom: 42px;
  }
  .shftd-v2 .tcard__band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    padding-block: 7px;
    background: var(--metal-band-shade);
    font: 700 9px/1 var(--font-display);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-widest);
    text-transform: uppercase;
    color: oklch(0.1 0.004 30);
    white-space: nowrap;
  }
  .shftd-v2 .tcard__band-track {
    display: flex;
    width: max-content;
  }
  /* Seam math: internal gaps are 12px and each group carries a 12px lead-in,
     so the loop point is indistinguishable from any other gap. */
  .shftd-v2 .tcard__band-group {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-inline: 12px 0;
  }
  .shftd-v2 .tcard--band-animated .tcard__band-track {
    animation: shftd-marquee var(--tc-band-dur, 30s) linear infinite;
  }
  .shftd-v2 .tcard--band-reverse .tcard__band-track {
    animation-direction: reverse;
  }
  .shftd-v2 .tcard__band-sep {
    font-size: 7px;
  }
  .shftd-v2 .tcard__code {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    font: var(--type-mono-sm);
    letter-spacing: var(--track-widest);
    color: oklch(0 0 0 / 0.7);
  }
  .shftd-v2 .tcard__code::before,
  .shftd-v2 .tcard__code::after {
    content: "";
    width: 28px;
    height: 1px;
    background: oklch(0 0 0 / 0.45);
  }
  .shftd-v2 .tcard__mark {
    width: clamp(120px, 34%, 220px);
    background: oklch(0.1 0.004 30);
  }
  .shftd-v2 .tcard__pill {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 50%;
    z-index: 2;
  }
  /* Sits stacked directly on top of the entries pill at the plate seam */
  .shftd-v2 .tcard__badge {
    position: absolute;
    bottom: 30px;
    left: 50%;
    translate: -50% 0;
    z-index: 3;
  }

  /* ---- Body ---- */
  .shftd-v2 .tcard__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    flex: 1;
  }
  .shftd-v2 .tcard__name {
    margin: 0;
    font: var(--type-h2);
    font-variation-settings: "wdth" var(--width-expanded);
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    color: var(--tc-accent);
  }
  .shftd-v2 .tcard__includes {
    display: grid;
    align-content: start;
    gap: var(--space-5);
    width: 100%;
    padding-top: var(--space-6);
    border-top: 1px solid var(--line-hairline);
    flex: 1;
  }
  .shftd-v2 .tcard__list {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .shftd-v2 .tcard__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    font: var(--type-body-sm);
    color: var(--text-secondary);
  }
  .shftd-v2 .tcard__check {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    translate: 0 2px;
    color: var(--tc-accent);
  }
  .shftd-v2 .tcard__pricerow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    padding-top: var(--space-6);
    border-top: 1px solid var(--line-hairline);
  }
  .shftd-v2 .tcard__price {
    font: 500 16px/1 var(--font-mono);
    letter-spacing: var(--track-wide);
    color: var(--text-primary);
  }
  /* Same footprint as the product page's add-to-cart (btn--lg at 48px) */
  .shftd-v2 .tcard__btn {
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }
/* END_SNIPPET:tier-card-v2 */