/** Shopify CDN: Minification failed

Line 654:0 All "@import" rules must come first

**/
/* ===== Width System Variables ===== */
:root {
  --content-max-width: 1330px;
  --narrow-max-width: 880px;

  /* Radium Layout System (see RADIUM-LAYOUT-SYSTEM.md) */
  --radium-content-max: 1330px;
  --radium-page-max: 2000px;
  --radium-gutter-desktop: 30px;
  --radium-gutter-mobile: 20px;
  --radium-content-inner-padding: 40px;

  /* ===== Spacing Scale (4px base) ===== */
  --space-1: 4px;    /* Micro - icon gaps */
  --space-2: 8px;    /* Small - tight padding */
  --space-3: 12px;   /* Block margins */
  --space-4: 16px;   /* Common padding */
  --space-5: 20px;   /* Grid gaps */
  --space-6: 24px;   /* Component gaps */
  --space-7: 30px;   /* Section margin */
  --space-8: 32px;   /* Sidebar margins */
  --space-9: 40px;   /* Tablet padding */
  --space-10: 48px;  /* Button horizontal */
  --space-11: 60px;  /* Desktop padding */
  --space-12: 80px;  /* Extra large */

  /* ===== Colour System ===== */
  /* Backgrounds */
  --color-bg-primary: #000000;      /* Pure black - dropdowns, buttons */
  --color-bg-secondary: #141414;    /* Dark grey - page/modal backgrounds */
  --color-bg-tertiary: #1a1a1a;     /* Input backgrounds */

  /* Text */
  --color-text-primary: #ffffff;    /* White - headings, primary text */
  --color-text-secondary: #efefef;  /* Off-white - body text, labels */
  --color-text-muted: #999999;      /* Grey - notes, H6 */
  --color-text-disabled: #666666;   /* Dark grey - placeholders, compare prices */

  /* Borders */
  --color-border-default: #333333;  /* Standard borders, dividers */

  /* Brand / Accent */
  --color-accent: #FF3300;          /* Orange-red - links, tags, CTAs */
  --color-accent-dark: #a60000;     /* Dark red - focus states, hover, trash */

  /* Overlays */
  --color-overlay-light: rgba(166, 0, 0, 0.2);  /* Timer background */
  --color-overlay-medium: rgba(166, 0, 0, 0.3); /* Nav hover */

  /* ===== Form Variables (reference colour system) ===== */
  --input-bg: var(--color-bg-tertiary);
  --input-border: var(--color-border-default);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-disabled);
  --input-focus: var(--color-accent-dark);
}

/* ===== Mobile-only line breaks ===== */
@media (min-width: 1025px) {
  .mobile-br { display: none !important; }
}

/* ===== Sitewide Content Column =====
   Background hierarchy: #121212 (outer) > #141414 (column) > page content
   Keylines: 1px #262626 on each side of the 2000px column
   See theme.liquid for the .radium-content-column wrapper. */
html,
body {
  background-color: #000000 !important;
}

/* Cookie notice: plain black, no panel — the statement + Accept link sit
   straight on the page background (Ant 2026-07-16) */
.gdpr__notice {
  background: #000000 !important;
  box-shadow: none !important;
}

/* No full-viewport stretch anywhere: Booster's .container (and formerly the
   content column above) forced min-height 100vh, leaving a dead void between
   short page content and the footer. Footer tucks up under content instead
   (Ant 2026-07-16). */
.container {
  min-height: 0 !important;
}

.radium-content-column {
  max-width: 2000px;
  width: 100%;
  margin: 0 auto;
  background: #000000;
  border-left: 1px solid #262626;
  border-right: 1px solid #262626;
  position: relative;
  /* clip, NOT hidden: overflow-x:hidden forces computed overflow-y:auto,
     turning the column into a scroll container — any child poking past the
     bottom gives it a small internal scroll range that eats the first wheel
     tick (and every direction change). clip clips without scrolling. */
  overflow-x: clip;
}

/* XP3 landing pages: black column background so hero has no #141414 gap */
body[class*="xp3"] .radium-content-column {
  background: #000000;
}

/* Constrain fixed header to content column width */
.radium-header {
  max-width: 2000px !important;
}

/* Note: Blog page CSS moved to "Blog & Article Page Layout" section below (line ~1292) */

/* ============================================
   LAYOUT WIDTH OVERRIDES
   Reference: RADIUM-LAYOUT-SYSTEM.md — 1330px content max
   All Shop and Blog pages must match this width.
   WARNING: Always verify selectors against actual DOM.
   ============================================ */

/* Collection detail page — sort bar (div.max-width.row in sort.liquid)
   Booster col-12 child has 12px padding → container needs 33px (33+12=45) */
.template--collection .max-width.row {
  max-width: var(--radium-content-max, 1330px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 33px !important;
  padding-right: 33px !important;
  box-sizing: border-box !important;
}

/* Collection detail page — template wrapper (div.row.row--product-list)
   Booster col-12 children have 12px padding → 33+12=45 effective */
.template--collection .row.row--product-list {
  max-width: var(--radium-content-max, 1330px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 33px !important;
  padding-right: 33px !important;
  box-sizing: border-box !important;
}

/* Override Booster's align-self:flex-start on .product__list — it left-shifts the grid */
.template--collection .product__list {
  align-self: center !important;
}

/* Strip card-holder horizontal padding — wrapper (33px) + column (12px) = 45px already */
.template--collection .card--holder {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Product page - constrain main product row */
/* DOM class: "row product__row max-width product__row--default" */
[class*="template--product"] .row.product__row.max-width {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Product page - constrain recommended section */
/* DOM class: "row max-width" */
[class*="template--product"] .row.max-width {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Product page - reviews/apps section */
[class*="template--product"] [data-shopify="apps"] {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

/* END LAYOUT WIDTH OVERRIDES */

/* ===== Breakpoint Reference =====
   Mobile:  max-width: 767px
   Tablet:  min-width: 768px / max-width: 1024px
   Desktop: min-width: 1025px
   Wide:    min-width: 1200px

   Pattern: Desktop-first (max-width)
   ================================= */

/* ===== Global Form Focus States (Accessibility) ===== */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--input-focus) !important;
  outline: 2px solid var(--input-focus);
  outline-offset: 2px;
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
}

/* ===== Radium Hero (heading over video) ===== */
.rad-hero{ position:relative; height:calc(var(--rad-hero-height,72)*1vh); overflow:hidden; }
.rad-hero__media, .rad-hero__overlay{ position:absolute; inset:0; }
.rad-hero__video, .rad-hero__poster{ width:100%; height:100%; object-fit:cover; display:block; }

/* Poster-first: visible by default; hide when video ready */
.rad-hero__poster{ opacity:1; transition:opacity .35s ease; }
.rad-hero--video-ready .rad-hero__poster{ opacity:0; }

.rad-hero__overlay{
  pointer-events:none;
  background: linear-gradient(180deg,
    rgba(0,0,0, calc(var(--rad-ov, .3))) 0%,
    rgba(0,0,0, calc(var(--rad-ov, .3)*.6)) 50%,
    rgba(0,0,0, calc(var(--rad-ov, .3)*.2)) 100%);
}
.rad-hero{ --rad-ov: calc((var(--overlay-pct, 30)) / 100); }
.rad-hero[style]{ --overlay-pct: var(--rad-overlay, 30); } /* hook if you later expose via style */

.rad-hero__inner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; height:100%;
  padding-inline:clamp(16px,4vw,32px); text-align:center;
}

/* Centered content */
.rad-hero__content{ max-width: 52rem; margin:auto; color: var(--color-text-primary); }

/* EB Garamond Bold just for the heading */
.rad-hero__heading{
  font-family: "EB Garamond", ui-serif, Georgia, serif;
  font-weight: 700;
  line-height: 1.04;
  margin: .2rem 0 .75rem;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  letter-spacing: 0.01em;
}
.rad-hero__text{ margin: 0 0 1.1rem; font-size: clamp(1rem, 1.6vw, 1.2rem); opacity:.95; }

/* One-button row – matches Booster spacing */
.rad-hero__buttons{ display:flex; justify-content:center; gap:var(--space-3); flex-wrap:wrap; }

/* Mobile poster-only height tweak */
@media (max-width: 767px){
  .rad-hero{ height:calc(var(--rad-hero-height,60)*1vh); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:no-preference){
  .rad-hero__content > *{ opacity:0; transform:translateY(10px); animation:rh-fade .5s ease .05s both; }
  .rad-hero__heading{ animation-delay:.1s; }
  .rad-hero__text{ animation-delay:.18s; }
  .rad-hero__buttons{ animation-delay:.24s; }
  @keyframes rh-fade{ to{ opacity:1; transform:none; } }
}
/* Radium Hero — typography + spacing */
.rad-hero__heading{
  font-family: var(--head-font, EB Garamond, ui-serif, Georgia, serif);
  font-weight: var(--head-weight, 700);
  font-size: clamp(var(--head-min, 2.2rem), 6vw, var(--head-max, 4.6rem));
  line-height: 1.04;
  margin: .2rem 0 var(--gap-vert, 1rem);
}
.rad-hero__text{ margin: 0 0 var(--gap-vert, 1rem); }

/* Radium Hero — layers + centering */
.rad-hero{ position:relative; height:calc(var(--hero-h,72)*1vh); overflow:hidden; }
.rad-hero__media{ position:absolute; inset:0; z-index:0; }
.rad-hero__video,
.rad-hero__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rad-hero__overlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg,
    rgba(0,0,0,var(--overlay,.32)) 0%,
    rgba(0,0,0,calc(var(--overlay,.32)*.65)) 50%,
    rgba(0,0,0,calc(var(--overlay,.32)*.25)) 100%);
}
.rad-hero__inner{
  position:relative; z-index:2; height:100%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding-inline: clamp(16px,4vw,32px); padding-bottom: var(--pad-bottom, 8vh);
}
.rad-hero__content{ max-width: var(--content-max, 52rem); margin:auto; color: var(--color-text-primary); }
.rad-hero__buttons{ display:flex; justify-content:center; gap:var(--space-3); flex-wrap:wrap; margin-top: calc(var(--gap-vert,1rem) * .5); }

/* Poster fades after video is ready (script adds class) */
.rad-hero__poster{ opacity:1; transition:opacity .35s ease; }
.rad-hero--video-ready .rad-hero__poster{ opacity:0; }

/* Radium Hero – structure + overlay (match playground) */
.rad-hero{ position:relative; height:calc(var(--hero-h,72)*1vh); overflow:hidden; color: var(--color-text-primary); }
.rad-hero__media, .rad-hero__overlay{ position:absolute; inset:0; z-index:0; }
.rad-hero__poster, .rad-hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rad-hero__overlay{
  pointer-events:none; z-index:1;
  background: linear-gradient(180deg,
    rgba(0,0,0,var(--overlay,.32)) 0%,
    rgba(0,0,0,calc(var(--overlay,.32)*.65)) 50%,
    rgba(0,0,0,calc(var(--overlay,.32)*.25)) 100%);
}

/* Centered content, lowered by 20vh to match your playground */
.rad-hero__inner{
  margin-top:20vh;              /* <- you had this in playground; keep it */
  position:relative; z-index:2; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding-inline: var(--pad-inline, clamp(16px,4vw,32px));
  text-align:center;
}
.rad-hero__content{ max-width: var(--content-max, 52rem); margin:auto; }

.rad-hero__heading{
  font-family: var(--head-font, EB Garamond, ui-serif, Georgia, serif);
  font-weight: var(--head-weight, 700);
  font-size: clamp(var(--head-min, 2.2rem), 6vw, var(--head-max, 4.6rem));
  line-height:1.04; margin:.2rem 0 calc(var(--gap-vert,1rem)*.85); letter-spacing:.01em;
}
.rad-hero__text{ margin:0 0 var(--gap-vert,1rem); font-size: clamp(1rem, 1.6vw, var(--text-size,1.15rem)); opacity:.95; }

.rad-hero__buttons{ display:flex; justify-content:center; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-top: calc(var(--gap-vert,1rem) * .5); }
.rad-hero__image{ margin-top:1.5rem; }
.rad-hero__image img{ width:100%; max-width:400px; height:auto; display:block; margin:0 auto; border-radius:6px; }

/* Poster-first fade (script toggles this class) */
.rad-hero__poster{ opacity:1; transition:opacity .35s ease; }
.rad-hero--video-ready .rad-hero__poster{ opacity:0; }

/* Motion (optional) */
@media (prefers-reduced-motion:no-preference){
  .rad-hero__content > *{ opacity:0; transform:translateY(10px); animation:rh-fade .5s ease .05s both; }
  .rad-hero__heading{ animation-delay:.10s; }
  .rad-hero__text{    animation-delay:.18s; }
  .rad-hero__buttons{ animation-delay:.24s; }
  .rad-hero__image{   animation-delay:.30s; }
  @keyframes rh-fade{ to{ opacity:1; transform:none; } }
}

/* === Radium Hero: hard baseline === */
.rad-hero{ position:relative; height:calc(var(--hero-h,72)*1vh); overflow:hidden; color: var(--color-text-primary); }

/* Underlay: fills the section */
.rad-hero__media{ position:absolute; inset:0; z-index:0; }
.rad-hero__video,
.rad-hero__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* Overlay gradient (optional) */
.rad-hero__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg,
    rgba(0,0,0,var(--overlay,.32)) 0%,
    rgba(0,0,0,calc(var(--overlay,.32)*.65)) 50%,
    rgba(0,0,0,calc(var(--overlay,.32)*.25)) 100%);
}

/* Overlay content: centred above media */
.rad-hero__inner{
  position:relative; z-index:2; height:100%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding-inline: clamp(16px,4vw,32px);
}
.rad-hero__content{ max-width: var(--content-max,52rem); margin:auto; }
.rad-hero__buttons{ display:flex; justify-content:center; gap:var(--space-3); flex-wrap:wrap; }

/* Poster fades once video is ready */
.rad-hero__poster{ opacity:1; transition:opacity .35s ease; }
.rad-hero--video-ready .rad-hero__poster{ opacity:0; }

/* Typography hooks (from settings) */
.rad-hero__heading{
  font-family: var(--head-font, EB Garamond, ui-serif, Georgia, serif);
  font-weight: var(--head-weight, 700);
  font-size: clamp(var(--head-min, 2.2rem), 6vw, var(--head-max, 4.6rem));
  line-height:1.04; margin:.2rem 0 var(--gap-vert,1rem);
}
.rad-hero__text{ margin:0 0 var(--gap-vert,1rem); }

/* Force the hero heading to use the Customize controls */
.rad-hero__heading{
  font-family: var(--head-font, var(--font-heading-family, serif));
  font-weight: var(--head-weight, 700);
  font-size: clamp(var(--head-min, 2.2rem), 6vw, var(--head-max, 4.6rem));
  line-height: 1.04;
  margin: .2rem 0 var(--gap-vert, 1rem);
}

/* Hide Shopify cookie consent banner */
#shopify-pc__banner,
.shopify-pc__banner__dialog {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Search dropdown black background */
.search__container--abs .search__container--wrapper,
.search__results,
.search__results--abs {
  background: var(--color-bg-primary) !important;
}

/* Search icon white color */
.search__container--abs .search__icon--submit,
.search__container--abs .search__icon,
.search__container--abs button,
.search__container--abs .uil {
  color: var(--color-text-primary) !important;
}

/* Input text and placeholder white/light gray */
.search__container--abs input {
  color: var(--color-text-primary) !important;
}

.search__container--abs input::placeholder {
  color: var(--color-text-disabled) !important;
  opacity: 1 !important;
}

.search__container--abs input::-webkit-input-placeholder {
  color: var(--color-text-disabled) !important;
  opacity: 1 !important;
}

.search__container--abs input::-moz-placeholder {
  color: var(--color-text-disabled) !important;
  opacity: 1 !important;
}

.search__container--abs input:-ms-input-placeholder {
  color: var(--color-text-disabled) !important;
  opacity: 1 !important;
}

/* CRITICAL: Show search results when absolute search container is focused */
/* Maximum specificity to override theme defaults */
.search__container--abs.focused .search__results,
.search__container--abs.focused .search__results--abs,
.search__container--abs.focused div[data-search-suggest] {
  display: flex !important;
  flex-wrap: wrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* === Search Product Layout Adjustments === */
/* Remove the scale transform - it interferes with sizing */
.search__results .card--default,
.search__results--abs .card--default {
  transform: none !important;
}

/* Force square aspect ratio with multiple methods */
.search__results .card__img--ratio,
.search__results--abs .card__img--ratio {
  padding-top: 0 !important;        /* Cancel theme's padding-top */
  padding-bottom: 100% !important;  /* Create 1:1 square ratio */
  aspect-ratio: 1 / 1 !important;
  height: 0 !important;
  position: relative !important;
}

/* Ensure images fill the square container */
.search__results .card__img,
.search__results--abs .card__img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Default: 5 columns for medium desktop */
.search__results .col-md-1-5,
.search__results--abs .col-md-1-5 {
  flex: 0 0 calc(20% - 0.8rem) !important;
  max-width: calc(20% - 0.8rem) !important;
}

/* Add spacing between products and margins around container */
.search__results,
.search__results--abs {
  gap: 1rem !important;
  padding: 1rem !important;
}

/* Very wide screens - 6 columns */
@media (min-width: 1200px) {
  .search__results .col-md-1-5,
  .search__results--abs .col-md-1-5 {
    flex: 0 0 calc(16.666% - 1rem) !important;
    max-width: calc(16.666% - 1rem) !important;
  }

  .search__results,
  .search__results--abs {
    gap: var(--space-5) !important;
    padding: 1.5rem 8% !important;
  }
}

/* Hide the native browser clear button (X) inside search input */
.search__container--abs input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none !important;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Add spacing above search result section headings */
.searchpage__subtitle {
  margin-top: 3rem !important;
  text-transform: uppercase !important;
}

/* Left-align main search results heading */
.searchpage__title {
  text-align: left !important;
}

/* Tablet responsive - 4 column grid */
@media (max-width: 1024px) and (min-width: 769px) {
  .search__results .col-md-1-5,
  .search__results--abs .col-md-1-5 {
    flex: 0 0 calc(25% - 1rem);
    max-width: calc(25% - 1rem);
  }

  .search__results,
  .search__results--abs {
    gap: var(--space-5) !important;
    padding: 1.25rem 3% !important;
  }
}

/* Mobile responsive - 3 column grid (all mobile sizes) */
@media (max-width: 767px) {
  .search__results .col-md-1-5,
  .search__results--abs .col-md-1-5 {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
    min-width: 100px;
  }

  .search__results,
  .search__results--abs {
    gap: var(--space-6) !important;
    padding: 1.5rem 5% !important;
  }

  /* Ensure product images don't shrink below 100px */
  .search__results .card__img,
  .search__results--abs .card__img,
  .search__results img,
  .search__results--abs img {
    min-width: 100px !important;
  }
}

/* Add space below search content and above footer */
.template--search main {
  margin-bottom: 100px !important;
}

/* Search page — clear the fixed nav (the heading was riding up under it) */
body.template--search main { padding-top: 250px !important; }
@media (max-width: 1024px) {
  body.template--search main { padding-top: 100px !important; }
}

/* ========================================
   USER ACCOUNT & CURRENCY DROPDOWNS
   Hover-based behavior matching nav dropdowns
   ======================================== */

/* Disable checkbox functionality completely */
#user__button,
#i18n__button {
  pointer-events: none !important;
}

/* Override checkbox-based behavior with hover-based (like nav dropdowns) */
.user__holder,
.i18n__holder {
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
  height: auto !important;
  overflow: visible !important;
  padding: 24px !important;
  /* Remove any transforms - let theme's original positioning work */
  transform: none !important;
  transition: opacity 0.35s, visibility 0.35s, z-index 0s !important;
  background-color: var(--color-bg-primary) !important;
  box-shadow: 0px 0px 30px rgba(0,0,0,0.5) !important;
  /* Add small top margin to close gap between button and dropdown */
  margin-top: -5px !important;
  /* Add 20px gap from right edge */
  right: 20px !important;
}

/* Show dropdown on hover with smooth fade transition */
.user__button:hover .user__holder,
.i18n__button:hover .i18n__holder,
.user__holder:hover,
.i18n__holder:hover {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999 !important;
}

/* Keep overlay hidden (no opacity fade) */
.user__button .overlay,
.i18n__button .overlay {
  display: none !important;
}

/* Cart drawer black background */
.minicart__holder {
  background-color: #000000 !important;
}

.minicart {
  min-width: 500px !important;
  max-width: 500px !important;
  background: #000000 !important;
}

.minicart--sidebar,
.minicart__holder.minicart--sidebar {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* ========================================
   H1-H6 Typography for Pages, Products, Blog Posts
   ======================================== */

/* Load Titillium Web font weights (200, 300, 400) */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700&display=swap');

/*
  Apply to: All Pages, Products, and Blog Posts
  Exclude: Homepage and 7 specific landing pages

  MOBILE SIZE ADJUSTMENTS:
  To adjust mobile sizes, modify the first value in clamp()
  To adjust desktop sizes, modify the last value in clamp()

  Example: clamp(2.5rem, 5vw, 5rem)
           ↑mobile    ↑scaling  ↑desktop
*/

/* H1 – Headline */
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .section__page h1,
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .support-content h1,
html body.template-product h1,
html body.template-article h1 {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 200 !important; /* Extra Light */
  font-size: clamp(2.25rem, 4.5vw, 4.5rem) !important; /* 25% smaller than original 60pt */
  line-height: 1.2 !important; /* 72pt leading */
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-4) !important;
}

/* H2 – Intro Text */
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .section__page h2,
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .support-content h2,
html body.template-product h2,
html body.template-article h2 {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 400 !important; /* Regular */
  font-size: clamp(1.3125rem, 2.25vw, 1.875rem) !important; /* 25% smaller than original 30pt */
  line-height: 1.408 !important; /* 10% increased line spacing */
  color: var(--color-text-secondary) !important;
  margin-bottom: var(--space-4) !important;
}

/* H3 – General Text */
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .section__page h3,
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .support-content h3,
html body.template-product h3,
html body.template-article h3 {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 200 !important; /* Extra Light */
  font-size: clamp(1.125rem, 2.5vw, 1.8rem) !important; /* Mobile 18px, Desktop 28.8px */
  line-height: 1.2 !important; /* 20% tighter line spacing */
  color: var(--color-text-secondary) !important;
  margin-bottom: var(--space-3) !important;
}

/* H4 – Small Headings */
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .section__page h4,
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .support-content h4,
html body.template-product h4,
html body.template-article h4 {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 200 !important; /* Extra Light */
  font-size: clamp(1.25rem, 2vw, 1.2rem) !important; /* Desktop 20% smaller */
  line-height: 1.0 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-3) !important;
}

/* Make links in bottom sidebar display as blocks with spacing */
.support-content__bottom-sidebar h4 a {
  display: block !important;
  margin-bottom: 0.140625rem !important;
}

/* H5 – Link List */
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .section__page h5,
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .support-content h5,
html body.template-product h5,
html body.template-article h5 {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 300 !important; /* Light */
  font-size: clamp(1.25rem, 2vw, 1.5rem) !important; /* 24pt */
  line-height: 1.5 !important; /* 36pt leading */
  color: var(--color-text-secondary) !important;
  margin-bottom: var(--space-3) !important;
}

/* H6 – Notes */
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .section__page h6,
html body.template--page:not(.page-mach-one-electric-skateboard):not(.mach-one-landing):not(.page-6485-motor):not(.page-mach-one-xp3-electric-skateboard):not(.page-finance):not(.page-machone-xp3-specifications):not(.page-machone-xp3-innovations):not(.page-machone-xp3-story) .support-content h6,
html body.template-product h6,
html body.template-article h6 {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 300 !important; /* Light */
  font-size: clamp(1.25rem, 2vw, 1.2rem) !important; /* Desktop 20% smaller */
  line-height: 1.25 !important; /* 30pt leading */
  color: var(--color-text-muted) !important;
  margin-bottom: var(--space-2) !important;
}

/* ========================================
   SUPPORT PAGE SPECIFIC OVERRIDES
   Extra specificity to ensure styles apply
   ======================================== */

/* Support page H1 - Extra Light, White */
html .support-content h1,
html .support-content__header h1,
html .support-content__intro h1 {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 200 !important; /* Extra Light */
  font-size: clamp(2.25rem, 4.5vw, 4.5rem) !important; /* 25% smaller */
  line-height: 1.2 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--space-4) !important;
}

/* Support page H2 - Regular (400), Light Grey */
html .support-content h2,
html .support-content__header h2,
html .support-content__intro h2 {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 400 !important; /* Regular */
  font-size: clamp(1.3125rem, 2.25vw, 1.875rem) !important; /* 25% smaller */
  line-height: 1.408 !important; /* 10% increased line spacing */
  color: var(--color-text-secondary) !important;
  margin-bottom: var(--space-4) !important;
}

/* Support page H6 - Light (300), Grey */
html .support-content h6,
html .support-content__header h6,
html .support-content__intro h6 {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 300 !important; /* Light */
  font-size: clamp(1.25rem, 2vw, 1.2rem) !important; /* Desktop 20% smaller */
  line-height: 1.25 !important;
  color: var(--color-text-muted) !important;
  margin-bottom: var(--space-2) !important;
}

/* Support page links - Orange Red */
html .support-content a,
html .support-content__header a,
html .support-content__intro a,
html .support-content__top-sidebar a,
html .support-content__bottom-sidebar a {
  color: var(--color-accent) !important;
}

/* Support page links - One weight level heavier than headings */
html .support-content__header h1 a { font-weight: 300 !important; } /* was 200 */
html .support-content__intro h2 a { font-weight: 500 !important; } /* was 400 */
html .support-content__top-sidebar h3 a { font-weight: 300 !important; } /* was 200 */
html .support-content__bottom-sidebar h4 a { font-weight: 300 !important; } /* was 200 */
html .support-content__header h6 a { font-weight: 400 !important; } /* was 300 */

/* Remove excessive letter spacing from support page sidebars and FAQ title */
html .support-content__top-sidebar h3,
html .support-content__bottom-sidebar h3,
html .support-content__top-sidebar h4,
html .support-content__bottom-sidebar h4,
html .support-faq__title {
  letter-spacing: normal !important;
}

/* ========================================
   DESKTOP NAVIGATION HEIGHT OVERRIDE
   Increased to 70px (20% higher than previous 58px)
   ======================================== */
@media screen and (min-width: 768px) {
  .page__header {
    --height: 70px !important;
    min-height: 70px !important;
  }

  .page__header--desktop-auto-layout .page__header--width:first-child {
    min-height: 70px !important;
  }

  .main__navigation > .nav__link__holder > .nav__link {
    min-height: 70px !important;
  }

  /* Force header to be solid dark grey (not transparent) on homepage */
  body.template--index .page__header--transparent {
    background: var(--color-bg-secondary) !important;
    box-shadow: none;
  }

  /* Remove absolute positioning so header stays in document flow */
  body.template--index .container__top-part {
    position: relative !important;
  }

  /* Remove padding so video starts directly below header with no gap */
  body.template--index main {
    padding-top: 0 !important;
  }
}

/* ========================================
   MOBILE HERO VIDEO HEIGHT OVERRIDE
   Reduce height to show peek of next section
   ======================================== */
@media screen and (max-width: 767px) {
  /* Target the hero-video-simple section specifically */
  .hero-video-simple,
  [id^="hero-video-simple-"] {
    height: 80vh !important;
  }
}

/* ========================================
   DROPDOWN MENU BACKGROUNDS
   Black background for all dropdown menus
   ======================================== */
/* Desktop dropdown menus */
@media screen and (min-width: 768px) {
  .nav__submenu,
  .nav__submenu--regular {
    background: var(--color-bg-primary) !important;
  }

  /* Restore red hover effect on dropdown items */
  .nav__submenu > .nav__link__holder:hover,
  .nav__submenu > .nav__link__holder.nav__link--active {
    background-color: var(--color-overlay-medium) !important;
  }

  /* Orange-red text for desktop dropdown navigation items */
  .nav__submenu .nav__link,
  .nav__submenu--regular .nav__link {
    color: var(--color-accent) !important;
  }
}

/* Mobile dropdown menus */
@media screen and (max-width: 767px) {
  .nav__submenu--mobile {
    background: var(--color-bg-primary) !important;
  }

  /* Orange-red text for mobile dropdown navigation items */
  .nav__submenu--mobile .nav__link {
    color: var(--color-accent) !important;
  }

  /* Mobile navigation - larger font size (21px, larger than original 18px) */
  .mobile__navigation.font__size--base {
    font-size: 21px !important;
  }
}

/* ========================================
   ALL PAGES LAYOUT
   Match Support page margins and container width
   ======================================== */

/* All Shogun pages - match Support page .support-content styling
   Target the parent container with ALL classes (.col-12.layout__content.section__page)
   to override both theme's 1920px max-width AND .col-12 max-width: 100% rules */
body.template--page .row.layout__stretchBg > .col-12.layout__content.section__page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-11) 5%;
  box-sizing: border-box;
}

/* Mobile adjustments for all Shogun pages */
@media (max-width: 1024px) {
  body.template--page .row.layout__stretchBg > .col-12.layout__content.section__page {
    padding: var(--space-9) 5% !important;
  }
}

@media (max-width: 767px) {
  body.template--page .row.layout__stretchBg > .col-12.layout__content.section__page {
    padding: var(--space-7) 5% !important;
  }
}

/* Remove row padding that adds unwanted margins */
body.template--page .row.layout__stretchBg,
body.template--page .row.layout__boxed,
body.template--page .row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override grid column padding for page content */
body.template--page .col-12.section__page {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Default page layout - match Support page exactly */
body.template--page .section__page,
body.template--page .col-12.unflex.layout__content.section__page,
body.template--page .row > .col-12.unflex.layout__content.section__page,
body.template--page .layout__stretchBg > .col-12.unflex.layout__content.section__page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-11) 5%;
  box-sizing: border-box;
}

/* Mobile adjustments for default page layout */
@media (max-width: 1024px) {
  body.template--page .section__page,
  body.template--page .col-12.unflex.layout__content.section__page,
  body.template--page .row > .col-12.unflex.layout__content.section__page,
  body.template--page .layout__stretchBg > .col-12.unflex.layout__content.section__page {
    padding: var(--space-9) 5% !important;
  }
}

@media (max-width: 767px) {
  body.template--page .section__page,
  body.template--page .col-12.unflex.layout__content.section__page,
  body.template--page .row > .col-12.unflex.layout__content.section__page,
  body.template--page .layout__stretchBg > .col-12.unflex.layout__content.section__page {
    padding: var(--space-7) 5% !important;
  }
}

/* Mobile Search Improvements */

/* Hide all headers when search is focused on mobile */
@media (max-width: 1024px) {
  body .search__container--abs.focused ~ header.page__header {
    display: none !important;
    visibility: hidden !important;
  }

  body .search__container--abs.focused {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    z-index: 99999 !important;
    background: var(--color-bg-primary) !important;
  }

  /* Ensure search results use full available width */
  .search__container--abs .search__results,
  .search__container--abs .search__results--abs {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* Mobile search results - images above titles */
@media (max-width: 767px) {
  /* Force column layout for search result cards */
  .search__results--abs .card--default,
  .search__results .card--default {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Image container - full width above content */
  .search__results--abs .card__img--container,
  .search__results .card__img--container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    order: 1 !important;
  }

  /* Card info below image */
  .search__results--abs .card__info,
  .search__results .card__info {
    order: 2 !important;
    width: 100% !important;
  }

  /* Ensure images are visible */
  .search__results--abs img,
  .search__results img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    opacity: 1 !important;
  }
}

/* Shop Now button column width - Default: 1 of 5 columns */
.search__results .col-md-2-5,
.search__results--abs .col-md-2-5 {
  flex: 0 0 calc(20% - 0.8rem) !important;
  max-width: calc(20% - 0.8rem) !important;
}

/* Very wide: 1 of 6 columns */
@media (min-width: 1200px) {
  .search__results .col-md-2-5,
  .search__results--abs .col-md-2-5 {
    flex: 0 0 calc(16.666% - 1rem) !important;
    max-width: calc(16.666% - 1rem) !important;
  }
}

/* Tablet: 2 of 4 columns (50%) */
@media (max-width: 1024px) and (min-width: 769px) {
  .search__results .col-md-2-5,
  .search__results--abs .col-md-2-5 {
    flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}

/* Mobile: 2 of 3 columns (66.666%) */
@media (max-width: 767px) and (min-width: 401px) {
  .search__results .col-md-2-5,
  .search__results--abs .col-md-2-5 {
    flex: 0 0 calc(66.666% - 1rem);
    max-width: calc(66.666% - 1rem);
  }
}

/* Very narrow mobile: Full width button below products */
@media (max-width: 400px) {
  .search__results .col-md-2-5,
  .search__results--abs .col-md-2-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Shop Now Button - Align to top */
.shop-now-card {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
}

/* Left-align button on mobile to match product grid */
@media (max-width: 767px) {
  .shop-now-card {
    justify-content: flex-start;
  }
}

.shop-now-card .button {
  font-weight: 700;
  white-space: nowrap;
  min-width: 100px;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .shop-now-card .button {
    padding: var(--space-3) var(--space-5);
    font-size: 14px;
  }
}

@media (max-width: 767px) and (min-width: 401px) {
  .shop-now-card .button {
    padding: var(--space-2) var(--space-4);
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .shop-now-card .button {
    padding: var(--space-3) var(--space-4);
    font-size: 12px;
    width: 100%;
  }
}

/* ===== Article layout with sidebar constrained to 1200px ===== */
/* Remove all top spacing on article pages */
.template--article .article__row,
.template--article .row.article__row,
.template--article main > .article__row {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.template--article .breadcrumbs__wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  height: 0 !important;
}

/* Remove padding from layout wrappers */
.template--article .col-12 {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.template--article .layout__stretchBg,
.template--article .layout__boxed,
.template--article .layout__default {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Wrapper handles centering and max-width, content sections handle vertical padding */
.template--article .article__wrapper {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 45px;
  box-sizing: border-box;
  display: flex;
  gap: var(--space-9);
  align-items: flex-start;
}

.template--article .article_sidebar {
  width: 25%;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  margin-top: 280px;
}

.template--article .article_contents {
  flex: 1;
  min-width: 0;
}

/* Content sections INSIDE wrapper - no horizontal padding or centering, wrapper handles it */
.template--article .article__wrapper .article__max-width,
.template--article .article__wrapper .article__max-width--image {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Vertical padding only for content INSIDE wrapper */
.template--article .article__wrapper .article__max-width {
  padding-top: var(--space-11) !important;
  padding-bottom: var(--space-11) !important;
}

.template--article .article__wrapper .article__max-width--image {
  padding-top: var(--space-2) !important;
  padding-bottom: 0 !important;
}

/* Add small padding to INNER .article__max-width when inside .article__max-width--image */
.template--article .article__wrapper .article__max-width--image .article__max-width {
  padding-top: var(--space-3) !important;
  padding-bottom: 0 !important;
}

/* Comments section OUTSIDE wrapper - needs width constraint */
.template--article .article__max-width {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-11) 45px;
  box-sizing: border-box;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .template--article .article__wrapper {
    flex-direction: column;
    gap: var(--space-6);
  }

  .template--article .article_sidebar {
    width: 100%;
    margin-top: 0;
  }

  /* Mobile Recent Posts - add spacing from prev/next buttons */
  .template--article .article_sidebar.hide-desktop {
    margin-top: var(--space-8);
  }

  .template--article .article__wrapper .article__max-width {
    padding-top: var(--space-7) !important;
    padding-bottom: var(--space-7) !important;
  }

  .template--article .article__wrapper .article__max-width--image {
    padding-top: var(--space-1) !important;
  }

  /* Add small padding to INNER .article__max-width on mobile */
  .template--article .article__wrapper .article__max-width--image .article__max-width {
    padding-top: 6px !important;
    padding-bottom: 0 !important;
  }

  /* Comments outside wrapper */
  .template--article .article__max-width {
    padding: var(--space-7) 5% !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .template--article .article_sidebar {
    margin-top: 200px;
  }

  .template--article .article__wrapper .article__max-width {
    padding-top: var(--space-9) !important;
    padding-bottom: var(--space-9) !important;
  }

  .template--article .article__wrapper .article__max-width--image {
    padding-top: 6px !important;
  }

  /* Add small padding to INNER .article__max-width on tablet */
  .template--article .article__wrapper .article__max-width--image .article__max-width {
    padding-top: 9px !important;
    padding-bottom: 0 !important;
  }

  /* Comments outside wrapper */
  .template--article .article__max-width {
    padding: var(--space-9) 5% !important;
  }
}

/* Remove grid system padding from article page columns */
.template--article .col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== Fix newsletter Subscribe button to use black/primary styling ===== */
/* Override red accent color on Contact Us page newsletter signup */
.template--page .newsletter__inputs button.button,
.template--page .newsletter__inputs button.button--primary,
.template--page .newsletter__inputs button.button--secondary,
.template--page .newsletter__inputs button[type="submit"],
.template--page .newsletter__form button.button,
.template--page .newsletter__form button.button--primary,
.template--page .newsletter__form button[type="submit"],
.template--page .newsletter__inputs .button,
.template--page .newsletter__inputs .button--primary,
.template--page .newsletter__inputs .button--secondary,
.template--page form button.button,
.template--page form button.button--primary,
.template--page .footer-new__newsletter-button,
.template--page button.footer-new__newsletter-button {
  background-color: var(--color-bg-primary) !important;
  background: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-bg-primary) !important;
}

.template--page .newsletter__inputs button.button:hover,
.template--page .newsletter__inputs button.button--primary:hover,
.template--page .newsletter__inputs button.button--secondary:hover,
.template--page .newsletter__inputs button[type="submit"]:hover,
.template--page .newsletter__form button.button:hover,
.template--page .newsletter__form button.button--primary:hover,
.template--page .newsletter__form button[type="submit"]:hover,
.template--page .newsletter__inputs .button:hover,
.template--page .newsletter__inputs .button--primary:hover,
.template--page .newsletter__inputs .button--secondary:hover,
.template--page form button.button:hover,
.template--page form button.button--primary:hover,
.template--page .footer-new__newsletter-button:hover,
.template--page button.footer-new__newsletter-button:hover {
  background-color: var(--color-border-default) !important;
  background: var(--color-border-default) !important;
  border-color: var(--color-border-default) !important;
}

/* ===== Fix collection mobile margins to match blog articles ===== */
/* Remove grid column padding on mobile, use clean 5% padding */
@media (max-width: 767px) {
  /* Remove padding from row--product AND its col-12 class */
  .template--collection .row--product,
  .template--collection .row--product.col-12,
  .template--collection section.row--product.col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove padding from child columns */
  .template--collection .row--product > .col-min,
  .template--collection .row--product > .col,
  .template--collection .row--product > [class^="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================
   BLOG PAGE WIDTH OVERRIDES
   Reference: /collections page - max-width: 1200px
   ============================================ */

/* Blog list - match homepage section widths (1330px / 35px padding to account for 10px column padding) */
/* DOM class: "row article__max-width row__blog" */
.template--blog .row.article__max-width.row__blog {
  max-width: 1330px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 35px !important;
  padding-right: 35px !important;
  box-sizing: border-box !important;
}

/* Blog article ALL prev/next buttons — text link style with arrows */
.template--article .article__page--nav_alt,
.template--article .next_prev_article-container .button,
.template--article .next_prev_article-container a {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #a60000 !important;
  min-width: auto !important;
  display: inline !important;
  transition: color 0.3s ease !important;
}

.template--article .article__page--nav_alt:hover,
.template--article .next_prev_article-container .button:hover,
.template--article .next_prev_article-container a:hover {
  color: #cc0000 !important;
  background: none !important;
}

/* Prev/next container spacing */
.template--article .padding-next_prev {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.template--article .next_prev_article-left-column .button::before,
.template--article .article__page--prev::before {
  content: '⟵  ' !important;
  font-size: 1.4em !important;
}

.template--article .next_prev_article-right-column .button::after,
.template--article .article__page--next::after {
  content: '  ⟶' !important;
  font-size: 1.4em !important;
}

/* Top prev/next arrows — full width, previous left, next right */
.template--article .next__prev_alt-container {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 30px !important;
  margin-bottom: 32px !important;
}

.template--article .next_prev_alt_article-left-column {
  display: none !important;
}

.template--article .next_prev_alt_article-right-column {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.template--article .next_prev_alt_article-right-column .article__page--prev {
  order: -1 !important;
}

.template--article .next_prev_alt_article-right-column .article__page--next {
  order: 1 !important;
  margin-left: auto !important;
}

.template--article .next__prev_alt-container .article__page--nav_alt {
  width: auto !important;
  height: auto !important;
  font-size: 13px !important;
  margin: 0 !important;
  float: none !important;
}

.template--article .next__prev_alt-container .article__page--nav_alt svg {
  display: none !important;
}

.template--article .next__prev_alt-container .article__page--prev::before {
  content: '⟵  PREVIOUS' !important;
  font-size: 13px !important;
}

.template--article .next__prev_alt-container .article__page--next::after {
  content: 'NEXT  ⟶' !important;
  font-size: 13px !important;
}

/* Article tags — left-aligned, grey, no red box, red on hover */
.template--article .article__tags {
  text-align: left !important;
  padding: 0 !important;
  margin: 24px 0 16px !important;
}

.template--article .article__tags--tag {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #a60000 !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 12px 0 0 !important;
  transition: color 0.3s ease !important;
}

.template--article .article__tags--tag:hover {
  color: #cc0000 !important;
  background: none !important;
}

/* Blog article - constrain prev/next navigation */
/* DOM class: "next_prev_article-container next__prev_alt-container" */
.template--article .next_prev_article-container {
  max-width: 1330px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Blog article - constrain article content */
.template--article .article__max-width {
  max-width: 1330px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 45px !important;
  padding-right: 45px !important;
  box-sizing: border-box !important;
}

/* Blog tags — hide on listing page */
.template--blog .blog__listing--tags {
  display: none !important;
}

/* Blog buttons — replace Booster pill buttons with Radium text links */
.template--blog .blog__listing--button .button,
.template--blog .blog__listing--button a {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #a60000 !important;
  min-width: auto !important;
  display: inline !important;
  transition: color 0.3s ease !important;
}

.template--blog .blog__listing--button .button:hover,
.template--blog .blog__listing--button a:hover {
  color: #cc0000 !important;
  background: none !important;
}

.template--blog .blog__listing--button .button::after,
.template--blog .blog__listing--button a::after {
  content: ' →';
}

/* Blog pagination — match Radium style */
.template--blog .pagination a,
.template--blog .pagination span,
.template--blog .padding-next_prev a {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #a60000 !important;
  background: none !important;
  border: none !important;
  padding: 8px 16px !important;
  transition: color 0.3s ease !important;
}

.template--blog .pagination a:hover,
.template--blog .padding-next_prev a:hover {
  color: #cc0000 !important;
}

.template--blog .pagination .active,
.template--blog .pagination span.current {
  color: #ffffff !important;
}

/* Mobile: Single column blog layout */
@media screen and (max-width: 749px) {
  .template--blog .row.article__max-width.row__blog {
    flex-direction: column !important;
  }

  .template--blog .row.article__max-width.row__blog > .blog-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ===== Instagram feed - 5% horizontal margins on mobile ===== */
/* Override #insta-feed 100px margins with 0 + 5% padding */
@media (max-width: 767px) {
  body #insta-feed {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  .instagram__holder {
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
  }
}

/* ===== Belt Calculator page - bright red bold links ===== */
.belt-calculator-content a {
  color: var(--color-accent) !important;
  font-weight: 700 !important;
}

.belt-calculator-content a:hover {
  color: var(--color-accent) !important;
  font-weight: 700 !important;
  text-decoration: underline;
}

/* ===== Blog page tags - heavier weight and orange-red ===== */
.template--blog .blog__listing--tag {
  color: var(--color-accent) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* ===== Blog article page - author and date match nav link red ===== */
.template--article .article__meta {
  color: #a60000 !important;
  font-weight: 600 !important;
  font-family: 'Titillium Web', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* ===== Fix logo position in header - consistent across all pages ===== */
@media screen and (min-width: 768px) {
  html body .page__header .header__logo,
  html body .page__header--transparent .header__logo,
  html body .page__header--desktop .header__logo {
    position: relative !important;
    top: -3px !important;
    padding: 0 !important;
    margin: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  html body .page__header .header__logo .logo-img,
  html body .page__header--transparent .header__logo .logo-img,
  html body .page__header--desktop .header__logo .logo-img,
  html body .page__header .header__logo a,
  html body .page__header--transparent .header__logo a,
  html body .page__header--desktop .header__logo a {
    display: flex !important;
    align-items: center !important;
  }

  html body .page__header .header__logo img,
  html body .page__header--transparent .header__logo img,
  html body .page__header--desktop .header__logo img {
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ========================================
   Login/Register Modal - Dark Theme
   ======================================== */

/* Modal background */
.customer__form.login-popup,
.customer__form.register-popup {
  background: var(--color-bg-secondary) !important;
}

/* Form labels */
.customer__form.login-popup label,
.customer__form.register-popup label {
  color: var(--color-text-secondary) !important;
}

/* Input fields */
.customer__form.login-popup input,
.customer__form.login-popup select,
.customer__form.register-popup input,
.customer__form.register-popup select {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.customer__form.login-popup input::placeholder,
.customer__form.register-popup input::placeholder {
  color: var(--input-placeholder) !important;
}

/* Input focus state */
.customer__form.login-popup input:focus,
.customer__form.register-popup input:focus {
  border-color: var(--input-focus) !important;
}

/* Links (Forgot password, Register here, etc) */
.customer__form.login-popup .button--notice,
.customer__form.register-popup .button--notice,
.customer__form.login-popup .button--notice-notmember {
  color: var(--color-accent) !important;
}

/* Modal title */
.customer__form.login-popup .login-popup-title h1,
.customer__form.register-popup .login-popup-title h1 {
  color: var(--color-text-primary) !important;
}

/* ========================================
   Cart Page - Dark Theme
   ======================================== */

/* Cart page background */
.section--cart-page {
  background: var(--color-bg-secondary) !important;
}

/* Cart title - uppercase + larger */
.cart__header h1.h-reset {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 200 !important;
  color: var(--color-text-primary) !important;
  text-transform: uppercase !important;
  font-size: 1.75rem !important;
  letter-spacing: 0.05em !important;
}

/* Grand total text */
.cart__grandtotal {
  color: var(--color-text-primary) !important;
}

/* Hide top row grand total + checkout (keep Update Cart button visible) */
.cart__header .cart-page__grandtotal--container .cart__grandtotal {
  display: none !important;
}
.cart__header .cart-page__grandtotal--container button[name="checkout"] {
  display: none !important;
}

/* Update Cart button styling */
.cart__header .button--cart__update {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Cart items */
.cart__item {
  border-bottom: 1px solid var(--color-border-default) !important;
}

/* Product titles */
.cart__info--text a {
  color: var(--color-text-primary) !important;
}

/* Variant and properties text */
.cart__info--variant,
.cart__info--properties {
  color: var(--color-text-secondary) !important;
}

/* Prices */
.cart__punit,
.cart__ptotal,
.cart__ptotal .jsPrice {
  color: var(--color-text-primary) !important;
}

/* Compare at price (strikethrough) */
.cart__compare-price {
  color: var(--color-text-disabled) !important;
}

/* Quantity inputs */
.cart__form .quantity--input__input {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.cart__form .quantity--input__input:focus {
  border-color: var(--input-focus) !important;
}

/* Quantity buttons */
.cart__form .quantity--input__button {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.cart__form .quantity--input__button:hover {
  background: var(--input-border) !important;
}

/* Trash icon */
.cart__trash svg {
  fill: var(--color-text-secondary) !important;
}

.cart__trash:hover svg {
  fill: var(--color-accent-dark) !important;
}

/* Cart timer (minicart drawer) - dark red urgency banner */
.minicart .minicart__timer {
  color: #ffffff !important;
  background: #8B0000 !important;
  padding: 10px !important;
}

/* Cart timer (cart page) - inline red text, larger to match heading */
.cart__header .minicart__timer {
  color: #cc0000 !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
}

/* Notes section - uppercase label, left-aligned */
.cart__notes span {
  color: var(--color-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
  display: block !important;
}

.cart__notes--note {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.cart__notes--note:focus {
  border-color: var(--input-focus) !important;
}

/* Bottom totals section */
.cart__total,
.cart__grandtotal {
  color: var(--color-text-primary) !important;
}

.cart__discount {
  color: var(--color-accent) !important;
}

/* Continue shopping link - uppercase */
.cart__continue {
  color: var(--color-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.cart__continue svg {
  fill: var(--color-accent) !important;
}

/* Empty cart */
.empty__cart--title,
.cart__suggestion {
  color: var(--color-text-primary) !important;
}

.empty__cart--icon svg {
  fill: var(--color-text-secondary) !important;
}

/* Cart page container width - narrow for focused checkout flow */
.section--cart-page.max-width {
  max-width: var(--narrow-max-width) !important;
  margin-left: auto;
  margin-right: auto;
}

/* Checkout button - uppercase */
.cart__form button[name="checkout"],
.cart__total button[name="checkout"] {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Continue Shopping - own line with spacing */
.cart__additional {
  flex-wrap: wrap !important;
}

.cart__additional--left {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--color-border-default) !important;
}

/* Additional Notes textarea - larger */
.cart__notes--note {
  min-height: 160px !important;
}

/* Currency notice - no background, left-aligned */
.cart__currency {
  background: none !important;
  background-color: transparent !important;
  text-align: left !important;
  padding-left: 0 !important;
}

/* Top keyline - full width border under header */
.cart__header {
  border-bottom: 1px solid var(--color-border-default) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 0 !important;
}

/* ========================================
   Mini Cart Drawer - Dark Theme
   ======================================== */

/* Drawer background */
/* Drawer title */
.minicart__title {
  color: var(--color-text-primary) !important;
  border-bottom: none !important;
  text-transform: uppercase !important;
}

/* Cart count number - same size as header text */
.minicart__title span {
  font-size: inherit !important;
}

/* Close button - × icon styling */
.minicart__close {
  font-size: 20px !important;
  color: var(--color-text-secondary) !important;
  cursor: pointer;
  line-height: 1;
}

.minicart__close:hover {
  color: var(--color-text-primary) !important;
}

/* Cart entries */
.minicart__entry {
  border-bottom: 1px solid #333 !important;
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
}

/* Product titles */
.minicart__info a {
  color: var(--color-text-primary) !important;
}

/* Variant text */
.minicart__variation,
.cart__info--properties {
  color: var(--color-text-secondary) !important;
}

/* Price */
.minicart__price,
.minicart__price .jsPrice {
  color: var(--color-text-primary) !important;
}

/* Variant dropdown */
.minicart__variant-dropdown {
  background: var(--color-bg-tertiary) !important;
  border: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
}

/* Dropdown popup options: explicit colours so Chromium doesn't paint the
   select's white text onto the native white popup (invisible options) */
.minicart__variant-dropdown option {
  background: #141414;
  color: #fff;
}

/* Quantity inputs in minicart */
.minicart .quantity--input__input {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.minicart .quantity--input__input:focus {
  border-color: var(--input-focus) !important;
}

.minicart .quantity--input__button {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.minicart .quantity--input__button:hover {
  background: var(--input-border) !important;
}

/* Trash icon */
.minicart__trash svg {
  fill: var(--color-text-secondary) !important;
}

.minicart__trash:hover svg {
  fill: var(--color-accent-dark) !important;
}

/* Bottom section */
.minicart__bottom {
  background: var(--color-bg-tertiary) !important;
  border-top: 1px solid var(--color-border-default) !important;
  text-align: center !important;
}

/* View cart link - match checkout button text size */
/* Overrides inline font-size: 0.9em on .button--text element */
.minicart__bottom a.button--text,
.minicart__bottom .button--text {
  font-size: 1em !important;
}

/* Total - centred, large, uppercase */
.minicart__total {
  display: block !important;
  text-align: center !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 15px !important;
}

.minicart__total-label {
  margin-right: 6px !important;
  letter-spacing: 1px !important;
}

/* Timer - dark red background */
.minicart .minicart__timer {
  color: #ffffff !important;
  background: #8B0000 !important;
  padding: 10px !important;
}

/* Empty cart state */
.minicart .empty__cart--title {
  color: var(--color-text-primary) !important;
}

.minicart .empty__cart--icon svg {
  fill: var(--color-text-secondary) !important;
}

/* Upsell section */
.minicart__upsell {
  background: var(--color-bg-tertiary) !important;
}

.minicart__upsell--header p {
  color: var(--color-text-primary) !important;
}

/* ========================================
   Search Results Page - Typography
   ======================================== */

/* Search page title (H1) */
.searchpage__title {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 200 !important;
  font-size: clamp(2.25rem, 4.5vw, 4.5rem) !important;
  color: var(--color-text-primary) !important;
  line-height: 1.1 !important;
}

/* Search term in quotes */
.searchpage__title .search__term {
  color: var(--color-text-secondary) !important;
}

/* Section subtitles (Products, Pages, Articles) */
.searchpage__subtitle {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 400 !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: var(--space-4) !important;
}

/* "Enter your search term" title */
.searchpage__input--title {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 200 !important;
  color: var(--color-text-primary) !important;
}

/* Search input field */
.searchpage__input {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.searchpage__input::placeholder {
  color: var(--input-placeholder) !important;
}

.searchpage__input:focus {
  border-color: var(--input-focus) !important;
  outline: none !important;
}

/* Page and article links in search results */
.searchpage__section a {
  color: var(--color-text-primary) !important;
}

.searchpage__section a:hover {
  color: var(--color-accent) !important;
}

/* No results state - style the container text */
.s__content {
  color: var(--color-text-secondary) !important;
}

/* ========================================
   404 Page - Typography
   ======================================== */

/* 404 page title */
.error404__page h1.h-reset {
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 200 !important;
  font-size: clamp(2.25rem, 4.5vw, 4.5rem) !important;
  color: var(--color-text-primary) !important;
  line-height: 1.1 !important;
}

/* 404 page paragraph */
.error404__page p {
  margin-bottom: 24px !important;
  color: var(--color-text-secondary) !important;
}

/* ========================================
   Product Page Width
   ======================================== */

/* Product page container width */
[data-product-holder].product__row.max-width {
  max-width: var(--content-max-width) !important;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5%;
}

/* ========================================
   Product Gallery - Vertical Thumbnails Left (Desktop)
   Horizontal Thumbnails Below (Mobile)
   ======================================== */

/* Desktop: Flex layout with thumbnails on left */
@media screen and (min-width: 768px) {
  .gallery.gallery__default {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  .gallery__default .gallery__thumbnails {
    display: flex;
    flex-direction: column;
    width: 80px;
    min-width: 80px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: 16px;
    order: 1;
    gap: 8px;
  }

  .gallery__default .gallery__thumbnail {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
  }

  .gallery__default .slider--product__holder {
    flex: 1;
    order: 2;
    min-width: 0;
  }

  /* Hide the thumbnail scroll arrows on desktop - using vertical scroll instead */
  .gallery__default .thumbnail--slide {
    display: none;
  }
}

/* Active thumbnail indicator */
.gallery__thumbnail.bstrSlider__thumb--active {
  border: 2px solid var(--color-accent) !important;
  box-sizing: border-box;
}

/* Mobile: Horizontal thumbnails below main image */
@media screen and (max-width: 767px) {
  .gallery.gallery__default {
    display: flex;
    flex-direction: column;
  }

  .gallery__default .gallery__thumbnails {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 12px;
    order: 2;
    gap: 8px;
    padding-bottom: 8px;
  }

  .gallery__default .gallery__thumbnail {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
  }

  .gallery__default .slider--product__holder {
    order: 1;
    width: 100%;
  }
}

/* Video thumbnail play icon overlay */
.gallery__thumbnail[data-media-type]:not([data-media-type="image"])::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}

.gallery__thumbnail {
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.gallery__thumbnail:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

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

/* ========================================
   Product Page Column Widths
   55/45 split (gallery/info)
   ======================================== */

@media screen and (min-width: 768px) {
  .product__row .gallery {
    flex: 0 0 58%;
    max-width: 58%;
  }

  .product__row .product__page--info {
    flex: 0 0 42%;
    max-width: 42%;
  }
}

/* ========================================
   Product Variant Selector - Radio Button Style
   ======================================== */

.product__swatches {
  margin-bottom: 1.5rem;
}

.swatches__holder {
  margin-bottom: 1rem;
}

.swatches__title {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
}

.product__swatches span[data-swatch-option] {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 10px 18px;
  margin: 4px 8px 4px 0;
  cursor: pointer;
  font-size: 0.9rem;
  color: #ffffff;
  background: transparent;
  transition: all 0.2s ease;
}

.product__swatches span[data-swatch-option]:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.product__swatches span[data-swatch-option].bstrSwatch--active {
  border-color: var(--color-accent);
  background: rgba(255, 51, 0, 0.1);
}

.product__swatches span[data-swatch-option][data-swatch-soldout="true"] {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Hide dynamic checkout / Buy Now button */
.checkout--dynamic {
  display: none !important;
}

/* ========================================
   Product Page Mobile Fixes
   ======================================== */

/* Mobile: Override the theme.liquid main padding - it's doubling up with max-width */
@media screen and (max-width: 767px) {
  /* Remove main padding on mobile - let product row handle it */
  [class*="template--product"] main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Apply 5% padding directly to product row */
  [class*="template--product"] .product__row {
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
  }

  /* Also handle max-width class separately */
  [class*="template--product"] .product__row.max-width {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  /* Ensure gallery and info columns are full width on mobile */
  .product__row .gallery,
  .product__row .product__page--info {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Handle row negative margins (Bootstrap grid) */
  [class*="template--product"] .product__row.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Recommended section - 5% horizontal padding on mobile */
  [class*="template--product"] .product-page__recommended,
  [class*="template--product"] #s--product-page__recommended,
  [class*="template--product"] .product-page__recommended .row,
  [class*="template--product"] .product-page__recommended .row.max-width {
    padding-left: 5% !important;
    padding-right: 5% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Reviews/apps section - 5% horizontal padding on mobile */
  [class*="template--product"] [data-shopify="apps"] {
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
  }
}

/* ========================================
   Product Page Section Spacing
   Reduce gap between product section and reviews
   ======================================== */

/* Target ALL shopify-section wrappers on product pages - RESET ALL */
[class*="template--product"] main > .shopify-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove first-child top margin from theme.liquid inline styles */
[class*="template--product"] main > *:first-child {
  margin-top: 0 !important;
}

/* Product section - add top padding, small bottom margin */
[class*="template--product"] .product__row {
  padding-top: var(--space-11) !important; /* 60px top padding */
  margin-bottom: var(--space-4) !important; /* 16px */
}

/* Recommended/upsell sections - minimal spacing */
[class*="template--product"] .api__upsell--inline,
[class*="template--product"] .product-page__recommended,
[class*="template--product"] #s--product-page__recommended {
  margin-top: 0 !important;
  margin-bottom: var(--space-2) !important; /* 8px - tight gap before reviews */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The .row.max-width inside recommended section - remove theme padding */
[class*="template--product"] .product-page__recommended .row,
[class*="template--product"] .product-page__recommended > .row,
[class*="template--product"] #s--product-page__recommended,
[class*="template--product"] [id*="recommended"] .row.max-width {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Section heading inside recommended - reduce margin */
[class*="template--product"] .product-page__recommended .section__heading,
[class*="template--product"] #s--product-page__recommended .section__heading {
  margin-bottom: var(--space-4) !important; /* 16px */
}

/* Apps/reviews section - NO top spacing */
[class*="template--product"] [data-shopify="apps"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ========================================
   Product Page Desktop Horizontal Padding (5%)
   Match header/footer padding
   ======================================== */

/* Desktop: Apply 5% horizontal padding to product sections */
@media screen and (min-width: 768px) {
  /* Product row - 5% horizontal padding */
  [class*="template--product"] .product__row {
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
  }

  /* Recommended section container - 5% horizontal padding */
  [class*="template--product"] .product-page__recommended,
  [class*="template--product"] .product-page__recommended .row.max-width,
  [class*="template--product"] .api__upsell--inline {
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
  }

  /* Reviews/apps section - 5% horizontal padding */
  [class*="template--product"] [data-shopify="apps"] {
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
  }

  /* Override max-width constraints that could conflict */
  [class*="template--product"] .product__row.max-width,
  [class*="template--product"] .product-page__recommended .row.max-width {
    max-width: 100% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

/* ========================================
   Sticky ATC Bar Fixes
   ======================================== */

/* Mobile: Fix overflow and ensure proper sizing */
.sticky--mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding: 12px 5%;
  overflow-x: hidden !important;
  z-index: 999;
}

.sticky--mobile .sticky--container {
  max-width: 100%;
  overflow: hidden;
}

.sticky--mobile .sticky--atc__button {
  width: 100%;
  max-width: 100%;
}

/* Desktop: Ensure sticky bar is positioned correctly */
.sticky--desktop {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* Ensure the "hide" class works properly for both */
.sticky--desktop.hide,
.sticky--mobile.hide {
  display: none !important;
}

/* When visible (hide class removed by JS) */
.sticky--desktop:not(.hide) {
  display: block !important;
}

.sticky--mobile:not(.hide):not(.sticky--closed) {
  display: block !important;
}

/* ========================================
   Newsletter, Footer & Contact Form Styling
   Dark theme consistency
   ======================================== */

/* ===== Footer width - match header exactly ===== */
/* Header uses: .page__header--width with padding: 0 5%
   No max-width constraint, just percentage padding
   Footer must use identical values to align edges */

/* Dev theme: footer-new outer wrapper - full width for background */
.footer-new {
  width: 100%;
}

/* Dev theme: footer-new inner content - match header padding exactly */
.footer-new__content {
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

/* Dev theme: newsletter outer wrapper - full width for red background */
.footer-new__newsletter {
  width: 100%;
}

/* Dev theme: newsletter inner content - match header padding exactly */
.footer-new__newsletter-form {
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

/* Live theme: default Kingdom footer - full width for background */
.footer {
  width: 100%;
}

/* Live theme: footer inner content - match header padding */
.footer > .row {
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

/* Live theme: newsletter inner content - match header padding */
.mount-newsletter .content-section,
.mount-newsletter .newsletter {
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

/* Newsletter form inputs */
.newsletter input[type="email"],
.newsletter__inputs input,
.newsletter__form input,
.footer-new__newsletter input,
.footer input[type="email"] {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.newsletter input::placeholder,
.newsletter__inputs input::placeholder,
.newsletter__form input::placeholder,
.footer-new__newsletter input::placeholder,
.footer input::placeholder {
  color: var(--input-placeholder) !important;
}

/* Contact form inputs */
.contact-form input,
.contact-form textarea,
.contact-form select,
.template--page .contact input,
.template--page .contact textarea,
.template--page .contact select {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.template--page .contact input::placeholder,
.template--page .contact textarea::placeholder {
  color: var(--input-placeholder) !important;
}

/* Header search input */
.search__container--abs input,
.search__input {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
}

/* ============================================
   COLLECTION PAGE — constrain product list
   (Primary rule is above with .template--collection prefix.
    This catches non-template contexts if any.)
   ============================================ */
.row.row--product-list {
  max-width: var(--radium-content-max, 1330px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 33px;
  padding-right: 33px;
  box-sizing: border-box;
}

/* ============================================
   PRODUCT PAGE — remove excess row padding
   ============================================ */
.row.product__row.max-width {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fix blog card width — 33% leaves 1% gap on right */
@media only screen and (min-width: 767px) {
  .row__blog .blog-column {
    width: 33.333% !important;
  }
}

/* ============================================
   RESPONSIVE SIDE PADDING — Contact, Finance, Support, Blog
   Below 1200px: 5% side padding (matches header/footer)
   Above 1200px: no side padding (max-width + auto margin centers)
   ============================================ */
.contact-content,
.custom-hero,
.custom-content,
/* Support, contact, custom pages — match homepage 1330px / 45px */
.support-hero,
.support-content,
.contact-content,
.custom-content,
.custom-hero,
.belt-calculator-content {
  padding-left: 45px !important;
  padding-right: 45px !important;
  max-width: 1330px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.contact__form--flex .layout__content,
.contact__form--flexreverse .layout__content {
  max-width: 1330px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================
   MACH ONE PAGE — Fixed Header Spacing + Logo Hide
   ============================================ */

/* TUNABLE: top spacing to clear fixed header — currently 200px */
.shogun-root {
  padding-top: 200px;
}

/* Hide Radium logo image inside the top section — keep the grey background strip */
#s-ac9238b3-07dc-4039-93d1-97d956317e46 a.shogun-image-link {
  display: none !important;
}

/* ============================================
   RADIUM LAYOUT SYSTEM — Content Width Overrides
   Matches header (1330px) and footer (1330px)
   Reference: RADIUM-LAYOUT-SYSTEM.md
   ============================================ */

/* Override Booster's .layout__content and .section__row max-width */
/* Excludes homepage testimonials + stories (those have section-specific CSS) */
.layout__content,
.section__row {
  max-width: var(--radium-content-max, 1330px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Default padding for non-homepage content sections */
:not(.template--index) .layout__content,
:not(.template--index) .section__row {
  padding-left: var(--radium-content-inner-padding, 40px) !important;
  padding-right: var(--radium-content-inner-padding, 40px) !important;
}

/* Override Booster's --maxwidth to 1330px */
:root {
  --maxwidth: 1330px !important;
}

/* Countdown timer — constrain inner content */
[id^="countdown-"] {
  padding-left: var(--radium-gutter-desktop, 30px) !important;
  padding-right: var(--radium-gutter-desktop, 30px) !important;
}
[id^="countdown-"] .ct-countdown,
[id^="countdown-"] .ct-content {
  max-width: var(--radium-content-max, 1330px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile gutter reduction for content sections */
@media (max-width: 896px) {
  .layout__content,
  .section__row {
    padding-left: var(--radium-gutter-mobile, 20px) !important;
    padding-right: var(--radium-gutter-mobile, 20px) !important;
  }
  [id^="countdown-"] {
    padding-left: var(--radium-gutter-mobile, 20px) !important;
    padding-right: var(--radium-gutter-mobile, 20px) !important;
  }
}

/* Collections list page — top spacing + width cap */
body.template--list-collections main {
  padding-top: 250px;
}

body.template--list-collections .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

body.template--list-collections [class*="hero-feature__container"],
body.template--list-collections [class*="collection-item__container"] {
  width: 100%;
}

@media (max-width: 896px) {
  .template--collection .max-width.row {
    padding-left: var(--radium-gutter-mobile, 20px) !important;
    padding-right: var(--radium-gutter-mobile, 20px) !important;
  }

  .row.row--product-list {
    padding-left: var(--radium-gutter-mobile, 20px) !important;
    padding-right: var(--radium-gutter-mobile, 20px) !important;
  }
}

/* Top buffer — remaining page types (matches 250px desktop / 100px mobile pattern) */
body[class*="template--product"] main,
body[class*="template--collection"] main,
body[class*="template--blog"] main,
body[class*="template--article"] main,
body[class*="template--cart"] main,
body[class*="template--page"] main {
  padding-top: 250px;
}

/* Pages with hero sections — no top padding, hero sits under nav */
body.page-boards main,
body.page-mach-one-s main,
body.page-tech main,
body.page-owners main,
body.page-founder-story main,
body.page-dylan-bell main,
body.page-support-hub main {
  padding-top: 0 !important;
}

/* Responsive top buffer — all landing/Shogun pages + all template types */
@media (max-width: 1024px) {
  .shogun-root {
    padding-top: 100px;
  }
  body.template--list-collections main,
  body[class*="template--product"] main,
  body[class*="template--collection"] main,
  body[class*="template--blog"] main,
  body[class*="template--article"] main,
  body[class*="template--cart"] main,
  body[class*="template--page"] main {
    padding-top: 100px;
  }
  /* Hero pages — no top padding on mobile either */
  body.page-boards main,
  body.page-mach-one-s main,
  body.page-tech main,
  body.page-owners main,
  body.page-founder-story main,
  body.page-dylan-bell main,
  body.page-support-hub main {
    padding-top: 0 !important;
  }
}

/* ============================================
   HOMEPAGE — Stories + Testimonials heading style
   (Arrow and layout CSS now in section files directly)
   ============================================ */
.template--index .section__blog .section__heading {
  padding-top: 60px !important;
  margin-bottom: 40px !important;
  font-family: 'Titillium Web', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

.template--index .section__blog .bcard__title {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* ============================================
   HOMEPAGE — Instagram feed width constraint
   Align to nav/header width (1330px)
   ============================================ */
.template--index .instagram__holder,
.template--index #insta-feed {
  max-width: var(--radium-content-max, 1330px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 45px !important;
  padding-right: 45px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

@media (max-width: 895px) {
  .template--index .instagram__holder,
  .template--index #insta-feed {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: hidden !important;
  }
}

/* ============================================
   MOBILE — 37px padding on all remaining sections
   Matches header (12px outer + 25px container = 37px)
   Sections already handled in their own files:
   spotlight, boards, founder, stories, motors
   ============================================ */
@media (max-width: 1024px) {
  /* Hero */
  .template--index #shopify-section-hero_kami .hero-content,
  .template--index [id*="hero-video-simple"] .hero-content {
    padding-left: 37px !important;
    padding-right: 37px !important;
  }

  /* What We Believe */
  .template--index [id^="rb-"] .rb-inner {
    padding-left: 37px !important;
    padding-right: 37px !important;
  }

  /* Tech Teaser — target both the section and inner */
  .template--index [id^="rtt-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .template--index [id^="rtt-"] .rtt-inner {
    padding-left: 37px !important;
    padding-right: 37px !important;
  }

  /* Testimonials — higher specificity to override section CSS */
  .template--index [id*="section_testimonials"] .layout__content,
  .template--index .testimonials .layout__content,
  .template--index .section__testimonials .layout__content {
    padding-left: 37px !important;
    padding-right: 37px !important;
    max-width: 100% !important;
  }

  /* Newsletter + Footer — handled in footer-radium.liquid section file */
}

/* ============================================
   MOBILE + TABLET — Instagram overflow fix
   ============================================ */
@media (max-width: 1024px) {
  .template--index .instagram__holder,
  .template--index #insta-feed,
  .template--index [class*="instagram"] {
    max-width: 100% !important;
    overflow: hidden !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
  }

  .template--index #insta-feed img {
    max-width: 100% !important;
  }
}

/* ============================================
   HOMEPAGE — Extra breathing room below footer
   ============================================ */
.template--index .radium-content-column {
  padding-bottom: 200px;
}

/* ============================================
   COLLECTION PAGE — clean rewrite in page-collection.liquid
   All Booster overrides removed 2026-06-16.
   ============================================ */

/* ============================================
   GENTLE ROUNDED CORNERS — site-wide (Ant 2026-06-22)
   Form controls + Radium content buttons.
   ============================================ */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"],
select, textarea {
  border-radius: 4px;
}
.rpb-atc, .rsp-btn, .rff-btn, .rc-submit {
  border-radius: 4px;
}


/* ============================================
   PRODUCT PAGES — page chrome (consolidated)
   Was duplicated inline in radium-product-general/-board; lives here once.
   Black content column, content-height <main> (no min-height gap pushing the
   footer down), tight footer. 245px clears the fixed header (beats the generic
   250px product rule above; loaded later).
   ============================================ */
body[class*="template--product"] .radium-content-column { background: #000000 !important; min-height: 0 !important; }
body[class*="template--product"] main { padding-top: 245px !important; padding-bottom: 0 !important; min-height: 0 !important; height: auto !important; }
body[class*="template--product"] .container { min-height: 0 !important; height: auto !important; }
body[class*="template--product"] .radium-footer__newsletter { margin-top: 20px !important; }

/* ============================================
   ROUNDED CARDS (Ant 2026-06-26)
   Round product-grid + collection card images store-wide.
   ============================================ */
.card__img--ratio { border-radius: 4px !important; overflow: hidden !important; }
.card--default .card__img--container { border-radius: 4px !important; overflow: hidden !important; }
[class*="product-card"] [class*="card__img"] { border-radius: 4px !important; }
/* collection grids render the image on a dynamic rc-card__img--…__radium-collection class */
[class*="rc-card__img"] { border-radius: 4px !important; overflow: hidden !important; }
[class*="rc-card__img"] img,
.card__img--container img,
.card__img img { border-radius: 4px !important; }