/** Shopify CDN: Minification failed

Line 485:17 Unexpected "@app"

**/
/*
  Preset type and palette, matched to Stark Future (Oct 1, 2026).
  Measured from starkfuture.com: projects/website/research/2026-10-01-stark-palette/.
  Loaded after Hyper's theme.css. Colors live in the theme's color schemes;
  this file sets the type scale, letter spacing and the text strengths on black.
*/

:root {
  /* One family everywhere (Oct 6, 2026): the theme's font settings still point at Archivo,
     which a few labels and subheadings read directly. */
  --font-body-family: 'PP Neue Montreal', -apple-system, sans-serif;
  --font-heading-family: 'PP Neue Montreal', -apple-system, sans-serif;
  --font-subheading-family: 'PP Neue Montreal', -apple-system, sans-serif;
  --font-navigation-family: 'PP Neue Montreal', -apple-system, sans-serif; /* desktop menu read Archivo (Oct 14, 2026) */
  --preset-tracking-wide: 0.1em;
  --preset-tracking-menu: 0.15em;
  --preset-tracking-body: 0.025em;
  --font-body-size: 1.4rem;
  --font-body-line-height: 1.44;
  --font-heading-weight: 700;
  --font-heading-letter-spacing: var(--preset-tracking-wide);
  --font-pcard-title-size: 1.2rem;
}

body {
  letter-spacing: var(--preset-tracking-body);
  line-height: var(--font-body-line-height);
  /* One underline position site-wide (Oct 26, 2026): low enough to clear g, j, p, q, y
     so the line stays solid. Every underline rule reads this; it also inherits. */
  --preset-underline-offset: 0.3em;
  text-underline-offset: var(--preset-underline-offset);
}

/* Three text sizes site-wide (Oct 8, 2026): 24px headings, 16px for everything read or tapped, 12px labels and
   fine print. Same on every screen. 16px is the accepted floor for body text and the size below which iPhone Safari
   zooms into form fields. Headings: h1-h3 24px, h4 16px, h5-h6 12px. */
.hd1, .hd2, h1, .h1, h2, .h2, h3, .h3 {
  font-size: 2.4rem;
  line-height: 1.28;
  letter-spacing: var(--preset-tracking-wide);
}
h4, .h4 {
  font-size: 1.6rem;
  line-height: 1.36;
  letter-spacing: var(--preset-tracking-wide);
}
h5, .h5 {
  font-size: 1.2rem;
  line-height: 1.4;
  letter-spacing: var(--preset-tracking-wide);
}
h6, .h6 {
  font-size: 1.2rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

/* Supporting text under section headings and text on cards: 16px (the 16px tier) */
.rich-text__text.rich-text__text,
.rich-text__text.rich-text__text :is(p, li, span),
.section__description,
.section__description :is(p, li, span),
.section__header .rte,
.section__header .rte :is(p, li),
.slide__description,
.slideshow__description,
.slideshow-with-product__description {
  font-size: 1.6rem;
  line-height: 1.5;
}
.card-media .rich-text__text.rich-text__text,
.card-media .rich-text__text.rich-text__text :is(p, li, span),
.card-media__description,
.card-media__description :is(p, li, span),
.multicolumn-card__text,
.multicolumn-card__text :is(p, li, span),
.card-collection .rich-text__text,
.card-article .rich-text__text {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* Small text and card text: 12px */
.text-sm,
.text-sm-extra {
  font-size: 1.2rem;
  line-height: 1.52;
}

/* Product cards: 12px uppercase titles (label tier), 16px prices */
.text-pcard-title {
  font-size: 1.2rem;
  letter-spacing: var(--preset-tracking-wide);
  text-transform: uppercase;
  font-weight: 700;
}
.card-product .f-price,
.card-product .f-price-item {
  font-size: 1.6rem;
}

/* One button height everywhere (Oct 5, 2026): 36px on every screen, 16px side padding. Text buttons only;
   icon buttons (circles, close, quantity) keep their own size. */
.btn {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: var(--preset-tracking-body);
}
.btn:not([class*="btn--icon"]):not(.btn--inherit):not(.swiper-button):not(.btn-remove) {
  height: 3.6rem;
  min-height: 3.6rem;
  padding: 0.4rem 1.6rem;
  line-height: 1;
}

/* Phone menu drawer: the footer heading style (12px, uppercase, 0.08em, regular, white 64%) */
.menu-drawer .menu-drawer__item-link,
.menu-drawer .menu-drawer__item-link *,
.menu-drawer .menu__item,
.menu-drawer .menu__item-text {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: var(--preset-tracking-menu);
  text-transform: uppercase;
  color: #ffffff;
}
/* Drawer chevrons (right-pointing): bare white, padded to a 28px tap area (circles removed, Oct 5, 2026) */
.menu-drawer .icon-caret-right,
.menu-drawer .icon-caret-left {
  box-sizing: content-box;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0.8rem;
  background-color: transparent;
  color: #ffffff;
}

/* Footer menu links at the body size, 16px (Oct 6, 2026; 16px Oct 8); legal links and copyright stay 12px fine print (below) */
.footer .linklist a,
.footer .footer-block a {
  font-size: 1.6rem;
}
.footer__copyright-content {
  font-size: 1.2rem;
}

/* Text on black: one white for all text (Oct 5, 2026). Hierarchy comes from size and weight; only icons stay gray. */
.color-scheme-inverse {
  color: #ffffff;
}
.color-scheme-inverse :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .hd1, .hd2) {
  color: #ffffff;
}
.color-scheme-inverse .text-subtext {
  color: #ffffff;
}

/* Stark-style toggles and labels in the header and footer (Oct 1, 2026).
   Measured on starkfuture.com: 28px circle in #292929 (white at 16%), chevron white at 50%,
   footer headings white at 40%, row lines #292929, header nav pure white at regular weight. */
/* Footer headings: the spec-sheet label size (12px, uppercase, 0.08em), white 64% */
.footer .footer-block__heading {
  font-size: 1.2rem;
  letter-spacing: var(--preset-tracking-menu);
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
}
.footer .icon-plus-toggle,
.menu-drawer .icon-plus-toggle {
  box-sizing: content-box;
  padding: 0.8rem;
  background-color: transparent;
  color: #ffffff;
}
/* One 1px #292929 line per footer row on phones, like Stark (Hyper's own summary line, recolored) */
@media only screen and (max-width: 1023px) {
  .footer .footer-accordion-details .accordion-details__summary,
  .footer .footer-accordion-details[aria-expanded=true] .accordion-details__summary {
    border-bottom: 1px solid #292929;
    border-color: #292929;
  }
}

/* Footer bottom: payment marks, legal links and copyright centered, in the footer menu text style (12px, white 64%) */
.footer .footer__bottom-row {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  text-align: center;
}
.footer .footer__bottom-row > * {
  justify-content: center;
}
.footer .footer__payment .list-payment {
  justify-content: center;
}
.footer .footer__info .linklist {
  justify-content: center;
}
.footer .footer__info .linklist a,
.footer .footer__copyright-content,
.footer .footer__copyright-content a {
  font-size: 1.2rem;
  font-weight: 400;
  color: #ffffff;
}
/* Header nav: the footer heading style; bare white chevron (circles removed, Oct 5, 2026) */
.header__menu .menu__item,
.header__menu .menu__item-text {
  color: #ffffff;
  font-weight: 700;
}
@media only screen and (min-width: 1024px) {
  .header__menu .menu__item,
  .header__menu .menu__item-text {
    font-size: 1.2rem;
    letter-spacing: var(--preset-tracking-menu);
  }
}
.header__menu .icon-caret-down {
  box-sizing: content-box;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0.8rem;
  background-color: transparent;
  color: #ffffff;
}

/* Social icons: the icon by itself, no circle or outline (Oct 1, 2026) */
.social__link,
.social__link.btn,
.socials--bordered .social__link {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.social__link::before,
.social__link::after {
  display: none !important;
}

/* Fields on black: black with a 1px white outline (Oct 5, 2026). The theme draws the
   outline in the line color (#292929) and the search box at 2px; both set to 1px white here. */
.color-scheme-inverse .form-control {
  border-color: #ffffff;
}
.color-scheme-inverse .search__input {
  --inputs-search-border-width: 1px;
  --inputs-border-width: 1px;
}

/* Hero placeholders: dark until the photos are added, so the white titles stay readable,
   including on the white reading pages (every page and collection hero) */

[id*="__image_with_text_overlay"] .placeholder-svg,
[id*="__image_with_text_overlay"] svg[class*="placeholder"] {
  background-color: #141414;
  fill: #242424;
  color: #242424;
}

[id*="__image_with_text_overlay"] .placeholder-svg * {
  stroke: #242424 !important;
  fill: #242424 !important;
}

/* Waitlist: the Klaviyo form in the site's style on black (Oct 6, 2026): no white box,
   black fields with a 1px white outline, a 36px white pill button */
.page-template.waitlist .klaviyo-form form {
  background-color: transparent !important;
}
.page-template.waitlist .klaviyo-form input {
  height: 3.6rem !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: 'PP Neue Montreal', -apple-system, sans-serif !important;
  font-size: 1.6rem !important;
}
.page-template.waitlist .klaviyo-form input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 1.6rem !important;
}
/* Button matches the site's buttons on black (DESIGN.md, Oct 8 and Oct 19, 2026): transparent, 1px white
   outline, white 16px regular text, sentence case, 16px side padding; fills white with black text on hover */
.page-template.waitlist .klaviyo-form button {
  height: 3.6rem !important;
  padding: 0 1.6rem !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  background-color: transparent !important;
  color: #ffffff !important;
  font-family: 'PP Neue Montreal', -apple-system, sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  letter-spacing: var(--preset-tracking-body) !important;
  text-transform: none !important;
}
.page-template.waitlist .klaviyo-form button * {
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
.page-template.waitlist .klaviyo-form button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
}
.page-template.waitlist .klaviyo-form button:hover * {
  color: #000000 !important;
}
/* Waitlist: the Preset Standard line sits centered under the Join waitlist button (Oct 19, 2026) */
.page-template.waitlist [id*="waitlist_standard"] .rich-text__text {
  margin-inline: auto !important;
}

/* "Choose your bike" brand names on phones (Oct 6, 2026): same 14px size, the menu tracking (0.15em)
   for more presence without adding a new text size */
@media only screen and (max-width: 767px) {
  [id$="__brand_cards"] .card-media__content :is(h2, h3, h4, .h4, .rich-text__heading) {
    letter-spacing: var(--preset-tracking-menu);
  }
}

/* Press state on touch screens (Oct 6, 2026): brand cards and kit cards shrink slightly while pressed,
   the phone version of the desktop hover zoom. Quick in (100ms), eases back on release (160ms).
   Mouse devices keep the theme's hover zoom; reduced motion turns it off. */
@media (hover: none) {
  .product-card,
  [id$="__brand_cards"] .card-media {
    transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .product-card a,
  [id$="__brand_cards"] .card-media a {
    -webkit-tap-highlight-color: transparent;
  }
  .product-card.is-pressed,
  [id$="__brand_cards"] .card-media.is-pressed {
    transform: scale(0.97);
    transition-duration: 100ms;
  }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
  .product-card,
  [id$="__brand_cards"] .card-media {
    transition: none;
  }
  .product-card.is-pressed,
  [id$="__brand_cards"] .card-media.is-pressed {
    transform: none;
  }
}

/* Footer sign-off: the full PRESET wordmark, centered under the social icons (Oct 6, 2026) */
.footer .footer__wordmark {
  display: block;
  margin-top: 0.8rem;
}
.footer .footer__wordmark img {
  display: block;
  width: 15rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .footer .footer__wordmark img {
    width: 12rem;
  }
}

/* Section spacing on phones (Oct 6, 2026): the theme caps phone padding at 40px whatever the setting,
   which crams sections together. Phones and tablets use the same padding as desktop (100px stays 100px). */
.section--padding {
  --section-padding-top-mobile: var(--section-padding-top, 0px);
  --section-padding-bottom-mobile: var(--section-padding-bottom, 0px);
}
@media (min-width: 768px) and (max-width: 1279px) {
  .section--padding {
    padding-block-start: var(--section-padding-top, 0px);
    padding-block-end: var(--section-padding-bottom, 0px);
  }
}

/* One label style site-wide (Oct 6, 2026): 12px, bold, uppercase, menu tracking (0.15em), the same as the
   nav, footer headings, Newsletter title and before/after labels. Brand card names and FAQ questions now match. */
[id$="__brand_cards"] .card-media__content :is(h2, h3, h4, .h4, .rich-text__heading){
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: var(--preset-tracking-menu);
  text-transform: uppercase;
}

/* Hero text (Oct 6, 2026): top-left on desktop, over the black above the bike, kept to a short measure;
   on phones centered in the solid black band at the bottom of the phone video */
@media only screen and (min-width: 768px) {
  [id$="__video_hero_pfTQDj"] .video-hero__content-wrapper {
    max-width: 42rem;
  }
}
@media only screen and (max-width: 767px) {
  [id$="__video_hero_pfTQDj"] .content-overlay {
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: 4rem;
  }
  [id$="__video_hero_pfTQDj"] .video-hero__content-wrapper {
    text-align: left;   /* left-aligned on every screen (Oct 8, 2026) */
    margin-inline: 0;
  }
  [id$="__video_hero_pfTQDj"] .video-hero__content-wrapper .rich-text__button,
  [id$="__video_hero_pfTQDj"] .video-hero__content-wrapper motion-element:has(.btn) {
    display: flex;
    justify-content: flex-start;
  }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Footer menus centered on desktop (Oct 6, 2026): the four columns sit as a centered group and each column's
   heading and links are centered, like the rest of the footer. Phones keep the full-width accordion. */
@media only screen and (min-width: 1024px) {
  .footer .footer__top-wrapper {
    justify-content: center;
  }
  .footer .footer-block--menu,
  .footer .footer-block--menu .footer-block__heading {
    text-align: center;
  }
  .footer .footer-block--menu .linklist,
  .footer .footer-block--menu ul {
    align-items: center;
    justify-content: center;
  }
  .footer .footer-block--menu summary,
  .footer .footer-block--menu .accordion-details__summary {
    justify-content: center;
  }
}

/* Breadcrumbs on pages (Oct 7, 2026): a black band above the hero, also on the white reading pages */
.preset-breadcrumb-band {
  background-color: #000000;
  color: #ffffff;
}



/* Detail rows in the buy box: the Questions row style, #E5E5E5 lines inside the list only */
.product__block--collapsible_tab .accordion-details__summary {
  border-bottom: 1px solid #e5e5e5;
}
.product__block--collapsible_tab summary :is(h2, h3, h4, h5, .h5, .h4) {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: var(--preset-tracking-menu);
  text-transform: uppercase;
}
.product__block--collapsible_tab .accordion-details__content { font-size: 1.6rem; line-height: 1.5; }
.product__block--collapsible_tab .accordion-details__content ul { padding-left: 1.8rem; margin: 0 0 1.2rem; list-style: disc; }

/* Judge.me reviews heading in the site's section heading style */
.jdgm-rev-widg__title,
.jm-review-widget-minimal-header__title {
  font-family: var(--font-heading-family) !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}
@media (max-width: 767px) { .jdgm-rev-widg__title,
.jm-review-widget-minimal-header__title { font-size: 2.4rem !important; } }

.jm-review-widget-minimal-header__title { width: 100%; align-self: flex-start; }
.jm-stack:has(> .jm-review-widget-minimal-header__title) { width: 100%; align-items: flex-start; }

/* Kickflip "Customize this kit" replaces Add to cart (Oct 7, 2026): full width, 36px pill, 14px, like the site's buttons */
.product__block--@app .preset-kf-button,
.product__info-container .preset-kf-button {
  width: 100% !important;
  max-width: none !important;
  height: 3.6rem !important;
  font-family: var(--font-body-family) !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.025em !important;
}
/* Once Kickflip draws its Customize button, the theme's Add to cart and sticky bar step aside, so the only way
   to buy is through the customizer. Until a kit is connected in Kickflip, Add to cart stays. */
.product__info-container:has([id*="kickflip_customize"] button) .product__block--buy_buttons,
body:has([id*="kickflip_customize"] button) sticky-atc-bar,
body:has([id*="kickflip_customize"] button) .sticky-atc-bar {
  display: none !important;
}

/* Brand collections (Oct 8, 2026): no kit count, just the Filter button. The count stays for screen readers. */
.collection #ProductCount { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Brand collection heroes (Oct 13, 2026: centered stack): the black brand tile on black, then a clear gap,
   then the brand name and two short lines centered under the bike. The tile's edges are pure #000, so cropping
   its empty sides and top blends in. Text is in normal flow, so it can never run into the bike. */
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .section__container > .relative.overflow-hidden { display: flex; flex-direction: column; height: auto !important; background: #000; }
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] parallax-element { height: auto !important; }
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .media { --hero-h: clamp(40rem, 52vh, 50rem); --hero-k: 1.6; height: var(--hero-h) !important; min-height: 0 !important; padding-top: 0 !important; }
/* the tiles are 4:5 with the bike between 35% and 95% of the height: scale the tile so the bike fills the box, stand at the bottom */
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .media img { object-fit: contain; object-position: center bottom; top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; height: calc(var(--hero-h) * var(--hero-k)) !important; bottom: calc(var(--hero-h) * -0.07) !important; }
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .image-with-text-ovelay__content { position: static; }
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .image-with-text-ovelay__content-wrapper { position: static !important; inset: auto !important; height: auto !important; padding: 4.8rem 2rem 6.4rem !important; display: flex; justify-content: center; }
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .rich-text { text-align: center !important; height: auto; }
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .rich-text__heading { margin: 0; text-align: center !important; }
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .rich-text__text { margin: 1.6rem auto 0 !important; max-width: 46rem; text-align: center !important; }
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .rich-text__text p + p { margin-top: 0.4rem; }
body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .bg-overlay { display: none; }
@media (max-width: 767.98px) {
  body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .media { --hero-h: 80vw; --hero-k: 1.5; }
  body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .image-with-text-ovelay__content-wrapper { padding: 3.2rem 1.6rem 4rem !important; }
  body.collection-template:is(.honda, .yamaha, .ktm, .husqvarna, .kawasaki, .suzuki, .model) [id$="__image_with_text_overlay_d3WzGw"] .rich-text__text { font-size: 1.6rem; line-height: 1.45; max-width: 34rem; }
}
/* Collections: the Filter button sits about 32px under the hero on desktop (28px on phones) */
@media (min-width: 768px) {
  body.collection-template [id$="__product-grid"] .collection { padding-top: 2rem; }
}

/* Rider feed (Oct 8, 2026): each card is the clip alone, 3:4 edge to edge, the same height as the image cards beside it */
[id$="__home_feed"] .stf-card, [id$="__pdp_feed"] .stf-card { padding: 0; }
[id$="__home_feed"] .stf-card__info, [id$="__pdp_feed"] .stf-card__info { display: none; }
[id$="__home_feed"] .stf-card__media, [id$="__pdp_feed"] .stf-card__media { aspect-ratio: 3 / 4; height: auto; margin: 0; }
/* Buttons on black (Oct 8, 2026, like Alpinestars): transparent, 1px white outline, white text; they fill white on hover.
   Covers the hero, overlays, image cards on black and the footer's Subscribe. Icon buttons and the buy box are untouched. */
.color-scheme-inverse :is(.btn--primary, .btn--secondary):not(.preset-kf-button) {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  box-shadow: none !important;
}
.color-scheme-inverse :is(.btn--primary, .btn--secondary):not(.preset-kf-button):hover {
  background: #fff !important;
  color: #000 !important;
}
/* The theme's hover fill slides in on ::before in the scheme's button-text color, which is black on black sections,
   so the hero, overlay and search Filter buttons went fully black on hover. The fill is white there (Oct 20, 2026). */
.color-scheme-inverse :is(.btn--primary, .btn--secondary):not(.preset-kf-button)::before { background-color: #fff !important; }
/* Disabled buttons don't react to hover (the bike finder's Show kits before a bike is picked) */
.btn:is([disabled], [aria-disabled=true]):hover::before { width: 0 !important; }
.color-scheme-inverse .btn:is([disabled], [aria-disabled=true]):not(.preset-kf-button):hover { background: transparent !important; color: #fff !important; }
/* Shopify's data-sharing opt-out button matches the buttons on black */
.pc--opt-out-form-button { font-family: 'PP Neue Montreal', -apple-system, sans-serif !important; font-size: 1.6rem !important; font-weight: 400 !important; letter-spacing: var(--preset-tracking-body) !important; text-transform: none !important; transition: background-color .2s, color .2s; }
.pc--opt-out-form-button:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; }

/* Three-size enforcement for theme-drawn text (Oct 8, 2026) */
body, .text-base, .text-lg, .rte, .rte :is(p, li) { font-size: 1.6rem; }
.product__info-container .f-price, .product__info-container .f-price-item, .product__block--price .f-price-item { font-size: 1.6rem !important; }
input, select, textarea, .field__input, .search__input { font-size: 1.6rem !important; }
.breadcrumbs, .breadcrumbs a, .breadcrumbs span, [class*="breadcrumb"] :is(a, span, li) { font-size: 1.2rem; }
.facets__summary, .facets__summary :is(span, h3, h4), .facets__heading, .facet-checkbox, .facets__price-text { font-size: 1.2rem !important; }
.rich-text__subheading, .rich-text__subheading *, .text-subheading { font-size: 1.2rem !important; }
/* No one-word last lines (Oct 8, 2026): headings balance across lines, paragraphs avoid a lone last word */
h1, h2, h3, .h1, .h2, .h3, .hd1, .hd2 { text-wrap: balance; }
p, .rte p, .rich-text__text { text-wrap: pretty; }
/* Readable measure (Oct 8, 2026): left-aligned text blocks stop at about 70 characters a line (16px), headings too */
.rich-text .rich-text__text, .rich-text .rte, .rich-text .rich-text__heading, .section__header .rte, .section__description,
.main-page .rte, .page__content .rte { max-width: 56rem; margin-inline: 0 !important; }

/* Footer icon row: on phones the 2x2 grid gets the footer menu line between rows */
@media (max-width: 767px) {
  [id$="__footer_trust"] .multicolumn__items { row-gap: 0; }
  [id$="__footer_trust"] .multicolumn-card-wrapper:nth-child(-n+2) { padding-bottom: 2.4rem; }
  [id$="__footer_trust"] .multicolumn-card-wrapper:nth-child(n+3) { padding-top: 2.4rem; border-top: 1px solid rgb(41, 41, 41); }
}

/* Buy box facts (Oct 13, 2026; consolidated Oct 14): three lines, each a black circle with a white check.
   Replaces the Oct 7 four-across trust row, whose rules were all overridden. */
.product__info-container .f-grid:has(> .f-column > .grid-icon-box) { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; }
.product__info-container .f-grid:has(> .f-column > .grid-icon-box) > .f-column { width: auto; max-width: none; padding: 0; }
.product__info-container .grid-icon-box { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
.product__info-container .grid-icon-box svg { display: none; }
.product__info-container .grid-icon-box::before {
  content: ""; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
}
.product__info-container .grid-icon-box .inline-richtext { font-size: 1.4rem; font-weight: 400; letter-spacing: 0.025em; white-space: normal !important; }
.product__info-container .grid-icon-box .inline-richtext a { text-decoration: underline; text-underline-offset: var(--preset-underline-offset); display: inline-block; padding-block: 0.4rem; margin-block: -0.4rem; } /* 24px tap target */

/* Buy box: the shipping line under the price sits below the price in size (12px) */
.product__info-container .rte .product__text { font-size: 1.2rem; }

/* Buy box payment icons: full color, left, one line on phones, no panel padding */
.product__block--payment_info .product__payment-info { padding: 0; gap: 0; }
.product__block--payment_info .list { gap: 0.6rem; justify-content: flex-start; flex-wrap: nowrap; }
.product__block--payment_info .list li { flex: 0 1 3.8rem; min-width: 0; }
.product__block--payment_info .list svg { width: 100%; height: auto; }
.product__info-container .product__block--collapsible_tab .accordion-details__content > :last-child { margin-bottom: 0; }

/* Buy box accordion: 12px body text */
.product__info-container .product__block--collapsible_tab .accordion-details__content,
.product__info-container .product__block--collapsible_tab .accordion-details__content :is(p, li) { font-size: 1.2rem; line-height: 1.55; }

/* Step numbers in a circle on How it works (home) and How it's made (product), matching the collection steps strip */
:is([id$="__home_cards_1"], [id$="__pdp_cards_1"], [id$="__care_cards"], [id$="__fit_steps"], [id$="__g_steps"], [id$="__hm_steps"], [id$="__rc_steps"], [id$="__sh_steps"]) .rich-text__subheading > span { box-sizing: border-box; width: 1.8rem; height: 1.8rem; border: 1px solid currentColor; border-radius: 999px; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; line-height: 1; letter-spacing: 0; padding: 0; }

/* Accordions (Oct 12, 2026): thin-line rows everywhere in the page body, one 1px hairline (#E5E5E5) under each question and above the first. Footer menus keep their own rows. */
main .accordion-details__summary { border-bottom: 1px solid #e5e5e5 !important; }
main .accordion-item:first-child .accordion-details,
main :not(.product__block--collapsible_tab) + .product__block--collapsible_tab .accordion-details { border-top: 1px solid #e5e5e5; }

/* How it works / How it's made: the step number sits in the card's top-left corner, at the card's text padding */
:is([id$="__home_cards_1"], [id$="__pdp_cards_1"], [id$="__care_cards"], [id$="__fit_steps"], [id$="__g_steps"], [id$="__hm_steps"], [id$="__rc_steps"], [id$="__sh_steps"]) .card-media { position: relative; }
:is([id$="__home_cards_1"], [id$="__pdp_cards_1"], [id$="__care_cards"], [id$="__fit_steps"], [id$="__g_steps"], [id$="__hm_steps"], [id$="__rc_steps"], [id$="__sh_steps"]) .rich-text__subheading { position: absolute; top: 1.2rem; left: 1.2rem; margin: 0 !important; z-index: 2; }
@media (min-width: 768px) { :is([id$="__home_cards_1"], [id$="__pdp_cards_1"], [id$="__care_cards"], [id$="__fit_steps"], [id$="__g_steps"], [id$="__hm_steps"], [id$="__rc_steps"], [id$="__sh_steps"]) .rich-text__subheading { top: 2.4rem; left: 2.4rem; } }

/* "PRESET in the wild." (Oct 12, 2026): the black wordmark in a white box before the heading (DESIGN.md s4, second exception to one mark per object); the description link is the Follow button */
:is([id$="__home_wild"], [id$="__pdp_wild"]) .rich-text__heading { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
:is([id$="__home_wild"], [id$="__pdp_wild"]) .rich-text__heading::before { content: "" / "Preset"; flex: none; width: 13.9rem; height: 3.6rem; background: #ffffff url("preset-wordmark-black.svg") no-repeat center / 11.5rem 2.2rem; }
:is([id$="__home_wild"], [id$="__pdp_wild"]) .section__description .footer__list-social { margin: 1.2rem 0 0; padding: 0; }
:is([id$="__home_wild"], [id$="__pdp_wild"]) .section__description .footer__list-social li { margin: 0; }
:is([id$="__home_wild"], [id$="__pdp_wild"]) .section__description a { text-decoration: none; }
@media (max-width: 767px) { :is([id$="__home_wild"], [id$="__pdp_wild"]) .rich-text__heading::before { width: 11.8rem; height: 3.2rem; background-size: 9.4rem 1.8rem; } }

/* Product gallery thumbnails: no frame around the active thumbnail (Oct 12, 2026) */
.product__thumbs-container::after { display: none !important; }

/* Buy box (Oct 13, 2026): review slider and rider videos */

.preset-reviews { display: block; }
.preset-reviews__track { min-width: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.preset-reviews__track::-webkit-scrollbar { display: none; }
.preset-reviews__slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; gap: 1.2rem; align-items: center; margin: 0; padding: 1.2rem 0; }
.preset-reviews__media, .preset-reviews__bar { display: block !important; }
.preset-reviews__media { flex: none; width: 6.4rem; height: 6.4rem; border-radius: 0.6rem; overflow: hidden; background: #ededed; }
.preset-reviews__media img { width: 100%; height: 100%; object-fit: cover; }
.preset-reviews__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.preset-reviews__head { display: flex; gap: 0.8rem; align-items: center; }
.preset-reviews__name { font-size: 1.3rem; font-weight: 700; }
.preset-reviews__stars { font-size: 1.2rem; letter-spacing: 0.1em; color: #d6d6d6; }
.preset-reviews__stars .is-on { color: #000; }
.preset-reviews__text { margin: 0; padding: 0; border: 0; font-size: 1.3rem; line-height: 1.45; font-style: normal; }
.preset-reviews__bike { font-size: 1.2rem; color: #6b6b6b; }
.preset-reviews__ph-label, .preset-videos__ph-label { font-size: 1.2rem; color: #6b6b6b; }
.preset-reviews__bar { display: block; height: 0.8rem; width: 22rem; max-width: 100%; border-radius: 0.4rem; background: #ededed; }
.preset-reviews__bar--short { width: 14rem; }

.preset-videos__heading { margin: 0 0 1rem; font-size: 1.2rem; font-weight: 700; letter-spacing: var(--preset-tracking-menu); text-transform: uppercase; }
.preset-videos__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 0.8rem) / 5); gap: 0.8rem; overflow-x: auto; scrollbar-width: none; }
.preset-videos__track::-webkit-scrollbar { display: none; }
.preset-videos__tile { position: relative; aspect-ratio: 9 / 16; border: 0; padding: 0; border-radius: 0.6rem; overflow: hidden; background: #ededed; cursor: pointer; display: grid; place-items: center; }
.preset-videos__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preset-videos__play { position: relative; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #000; color: #fff; }
.preset-videos__play svg { width: 1.4rem; height: 1.4rem; }
.preset-videos__tile--placeholder { cursor: default; align-content: center; gap: 0.8rem; }
.preset-videos__ph-label { font-size: 1rem; text-align: center; padding: 0 0.4rem; }
.preset-videos__tile .preset-videos__play { width: 2.8rem; height: 2.8rem; }
.preset-videos__caption { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; font-size: 1.1rem; color: #fff; text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
/* buy box slider controls (Oct 14): the image cards' progress line with bare chevrons to its right */
.preset-slider-controls { display: flex; align-items: center; gap: 0.4rem; margin-top: 1.2rem; }
.preset-slider-controls[hidden] { display: none; }
/* rider videos: chevrons only, on the right; phones show nothing, the cut-off tile shows it scrolls (Oct 14) */
.preset-slider-controls--arrows { justify-content: flex-end; }
@media (max-width: 767px) { .preset-slider-controls--arrows { display: none !important; } }
.preset-slider-progress { flex: 1; height: 2px; margin-right: 1.2rem; background: rgba(0, 0, 0, 0.1); }
.preset-slider-progress span { display: block; height: 100%; width: 0; background: #000; transition: width 0.2s ease; }
.preset-slider-arrow { flex: none; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; padding: 0; border: 0; background: none; color: #000; cursor: pointer; }
.preset-slider-arrow svg { width: 1.6rem; height: 1.6rem; }
.preset-slider-arrow:disabled { opacity: 0.3; cursor: default; }
/* phones: no chevrons, just the full-width line 16px under the slider, exactly like the image cards on phones */
@media (max-width: 767px) {
  .preset-slider-controls { margin-top: 1.6rem; }
  .preset-slider-progress { margin-right: 0; }
  .preset-slider-arrow { display: none; }
}
.preset-videos__dialog { padding: 0; border: 0; background: #000; max-width: min(42rem, 92vw); }
.preset-videos__dialog::backdrop { background: rgba(0, 0, 0, 0.8); }
.preset-videos__dialog video { display: block; width: 100%; max-height: 86vh; }
.preset-videos__close { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 1; width: 3.2rem; height: 3.2rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
@media (max-width: 767px) { .preset-videos__track { grid-auto-columns: calc((100% - 3 * 0.8rem) / 3.4); } }

/* Collections (Oct 13, 2026): the sticky Filter bar is a white bar with the button centered top to bottom, still left aligned.
   The hidden kit count (screen readers only) and the column gap had pushed the button to the bottom of the bar. */
body.collection-template .collection .sticky-element { background: #fff; }
body.collection-template .collection__toolbar { padding-block: 1.2rem !important; margin-bottom: 0 !important; align-items: center !important; }
body.collection-template .collection__toolbar-left { gap: 0 !important; align-items: center !important; }
body.collection-template .collection__toolbar-left > .md\:order-last { position: absolute; }
/* keep the resting spacing it had: 28px under the hero on phones, 24px from the bar to the first kit */
@media (max-width: 767px) { body.collection-template [id$="__product-grid"] .collection { padding-top: 1.6rem; } }
body.collection-template .collection > .collection__content { margin-top: 1.2rem; }

/* Tap targets (Oct 14, 2026, WCAG 2.5.8): footer links were 23px tall and the buy box "Terms" link was text-height */
.footer a.text-subtext { min-height: 2.4rem; }
/* Scroll rows that now take keyboard focus: show focus only for keyboard users */
:is(image-cards, [id^="shop-the-feed-"], .preset-videos__track, .preset-reviews__track):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Bike finder (Oct 14, 2026): assets/preset-bike.js, sections/preset-bike-finder.liquid */
.preset-label { font-size: 1.2rem; font-weight: 700; letter-spacing: var(--preset-tracking-menu); text-transform: uppercase; }
.preset-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: var(--preset-underline-offset); cursor: pointer; }
.preset-fine { font-size: 1.2rem; }
.preset-select { position: relative; display: block; }
.preset-select select { appearance: none; -webkit-appearance: none; width: 100%; height: 4.4rem; padding: 0 4rem 0 1.6rem; border-radius: 99px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 1.6rem; cursor: pointer; }
.preset-select select option { color: #000; }
.preset-select::after { content: ""; position: absolute; right: 1.8rem; top: 50%; width: 0.7rem; height: 0.7rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.preset-select select:disabled { opacity: 0.4; cursor: default; }
/* homepage finder */
.preset-finder__heading { margin: 0 0 2.4rem; }
.preset-finder__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 1.2rem; align-items: end; }
.preset-field { display: grid; gap: 0.8rem; }
.preset-finder .btn { height: 4.4rem !important; min-height: 4.4rem; }
.preset-finder .btn:disabled { opacity: 0.35; cursor: not-allowed; }
.preset-finder .preset-finder__go { align-self: end; margin: 0; }
.preset-finder__your { margin: 0 0 1.2rem; }
.preset-finder__saved { display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap; }
.preset-finder__bike { margin: 0; }
/* phones: one column, and Show kits is a fourth row the same width and height as Brand, Model and Year (Oct 14) */
@media (max-width: 767px) {
  .preset-finder__form { grid-template-columns: 1fr; }
  .preset-finder .btn { width: 100%; }
  .preset-finder .preset-finder__go { margin-top: 2.5rem; font-size: 1.6rem; padding: 0 1.6rem; }
}
/* header bike button and its panel; phones skip it (the header is too crowded) and use the Filter bar and homepage instead */
.preset-chip { display: inline-flex; align-items: center; height: 3.2rem; margin-right: 1.2rem; padding: 0 1.4rem; border: 1px solid currentColor; border-radius: 99px; background: linear-gradient(#fff, #fff) no-repeat left center / 0% 100%; color: inherit; cursor: pointer; font-size: 1.2rem; font-weight: 700; letter-spacing: var(--preset-tracking-menu); text-transform: uppercase; white-space: nowrap; transition: background-size var(--animation-button), color var(--animation-button); }
/* hover slides white in from the left, like every other button (Oct 14) */
.preset-chip:hover { background-size: 100% 100%; color: #000; }
.preset-pop { position: fixed; z-index: 1000; width: min(32rem, calc(100vw - 3.2rem)); background: #fff; color: #000; padding: 2.4rem; display: grid; gap: 1.2rem; box-shadow: 0 0 0 1px #e5e5e5; }
.preset-pop__bike { font-size: 2.4rem; font-weight: 700; letter-spacing: var(--preset-tracking-wide); text-transform: uppercase; line-height: 1.15; }
.preset-pop .preset-pop__show { display: inline-flex; align-items: center; justify-content: center; height: 3.6rem; border-radius: 99px; background: #000 !important; color: #fff !important; border: 1px solid #000 !important; text-decoration: none; }
.preset-pop .preset-pop__show:hover { background: #222 !important; }
.preset-pop__row { display: flex; gap: 1.6rem; align-items: center; }
.preset-pop__row .preset-link { font-size: 1.6rem; line-height: 1.44; }
@media (max-width: 767px) { .preset-chip { display: none !important; } }
/* the text-only bike pill beside Filter (sticky with the Filter bar) and its Model / Year form */
.preset-bikebar { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-left: 1.2rem; }
.preset-bikebar:empty { display: none; }
.preset-mini { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.preset-mini .preset-select select { height: 3.6rem; min-width: 16rem; }
/* desktop (Oct 14): Filter and the pill are two equal buttons centered in the bar (Filter alone is centered too);
   Model, Year and Save bike open centered on a row under them */
@media (min-width: 768px) {
  body.collection-template .collection__toolbar-left { flex: 1 1 100%; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0 1.2rem !important; }
  body.collection-template .collection__toolbar-left .facet-drawer-button, .preset-bikebar .preset-pill { width: 22rem; justify-content: center; }
  .preset-bikebar { display: contents; }
  .preset-bikebar .preset-mini { flex: 0 0 100%; justify-content: center; margin-top: 1.2rem; }
}
/* phones (Oct 14): Filter and the pill share one row; Model, Year and Save bike open on a full row under them,
   and Model gets the most room so names like CRF450R and 450 SX-F aren't cut off */
@media (max-width: 767px) {
  .preset-bikebar { display: contents; }
  /* Filter and the bike pill split the row into two equal buttons (Oct 14) */
  .collection__toolbar-left:has(.preset-bikebar:not(:empty)) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 1.2rem !important; width: 100%; }
  .collection__toolbar-left:has(.preset-bikebar:not(:empty)) .facet-drawer-button { width: 100%; justify-content: center; }
  .preset-bikebar .preset-pill { width: 100%; min-width: 0; justify-content: center; padding-inline: 1rem !important; }
  .preset-bikebar .preset-mini { grid-column: 1 / -1; flex-wrap: nowrap; gap: 0.8rem; margin-top: 1.2rem; }
  .preset-mini .preset-select { flex: 1 1 0; min-width: 0; }
  .preset-mini .preset-select:first-child { flex: 1.5 1 0; }
  .preset-mini .preset-select select { min-width: 0; padding-left: 1.4rem; padding-right: 3.2rem; text-overflow: ellipsis; }
  .preset-mini .btn { flex: 0 0 auto; height: 3.6rem; padding-inline: 1.6rem; }
}
/* kit cards (text only, above the name) and the buy box (uses the facts list's own check) */
.preset-card-fit { display: block; margin: 0 0 0.4rem; font-size: 1.2rem; }
.product__info-container .preset-buybox-fit strong { font-weight: 700; }
.preset-buybox-warn { display: grid; gap: 1.2rem; padding: 1.6rem; border: 1px solid #000; margin-bottom: 1.6rem; }
.preset-buybox-warn__row { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; }
/* header search: bikes first */
.preset-sugg { padding: 1.6rem 0; border-bottom: 1px solid #e5e5e5; margin-bottom: 1.6rem; }
.preset-sugg .preset-label { margin: 0 0 0.8rem; }
.preset-sugg ul { list-style: none; margin: 0; padding: 0; }
.preset-sugg a { display: flex; justify-content: space-between; gap: 1.6rem; padding: 0.8rem 0; text-decoration: none; }
.preset-sugg a:hover span:first-child { text-decoration: underline; text-underline-offset: var(--preset-underline-offset); }
/* hidden must win over the display rules above */
.preset-chip[hidden], .preset-pop[hidden], .preset-mini[hidden], .preset-sugg[hidden], .preset-finder [hidden] { display: none !important; }
/* Slider arrows: bare chevrons, no ring and no hover fill (Oct 14; DESIGN.md already uses bare chevrons on black) */
.swiper-button { border-color: transparent !important; background-color: transparent !important; box-shadow: none !important; }
.swiper-button::before { display: none !important; }
.swiper-button:hover { color: rgb(var(--color-foreground)) !important; }
/* Rider Credit note above Check out (Oct 14, 2026) */
/* Same size as the tax line above it, left aligned (Oct 20, 2026) */
.preset-credit-note { margin: 0 0 1.2rem; font-size: 1.2rem; text-align: left; }
/* Cart count: the bubble is white on the black header, so the number is black (it was white on white) */
.cart-count { color: #000 !important; font-weight: 700; }

/* Pre-launch buy box: the waitlist button takes the Kickflip button's place, with the launch line under it (Oct 28, 2026) */
.preset-prelaunch-cta .preset-kf-button { width: 100%; }
.preset-prelaunch-cta__note { margin: 0.75rem 0 0; text-align: center; font-size: var(--font-body-size, 1rem); opacity: 0.7; }

/* Graphics installed page: policy comparison table (Oct 28, 2026). Square, flat, brand tokens only; scrolls sideways on phones */
.preset-compare__lead, .preset-compare__note { max-width: 46rem; margin: 1rem 0 2rem; }
.preset-compare__note { margin: 1.5rem 0 0; }
.preset-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.preset-compare__table { width: 100%; min-width: 40rem; border-collapse: collapse; text-align: left; }
.preset-compare__table th, .preset-compare__table td { padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid rgba(var(--color-border), 0.15); vertical-align: top; }
.preset-compare__table thead th { font-weight: 600; }
.preset-compare__table tbody th { font-weight: 600; width: 22%; }
.preset-compare__table td:last-child, .preset-compare__table thead th:last-child { font-weight: 600; }
/* Graphics installed page: text grids for "What arrives" and the six steps, no image slots (Oct 28, 2026) */
.preset-grid__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem; }
.preset-grid__item { border-top: 1px solid rgba(var(--color-foreground), 0.15); padding-top: 1.25rem; }
.preset-grid__item h3 { margin: 0 0 0.5rem; }
.preset-grid__num { margin: 0 0 0.75rem; font-weight: 600; }
.preset-grid__link { margin-top: 0.75rem; }
@media screen and (max-width: 989px) { .preset-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 599px) { .preset-grid__items { grid-template-columns: 1fr; gap: 1.5rem; } }
/* Phones: the comparison becomes three stacked cards; the table stays from 750px up */
.preset-compare__cards { display: none; }
@media screen and (max-width: 749px) {
  .preset-compare__scroll { display: none; }
  .preset-compare__cards { display: grid; gap: 1.5rem; }
  .preset-compare__card { border-top: 1px solid currentColor; padding-top: 1rem; }
  .preset-compare__card dl { margin: 0.75rem 0 0; }
  .preset-compare__card dt { font-weight: 600; margin-top: 0.75rem; }
  .preset-compare__card dd { margin: 0.25rem 0 0; }
}
/* Brand pages: "Shop by model" link row (Oct 28, 2026). Square, flat, brand tokens only */
.preset-models__heading { margin: 0 0 1rem; }
.preset-models__list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.preset-models__link { display: inline-block; padding: 0.75rem 1.25rem; border: 1px solid rgba(var(--color-foreground), 0.25); text-decoration: none; font-weight: 600; }
.preset-models__link:hover, .preset-models__link:focus-visible { border-color: rgb(var(--color-foreground)); }
/* Model pages: "Which years fit" section, reuses the .preset-grid text grid (Oct 28, 2026) */
.preset-gens__lead { max-width: 46rem; margin: 1rem 0 0; }
.preset-gens__links { margin: 2rem 0 0; }
.preset-gens .preset-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media screen and (max-width: 749px) { .preset-gens .preset-grid__items { grid-template-columns: 1fr; gap: 1.5rem; } }
.preset-gens__links a { text-decoration: underline; text-underline-offset: 0.2em; }