/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/* stylelint-disable no-empty-source */
:root, .dropin-design {
  /* Adobe Commerce Dropin design tokens */
  --color-brand-50: #f0f0f0;
  --color-brand-100: #d6d6d6;
  --color-brand-300: #6d6d6d;
  --color-brand-500: #454545;
  --color-brand-600: #383838;
  --color-brand-700: #2b2b2b;
  --color-brand-800: #1f1f1f;
  --color-neutral-50: #fff;
  --color-neutral-100: #fafafa;
  --color-neutral-200: #f5f5f5;
  --color-neutral-300: #e8e8e8;
  --color-neutral-400: #d6d6d6;
  --color-neutral-500: #b8b8b8;
  --color-neutral-600: #8f8f8f;
  --color-neutral-700: #666;
  --color-neutral-800: #3d3d3d;
  --color-neutral-900: #292929;
  --color-positive-200: #eff5ef;
  --color-positive-500: #7fb078;
  --color-positive-800: #53824c;
  --color-informational-200: #eeeffb;
  --color-informational-500: #6978d9;
  --color-informational-800: #5d6dd6;
  --color-warning-200: #fdf3e9;
  --color-warning-500: #e79f5c;
  --color-warning-800: #cc7a2e;
  --color-alert-200: #ffebeb;
  --color-alert-500: #db7070;
  --color-alert-800: #c35050;
  --color-button-active: var(--color-brand-700);
  --color-button-focus: var(--color-neutral-400);
  --color-button-hover: var(--color-brand-600);
  --color-action-button-active: var(--color-neutral-50);
  --color-action-button-hover: var(--color-neutral-300);

  /* Adobe drop-in compatibility aliases — newer drop-ins consume these
     names; map to the equivalent Adobe scale token we already define. */
  --color-gray-300: var(--color-neutral-300);
  --color-success: var(--color-positive-500);
  --color-success-600: var(--color-positive-800);
  --color-text-primary: var(--color-neutral-800);
  --color-opacity-16: rgb(255 255 255 / 16%);
  --color-opacity-24: rgb(255 255 255 / 24%);
  --grid-1-columns: 4;
  --grid-1-margins: 0;
  --grid-1-gutters: 16px;
  --grid-2-columns: 12;
  --grid-2-margins: 0;
  --grid-2-gutters: 16px;
  --grid-3-columns: 12;
  --grid-3-margins: 0;
  --grid-3-gutters: 24px;
  --grid-4-columns: 12;
  --grid-4-margins: 0;
  --grid-4-gutters: 24px;
  --grid-5-columns: 12;
  --grid-5-margins: 0;
  --grid-5-gutters: 24px;
  --shape-border-radius-1: 3px;
  --shape-border-radius-2: 8px;
  --shape-border-radius-3: 24px;
  --shape-border-width-1: 1px;
  --shape-border-width-2: 1.5px;
  --shape-border-width-3: 2px;
  --shape-border-width-4: 4px;
  --shape-shadow-1: 0 0 16px 0 rgb(0 0 0 / 16%);
  --shape-shadow-2: 0 2px 16px 0 rgb(0 0 0 / 16%);
  --shape-shadow-3: 0 2px 3px 0 rgb(0 0 0 / 16%);
  --shape-icon-stroke-1: 1px;
  --shape-icon-stroke-2: 1.5px;
  --shape-icon-stroke-3: 2px;
  --shape-icon-stroke-4: 4px;
  --spacing-xxsmall: 4px;
  --spacing-xsmall: 8px;
  --spacing-small: 16px;
  --spacing-medium: 24px;
  --spacing-big: 32px;
  --spacing-xbig: 40px;
  --spacing-xxbig: 48px;
  --spacing-large: 64px;
  --spacing-xlarge: 72px;
  --spacing-xxlarge: 96px;
  --spacing-huge: 120px;
  --spacing-xhuge: 144px;
  --spacing-xxhuge: 192px;

  /* LESS-aligned spacing aliases — same values as the canonical scale,
     named after the production Magento @indent__* variables. */
  --spacing-indent-xs: var(--spacing-xxsmall);
  --spacing-indent-s: 10px;
  --spacing-indent-base: 20px;
  --spacing-indent-m: var(--spacing-medium);
  --spacing-indent-l: var(--spacing-big);
  --spacing-indent-xl: var(--spacing-xbig);
  --input-height: 40px;
  --input-background: var(--color-neutral-50);
  --border-radius-default: var(--shape-border-radius-1);

  /* ── Breakpoint reference scale ───────────────────────────────────────────
     CSS var() CANNOT be used inside @media conditions, so these are NOT
     consumed by the media queries below — they are the single source of truth
     for documentation, JS (matchMedia), and container queries. When adding a
     media query, hard-code the matching px value and reference the name here.
     Sources: 375 = Figma SM artboard; 600 / 900 = existing EDS layout;
     768 / 1024 = Magento (asap) @screen__m / __l for cross-stack parity. */
  --bp-xs: 375px;            /* small mobile — Figma SM */
  --bp-sm: 600px;            /* large mobile — EDS */
  --bp-md: 768px;            /* tablet — Magento @screen__m */
  --bp-lg: 900px;            /* desktop — EDS */
  --bp-xl: 1024px;           /* wide desktop — Magento @screen__l */

  /* Content container — production fallback (Figma values differed: TP comp
     row was 1240, HRParts design 1280): the live asap .panel.header /
     .header.content box is 1280px with 15px inline padding (= 1250px
     content), verified via computed styles on www.tractorpartsasap.com
     (2026-06-04). Production wins for 1:1 parity per Janusz. */
  --bp-content-max: 1280px;
  --content-padding-inline: 15px;
  --type-base-font-family: roboto, "Roboto Fallback", system-ui, sans-serif;
  --type-display-1-font: normal normal 300 6rem/7.2rem var(--type-base-font-family);
  --type-display-1-letter-spacing: 0.04em;
  --type-display-2-font: normal normal 300 4.8rem/5.6rem var(--type-base-font-family);
  --type-display-2-letter-spacing: 0.04em;
  --type-display-3-font: normal normal 300 3.4rem/4rem var(--type-base-font-family);
  --type-display-3-letter-spacing: 0.04em;
  --type-headline-1-font: normal normal 400 2.4rem/3.2rem var(--type-base-font-family);
  --type-headline-1-letter-spacing: 0.04em;
  --type-headline-2-default-font: normal normal 300 2rem/2.4rem var(--type-base-font-family);
  --type-headline-2-default-letter-spacing: 0.04em;
  --type-headline-2-strong-font: normal normal 700 2rem/2.4rem var(--type-base-font-family);
  --type-headline-2-strong-letter-spacing: 0.04em;
  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-default-letter-spacing: 0.04em;
  --type-body-1-strong-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-strong-letter-spacing: 0.04em;
  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-emphasized-letter-spacing: 0.04em;
  --type-body-2-default-font: normal normal 300 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-default-letter-spacing: 0.04em;
  --type-body-2-strong-font: normal normal 700 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-strong-letter-spacing: 0.04em;
  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-emphasized-letter-spacing: 0.04em;
  --type-button-1-font: normal normal 400 2rem/2.6rem var(--type-base-font-family);
  --type-button-1-letter-spacing: 0.08em;
  --type-button-2-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
  --type-button-2-letter-spacing: 0.08em;
  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-1-letter-spacing: 0.08em;
  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-2-letter-spacing: 0.08em;
  --type-details-overline-font: normal normal 400 1.2rem/2rem var(--type-base-font-family);
  --type-details-overline-letter-spacing: 0.16em;

  /* Additional tokens */
  --type-fixed-font-family: adobe-clean, "Roboto Mono", menlo, consolas, "Liberation Mono", monospace, system-ui, sans-serif;
  --background-color: var(--color-neutral-50);
  --nav-height: 6.4rem;

  /* Height reserved for the promotional banner above the nav bar (AGPO-866).
     Both brands render a banner on every page (AC #1), so the space is
     reserved from first paint (no CLS). header.js collapses it (class
     `header-no-banner`) only when no banner document is authored, or when
     the user dismisses it (`header-banner-dismissed`, mobile comp). */
  --promo-banner-height: 4rem;

  /* Mobile-only phone strip below the nav bar (TP Figma mobile comp): the
     banner's phone number renders as a full-width accent strip. Collapsed
     via `header-no-banner` / `header-no-phone` when absent. */
  --phone-strip-height: 4rem;

  /* Mobile-only always-visible search row inside the nav (TP Figma mobile
     comp): logo row on top, search input row beneath. Single source for both
     brands (was theme-gated in header.css, which grew the header after the
     JS-applied data-theme landed); the sticky header self-sizes, so this only
     needs to be stable across the theme swap to avoid CLS. */
  --mobile-search-row-height: 10rem;
}

/* 900px = --bp-lg; the desktop nav bar is 100px tall per the TP comp
   105px per production .header.content computed (85px content row +
   2×10px block padding; Figma 1523-1161 suggested 100 — production wins
   for 1:1 parity per Janusz 2026-06-04) */
@media (min-width: 768px) {
  :root {
    --nav-height: 10.5rem;
  }
}

/* fallback font */
@font-face {
  font-family: adobe-clean;
  size-adjust: 100%;
  src: local("Helvetica");
}

/* Metric-matched fallbacks for the brand fonts. The type tokens reference
   "Roboto Fallback" / "Inter Fallback" (themes.css, styles.css) but they were
   never defined, so text painted in system-ui and reflowed when the real font
   swapped in — the main mobile CLS source. Defined here (eager styles.css) so
   they apply at first paint; overrides make the Arial fallback match the brand
   font's box, so the swap shifts nothing. */
@font-face {
  font-family: "Roboto Fallback";
  src: local("Arial");
  ascent-override: 92.7734%;
  descent-override: 24.4141%;
  line-gap-override: 0%;
  size-adjust: 100.3309%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.53%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

html, body {
  min-height: 100%;
}

html {
  font-size: 62.5%;

  /* Always render the viewport scrollbar track (production parity — the M2 site
     keeps a persistent bar) AND reserve its gutter. Together these mean the
     desktop nav-open scroll lock (blocks/header/header.css:
     html:has(.nav-mega[aria-expanded='true']) { overflow: hidden }) causes no
     layout shift: overflow:hidden hides the thumb but scrollbar-gutter keeps the
     gutter width, so content never jumps sideways. overflow:hidden also PRESERVES
     the current scroll offset (unlike clamping height), so the page keeps its
     position while the menu is open. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  font: var(--type-body-1-default-font);
  line-height: 1.8;
  letter-spacing: var(--type-body-1-default-letter-spacing);
  margin: 0;
  color: var(--color-neutral-800);
  background-color: var(--background-color);
  display: grid;

  /* row 2 hosts the mobile phone strip (.header-phone-strip, inserted after
     </header> by blocks/header/header.js); 0 on desktop, reserved at
     --phone-strip-height on mobile below (no CLS) */
  grid-template-rows: auto 0 1fr auto;
  grid-template-columns: 100%;
  -webkit-font-smoothing: antialiased;
}

body:not(.appear) {
  display: none;
}

/* Sticky (not fixed): the header stays in normal flow — no manual fixed
   positioning, no negative-margin patching (AC #10, .page-header.sticky;
   position lives in header.css). But the header content is built by JS, so
   <header> is 0px tall until the banner + nav + search populate. Reserve that
   box from first paint with min-height so main can't be shoved down as it
   fills (CLS). min-height (not height) lets the in-flow header grow gracefully
   if real content slightly exceeds the reserve. Single stable values — not
   theme-gated, not JS-measured — so the data-theme swap causes no shift. */
header {
  grid-row: 1;
  min-height: calc(var(--promo-banner-height, 0px) + var(--nav-height));
}

@media (max-width: 767px) {
  :root {
    /* The stacked mobile promo can wrap to 2 lines; the banner slot reserves
       this from first paint and the bar fills it (header-utility-bar.css) so
       the async banner load never grows the header. */
    --promo-banner-height: 5.6rem;

    /* ── THE knob for the mobile header ─────────────────────────────────
       Single value = the rendered height of banner + logo row + search row.
       It does two jobs at once: reserves the space before JS builds the
       header (no CLS), AND sets where the red phone strip sits directly below.
         • raise it  → more breathing room between the search field and strip
         • lower it  → tighter (phone strip moves up)
       Keep it >= the real rendered header height (~20.6rem) or main shifts.
       Decoupled from the search FIELD's own size (--mobile-search-row-height),
       so tuning this gap never resizes the field. */
    --mobile-header-reserve: 21.1rem;
  }

  header {
    min-height: var(--mobile-header-reserve);
  }

  /* Reserve only the phone-strip row from first paint (the strip is inserted
     after </header> by header.js); collapsed via the body-level mirrors of
     header-no-banner / header-no-phone (blocks/header/header.css). */
  body {
    grid-template-rows: auto var(--phone-strip-height, 0) 1fr auto;
  }
}

main {
  grid-row: 3;
}

footer {
  grid-row: 4;
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  line-height: 1.25;
  color: var(--type-heading-color, inherit);
  scroll-margin: 40px;
}

h1 {
  font: var(--type-display-1-font);
  letter-spacing: var(--type-display-1-letter-spacing);
}

h2 {
  font: var(--type-display-2-font);
  letter-spacing: var(--type-display-2-letter-spacing);
}

h3 {
  font: var(--type-display-3-font);
  letter-spacing: var(--type-display-3-letter-spacing);
}

h4 {
  font: var(--type-headline-1-font);
  letter-spacing: var(--type-headline-1-letter-spacing);
}

h5 {
  font: var(--type-headline-2-strong-font);
  letter-spacing: var(--type-headline-2-strong-letter-spacing);
}

h6 {
  font: var(--type-headline-2-default-font);
  letter-spacing: var(--type-headline-2-default-letter-spacing);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 1.5625em;
  margin-bottom: 1.5625em;
}

hr {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border: 0;
  border-bottom: var(--shape-border-width-1) solid var(--color-neutral-300);
}

code,
pre {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  font-family: var(--type-fixed-font-family);
}

pre {
  overflow: scroll;
}

main pre {
  background-color: var(--color-neutral-300);
  padding: 1em;
  border-radius: 0.25em;
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: var(--spacing-xbig) var(--spacing-small);
}

input,
textarea,
select,
button {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Form elements — token-driven defaults. Brands re-skin by updating the
   --input-* / --color-* tokens; these element rules should not need to
   be overridden inside any block. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
  box-sizing: border-box;
  height: var(--input-height);

  /* Inline padding was 24px (spacing-medium) which read as a large left gap.
     Production registration inputs use 0 9px; 10px matches that. Contextual
     fields (parts-finder, qty) set their own. */
  padding: 0 var(--input-padding-inline, 10px);
  border: var(--shape-border-width-1) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  background-color: var(--input-background);
  color: var(--color-neutral-900);
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);

  /* Soft baseline only: Figma doesn't strongly specify a global input font
     size, but production registration and several Figma fields sit at 16px,
     so we use it as the default. Components needing another size override
     font-size at the component level. */
  font-size: var(--input-font-size, 16px);

  /* Production registration renders the entered value in a medium/bold weight;
     we default inputs to normal weight (overridable per component). */
  font-weight: var(--input-font-weight, 400);
  line-height: var(--input-height);
}

textarea {
  height: auto;
  min-height: calc(var(--input-height) * 2);
  padding: var(--spacing-xsmall) var(--spacing-small);
  resize: vertical;
}

/* Native select arrow renders inconsistently across OS/browser; replace it
   with a custom chevron pinned inside on the right so selects match the input
   border treatment. Mirrors the parts-finder__select pattern. */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 19 11' fill='none'%3E%3Cpath d='M9.5 11L0 2.08108L2.21667 0L9.5 6.83784L16.7833 0L19 2.08108L9.5 11Z' fill='%23686868'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-medium) center;
  padding-right: calc(var(--spacing-medium) * 2);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
  border-color: var(--color-neutral-700);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--input-border-color-focus, var(--color-brand-500));
}

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

input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-500);
  cursor: not-allowed;
}

/* Checkbox / radio — custom-styled instead of accent-color. Native
   accent-color renders the checked state inconsistently across brand colors
   (the bright gold gets a dark contrast outline; dark red gets a clean ring),
   so we draw them ourselves: a brand-color ring + dot (radio) / filled box +
   white check (checkbox), identical across brands, color from --color-brand-500. */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  box-sizing: border-box;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  border: var(--shape-border-width-3) solid var(--input-border-color, var(--color-neutral-600));
  background: var(--color-neutral-50);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
}

input[type="checkbox"] {
  border-radius: 2px;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  transform: scale(0);
  background: var(--color-neutral-50);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="radio"]::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  transform: scale(0);
  background: var(--color-brand-500);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  border-color: var(--color-brand-500);
}

input[type="checkbox"]:checked {
  background: var(--color-brand-500);
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  border-color: var(--color-neutral-300);
  background: var(--color-neutral-200);
  cursor: not-allowed;
}

/* Unified keyboard-focus indicator. The native ring is off-brand (blue) and
   is removed entirely on appearance:none controls, leaving links, buttons,
   header icons, and custom checkboxes/radios with inconsistent or missing
   focus states. One brand ring (per-brand --color-focus-ring) covers them all.
   outline-offset keeps it visible even on same-color fills (e.g. the red
   primary button on the red brand). :focus-visible shows it for keyboard nav
   but not mouse clicks. Text inputs/select/textarea are intentionally excluded
   — they signal focus via their brand border-color (see :focus rules above). */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: var(--shape-border-width-3) solid var(--color-focus-ring, var(--color-brand-500));
  outline-offset: 2px;
}

label {
  display: inline-block;
  margin-bottom: var(--spacing-xxsmall);
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  color: var(--color-neutral-800);
}

fieldset {
  border: var(--shape-border-width-1) solid var(--color-neutral-300);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-small) var(--spacing-medium);
  margin: 0 0 var(--spacing-medium);
}

legend {
  padding: 0 var(--spacing-xsmall);
  font: var(--type-body-1-strong-font);
}

/* links */
a:not(.dropin-design a) {
  color: var(--color-link-default, var(--color-brand-500));
  font: var(--type-body-1-strong-font);
  letter-spacing: var(--type-body-1-strong-letter-spacing);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:not(.dropin-design a):hover {
  color: var(--color-link-hover, var(--color-brand-600));
  text-decoration: underline;
}

/* buttons */
main a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: var(--spacing-small) 0;
  border: var(--shape-border-width-3) solid transparent;
  border-radius: var(--button-border-radius, var(--shape-border-radius-3));
  padding: var(--button-padding-block, 0.5em) var(--button-padding-inline, 1.2em);
  font: var(--type-button-2-font);
  letter-spacing: var(--type-button-2-letter-spacing);
  font-style: normal;
  font-weight: var(--button-font-weight, 500);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-button__default--background, var(--color-brand-500));
  color: var(--color-button__default--foreground, var(--color-neutral-50));
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main a.button:hover,
main a.button:focus,
button.button:hover,
button.button:focus {
  background-color: var(--color-button__default--background-hover, var(--color-button-hover, var(--color-brand-600)));
  cursor: pointer;
}

main a.button:active,
button.button:active {
  background-color: var(--color-button__default--background-active, var(--color-button-active));
}

main a.button.disabled,
button.button:disabled,
button.button:disabled:hover {
  background-color: var(--color-neutral-300);
  cursor: unset;
}

main a.button.secondary,
button.button.secondary {
  background-color: var(--color-button__secondary--background, transparent);
  border: var(--shape-border-width-3) solid var(--color-button__secondary--border, currentcolor);
  color: var(--color-button__secondary--foreground, var(--color-brand-500));
}

main a.button.secondary:hover,
main a.button.secondary:focus,
button.button.secondary:hover,
button.button.secondary:focus {
  background-color: var(--color-button__secondary--background-hover, transparent);
  border-color: var(--color-button__secondary--border-hover, currentcolor);
  color: var(--color-button__secondary--foreground-hover, var(--color-brand-600));
}

main a.button.secondary:active,
button.button.secondary:active {
  background-color: var(--color-button__secondary--background-active, transparent);
}

main a.button.tertiary,
button.button.tertiary {
  background-color: var(--color-button__tertiary--background, transparent);
  border: var(--shape-border-width-3) solid var(--color-button__tertiary--border, transparent);
  color: var(--color-button__tertiary--foreground, var(--color-brand-500));
}

main a.button.tertiary:hover,
main a.button.tertiary:focus,
button.button.tertiary:hover,
button.button.tertiary:focus {
  background-color: var(--color-button__tertiary--background-hover, transparent);
  border-color: var(--color-button__tertiary--border-hover, transparent);
  color: var(--color-button__tertiary--foreground-hover, var(--color-brand-600));
  text-decoration: underline;
}

main a.button.tertiary:active,
button.button.tertiary:active {
  background-color: var(--color-button__tertiary--background-active, transparent);
}

main a.button.dark,
button.button.dark {
  background-color: var(--color-button__dark--background, var(--color-surface-dark));
  border-color: transparent;
  color: var(--color-button__dark--foreground, var(--color-neutral-50));
}

main a.button.dark:hover,
main a.button.dark:focus,
button.button.dark:hover,
button.button.dark:focus {
  background-color: var(--color-button__dark--background-hover, var(--color-neutral-900));
}

main a.button.dark:active,
button.button.dark:active {
  background-color: var(--color-button__dark--background-active, var(--color-neutral-900));
}

main a.button.accent,
button.button.accent {
  background-color: var(--color-button__accent--background);
  border-color: transparent;
  color: var(--color-button__accent--foreground, var(--color-neutral-50));
}

main a.button.accent:hover,
main a.button.accent:focus,
button.button.accent:hover,
button.button.accent:focus {
  background-color: var(--color-button__accent--background-hover);
}

main a.button.accent:active,
button.button.accent:active {
  background-color: var(--color-button__accent--background-active);
}

/* Muted / gray variant — production cart "Continue Shopping" style. Not in
   Figma; fallbacks match production (#e2e2e2 bg / #555 text). A left icon is
   added per-block where used. */
main a.button.muted,
button.button.muted {
  background-color: var(--color-button__muted--background, #e2e2e2);
  border-color: transparent;
  color: var(--color-button__muted--foreground, #555);
}

main a.button.muted:hover,
main a.button.muted:focus,
button.button.muted:hover,
button.button.muted:focus {
  background-color: var(--color-button__muted--background-hover, #d6d6d6);
}

main a.button.muted:active,
button.button.muted:active {
  background-color: var(--color-button__muted--background-active, #ccc);
}

/* Opt-in uppercase modifier — labels are sometimes sentence case ("Add to
   cart") and sometimes all caps ("CONTINUE SHOPPING"); toggle per usage. */
main a.button.uppercase,
button.button.uppercase {
  text-transform: uppercase;
}

main blockquote {
  font-style: italic;
  margin: 3rem;
  text-indent: -1rem;
  hanging-punctuation: first;
}

main blockquote p::before {
  content: '“';
  line-height: 0;
}

main blockquote p::after {
  content: '”';
  line-height: 0;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 2.4rem;
  width: 2.4rem;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: var(--spacing-xbig) 0;
}

.section:empty {
  display: none;
}

/* container per production (.header.content / .panel.header: 1280px box,
   15px inline padding) — was 1200px/24-32px; Figma differed, production
   fallback wins for 1:1 parity (see --bp-content-max) */
main > .section > div {
  max-width: var(--bp-content-max, 1280px);
  margin: auto;
  padding: 0 var(--content-padding-inline, 15px);
  box-sizing: border-box;
}

main > .section:first-of-type {
  margin-top: 0;
}

/* section metadata - styles - start */
main .section.light,
main .section.highlight {
  background-color: var(--color-neutral-100);
  margin: 0;
  padding: var(--spacing-xbig) 0;
}

main .section[data-padding="default"] {
    padding: var(--spacing-xxsmall) 0;
}

main .section[data-padding="small"] {
    padding: var(--spacing-xsmall) 0;
}

main .section[data-padding="medium"] {
    padding: var(--spacing-small) 0;
}

main .section[data-padding="large"] {
    padding: var(--spacing-medium) 0;
}

main .section[data-padding="big"] {
    padding: var(--spacing-big) 0;
}

main .section[data-padding="xbig"] {
    padding: var(--spacing-xbig) 0;
}

/* Homepage hero row — Parts Finder (fixed 380px) on the left, Hero on the
   right, from 1024px up; below that the wrappers stack in authored order
   (Parts Finder first, then Hero). Authored as a SINGLE section holding both
   blocks, with Section Metadata Style "home hero". Contained to the 1280px
   content width with the same inline padding as the header. */
main > .section.home-hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);

  /* Light grey band (#f5f5f5) behind the finder + hero, full-bleed. */
  background-color: var(--color-neutral-200);
  padding-block: var(--spacing-medium);
}

/* Stacked (mobile/tablet): the contained-wrapper rule sets margin:auto, which
   in a flex column collapses each item to its content width — clear it so the
   wrappers stretch full width (keeping the 15px inline inset). */
main > .section.home-hero > div {
  align-self: stretch;
  margin-inline: 0;
}

/* Stacked (below 1024px): show the Hero above the Parts Finder. */
@media (max-width: 1023.98px) {
  main > .section.home-hero > .hero-wrapper {
    order: -1;
  }
}

@media (min-width: 1024px) {
  main > .section.home-hero {
    box-sizing: border-box;
    flex-direction: row;

    /* Double the band's top/bottom breathing room on desktop (24 → 48px). */
    padding-block: calc(var(--spacing-medium) * 2);

    /* stretch so the finder column matches the (usually taller) hero column. */
    align-items: stretch;

    /* Section stays full-bleed (for the grey band); the row content is centered
       to the 1280px content width with the header's inline padding. */
    padding-inline: max(
      var(--content-padding-inline, 15px),
      calc((100% - var(--bp-content-max, 1280px)) / 2 + var(--content-padding-inline, 15px))
    );
  }

  /* The section now owns the width cap + inline padding, so each block
     wrapper fills its column instead of re-containing to 1280px. */
  main > .section.home-hero > div {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  main > .section.home-hero > .parts-finder-wrapper {
    flex: 0 0 380px;
    width: 380px;
    min-width: 380px;
  }

  main > .section.home-hero > .hero-wrapper {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The finder's dark/tractor panel fills the full column height so its
     background matches the hero column instead of stopping at its content.
     The wrapper stretches via align-items:stretch (don't set its height, or
     that disables the stretch); the inner block + panel fill it at 100%. */
  main > .section.home-hero > .parts-finder-wrapper .parts-finder,
  main > .section.home-hero > .parts-finder-wrapper .parts-finder__wrapper {
    height: 100%;
    box-sizing: border-box;
  }
}

main .section[data-padding="xxbig"] {
    padding: var(--spacing-xxbig) 0;
}

main .section[data-padding="huge"] {
    padding: var(--spacing-huge) 0;
}

main .section[data-padding="xhuge"] {
    padding: var(--spacing-xhuge) 0;
}

main .section[data-padding="xxhuge"] {
    padding: var(--spacing-xxhuge) 0;
}


main .section[data-margin="small"] {
    margin: var(--spacing-xsmall) 0;
}

main .section[data-margin="medium"] {
    margin: var(--spacing-small) 0;
}

main .section[data-margin="large"] {
    margin: var(--spacing-medium) 0;
}

main .section[data-margin="big"] {
    margin: var(--spacing-big) 0;
}

main .section[data-margin="xbig"] {
    margin: var(--spacing-xbig) 0;
}

main .section[data-margin="xxbig"] {
    margin: var(--spacing-xxbig) 0;
}

main .section[data-margin="huge"] {
    margin: var(--spacing-huge) 0;
}

main .section[data-margin="xhuge"] {
    margin: var(--spacing-xhuge) 0;
}

main .section[data-margin="xxhuge"] {
    margin: var(--spacing-xxhuge) 0;
}

/* section metadata - styles - end */

/* Base Design System Tokens */
.dropin-design.dropin-design {
  --background-none: none 0 0% no-repeat padding-box;
}

.dropin-input-date__icon {
  z-index: 2;
}

/* Layout: Columns */
body.columns main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--bp-content-max, 1280px);
  margin: 0 auto;
  padding: var(--spacing-large) var(--spacing-small);
  box-sizing: border-box;
  gap: var(--grid-4-gutters);
}

body.columns main > .section {
  flex: 1;
  flex-basis: 100%;
  max-width: unset;
  margin: unset;
  padding: unset;
}

body.columns main > .section > div {
  max-width: unset;
  padding: unset;
}

body.columns main > .section > div:not(:last-child) {
  margin-bottom: var(--gap, unset);
}

body.columns main > .section:empty {
  display: none;
}

@media (min-width: 600px) {
  body.columns main {
    padding: var(--spacing-large) var(--spacing-big);
  }
}

.dropin-product-item-card {
  border: unset;
}

@media (min-width: 900px) {
  body.columns main {
    flex-direction: row;
  }

  body.columns main > .section {
    flex: 1;
    flex-basis: var(--column-width, auto);
  }
}

/**
* Reset main element visibility
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
*/
main[hidden] {
  display: none !important;
}