/** Shopify CDN: Minification failed

Line 145:24 Unexpected ")"
Line 204:19 Unexpected ")"
Line 358:87 Unexpected "{"
Line 376:0 Expected ")" to go with "("

**/
/* ==========================================================================
   TougeSupply Garage — Homepage LIGHT theme overrides
   --------------------------------------------------------------------------
   Loaded on every template AFTER custom-jdm.css (see layout/theme.liquid).
   Provides the shared light palette and homepage treatments.
   ========================================================================== */

:root {
  /* Light palette tokens, reused by the homepage sections below. */
  --bg: #f4efe4; /* off-white — tweak: #fafafa cooler/neutral, #f6f5f2 slightly warmer */
  --tsl-bg: var(--bg);
  --tsl-bg-alt: #e2e1d9;
  --tsl-surface: #ffffff;
  --tsl-ink: #141310;
  --tsl-ink-soft: #555555;
  --tsl-ink-faint: #8a8a8a;
  --tsl-border: #d9d8d1;
  --tsl-border-strong: #c9c8c1;
  --tsl-accent: var(--ts-brand-red, var(--ts-red));
  --tsl-accent-hover: var(--ts-brand-red-hover, var(--ts-red));
  --tsl-serif: var(--ts-font-serif);
  --tsl-sans: var(--ts-font-body);
  --ts-home-content-max: 1920px;
}

/* Paper backgrounds are shared in ts-paper.css. Disable the dark base overlays. */
body::before,
body::after { display: none !important; }

/* A single wide editorial grid for every homepage section. On standard
   desktops the content stays close to the viewport edge; only ultra-wide
   screens receive an additional centered width cap. */
@media (min-width: 990px) {
  body:has(.tsh) {
    --page-inset: clamp(48px, 3.35vw, 64px);
  }
}

/* ----- Page canvas ----- */
body {
  background: var(--tsl-bg);
}

main#MainContent {
  background: var(--tsl-bg);
}

/* ========================================================================== 
   Header — flip to a solid white bar with dark text
   ========================================================================== */
#header-component {
  --color-foreground: var(--tsl-ink);
  --color-foreground-rgb: 17 17 17;
  --color-foreground-heading: var(--tsl-ink);
  --color-foreground-heading-rgb: 17 17 17;
  --color-background: var(--tsl-bg);
  --color-background-rgb: 244 239 228;
  --color-border: var(--tsl-border);
  --color-border-rgb: 0 0 0;
  --color-scheme-top-row: var(--tsl-bg);
  --color-scheme-bottom-row: var(--tsl-bg);
}

.header-section,
.header,
.header__row {
  background: var(--tsl-bg) !important;
}

.header__row--top:not(.divider--page-width) {
  border-bottom: 1px solid var(--tsl-border);
}

#header-component .header-menu a {
  color: var(--tsl-ink) !important;
}

#header-component .search-action > button,
#header-component .search-action > a {
  border: 1px solid var(--tsl-border-strong);
  border-radius: 999px;
}

#header-component .header-drawer {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ==========================================================================
   Mobile nav drawer — light theme on the homepage
   The broad [class*="drawer"] rule paints a dark card background on every
   menu-drawer__* element, so the open drawer is fully dark. Reset all of
   them to transparent, then give the panel a light background + ink text.
   ========================================================================== */
#header-component [class*="drawer"] {
  background: transparent !important;
}

#header-component .menu-drawer {
  background: var(--tsl-bg) !important;
}

#header-component .menu-drawer,
#header-component .menu-drawer .svg-wrapper svg,
#header-component .menu-drawer .icon-caret,
#header-component .menu-drawer .icon-plus {
  color: var(--tsl-ink) !important;
}

/* On the car product template the transparent-header rule in
   main-car-product.liquid paints every header a/span/li white at specificity
   (1,5,1) — which beats the single-id drawer rules above and left the OPEN
   light drawer showing white-on-white text. Two ids (#header-group
   #header-component) reclaim it so the drawer text stays ink (and red on
   hover/active) in every header state. Harmless on the other light templates
   that load this file (the drawer is light there too). */
#header-group #header-component .menu-drawer,
#header-group #header-component .menu-drawer :is(
    a, button, span, li, summary,
    .menu-drawer__menu-item, .menu-drawer__menu-item--mainlist,
    .menu-drawer__menu-item--parent, .menu-drawer__menu-item--child,
    .menu-drawer__menu-item-text, .menu-drawer__back-button,
    .menu-drawer__close-button, .svg-wrapper svg, .icon-caret, .icon-plus
  ) {
  color: var(--tsl-ink) !important;
}
#header-group #header-component .menu-drawer :is(
    .menu-drawer__menu-item--mainlist:hover,
    .menu-drawer__menu-item--mainlist:focus-visible,
    .menu-drawer__menu-item--parent:hover,
    .menu-drawer__menu-item--child:hover,
    .menu-drawer__menu-item--mainlist.menu-drawer__menu-item--active,
    .menu-drawer__menu-item--mainlist[aria-current="page"]
  ) {
  color: var(--tsl-accent) !important;
}:active, :focus-visible) {
  background: #77736d !important;
}

/* ========================================================================== 
   Home hero float — make the site header transparent over the full-screen
   home hero (.tsh--overlap), white foreground, reverting to the solid white
   light bar once the user scrolls down (data-sticky-state='active'). The rules
   above force a solid white header with !important, so we out-specify them
   here. Mirrors the car PDP (body:has(.cpv)) and collection (§1b) treatments.
   ========================================================================== */
body:has(.tsh--overlap)
  #header-component:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))),
body:has(.tsh--overlap)
  #header-component:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) :is(.header-section, .header, .header__row, .header__columns, .header__underlay, .header__underlay-closed, .header__underlay-open) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

body:has(.tsh--overlap)
  #header-component:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))),
body:has(.tsh--overlap)
  #header-component:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
  --color-foreground: 255 255 255;
  --color-foreground-rgb: 255 255 255;
  --color-foreground-heading: 255 255 255;
  --color-background: transparent;
  color: #fff !important;
}

body:has(.tsh--overlap)
  #header-component:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) :is(a, button, span, li, .header-actions__action, .menu-list__link, .menu-list__link-title, .header-menu a, .jdm-header-login, .jdm-header-social__link, .localization-form__select) {
  color: #fff !important;
}

body:has(.tsh--overlap)
  #header-component:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) svg {
  color: #fff !important;
}

/* The mobile hamburger has BOTH color and stroke pinned to dark ink above
   (.header-drawer-icon path { color/stroke: var(--tsl-ink) }), which color:#fff
   can't override on its own (it never touches stroke). Force the stroke white
   too; reverts to dark when the header turns solid. */
body:has(.tsh--overlap)
  #header-component:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) :is(.header__icon--menu, .header__icon--summary, .header-drawer-icon) :is(svg, path) {
  color: #fff !important;
  stroke: #fff !important;
}

/* Logo: swap the dark wordmark for the white/transparent variant over the hero
   (the normal logo is a dark mark blended with mix-blend-mode, so it reads
   black against the photo). Same swap the car PDP / collection hero perform. */
body:has(.tsh--overlap)
  #header-component:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) {
  --header-logo-display: block;
  --header-logo-inverse-display: none;
}broken once pushed). Asset CSS is served verbatim {
  .featured-machines__grid > .featured-machines__card,
  .featured-machines__card {
    position: relative !important;
    overflow: hidden !important;
    background: #ececea !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .featured-machines__card:hover {
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .featured-machines__card-link {
    position: relative !important;
    display: block !important;
    min-height: 100% !important;
    color: #ffffff !important;
  }

  .featured-machines__card-media {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    background: #ececea !important;
  }

  .featured-machines__card-image {
    object-position: center bottom !important;
  }

  .featured-machines__card-media::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.34) 30%,
      rgba(0, 0, 0, 0) 62%
    ) !important;
    pointer-events: none !important;
  }

  .featured-machines__card-body {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.18rem !important;
    padding: 0 22px 18px !important;
    background: transparent !important;
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.36) !important;
  }

  .featured-machines__card-title {
    max-width: 92% !important;
    color: #ffffff !important;
    font-family: var(--tsl-serif, "Playfair Display", Georgia, serif) !important;
    font-size: clamp(1.52rem, 7.4vw, 2rem) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 0.98 !important;
    text-transform: uppercase !important;
  }

  .featured-machines__card-model,
  .featured-machines__card-mileage {
    max-width: 92% !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: var(--tsl-serif, "Playfair Display", Georgia, serif) !important;
    font-size: clamp(0.95rem, 4.5vw, 1.18rem) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.36) !important;
  }

  .featured-machines__card-footer {
    margin-top: 0.55rem !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .featured-machines__card-price,
  .featured-machines__card-arrow {
    color: #ffffff !important;
  }

  .featured-machines__card-badge--new {
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    min-height: 30px !important;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12) !important;
    color: #141310 !important;
    font-family: var(--tsl-sans, "Inter", system-ui, sans-serif) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.18em !important;
    text-shadow: none !important;
  }
}

/* ==========================================================================
   Homepage services — editorial introduction + stacked split cards
   ========================================================================== */

/* Desktop follows the landscape reference: editorial intro above three
   compact, image-first cards. Tablet and mobile retain the split-card layout. */

/* ==========================================================================
   Homepage typography system
   Playfair Display carries editorial headings; Inter carries every piece of
   interface text, body copy, metadata, and navigation. Japanese accents keep
   their language-appropriate fonts and uploaded logo artwork is unaffected.
   ========================================================================== */
body:has(.tsh) {
  --font-body--family: var(--tsl-sans, "Inter", system-ui, sans-serif);
  --font-subheading--family: var(--tsl-sans, "Inter", system-ui, sans-serif);
  --font-heading--family: var(--tsl-serif, "Playfair Display", Georgia, serif);
  --font-h1--family: var(--tsl-serif, "Playfair Display", Georgia, serif);
  --font-h2--family: var(--tsl-serif, "Playfair Display", Georgia, serif);
  --font-h3--family: var(--tsl-serif, "Playfair Display", Georgia, serif);
  --font-h4--family: var(--tsl-serif, "Playfair Display", Georgia, serif);
}body:has(.tsh) :is(
  .tsh, .ts-footer, .ts-tabbar
) {
  font-family: var(--tsl-sans, "Inter", system-ui, sans-serif) !important;
}body:has(.tsh) :is(
  .tsh__title, .featured-machines__card-title, .ts-footer__wordmark, .ts-footer__col-heading
) {
  font-family: var(--tsl-serif, "Playfair Display", Georgia, serif) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
}body:has(.tsh) :is(
  .tsh__eyebrow, .tsh__btn, .featured-machines__card-price, .featured-machines__card-badge, .featured-machines__status, .ts-footer__link, .ts-footer__contact-link, .ts-footer__contact-text, .ts-footer__copyright, .ts-footer__legal-link, .ts-tabbar__label
) {
  font-family: var(--tsl-sans, "Inter", system-ui, sans-serif) !important;
}body:has(.tsh) :is(
  .tsh__eyebrow, .tsh__btn, .featured-machines__card-badge, .featured-machines__status {
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}body:has(.tsh) :is(
  .tsh__sub, .featured-machines__card-model, .featured-machines__card-mileage, .ts-footer__subtitle, .ts-footer__link, .ts-footer__contact-item, .ts-footer__legal-link
) {
  font-family: var(--tsl-sans, "Inter", system-ui, sans-serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body:has(.tsh) .ts-footer__col-heading {
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
}