/* ============================================
   RED LINE SUPERSTORE — Universal Styles
   The ONE source of truth for shared component CSS. Light-only.
   Markup is Bootstrap 5.3 first; these rules only add the brand skin
   and the handful of components Bootstrap does not ship.
   Page-specific rules live in css/pages/[name].css, scoped .page-[name].
   ============================================ */

/* ---- GLOBAL ---- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--brand-text-body);
    background: var(--brand-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
/* Header/footer carry both logo variants in the markup so a dark-theme toggle
   needs no JS swap — only one is ever visible per theme. Default (light) shows
   the dark-ink logo; [data-bs-theme="dark"] flips to the light/white logo. */
.logo-theme-light { display: none; }
[data-bs-theme="dark"] .logo-theme-dark { display: none; }
[data-bs-theme="dark"] .logo-theme-light { display: inline-block; }
/* Contain absolutely positioned .visually-hidden text inside scrolling tables, or it widens the page. */
.table-responsive { position: relative; }
a { text-decoration: none; transition: color var(--transition-fast); }
:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 2000; background: var(--brand-charcoal); color: var(--brand-text-on-dark); padding: .6rem 1rem; font-weight: 700; }
.skip-link:focus { top: 1rem; color: var(--brand-text-on-dark); }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
    color: var(--brand-text);
}
h1,.h1 { font-size: var(--text-4xl); }
h2,.h2 { font-size: var(--text-3xl); }
h3,.h3 { font-size: var(--text-2xl); font-weight: 700; }
h4,.h4 { font-size: var(--text-xl); font-weight: 700; }
h5,.h5 { font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-wide); }
h6,.h6 { font-size: var(--text-base); font-weight: 700; letter-spacing: var(--tracking-wide); }
.lead { font-size: var(--text-md); font-weight: 400; line-height: 1.65; color: var(--brand-text-body); }
.text-steel { color: var(--brand-text-secondary) !important; }
/* ...but not inside a solid button. .text-steel carries !important, so a count nested in a
   filled .btn repaints itself muted-grey on the brand fill and drops to ~2.3:1 in light and
   2.72:1 in dark -- a pre-existing failure in BOTH themes, not a dark-mode regression. Inside
   a button the count is part of the label, so it takes the label's colour. */
.btn :is(.text-steel, .text-body-secondary) { color: inherit !important; }
.text-red { color: var(--brand-primary) !important; }
.text-navy { color: var(--brand-secondary) !important; }
.fw-display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; }

.section { padding-block: var(--section-py); }
.section-sm { padding-block: var(--section-py-sm); }
.section-xs { padding-block: var(--section-py-xs); }
.section-alt { background: var(--brand-bg-alt); }
.section-soft { background: var(--brand-bg-soft); }
.section-dark { background: var(--brand-ink); color: var(--brand-text-on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--brand-text-on-dark); }
.section-dark .eyebrow { color: var(--brand-text-on-dark); }
.section-dark .lead, .section-dark p { color: var(--brand-text-on-dark-2); }
/* Photo heroes can put bright spray or sky behind the eyebrow, so it goes white (the red/navy bar stays) */
.page-hero:not(.page-hero-plain) .eyebrow { color: var(--brand-text-on-dark); text-shadow: 0 1px 10px rgba(var(--brand-ink-rgb), .5);margin-bottom: 0;margin-top:1rem; }

/* ---- EYEBROW — skewed racing tag ---- */
.eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm);
    letter-spacing: var(--tracking-widest); text-transform: uppercase;
    color: var(--brand-primary); margin-bottom: .75rem;
}
.eyebrow::before {
    content: ""; width: 26px; height: 10px; flex: none;
    background: linear-gradient(90deg, var(--brand-primary) 0 55%, transparent 55% 70%, var(--brand-secondary) 70% 100%);
    transform: skewX(var(--skew));
}
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.text-center { margin-inline: auto; }
.section-head.text-center .eyebrow { justify-content: center; }
.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head-row .section-head { margin-bottom: 0; }
.link-arrow { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-primary); display: inline-flex; align-items: center; gap: .5rem; }
.link-arrow i, .link-arrow span[class*="fa-"] { transition: transform var(--transition-fast); }
.link-arrow:hover i, .link-arrow:hover span[class*="fa-"] { transform: translateX(4px); }
/* --brand-primary is 2.7:1 on --brand-ink -- fails 1.4.3 for the 16px-bold link-arrow
   label. Any dark band (.section-dark, via the shared _section-body.php chrome's CTA
   link, or any future dark context) restates the text role in white (15.7:1 on
   --brand-ink). The page-wide `:focus-visible` outline (below) is the same red at the
   same failing ratio, so it needs the same override here -- 1.4.11 Non-Text Contrast
   applies to focus indicators, not just 1.4.3 body text. */
.section-dark .link-arrow { color: var(--brand-text-on-dark); }
.section-dark .link-arrow:focus-visible { outline-color: var(--brand-text-on-dark); }

/* Racing stripe divider */
.race-stripe { height: 6px; background: linear-gradient(90deg, var(--brand-primary) 0 70%, var(--brand-bg) 70% 72%, var(--brand-secondary) 72% 100%); }

/* ---- UTILITY BAR ---- */
.utility-bar { background: var(--brand-ink); color: var(--brand-text-on-dark-2); font-size: var(--text-sm); }
.utility-bar .container-xl { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 1rem; }
.utility-bar a { color: var(--brand-text-on-dark-2); }
.utility-bar a:hover { color: var(--brand-text-on-dark); }
.utility-bar .util-promo { color: var(--brand-text-on-dark); font-family: var(--font-heading); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.utility-bar .util-promo i, .utility-bar .util-promo span[class*="fa-"] { color: var(--brand-text-on-dark); }
.utility-bar .util-links { display: flex; gap: 1.25rem; align-items: center; }
@media (max-width: 767.98px) { .utility-bar .util-links { display: none; } .utility-bar .container-xl { justify-content: center; } }

/* ---- HEADER / NAVBAR ---- */
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--brand-bg); border-bottom: 1px solid var(--brand-border); transition: box-shadow var(--transition-base); }
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header .navbar { --bs-navbar-padding-y: 0; min-height: 76px; position: static; }
.site-header .container-xl { position: static; }
.navbar-brand img { height:64px; width: auto; }
.navbar-rl .navbar-nav .nav-link {
    font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
    color: var(--brand-text); padding: 1.6rem .8rem; position: relative;
}
.navbar-rl .navbar-nav .nav-link::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 1.1rem; height: 3px;
    background: var(--brand-primary-fill); transform: scaleX(0) skewX(var(--skew)); transform-origin: left; transition: transform var(--transition-base);
}
.navbar-rl .navbar-nav .nav-link:hover::after,
.navbar-rl .navbar-nav .nav-link.active::after,
.navbar-rl .navbar-nav .show > .nav-link::after { transform: scaleX(1) skewX(var(--skew)); }
.navbar-rl .navbar-nav .nav-link.active { color: var(--brand-primary); }
.navbar-rl .dropdown-toggle::after { display: none; }
.nav-divider { width: 1px; height: 28px; background: var(--brand-border); margin-inline: .5rem; align-self: center; }
.nav-actions { display: flex; align-items: center; gap: .25rem; }
.btn-icon {
    position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--brand-text); border-radius: var(--radius-sm); font-size: 1.15rem;
}
.btn-icon:hover { background: var(--brand-bg-alt); color: var(--brand-primary); }

/* Mega menu — a Bootstrap .dropdown-menu stretched across the header.
   Bootstrap makes every .dropdown position:relative, which would pin the menu to the
   width of its own nav item; the item is static so the sticky .site-header is the anchor. */
.navbar-rl .nav-item.dropdown { position: static; }
.navbar-rl .navbar-nav .mega-menu.dropdown-menu { position: absolute; left: 0; right: 0; top: 100%; width: 100%; margin: 0; padding: 2rem 0; border: 0; border-top: 3px solid var(--brand-primary); box-shadow: var(--shadow-lg); border-radius: 0; transform: none; }
/* Opening is Bootstrap's job (.dropdown-menu.show): click opens, outside click and Escape close.
   A :hover / :focus-within rule here would force display:block while Bootstrap's own state —
   .show and aria-expanded — stayed unset, so the panel looked open and announced closed. */
.mega-menu .mega-title { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-xl); text-transform: uppercase; color: var(--brand-text); margin-bottom: .75rem; }
.mega-menu .mega-links a { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; color: var(--brand-text-body); font-weight: 500; }
.mega-menu .mega-links a:hover { color: var(--brand-primary); }
.mega-menu .mega-links a i, .mega-menu .mega-links a span[class*="fa-"] { color: var(--brand-primary); font-size: .8rem; }
.mega-brands { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; }
.mega-brands a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .6rem; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: var(--brand-bg); font-size: var(--text-xs); color: var(--brand-text-secondary); text-align: center; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.mega-brands a:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); color: var(--brand-primary); }
.mega-brands img { max-height: 42px; width: auto; }
.mega-feature { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; min-height: 220px; height: 100%; color: var(--brand-text-on-dark); }
.mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--brand-ink-rgb), .05), rgba(var(--brand-ink-rgb), .88)); }
.mega-feature .mega-feature-body { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; z-index: 1; }
.mega-feature .mega-feature-body strong { display: block; font-family: var(--font-heading); font-size: var(--text-xl); text-transform: uppercase; line-height: 1.1; }
.mega-feature .mega-feature-body span { font-size: var(--text-sm); color: var(--brand-text-on-dark-2); }

/* Mobile offcanvas nav */
.offcanvas-nav .accordion-button { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; }
.offcanvas-nav .list-group-item { border-inline: 0; }
.offcanvas-nav .mobile-link { display: block; padding: .9rem 1.25rem; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; color: var(--brand-text); border-bottom: 1px solid var(--brand-border); }
.offcanvas-nav button.mobile-link { width: 100%; text-align: start; background: transparent; border: 0; border-bottom: 1px solid var(--brand-border); }

/* Search offcanvas */
.offcanvas-search { height: auto !important; }
.offcanvas-search .form-control { font-size: 1.25rem; padding: 1rem 1.25rem; }
.search-suggest a { display: inline-block; margin: .25rem .35rem .25rem 0; }
.offcanvas-search .offcanvas-body { max-height: 100vh; overflow-y: auto; }

/* Findbar live search inside the search panel (html/mod_j2commerce_findbar/bootstrap5/*) */
.rl-findbar { font-size: 1rem; }
.rl-findbar .input-group { flex-wrap: nowrap; }
.rl-findbar .j2c-findbar__field { flex: 1 1 auto; min-width: 0; }
.rl-findbar .j2c-findbar__input { padding-right: 3rem; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.rl-findbar .input-group > .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rl-findbar .j2c-findbar__input:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: -3px; box-shadow: none; }
.rl-findbar .j2c-findbar__clear { right: .75rem; width: 2rem; height: 2rem; border-radius: var(--radius-sm); color: var(--brand-text); background: var(--brand-bg-alt); box-shadow: none; }
.rl-findbar .j2c-findbar__clear:hover, .rl-findbar .j2c-findbar__clear:focus-visible { background: var(--brand-primary-fill); color: var(--brand-text-on-dark); box-shadow: none; }
.rl-findbar .j2c-findbar__clear:focus-visible { outline: 3px solid var(--brand-primary); }
.rl-findbar .j2c-findbar__panel { position: static; margin-top: .75rem; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); box-shadow: none; max-height: min(30rem, 60vh); }
.rl-findbar .j2c-findbar__item > a { align-items: center; gap: 1rem; padding: .6rem .9rem; color: var(--brand-text); }
.rl-findbar .j2c-findbar__item > a:hover, .rl-findbar .j2c-findbar__item[aria-selected="true"] > a { background: var(--brand-bg-alt); }
.rl-findbar .j2c-findbar__item[aria-selected="true"] > a, .rl-findbar .j2c-findbar__link:focus-visible, .rl-findbar .j2c-findbar__showall-btn:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: -3px; }
.rl-findbar .j2c-findbar__thumb-wrap { background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); }
.rl-findbar .j2c-findbar__title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; line-height: 1.15; }
.rl-findbar .j2c-findbar__title mark { padding: 0; background: transparent; color: var(--brand-primary); }
.rl-findbar .j2c-findbar__price { font-family: var(--font-display); font-weight: 800; color: var(--brand-text); }
.rl-findbar .j2c-findbar__status { color: var(--brand-text-secondary); }
.rl-findbar .j2c-findbar__showall-btn { font-family: var(--font-heading); text-transform: uppercase; color: var(--brand-primary); }
@media (max-width: 575.98px) {
    .offcanvas-search .form-control { font-size: 1rem; padding: .75rem .9rem; }
    .rl-findbar .input-group > .btn { padding-inline: .9rem; }
    .rl-findbar .input-group > .btn .rl-findbar-submit-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rl-findbar .input-group > .btn .fa-magnifying-glass { margin-right: 0 !important; }
    .rl-findbar .j2c-findbar__thumb-wrap { --j2c-findbar-img-width: 72px !important; }
}

/* ---- HERO (home) ---- */
.hero-rl { position: relative; min-height: clamp(520px, 78vh, 760px); display: flex; align-items: center; overflow: hidden; background: var(--brand-ink); color: var(--brand-text-on-dark); isolation: isolate; }
.hero-rl .hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-rl .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-rl::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(var(--brand-ink-rgb), .92) 0%, rgba(var(--brand-ink-rgb), .72) 38%, rgba(var(--brand-ink-rgb), .15) 72%, rgba(var(--brand-ink-rgb), 0) 100%); }
.hero-rl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: var(--brand-bg); clip-path: polygon(0 100%, 100% 30%, 100% 100%); }
.hero-tag { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; margin-bottom: 1.25rem; background: var(--brand-primary-fill); color: var(--brand-text-on-dark); font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--text-sm); transform: skewX(var(--skew)); }
.hero-tag > * { transform: skewX(calc(var(--skew) * -1)); }
.hero-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); line-height: .95; color: var(--brand-text-on-dark); text-transform: uppercase; max-width: 13ch; margin-bottom: 1.25rem; text-shadow: 0 2px 20px rgba(var(--brand-ink-rgb), .35); }
.hero-title em { font-style: italic; color: var(--brand-text-on-dark); }
.hero-sub { font-size: var(--text-md); line-height: 1.65; color: var(--brand-text-on-dark-soft); max-width: 52ch; margin-bottom: 2rem; }
.hero-points { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--brand-text-on-dark-soft); }
.hero-points i, .hero-points span[class*="fa-"] { color: var(--brand-text-on-dark); margin-right: .4rem; }

/* ---- PAGE HERO (interior) ---- */
.page-hero { position: relative; background: var(--brand-ink); color: var(--brand-text-on-dark); padding-block: clamp(2.5rem, 6vw, 3rem) clamp(3rem, 7vw, 3.5rem); overflow: hidden; isolation: isolate; }
.page-hero .page-hero-bg { position: absolute; inset: 0; z-index: -2; }
.page-hero .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .page-hero-bg picture { display: contents; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--brand-ink-rgb), .93) 0%, rgba(var(--brand-ink-rgb), .75) 45%, rgba(var(--brand-ink-rgb), .35) 100%); }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 36px; background: var(--page-hero-cut, var(--brand-bg)); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.page-hero h1 { color: var(--brand-text-on-dark); margin-bottom: .75rem; }
.page-hero .lead { color: var(--brand-text-on-dark-soft); max-width: 62ch; margin-bottom: 0; }
.mod-breadcrumbs.breadcrumb { padding: 0 !important; }
.mod-breadcrumbs__divider { display: none; }
/* Home crumb: checkered-flag icon; the "Home" text stays as the link's accessible name, visually hidden. 24px tall; its width clears the next link by more than 24px, meeting the WCAG 2.5.8 spacing exception. */
.mod-breadcrumbs__item:nth-child(1 of .mod-breadcrumbs__item) > .pathway { display: inline-flex; align-items: center; min-height: 24px; vertical-align: middle; }
.mod-breadcrumbs__item:nth-child(1 of .mod-breadcrumbs__item) > .pathway > span { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.mod-breadcrumbs__item:nth-child(1 of .mod-breadcrumbs__item) > .pathway::before { content: "\f11e"; content: "\f11e" / ""; font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; line-height: 1; -webkit-font-smoothing: antialiased; }
.page-hero .breadcrumb { --bs-breadcrumb-divider-color: var(--brand-text-on-dark-2); --bs-breadcrumb-item-active-color: var(--brand-text-on-dark-2); margin-bottom: 1rem; }
.page-hero .breadcrumb a { color: var(--brand-text-on-dark); }
.page-hero .breadcrumb a:hover { color: var(--brand-text-on-dark); text-decoration: underline; }
/* Action-photo hero: taller, scrim fades out so the wrapped vehicle on the right stays vivid */
.page-hero-action { min-height: clamp(420px, 62vh, 640px); display: flex; align-items: center; }
.page-hero-action > .container-xl { width: 100%; }
.page-hero-action .page-hero-bg img { object-position: 70% 50%; }
.page-hero-action::before { background: linear-gradient(95deg, rgba(var(--brand-ink-rgb), .92) 0%, rgba(var(--brand-ink-rgb), .7) 35%, rgba(var(--brand-ink-rgb), .12) 65%, rgba(var(--brand-ink-rgb), 0) 100%); }
.page-hero-action h1, .page-hero-action .lead { text-shadow: 0 2px 16px rgba(var(--brand-ink-rgb), .45); }
.hero-design-credit { font-size: var(--text-sm); color: var(--brand-text-on-dark-2); }
.hero-design-credit a { color: var(--brand-text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767.98px) { .page-hero-action::before { background: linear-gradient(180deg, rgba(var(--brand-ink-rgb), .55) 0%, rgba(var(--brand-ink-rgb), .9) 100%); } }
.page-hero-plain { background: var(--brand-bg-alt); color: var(--brand-text-body); padding-block: 2rem 2.25rem; border-bottom: 1px solid var(--brand-border); }
.page-hero-plain::before, .page-hero-plain::after { display: none; }
.page-hero-plain h1 { color: var(--brand-text); font-size: var(--text-3xl); margin-bottom: .25rem; }
.page-hero-plain .lead { color: var(--brand-text-body); }
.page-hero-plain .breadcrumb { --bs-breadcrumb-divider-color: var(--brand-border-strong); --bs-breadcrumb-item-active-color: var(--brand-text); margin-bottom: .6rem; }
.page-hero-plain .breadcrumb a { color: var(--brand-text-secondary); }
.page-hero-plain .breadcrumb a:hover { color: var(--brand-primary); }
/* Brand page with a category header image: plain layout (logo + title), dark treatment. The scrim is
   ink at .8 behind the text column so white text holds contrast over any photo, in light and dark mode. */
.page-hero-plain.page-hero-plain-image { background: var(--brand-ink); color: var(--brand-text-on-dark); border-bottom: 0; }
.page-hero-plain.page-hero-plain-image::before { display: block; background: linear-gradient(90deg, rgba(var(--brand-ink-rgb), .8) 0%, rgba(var(--brand-ink-rgb), .6) 50%, rgba(var(--brand-ink-rgb), .3) 100%); }
.page-hero-plain-image h1 { color: var(--brand-text-on-dark); }
.page-hero-plain-image .lead { color: var(--brand-text-on-dark-soft); }
.page-hero-plain-image .eyebrow { color: var(--brand-text-on-dark); }
.page-hero-plain-image .breadcrumb { --bs-breadcrumb-divider-color: var(--brand-text-on-dark-2); --bs-breadcrumb-item-active-color: var(--brand-text-on-dark-2); }
.page-hero-plain-image .breadcrumb a { color: var(--brand-text-on-dark); }
.page-hero-plain-image .breadcrumb a:hover { color: var(--brand-text-on-dark); text-decoration: underline; }
.page-hero.hero-cut-alt::after { background: var(--brand-bg-alt); }

/* ---- KIT FINDER ---- */
.kit-finder { position: relative; z-index: 3; margin-top: -4.5rem; background: var(--brand-bg); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: clamp(1.25rem, 3vw, 2rem); border-top: 4px solid var(--brand-primary); }
.kit-finder .kf-title { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: var(--text-xl); margin: 0; }
.kit-finder .form-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text-secondary); font-weight: 700; margin-bottom: .3rem; }

/* ---- VEHICLE TYPE TILES ---- */
.type-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: 100%; padding: 1.25rem .75rem 1rem; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); text-align: center; color: var(--brand-text); position: relative; overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.type-tile img { width: 110px; height: auto; transition: transform var(--transition-base); }
.type-tile .type-name { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg); text-transform: uppercase; line-height: 1; }
.type-tile .type-meta { font-size: var(--text-xs); color: var(--brand-text-secondary); }
.type-tile .type-count { color: var(--brand-primary); font-weight: 700; }
.type-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand-primary-fill); transform: scaleX(0); transition: transform var(--transition-base); }
.type-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; color: var(--brand-primary); }
.type-tile:hover img { transform: scale(1.06); }
.type-tile:hover::after { transform: scaleX(1); }
/* Horizontal .type-tile variant: PDP guide / policy tiles (detail tabs). Same card, icon
   square instead of the category image, label and meta stacked beside it. */
.type-tile-row { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1rem 1.25rem; text-align: left; }
.type-tile-row .type-tile-icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: var(--brand-bg-alt); color: var(--brand-primary); border: 2px solid var(--brand-primary); transform: skewX(var(--skew)); font-size: 1.15rem; transition: background var(--transition-base), color var(--transition-base); }
.type-tile-row .type-tile-icon > span { transform: skewX(calc(var(--skew) * -1)); }
.type-tile-row .type-tile-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.type-tile-row .type-name { font-size: var(--text-md); }
.type-tile-row:hover .type-tile-icon { background: var(--brand-primary-fill); color: var(--brand-text-on-dark); }
/* Category carousel (mod_j2commerce_categories slider layout): same .type-tile as the grid */
.type-slider { position: relative; }
.type-slider .swiper-slide { height: auto; }
.type-slider-btn { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--brand-bg); color: var(--brand-text); box-shadow: var(--shadow-sm); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.type-slider-prev { left: -22px; }
.type-slider-next { right: -22px; }
.type-slider-btn:hover { background: var(--brand-primary-fill); border-color: var(--brand-primary); color: var(--brand-text-on-dark); }
.type-slider-btn.swiper-button-disabled { opacity: .35; pointer-events: none; }
@media (max-width: 991.98px) { .type-slider-prev { left: -.5rem; } .type-slider-next { right: -.5rem; } }

/* ---- IMAGE PROMO TILE ---- */
.promo-tile { position: relative; display: flex; align-items: flex-end; min-height: 320px; height: 100%; padding: 1.75rem; border-radius: var(--radius-sm); overflow: hidden; color: var(--brand-text-on-dark); isolation: isolate; }
.promo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--transition-slow); }
.promo-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--brand-ink-rgb), 0) 25%, rgba(var(--brand-ink-rgb), .9) 100%); }
.promo-tile:hover img { transform: scale(1.05); }
.promo-tile h3 { color: var(--brand-text-on-dark); margin-bottom: .35rem; }
.promo-tile p { color: var(--brand-text-on-dark-soft); margin-bottom: .9rem; }
.promo-tile .link-arrow { color: var(--brand-text-on-dark); }
.promo-tile .link-arrow::before { content: ""; width: 18px; height: 3px; background: var(--brand-primary-fill); transform: skewX(var(--skew)); }

/* ---- ACTION TILE (wrapped-and-ridden photography) ---- */
.action-tile { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--brand-ink-2); isolation: isolate; }
.action-tile-lg { height: 100%; min-height: 100%; }
.action-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--transition-slow); }
.action-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--brand-ink-rgb), 0) 45%, rgba(var(--brand-ink-rgb), .85) 100%); }
.action-tile::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: var(--brand-primary-fill); transition: width var(--transition-base); }
.action-tile:hover img { transform: scale(1.06); }
.action-tile:hover::after, .action-tile:focus-visible::after { width: 100%; }
.action-caption { position: absolute; left: 1rem; right: 1rem; bottom: .85rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.action-type { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: var(--text-lg); color: var(--brand-text-on-dark); line-height: 1; }
.action-design { font-size: var(--text-sm); color: var(--brand-text-on-dark-2); }
.action-tile-lg .action-type { font-size: var(--text-2xl); }
@media (max-width: 991.98px) { .action-tile-lg { height: auto; } }
/* Tag image cards (Tags view child tags): the action-gallery tile on a light section; tile size follows the mosaic column. */
.tag-image-card { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--brand-ink-2); color: var(--brand-text-on-dark); text-decoration: none; isolation: isolate; }
.tag-image-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--transition-slow); }
.tag-image-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--brand-ink-rgb), 0) 30%, rgba(var(--brand-ink-rgb), .9) 72%, rgba(var(--brand-ink-rgb), .92) 100%); }
.tag-image-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: var(--brand-primary-fill); transition: width var(--transition-base); }
.tag-image-card:hover, .tag-image-card:focus-visible { color: var(--brand-text-on-dark); }
.tag-image-card:hover img, .tag-image-card:focus-visible img { transform: scale(1.06); }
.tag-image-card:hover::after, .tag-image-card:focus-visible::after { width: 100%; }
.tag-image-caption { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .75rem; width: 100%; padding: 0 1rem .9rem; }
.tag-image-title { margin: 0; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: var(--text-2xl); color: var(--brand-text-on-dark); line-height: 1; }
.tag-image-card-lg .tag-image-title { font-size: var(--text-3xl); }
.tag-image-card-lg .tag-image-count { margin-top: .1rem; } /* optically centers the digits on the taller condensed caps */
.tag-image-count { margin-top: .2rem; font-size: var(--text-sm); color: var(--brand-text-on-dark); }

/* ---- PRODUCT CARD (Bootstrap .card) ---- */
.card-product { height: 100%; overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.card-product:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card-product .card-media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--brand-bg); border-bottom: 1px solid var(--brand-border); overflow: hidden; }
.card-product .card-media-link { display: block; width: 100%; height: 100%; }
.card-product .card-media img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; transition: transform var(--transition-slow); }
.card-product:hover .card-media img { transform: scale(1.05); }
.card-product .card-badges { position: absolute; top: .6rem; left: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; z-index: 1; }
.card-product .card-body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.1rem; }
.card-product .card-brand { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-text-secondary); margin: 0; }
.card-product .card-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; line-height: 1.15; margin: 0; }
.card-product .card-title a { color: var(--brand-text); }
.card-product .card-title a::after { content: ""; position: absolute; inset: 0; }
.card-product .card-title a:hover { color: var(--brand-primary); }
.card-product .card-fit { font-size: var(--text-sm); color: var(--brand-text-secondary); margin: 0; }
.card-product .card-fit-design { color: var(--brand-text-body); }
.card-product .card-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.card-product .card-price { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--brand-text); line-height: 1; }
.card-product .card-price-sale { display: inline-block; line-height: 1; }
.card-product .card-price small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; color: var(--brand-text-secondary); text-transform: none; margin-right: .25rem; }
.card-product .card-price-base { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--brand-text-secondary); margin-left: .35rem; }
/* Decorative (aria-hidden, no href) — must NOT out-stack .card-title a::after's inset:0
   stretched link (see card.php), or clicks on this text/icon are swallowed by an inert
   span instead of reaching the full-card link underneath. */
.card-product .card-cta { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: var(--text-sm); color: var(--brand-primary); }
.badge-premade { background: var(--brand-charcoal); color: var(--brand-text-on-dark); }
.badge-years { background: var(--brand-charcoal); color: var(--brand-text-on-dark); }
.badge-new { background: var(--brand-primary-fill); color: var(--brand-text-on-dark); }
/* Fill is !important because .badge-gold is used alongside Bootstrap utilities
   (.position-absolute, .bg-* on some call sites) that would otherwise win the cascade. */
.badge-gold {
    background-color: var(--brand-orange) !important;
    color: var(--brand-charcoal);
    line-height: 1;
    display: inline-block;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 1rem;
}

/* ---- DESIGN CARD ---- */
.design-card { display: block; position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--brand-bg); border: 1px solid var(--brand-border); color: var(--brand-text); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.design-card .design-media { aspect-ratio: 300 / 198; overflow: hidden; background: var(--brand-bg-alt); }
.design-card .design-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.design-card .design-name { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.design-card .design-name i, .design-card .design-name span[class*="fa-"] { color: var(--brand-primary); transition: transform var(--transition-fast); }
.design-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--brand-primary); }
.design-card:hover img { transform: scale(1.07); }
.design-card:hover .design-name i, .design-card:hover .design-name span[class*="fa-"] { transform: translateX(3px); }

/* ---- BRAND TILE ---- */
.brand-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: 100%; padding: 1.1rem .75rem .9rem; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); color: var(--brand-text-secondary); font-size: var(--text-sm); font-weight: 500; text-align: center; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.brand-tile img { max-height: 78px; width: auto; filter: grayscale(1); opacity: .85; transition: filter var(--transition-base), opacity var(--transition-base); }
.brand-tile:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--brand-primary); }
.brand-tile:hover img { filter: none; opacity: 1; }

/* ---- TRUST STRIP ---- */
/* Trust strip is a dark band: it renders its own dark context (color-scheme + the Bootstrap
   theme vars) so anything dropped inside it is treated as dark-mode too. */
.trust-strip { background: var(--brand-ink-2); border-block: 1px solid var(--brand-border-dark); color: var(--brand-text-on-dark); color-scheme: dark; --bs-body-color: var(--brand-text-on-dark); --bs-body-bg: var(--brand-ink-2); --bs-border-color: var(--brand-border-dark); --bs-emphasis-color: var(--brand-text-on-dark); --bs-secondary-color: var(--brand-text-on-dark-2); }
.trust-item { display: flex; align-items: center; gap: .9rem; }
.trust-item .trust-icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: var(--brand-secondary-on-dark); border: 2px solid var(--brand-secondary-on-dark); transform: skewX(var(--skew)); font-size: 1.2rem; }
.trust-item .trust-icon > i, .trust-item .trust-icon > span[class*="fa-"], .trust-item .trust-icon > span { transform: skewX(calc(var(--skew) * -1)); }
.trust-item strong { display: block; font-family: var(--font-heading); text-transform: uppercase; font-size: 1.05rem; color: var(--brand-text-on-dark); line-height: 1.1; }
.trust-item > div > span { font-size: var(--text-sm); color: var(--brand-text-on-dark-2); }

/* ---- FEATURE / STEP CARDS ---- */
.feature-card { height: 100%; padding: 1.75rem; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); }
.feature-card .feature-num { font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--brand-primary); opacity: .95; }
.feature-card h3 { font-size: var(--text-xl); margin: .5rem 0; }
.feature-card p { margin: 0; color: var(--brand-text-secondary); }
.icon-badge { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand-primary-subtle); color: var(--brand-primary); font-size: 1.3rem; margin-bottom: 1rem; }

/* ---- STATS ---- */
.stat-num { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); line-height: 1; color: var(--brand-text-on-dark); }
.stat-num span { color: var(--brand-text-on-dark); }
.stat-label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-sm); color: var(--brand-text-on-dark-2); }

/* Stats band (mod_j2commerce_tools, display type "stats"). Unscoped: the same
   module instance renders on the homepage and the About page. */
.about-stats { position: relative; isolation: isolate; overflow: hidden; }
.about-stats-bg { position: absolute; inset: 0; z-index: -2; }
.about-stats-bg img { width: 100%; height: 100%; object-fit: cover; }
.about-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(var(--brand-ink-rgb), .4) 0%, rgba(var(--brand-ink-rgb), .1) 100%);
}



/* ---- PDP UV-COLORS BAND ---- */
/* Same construction as .about-stats: a full-bleed photo behind the band, held under the
   content by z-index, with a scrim on top. The scrim is deliberately heavy — the terrain
   shots vary a lot, and white body copy has to clear 4.5:1 over the brightest of them. */
.pdp-colorband { position: relative; isolation: isolate; overflow: hidden; }
.pdp-colorband-bg { position: absolute; inset: 0; z-index: -2; }
.pdp-colorband-bg img { width: 100%; height: 100%; object-fit: cover; }
.pdp-colorband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--brand-ink-rgb), .86) 0%, rgba(var(--brand-ink-rgb), .74) 55%, rgba(var(--brand-ink-rgb), .84) 100%); }
.pdp-colorband .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pdp-colorband p, .pdp-colorband .lead { color: var(--brand-text-on-dark); }
.pdp-colorband .lead { font-size: var(--text-md); }
.pdp-colorband-wheel { width: 100%; max-width: 260px; height: auto; }

/* ---- AS SEEN ON ---- */
.seen-on { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; }
.seen-on .seen-label { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--text-sm); color: var(--brand-text-secondary); }
.seen-on img { height: 65px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .8; }

/* ---- REVIEW CARD ---- */
.review-card { height: 100%; padding: 1.75rem; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); position: relative; }
.review-card::before { content: "\201C"; position: absolute; top: .25rem; right: 1.25rem; font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: var(--brand-primary-subtle); }
.stars { color: var(--color-star); letter-spacing: 2px; }
.review-card .review-author { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--brand-text); }

/* ---- CTA BAND ---- */
.cta-band { position: relative; overflow: hidden; background: var(--brand-primary-fill); color: var(--brand-text-on-dark); isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0 auto 0 -10%; width: 55%; z-index: -1; background: var(--brand-primary-fill-hover); transform: skewX(var(--skew)); }
.cta-band h2 { color: var(--brand-text-on-dark); }
.cta-band p { color: var(--brand-text-on-primary-soft); }
.cta-band .btn-light { --bs-btn-color: var(--brand-primary); --bs-btn-hover-color: var(--brand-primary-hover); }

/* ---- NEWSLETTER ---- */
.newsletter-band { background: var(--brand-ink-2); color: var(--brand-text-on-dark-2); }
.newsletter-band h2 { color: var(--brand-text-on-dark); font-size: var(--text-2xl); margin-bottom: .25rem; }
.newsletter-band .form-control { border-color: var(--brand-border-on-dark); background: var(--brand-bg); }
/* NS Pro (mod_nspro) renders the real form into this band through
   html/com_nspro/nspro/default.php. Its own stylesheet caps every control at
   `max-width:85%` under `.mod_nspro`, which would make the grid columns hold
   short inputs instead of filling them - the one thing that stopped the live
   form matching the band it replaces. */
.mod_nspro .newsletter-band input,
.mod_nspro .newsletter-band select,
.mod_nspro .newsletter-band textarea { max-width: 100%; }
.mod_nspro .newsletter-band .nspro-messages { min-height: 0; }
/* On success NS Pro replaces the instance with the admin's thank-you HTML,
   whose heading would otherwise take the light-background heading colour and
   disappear into the band. */
.mod_nspro .newsletter-band .nspro-instance :where(h1, h2, h3, h4, h5, h6, p, a) { color: var(--brand-text-on-dark); }

/* ---- FILTER SIDEBAR ---- */
.filter-block { border-bottom: 1px solid var(--brand-border); padding-block: 1rem; }
.filter-block:first-child { padding-top: 0; }
.filter-title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: var(--tracking-wide); margin-bottom: .6rem; color: var(--brand-text); }
.filter-block .form-check { margin-bottom: .35rem; }
.filter-block .form-check-label { display: flex; justify-content: space-between; gap: .5rem; width: 100%; }
.filter-block .form-check-label span { color: var(--brand-text-secondary); font-size: var(--text-sm); }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--brand-border); }
.results-bar .results-count { margin: 0; color: var(--brand-text-secondary); }
.results-bar .results-count strong { color: var(--brand-text); }
.results-bar .j2commerce-active-filter-tiles { display: flex; }
.results-bar .j2commerce-active-filter-tiles:empty { display: none; }

/* Chip-style radios / checkboxes built on .btn-check */
.btn-chip {
    --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .9rem; --bs-btn-font-size: .875rem;
    --bs-btn-color: var(--brand-text);
    --bs-btn-border-color: var(--brand-border-strong);
    --bs-btn-hover-color: var(--brand-text);
    --bs-btn-hover-border-color: var(--brand-text);
    --bs-btn-active-bg: var(--brand-text);
    --bs-btn-active-border-color: var(--brand-text);
    --bs-btn-active-color: var(--brand-text-on-dark);
    border-radius: var(--radius-sm); letter-spacing: .02em; line-height: 1;
}
.btn-check:checked + .btn-chip { background: var(--brand-text); border-color: var(--brand-text); color: var(--brand-text-on-dark); }
.btn-check:focus-visible + .btn-chip { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }

.section-alt .filter-chip.badge.bg-light {background-color:var(--brand-bg)!important;}
/* ---- PDP GALLERY ---- */
/* PDP gallery: core's view_images Swiper structure (#product-gallery-{id}), redline look */
.product-gallery-main { position: relative; margin-bottom: 0; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); }
.product-gallery-main .swiper-slide { aspect-ratio: 3 / 2; background: var(--brand-bg); }
.product-gallery-main .swiper-slide img { object-fit: contain; padding: 1rem; }
.product-gallery .gallery-enlarge { position: absolute; right: .75rem; bottom: .75rem; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; font-size: var(--text-xs); font-weight: 600; color: var(--brand-text-body); background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); }
.product-gallery .gallery-enlarge:hover, .product-gallery .gallery-enlarge:focus-visible { border-color: var(--brand-primary); color: var(--brand-primary); }
.product-gallery-thumbs .swiper-slide { aspect-ratio: 3 / 2; opacity: 1; background: var(--brand-bg); border: 2px solid var(--brand-border); border-radius: var(--radius-md); }
.product-gallery-thumbs .swiper-slide img { object-fit: contain; border-radius: 0; }
.product-gallery-thumbs .swiper-slide:hover { border-color: var(--brand-border-strong); }
.product-gallery-thumbs .swiper-slide-thumb-active { border-color: var(--brand-primary); }
/* Pagination must reflow at 320px (WCAG 1.4.10): wrap the core page links instead of overflowing. */
.pagination { flex-wrap: wrap; row-gap: .375rem; max-width: 100%; }
.j2commerce-pagination .pagination { justify-content: center; }
@media (max-width: 575.98px) {
    .pagination .page-link { padding: .375rem .6rem; }
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) { display: none; }
    .pagination .page-item.active + .page-item, .pagination .page-item:has(+ .page-item.active) { display: list-item; }
}
/* Category FAQ accordion ("About This Category"): blue/navy brand treatment, same pairing
   as the PDP "Looking for a different color or design?" box (--brand-secondary / -subtle),
   not the site-wide red/pink .accordion default used elsewhere (PDP tabs, help center, mobile nav). */
.accordion.category-faq { --bs-accordion-active-bg: var(--brand-secondary-subtle); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--brand-secondary-rgb), .25); }
.accordion.category-faq .accordion-button { font-weight: 700; }
.pdp-header-brand img { display: block; }
.pdp-year-badge { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .3rem .85rem;background-color:var(--brand-secondary-fill); }
.pdp-subtitle { color: var(--brand-text-secondary); }
.pdp-title { font-size: var(--text-3xl); margin-bottom: .5rem; }
.pdp-price { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--brand-text); }
/* Stacked "was" price + savings beside the sale price, so a small struck price doesn't
   read as misaligned sharing the big price's baseline (item 1: they measure identical). */
.pdp-price-was { display: flex; flex-direction: column; gap: .15rem; }
.pdp-price-was .base-price { line-height: 1.2; }
.pdp-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: var(--text-sm); color: var(--brand-text-secondary); padding: 0; margin: 0; list-style: none; }
.pdp-meta strong { color: var(--brand-text); }
.pdp-panel { background: var(--brand-bg-soft); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); padding: clamp(1.1rem, 2.5vw, 1.75rem); }
.pdp-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.pdp-perks li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--text-sm); }
.pdp-perks i, .pdp-perks span[class*="fa-"] { color: var(--brand-primary); margin-top: .2rem; }
.upsell-card { display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 2px dashed var(--brand-secondary); border-radius: var(--radius-sm); background: var(--brand-secondary-subtle); }
.upsell-card img { width: 120px; flex: none; border-radius: var(--radius-md); background: var(--brand-bg); }

.pdp-brand-row { display: flex; }

.pdp-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.pdp-share-link { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--brand-bg); color: var(--brand-text-body); padding: 0; }
.pdp-share-link:hover, .pdp-share-link:focus-visible { border-color: var(--brand-primary); color: var(--brand-primary); }

/* app_socialmedia plugin block (rendered via a FileLayout with an explicit base path, so
   it never picks up a template override) — restyled here to visually match .pdp-share
   above it, since the plugin's own layout can't be overridden from this template. */
.j2c-social-share-wrapper .j2c-social-share-label { font-size: var(--text-sm); font-weight: 400 !important; color: var(--brand-text-secondary); }
.j2c-social-share-wrapper .j2c-share-link,
.j2c-social-share-wrapper .j2c-share-copy-link {
    width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--brand-bg);
    color: var(--brand-text-body); padding: 0; text-decoration: none; font-weight: 400;
}
.j2c-social-share-wrapper .j2c-share-link:hover, .j2c-social-share-wrapper .j2c-share-link:focus-visible,
.j2c-social-share-wrapper .j2c-share-copy-link:hover, .j2c-social-share-wrapper .j2c-share-copy-link:focus-visible {
    border-color: var(--brand-primary); color: var(--brand-primary);
}
.j2c-social-share-wrapper .j2c-share-link span[class*="fa-"],
.j2c-social-share-wrapper .j2c-share-copy-link span[class*="fa-"] { color: inherit !important; font-size: 1rem !important; }



.j2c-product-detail-media .product-gallery-thumbs.gallery-thumbs {margin-top: 1rem;}
.j2c-product-detail-media .product-gallery-thumbs.gallery-thumbs .swiper-wrapper {justify-content: center;}

.j2c-addon-chip {background: var(--bs-body-bg);}
/* Core's modal layouts emit .jviewport-width{N} on .modal-dialog and .jviewport-height{N} on
   .modal-body, but those utilities ship in Cassiopeia's stylesheet only — without them a core
   iframe modal collapses to .modal-lg (800px) with an iframe at its intrinsic 150px. Ported
   here so renderModal's modalWidth / bodyHeight params actually do something. */
/* Width is lg-and-up only: below that Bootstrap's own full-width modal is the right
   behaviour, and a fixed vw would leave a narrow column on a phone. */
@media (min-width: 992px) {
    .modal-dialog.jviewport-width10{width:10vw;max-width:none}
    .modal-dialog.jviewport-width20{width:20vw;max-width:none}
    .modal-dialog.jviewport-width30{width:30vw;max-width:none}
    .modal-dialog.jviewport-width40{width:40vw;max-width:none}
    .modal-dialog.jviewport-width50{width:50vw;max-width:none}
    .modal-dialog.jviewport-width60{width:60vw;max-width:none}
    .modal-dialog.jviewport-width70{width:70vw;max-width:none}
    .modal-dialog.jviewport-width80{width:80vw;max-width:none}
    .modal-dialog.jviewport-width90{width:90vw;max-width:none}
    .modal-dialog.jviewport-width100{width:100vw;max-width:none}
}

.jviewport-height10{height:10vh}
.jviewport-height20{height:20vh}
.jviewport-height30{height:30vh}
.jviewport-height40{height:40vh}
.jviewport-height50{height:50vh}
.jviewport-height60{height:60vh}
.jviewport-height70{height:70vh}
.jviewport-height80{height:80vh}
.jviewport-height90{height:90vh}
.jviewport-height100{height:100vh}
[class*="jviewport-height"] iframe { height: 100%; }

/* Qty stepper (Bootstrap .input-group), sized to match the Add to Cart button beside it.
   One border lives on the group itself; the buttons/input are borderless so only the
   outer box shows a line. */
.qty-group { width: 140px; height: 3.375rem; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); overflow: hidden; }
.qty-group .btn, .qty-group .form-control { height: 100%; border: 0; }
.qty-group .btn { --bs-btn-padding-x: .7rem; background-color: var(--brand-bg); color: var(--brand-text-body); }
.qty-group .btn:focus-visible { position: relative; z-index: 1; }
.qty-group .form-control { text-align: center; font-weight: 700; }
/* Core's quantity layout marks the input readonly when the +/- buttons render; keep it white. */
.qty-group .form-control[readonly] { background-color: var(--brand-bg); }
.pdp-panel .j2commerce-cart-button.btn-lg { height: 3.375rem; }

/* ---- CONFIGURATOR (custom kits) ---- */
.config-step { border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--brand-bg); margin-bottom: 1rem; }
.config-step-head { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--brand-border); }
.config-step-num { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: var(--brand-primary-fill); color: var(--brand-text-on-dark); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; transform: skewX(var(--skew)); }
.config-step-num span { transform: skewX(calc(var(--skew) * -1)); }
.config-step-head h2 { font-size: var(--text-lg); margin: 0; }
.config-step-head .config-choice { margin-left: auto; font-size: var(--text-sm); color: var(--brand-text-secondary); text-align: right; }
.config-step-head .config-choice strong { color: var(--brand-text); }
.config-step-body { padding: 1.25rem; }
.design-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .6rem; padding: .25rem; }
/* The label is a transparent hit layer over the whole card, so the zoom button can sit on the
   image without nesting one control inside another. */
.design-picker .design-item { position: relative; border: 2px solid var(--brand-border); border-radius: var(--radius-md); overflow: hidden; background: var(--brand-bg); font-size: .72rem; font-weight: 500; line-height: 1.2; text-align: center; color: var(--brand-text-body); transition: border-color var(--transition-fast); }
.design-picker .design-thumb { display: block; position: relative; aspect-ratio: 82 / 54; }
.design-picker .design-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.design-picker .design-name { display: block; padding: .3rem .2rem; }
.design-picker .design-hit { position: absolute; inset: 0; z-index: 1; margin: 0; cursor: pointer; }
.design-picker .design-item:hover { border-color: var(--brand-border-strong); }
.design-picker .design-item:has(input:checked:not(:disabled)) { border-color: var(--brand-primary);color: var(--brand-primary); font-weight: 700; }
.design-picker .design-item:has(input:focus-visible) { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
.design-picker .design-zoom { position: absolute; right: .25rem; bottom: .25rem; z-index: 2; display: none; width: 26px; height: 26px; align-items: center; justify-content: center; padding: 0; font-size: .75rem; color: var(--brand-text-body); background: rgba(var(--brand-bg-rgb), .92); border: 1px solid var(--brand-border-strong); border-radius: var(--radius-sm); cursor: pointer; }
/* Zoom stays on plain :checked on purpose. A single-value ("fixed") design option renders
   its input `disabled checked`, and that design still has an image worth opening in the
   lightbox — only the SELECTED styling above is scoped to an enabled input. */
.design-picker .design-item:has(input:checked) .design-zoom { display: inline-flex; }
.design-picker .design-zoom:hover, .design-picker .design-zoom:focus-visible { color: var(--brand-primary); border-color: var(--brand-primary); }
/* Option image tiles (e.g. Number Style): square art shown whole, zoom always offered */
.design-picker--options { grid-template-columns: repeat(auto-fill, minmax(96px, 120px)); }
.design-picker--options .design-thumb { aspect-ratio: 1 / 1; }
.design-picker--options .design-thumb img { object-fit: contain; padding: .35rem; }
.design-picker--options .design-zoom { display: inline-flex; }
/* The Infinite Options add-on drawer is narrower than a product page, so its auto-fill
   grid wraps to 2 tiles per row instead of showing a full row. Fixed to 3 columns only
   inside the drawer's own form — the product page keeps its auto-fill behaviour. */
.j2c-addon-form .design-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.swatch-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch-group label { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 64px; cursor: pointer; font-size: .72rem; text-align: center; color: var(--brand-text-body); }
.swatch-group .swatch { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--brand-border-strong); box-shadow: inset 0 0 0 3px var(--brand-bg); transition: box-shadow var(--transition-fast); }
.swatch-group input:checked + label { color: var(--brand-text); font-weight: 700; }
.swatch-group input:checked + label .swatch { box-shadow: inset 0 0 0 3px var(--brand-bg), 0 0 0 3px var(--brand-primary); }
.swatch-group input:focus-visible + label .swatch { outline: 3px solid var(--brand-secondary); outline-offset: 3px; }
.sw-yellow { background: var(--swatch-yellow); } .sw-white { background: var(--swatch-white); } .sw-silver { background: var(--swatch-silver); }
.sw-red { background: var(--swatch-red); } .sw-purple { background: var(--swatch-purple); } .sw-pink { background: var(--swatch-pink); }
.sw-orange { background: var(--swatch-orange); } .sw-green { background: var(--swatch-green); } .sw-blue { background: var(--swatch-blue); }
.sw-black { background: var(--swatch-black); } .sw-aqua { background: var(--swatch-aqua); }
/* Sidebar product-filter color swatches (inline hex from #__j2commerce_filters.filter_color).
   Column-first two-column layout: fills the left column top-to-bottom, then the right column.
   Items hidden by the "View more" toggle carry the native [hidden] attribute (display:none),
   so they take no column space and the two columns stay balanced for whatever is visible. */
.pfilter-swatch-group { display: block; columns: 2; column-gap: 1rem; }
.pfilter-swatch-group .pfilter-swatch-item { break-inside: avoid; margin-bottom: .6rem; }
.pfilter-swatch-group label { display: flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .8rem; color: var(--brand-text-body); }
.pfilter-swatch-group .pfilter-swatch { flex: 0 0 auto; width: 22px; height: 22px; border-radius:0; border: 1px solid var(--brand-border-strong); box-shadow: inset 0 0 0 2px var(--brand-bg); transition: box-shadow var(--transition-fast); }
.pfilter-swatch-group input:checked + label { color: var(--brand-text); font-weight: 700; }
.pfilter-swatch-group input:checked + label .pfilter-swatch { box-shadow: inset 0 0 0 2px var(--brand-bg), 0 0 0 2px var(--brand-primary); }
.pfilter-swatch-group input:focus-visible + label .pfilter-swatch { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
/* Collapsible sidebar filter cards (category + tag listings) and their 12-item "View more"
   overflow toggle. Shares the .filter-block visual language; .filter-card is the collapsible
   variant used for product-filter groups, brand and vendor lists in both listing sidebars. */
.filter-card { border-bottom: 1px solid var(--brand-border); padding-block: 1rem; }
.filter-card:first-child { padding-top: 0; }
.filter-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; background: none; border: 0; padding: 0; margin-bottom: .6rem; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: var(--tracking-wide); color: var(--brand-text); cursor: pointer; }
.filter-card-head .fa-chevron-down { font-size: .8rem; transition: transform var(--transition-fast); color: var(--brand-text-secondary); }
.filter-card-head.collapsed .fa-chevron-down { transform: rotate(-90deg); }
.filter-card-head:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.price-range-values { display: flex; justify-content: space-between; font-weight: 600; font-size: var(--text-sm); }
.price-range { position: relative; height: 1.75rem; cursor: pointer; touch-action: none; }
.price-range::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 6px; transform: translateY(-50%); background: var(--brand-border); border-radius: var(--radius-sm); }
.price-range input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.price-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.5rem; height: 1.5rem; border: 2px solid var(--brand-bg); border-radius: 50%; background: var(--brand-primary-fill); box-shadow: var(--shadow-sm); cursor: pointer; pointer-events: auto; }
.price-range input[type="range"]::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border: 2px solid var(--brand-bg); border-radius: 50%; background: var(--brand-primary-fill); box-shadow: var(--shadow-sm); cursor: pointer; pointer-events: auto; }
.price-range input[type="range"]::-moz-range-track { background: transparent; }
.price-range input[type="range"].is-top { z-index: 2; }
.price-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--brand-bg), 0 0 0 5px var(--brand-ink-2); }
.price-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--brand-bg), 0 0 0 5px var(--brand-ink-2); }
.filter-card-body .form-check { margin-bottom: .35rem; }
.filter-card-body .form-check-label,
.filter-card-body .filter-check { display: flex; justify-content: space-between; gap: .5rem; width: 100%; cursor: pointer; }
.filter-card-body .form-check-label span,
.filter-card-body .filter-check .check-count,
.filter-card-body .j2commerce-filter-count { color: var(--brand-text-secondary); font-size: var(--text-sm); }

.filter-view-more { display: inline-flex; align-items: center; margin-top: .35rem; padding: 0; font-size: var(--text-sm); font-weight: 600; color: var(--brand-primary); background: none; border: 0; cursor: pointer; }
.filter-view-more:hover,
.filter-view-more:focus-visible { text-decoration: underline; }
.filter-view-more:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.config-summary { position: sticky; top: 96px; }
.config-summary .summary-preview { aspect-ratio: 3 / 2; background: var(--brand-bg); border-radius: var(--radius-md); border: 1px solid var(--brand-border); overflow: hidden; }
.config-summary .summary-preview img { width: 100%; height: 100%; object-fit: cover; }
.summary-list { list-style: none; padding: 0; margin: 0; }
.summary-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--brand-border); font-size: var(--text-sm); }
.summary-list li[hidden] { display: none; }
.summary-list li span:last-child { font-weight: 700; color: var(--brand-text); text-align: right; }

/* ---- HEADER ACCOUNT OFFCANVAS ---- */
.offcanvas-account { --bs-offcanvas-width: 380px; }
.offcanvas-account .account-menu-link { display: flex; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--brand-border); color: var(--brand-text); font-weight: 600; width: 100%; text-align: start; background: transparent; border-inline: 0; border-top: 0; }
.offcanvas-account .account-menu-logout-form { margin: 0; }
.offcanvas-account .account-menu-list ul.mod-menu { list-style: none; padding: 0; margin: 0; flex-direction: column; }
.offcanvas-account .account-menu-list li.nav-item { border-bottom: 1px solid var(--brand-border); }
.offcanvas-account .account-menu-list li.nav-item a { display: flex; align-items: center; padding: .9rem 0; color: var(--brand-text); }
.offcanvas-account .account-menu-list li.nav-item a:hover, .offcanvas-account .account-menu-link:hover { color: var(--brand-primary); }
.offcanvas-login-form .btn-outline-dark.input-password-toggle { border-color: var(--brand-border-strong); }

/* ---- ACCOUNT ---- */
.account-nav .list-group-item { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; }
.account-nav .list-group-item i, .account-nav .list-group-item span[class*="fa-"] { width: 1.25rem; text-align: center; }
.account-card { border: 1px solid var(--brand-border); border-radius: var(--radius-sm); padding: 1.25rem; height: 100%; background: var(--brand-bg); }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.status-pill.shipped { background: var(--color-success-subtle); color: var(--color-success-emphasis); }
.status-pill.production { background: var(--color-warning-subtle); color: var(--color-warning-emphasis); }
.status-pill.delivered { background: var(--brand-secondary-subtle); color: var(--brand-secondary-emphasis); }
.status-pill.cancelled { background: var(--color-danger-subtle); color: var(--color-danger-emphasis); }
.status-pill.pending { background: var(--color-neutral-subtle); color: var(--color-neutral-emphasis); }

/* ---- ARTICLE / PROSE ---- */
.prose { max-width: 760px; font-size: 1.05rem; line-height: 1.75; }
.prose h2 { font-size: var(--text-2xl); margin-top: 2.25rem; margin-bottom: .75rem; }
.prose h3 { font-size: var(--text-xl); margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose table { width: 100%; margin-block: 1rem 1.5rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.help-sidebar .list-group-item.active { font-weight: 700; }
.toc-card { border-left: 4px solid var(--brand-primary); background: var(--brand-bg-soft); padding: 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ---- VIDEO ---- */
.video-card { height: 100%; }
.video-card .video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--brand-ink); }
.video-card .video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform var(--transition-slow), opacity var(--transition-base); }
.video-card .video-thumb .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; background: var(--brand-primary-fill); color: var(--brand-text-on-dark); font-size: 1.4rem; transform: skewX(var(--skew)); }
.video-card .video-thumb .play i, .video-card .video-thumb .play span[class*="fa-"] { transform: skewX(calc(var(--skew) * -1)); }
.video-card:hover .video-thumb img { transform: scale(1.05); opacity: 1; }
.video-card h3 { font-size: 1.15rem; margin-top: .9rem; }

/* ---- AUTH ---- */
.auth-card { max-width: 480px; margin-inline: auto; background: var(--brand-bg); border: 1px solid var(--brand-border); border-top: 4px solid var(--brand-primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: clamp(1.5rem, 4vw, 2.5rem); }

/* ---- FOOTER ---- */
.site-footer { background: var(--brand-ink); color: var(--brand-text-on-dark-2); }
.site-footer .footer-main { padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.site-footer h2 { font-size: 1.05rem; letter-spacing: var(--tracking-widest); color: var(--brand-text-on-dark); margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer a { color: var(--brand-text-on-dark-2); }
.site-footer a:hover { color: var(--brand-text-on-dark); }
.footer-brand img {width: auto; margin-bottom: 1rem; }
.footer-contact li { display: flex; gap: .65rem; }
.footer-contact i, .footer-contact span[class*="fa-"] { color: var(--brand-text-on-dark); margin-top: .25rem; width: 1rem; }
.footer-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--brand-border-dark); border-radius: var(--radius-sm); color: var(--brand-text-on-dark); transition: background var(--transition-fast), border-color var(--transition-fast); }
.footer-social a:hover { background: var(--brand-primary-fill); border-color: var(--brand-primary); }
.footer-bottom { border-top: 1px solid var(--brand-border-dark); padding-block: 1.25rem; font-size: var(--text-sm); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.payment-icons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.payment-icons img { height: 1.75rem; width: auto; display: block; }
.footer-pay { gap: .6rem; }
.pdp-pay { justify-content: center; }
.hours-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-sm); }
.hours-list .open { color: var(--color-success-on-dark); }

/* ---- ANIMATION ---- */
@media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.in { opacity: 1; transform: none; }
    .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (min-width: 1200px) {
    .row-cols-xl-7 > * { flex: 0 0 auto; width: calc(100% / 7); }
}
@media (max-width: 1199.98px) {
    .site-header .navbar { min-height: 68px; }
    .navbar-brand img { height: 40px; }
}
@media (max-width: 575.98px) {
    .hero-rl .btn-lg { width: 100%; }
    .kit-finder { margin-top: -3rem; }
}

/* Font Awesome style weights + brand glyphs.
   Joomla's vendored fontawesome.css carries the solid/regular glyph variables but not the
   per-style weights (solid.css) or the brand glyphs (brands.css). Without the weight, a
   .fa-solid icon at font-weight 400 resolves to the regular face, which lacks most glyphs. */
/* Joomla core icon-* glyphs (pagination, password toggle, J2C cart JS). The icon-* to glyph map
   lives only in media/system/css/joomla-fontawesome.css, which this template does not load, so
   the classes core emits are mapped here. Codepoints copied from that file. Listed explicitly
   rather than [class^="icon-"] so unrelated classes that merely start with icon- are untouched. */
.icon-angle-left, .icon-angle-right, .icon-angle-double-left, .icon-angle-double-right,
.icon-chevron-left, .icon-chevron-right, .icon-eye, .icon-eye-slash, .icon-eye-open, .icon-eye-close,
.icon-times, .icon-cancel, .icon-checkmark, .icon-check, .icon-search, .icon-plus, .icon-minus,
.icon-tag, .icon-print, .icon-download, .icon-trash, .icon-edit, .icon-user, .icon-lock,
.icon-envelope, .icon-mail, .icon-info-circle, .icon-warning, .icon-calendar {
    display: inline-block; font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal;
    font-variant: normal; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased;
}
.icon-angle-left::before, .icon-angle-right::before, .icon-angle-double-left::before, .icon-angle-double-right::before,
.icon-chevron-left::before, .icon-chevron-right::before, .icon-eye::before, .icon-eye-slash::before, .icon-eye-open::before, .icon-eye-close::before,
.icon-times::before, .icon-cancel::before, .icon-checkmark::before, .icon-check::before, .icon-search::before, .icon-plus::before, .icon-minus::before,
.icon-tag::before, .icon-print::before, .icon-download::before, .icon-trash::before, .icon-edit::before, .icon-user::before, .icon-lock::before,
.icon-envelope::before, .icon-mail::before, .icon-info-circle::before, .icon-warning::before, .icon-calendar::before { content: var(--icon); }
.icon-angle-left, .icon-chevron-left { --icon: "\f104"; }
.icon-angle-right, .icon-chevron-right { --icon: "\f105"; }
.icon-angle-double-left { --icon: "\f100"; }
.icon-angle-double-right { --icon: "\f101"; }
.icon-eye, .icon-eye-open { --icon: "\f06e"; }
.icon-eye-slash, .icon-eye-close { --icon: "\f070"; }
.icon-times, .icon-cancel { --icon: "\f00d"; }
.icon-checkmark, .icon-check { --icon: "\f00c"; }
.icon-search { --icon: "\f002"; }
.icon-plus { --icon: "\2b"; }
.icon-minus { --icon: "\f068"; }
.icon-tag { --icon: "\f02b"; }
.icon-print { --icon: "\f02f"; }
.icon-download { --icon: "\f019"; }
.icon-trash { --icon: "\f1f8"; }
.icon-edit { --icon: "\f044"; }
.icon-user { --icon: "\f007"; }
.icon-lock { --icon: "\f023"; }
.icon-envelope, .icon-mail { --icon: "\f0e0"; }
.icon-info-circle { --icon: "\f05a"; }
.icon-warning { --icon: "\f071"; }
.icon-calendar { --icon: "\f133"; }

.fas, .fa-solid { font-weight: 900; }
.far, .fa-regular, .fab, .fa-brands { font-weight: 400; }
.fa-facebook { --fa: "\f09a"; }
.fa-facebook-f { --fa: "\f39e"; }
.fa-instagram { --fa: "\f16d"; }
.fa-youtube { --fa: "\f167"; }
.fa-x-twitter { --fa: "\e61b"; }
.fa-tiktok { --fa: "\e07b"; }
.fa-pinterest-p { --fa: "\f231"; }
.fa-cc-visa { --fa: "\f1f0"; }
.fa-cc-mastercard { --fa: "\f1f1"; }
.fa-cc-discover { --fa: "\f1f2"; }
.fa-cc-amex { --fa: "\f1f3"; }
.fa-cc-paypal { --fa: "\f1f4"; }

/* Rounding cap: nothing on the site is rounded more than 0.25rem (owner rule).
   html:root outranks :root in later stylesheets, and html [data-bs-theme] covers Bootstrap's
   per-theme variable block (body carries data-bs-theme), so neither can bring back pills. */
body .btn-close { border-radius: var(--radius-sm); }
html:root, html [data-bs-theme] {
    --bs-border-radius: 4px;
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-sm);
    --bs-border-radius-xl: var(--radius-sm);
    --bs-border-radius-xxl: var(--radius-sm);
    --bs-border-radius-2xl: var(--radius-sm);
    --bs-border-radius-pill: var(--radius-sm);
}

/* Findbar header search (display mode Offcanvas) renders inside the navbar. Bootstrap's
   .navbar-expand-xl .offcanvas rule turns any offcanvas in a navbar into inline content at
   xl+, so keep the panel out of the layout until it opens; template.js moves it to <body>
   on show.bs.offcanvas, where the regular top-down offcanvas styles apply. */
.navbar .j2c-findbar-offcanvas:not(.show):not(.showing):not(.hiding) { display: none !important; }

/* Mega result layout inside the header search panel: Findbar caps .j2c-findbar__mega-results at
   24rem with its own scrollbar, which clips the page of results. The offcanvas already caps itself
   at 90vh and scrolls its body, so let the list take its natural height here. */
.j2c-findbar-offcanvas .j2c-findbar__mega-results { max-height: none; overflow-y: visible; }

/* Bootstrap focuses the offcanvas container itself on open (tabindex="-1", not an operable control);
   hide the site focus ring on the container only. Controls inside keep their visible focus. */
.offcanvas:focus-visible { outline: 0; }


/* About page: Made In-House print-shop photos. */
.about-make-media { position: relative; overflow: hidden; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); background: var(--brand-charcoal); height: 100%; }
.about-make-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-make-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1rem .75rem; background: linear-gradient(transparent, rgba(var(--brand-ink-rgb), .78)); color: var(--brand-text-on-dark); font-size: var(--text-sm); font-weight: 600; }
@media (min-width: 992px) { .about-make .col-lg-5 .about-make-media { flex: 1 1 0; min-height: 0; } }

/* Graphic Kits page: vehicle card with a real-kit photo that alternates sides (category fields showcase-image / showcase-product). */
.type-card-photo { overflow: hidden; }
.type-photo { position: relative; height: 100%; min-height: 24rem; background: var(--brand-charcoal); overflow: hidden; }
.type-photo-link { position: absolute; inset: 0; display: block; }
.type-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
.type-card-photo:hover .type-photo img { transform: scale(1.04); }
.type-photo::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; z-index: 2; background: linear-gradient(90deg, var(--brand-primary) 0 70%, var(--brand-bg) 70% 72%, var(--brand-secondary) 72% 100%); }
.type-photo-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 3rem 1.25rem 1rem; background: linear-gradient(transparent, rgba(var(--brand-ink-rgb), .82)); color: var(--brand-text-on-dark); font-size: var(--text-sm); line-height: 1.35; }
.type-photo-caption a { color: var(--brand-text-on-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.type-photo-caption a:hover, .type-photo-caption a:focus-visible { color: var(--brand-text-on-dark); text-decoration-thickness: 2px; }
.type-photo-label { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.type-card-head img { width: 96px; height: auto; }
@media (max-width: 767.98px) { .type-photo { min-height: 0; aspect-ratio: 4 / 3; } .type-photo img { object-position: center 40%; } }

/* Checkout: suppress the #checkout step heading's visual chrome while that step is the
   active one. While active it has no visible content: the label span is already
   visually-hidden (core checkout.css / redline default.php:118) and addEditLink() never
   adds a "Change" link to the step that is currently open (default.php:283-285), so the
   bar painted nothing but background. The label span and its wrapping .checkout-heading
   div are NEVER display:none'd or removed here — #checkout's aria-labelledby (default.php
   line 115) resolves its accessible name from that span, and an element with display:none
   drops out of the accessibility tree, which would blank the region's name entirely.
   :has() targets the sibling relationship inside the <section>: .checkout-heading and
   .checkout-content are siblings of #checkout (default.php:115-127), and .checkout-content
   only carries .active while its step is open (added by slideDown(), default.php:263, used
   for the checkout step at default.php:1810-1811). The moment the step is left, .active is
   removed (hideAllContents(), default.php:272-275) and a "Change" link is added back in
   (unless logged in — default.php:284-285) — this selector then no longer matches and the
   heading reverts to its normal look with zero extra CSS needed for that case.
   margin needs !important to beat the .mb-2 !important utility class already on this
   element in the markup (default.php:116). */
.page-checkout #checkout:has(.checkout-content.active) .checkout-heading {
    padding: 0;
    margin: 0 !important;
    background: transparent;
    border: 0;
    min-height: 0;
}

/* Checkout: login-step tabs (New Customer / Returning Customer). Same rules as the
   .page-account .auth-tabs twin in p-account.css — that sheet is not loaded on checkout,
   so page-checkout gets its own copy here. */
.page-checkout .auth-tabs { border-bottom: 1px solid var(--brand-border); gap: .25rem; }
.page-checkout .auth-tabs .nav-link { padding: .6rem 1rem; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--brand-text-secondary); font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.page-checkout .auth-tabs .nav-link:hover { color: var(--brand-text); }
.page-checkout .auth-tabs .nav-link.active { background: transparent; color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

/* Checkout: New Customer options (guest / create account) as full-width toggle buttons.
   .btn already caps --bs-btn-border-radius to var(--radius-sm) globally (colors.css), and
   .btn-lg only overrides padding/font-size, so no extra radius cap is needed here. */
.page-checkout .account-option-group .btn-check:focus-visible + .btn { outline: 3px solid var(--brand-secondary); outline-offset: 2px; }
.page-checkout .account-option-group.is-loading { opacity: .6; pointer-events: none; }
.page-checkout .account-option-divider { display: flex; align-items: center; gap: .75rem; color: var(--brand-text-secondary); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.page-checkout .account-option-divider::before, .page-checkout .account-option-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--brand-border); }

/* Checkout: password-reset modal iframe (com_users view=reset, tmpl=component embedded).
   Fixed height with its own scrollbar since the reset flow's step content length varies
   (request -> token confirm -> complete) and the modal itself must not grow with it.
   .modal-content already inherits the site radius cap (--bs-border-radius-lg is capped to
   var(--radius-sm) in colors.css), so the iframe's own bottom corners are rounded to match
   since modal-body has p-0 and the iframe sits flush against the panel edges. */
.page-checkout .checkout-reset-iframe { display: block; width: 100%; height: 60vh; min-height: 22rem; border: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); overflow-y: auto; }

#j2commerce-checkout .checkout-content.active, #j2commerce-checkout .btn-light {background-color:var(--bs-body-bg)!important;}
#j2commerce-checkout .checkout-content.active .form-select{cursor: pointer;}

/* ---- CHECKOUT MINIMAL CHROME ----
   .checkout-header and .checkout-footer are emitted ONLY on the checkout and confirmation pages
   (index.php's $isCheckoutChrome — includes/checkout-header.php + includes/checkout-footer.php),
   never on any other page, so they are left unprefixed rather than scoped under
   .page-checkout/.page-confirmation. .checkout-trust, .checkout-pay-icons and
   .checkout-secure-iframe are likewise unique to the checkout step markup
   (html/com_j2commerce/checkout/redline/default.php + default_sidecart.php) and carry no risk of
   colliding with an unrelated page. */
.checkout-header { background: var(--brand-bg); border-bottom: 1px solid var(--brand-border); padding-block: 1.25rem; text-align: center; }
.checkout-header .checkout-brand { display: inline-block; }
.checkout-header .checkout-brand img { height: 48px; width: auto; }
@media (max-width: 575.98px) {
    .checkout-header { padding-block: 1rem; }
    .checkout-header .checkout-brand img { height: 36px; }
}

/* Sticky footer on the short checkout/confirmation pages: the body fills the viewport and the
   band holding #main absorbs the slack, so no body background shows below the footer.
   margin-top:auto keeps the footer pinned even where :has() is unsupported. */
body.page-checkout, body.page-confirmation { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.page-checkout > :has(#main), body.page-confirmation > :has(#main) { flex: 1 0 auto; }
.checkout-footer { margin-top: auto; background: var(--brand-ink); color: var(--brand-text-on-dark-2); padding-block: 1rem; font-size: var(--text-sm); }
.checkout-footer-phone { color: var(--brand-text-on-dark); font-weight: 600; }
.checkout-footer-phone:hover, .checkout-footer-phone:focus-visible { color: var(--brand-text-on-dark); text-decoration-thickness: 2px; }
.checkout-footer-phone i, .checkout-footer-phone span[class*="fa-"] { margin-right: .4rem; }
/* Alignment lives here rather than on Bootstrap's .justify-content-between / .ms-auto utilities:
   those carry !important, so the narrow-viewport rule below could never win against them. */
.checkout-footer-row { justify-content: space-between; }
.checkout-footer-copyright { margin-left: auto; text-align: right; }
@media (max-width: 575.98px) {
    .checkout-footer-row { justify-content: center; text-align: center; }
    .checkout-footer-copyright { flex-basis: 100%; margin-left: 0; text-align: center; }
}

.checkout-trust { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--brand-bg-soft); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--brand-text-secondary); }
.checkout-trust i, .checkout-trust span[class*="fa-"] { color: var(--brand-primary); font-size: 1.1rem; }
/* The sentence takes the free space so the lock, the copy and the link stay on one row on a
   desktop-width step column; below ~20rem of copy the link wraps to its own line instead of
   squeezing the sentence to two words per line. */
.checkout-trust-text { flex: 1 1 20rem; }
.checkout-trust-text strong { color: var(--brand-text); }
.checkout-trust-link { padding: .35rem 0; margin-left: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.checkout-trust-link:focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (max-width: 575.98px) {
    .checkout-trust { flex-direction: column; align-items: flex-start; text-align: left; }
    /* flex-grow on a COLUMN axis stretches the sentence vertically and blows a gap between it and
       the link, so the row-axis sizing above is released here rather than inherited. */
    .checkout-trust-text { flex: 0 1 auto; }
    .checkout-trust-link { margin-left: 0; }
}

.checkout-pay-icons { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--brand-border); }
.checkout-pay-icons-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text-secondary); margin-bottom: .5rem; }
.checkout-pay-icons-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.checkout-pay-icons-row img { display: block; width: 44px; height: 28px; object-fit: contain; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: var(--brand-bg); padding: .2rem; }

/* Checkout: "Safe & Secure Shopping" modal iframe (com_content article view, tmpl=component
   embedded). Same fixed-height/own-scrollbar treatment as .checkout-reset-iframe above, for the
   same reason: article body length varies and the modal itself must not grow with it. */
.checkout-secure-iframe { display: block; width: 100%; height: 60vh; min-height: 22rem; border: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); overflow-y: auto; }

/* Dark-mode readiness (see colors.css header comment — this site ships light-only, no
   [data-bs-theme=dark] block exists yet). .checkout-footer already sits on the ink band using the
   same -on-dark tokens as .site-footer (template.css:710), which is dark-safe by construction and
   needs no override here, same as that existing footer. The other three new surfaces are on the
   light --brand-bg band, so each gets its ink-band equivalent below. */
[data-bs-theme=dark] .checkout-header { background: var(--brand-ink); border-bottom-color: var(--brand-border-dark); }
[data-bs-theme=dark] .checkout-trust { background: var(--brand-ink-2); border-color: var(--brand-border-dark); color: var(--brand-text-on-dark-2); }
[data-bs-theme=dark] .checkout-trust i, [data-bs-theme=dark] .checkout-trust span[class*="fa-"] { color: var(--brand-primary-on-dark); }
[data-bs-theme=dark] .checkout-trust-text strong { color: var(--brand-text-on-dark); }
[data-bs-theme=dark] .checkout-trust-link { color: var(--brand-text-on-dark); }
[data-bs-theme=dark] .checkout-trust-link:focus-visible { outline-color: var(--brand-secondary-on-dark); }
[data-bs-theme=dark] .checkout-pay-icons { border-top-color: var(--brand-border-dark); }
[data-bs-theme=dark] .checkout-pay-icons-label { color: var(--brand-text-on-dark-2); }
[data-bs-theme=dark] .checkout-pay-icons-row img { border-color: var(--brand-border-dark); background: var(--brand-ink-2); }

/* Dark-mode: checkout step chrome + step forms (billing/shipping/payment/confirm/login/guest/
   register -- all loaded inside #j2commerce-checkout) and the confirmation order-summary page.
   Two root causes fixed here, both already described above for the header/trust/pay-icons trio:
   1. CORE (media/com_j2commerce/css/site/checkout.css + j2commerce.css) declares several
      surfaces with unconditional light-mode hex -- #f5f5f5 heading bar / terms box / save-card
      box, #e0e0e0 image placeholder -- or reads --bs-primary directly for focus rings and the
      "Modify" link, with no theme guard at all. Core is off-limits to edit -- overridden here
      from the template sheet, scoped to #j2commerce-checkout / .j2commerce-confirmation so
      nothing outside checkout is touched.
   2. This template's OWN unconditional rules (.form-label reading --brand-text, colors.css:275;
      the auth-tabs nav links and account-option-divider reading --brand-text/-secondary,
      template.css:888-897) hit the identical bug for the identical reason.
   --bs-primary itself is NOT redefined here: it also backs .j2commerce-skip-link's SOLID RED
   background (checkout.css:194) where white text already clears 6.24:1 in both themes -- a
   blanket swap to the lighter --brand-primary-on-dark would drop THAT pairing below 3:1. Every
   consumer is overridden individually below instead. */
[data-bs-theme=dark] #j2commerce-checkout {
    /* Feeds every .text-danger inside checkout (the logout link + every required-field
       asterisk CustomFieldHelper renders) via Bootstrap's own
       rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) formula -- no !important needed even
       though .text-danger itself carries one, because the variable it reads changes. */
    --bs-danger-rgb: 255, 107, 125; /* --brand-primary-on-dark, as an rgb() triplet */
}
[data-bs-theme=dark] #j2commerce-checkout :focus {
    outline-color: var(--brand-primary-on-dark);
}
[data-bs-theme=dark] #j2commerce-checkout .j2commerce-customfield input:focus,
[data-bs-theme=dark] #j2commerce-checkout .checkout-voucher-form .form-control:focus,
[data-bs-theme=dark] #j2commerce-checkout .checkout-coupon-form .form-control:focus {
    border-color: var(--brand-primary-on-dark);
}
[data-bs-theme=dark] #j2commerce-checkout .btn-checkout-step:focus-visible {
    outline-color: var(--brand-primary-on-dark);
}
[data-bs-theme=dark] #j2commerce-checkout .checkout-heading {
    background: var(--brand-ink-2);
}
[data-bs-theme=dark] #j2commerce-checkout .checkout-heading a {
    color: var(--brand-primary-on-dark);
}
[data-bs-theme=dark] #j2commerce-checkout .checkout-heading a:focus-visible {
    outline-color: var(--brand-primary-on-dark);
}
[data-bs-theme=dark] #j2commerce-checkout .j2error {
    color: var(--brand-primary-on-dark);
}
[data-bs-theme=dark] #j2commerce-checkout .form-label {
    color: var(--brand-text-on-dark-2);
}
[data-bs-theme=dark] #j2commerce-checkout .j2commerce-terms-box,
[data-bs-theme=dark] #j2commerce-checkout .j2commerce-save-card-container {
    background: var(--brand-ink-2);
}
[data-bs-theme=dark] #j2commerce-checkout .j2c-phone-search-sticky {
    background: var(--brand-ink-2);
}

/* Dark-mode: New Customer options + Sign In button (default_login.php). .btn-outline-dark and
   .btn-dark both skin themselves as literal dark-charcoal (colors.css:243-257) for a light
   page -- indistinguishable from this dark page background. Inverted to a light chip rather
   than merely relabelling the same dark tone, so each still reads as a solid, tappable button
   instead of near-invisible text on a near-black fill. */
[data-bs-theme=dark] #j2commerce-checkout .btn-outline-dark {
    --bs-btn-color: var(--brand-text-on-dark-2);
    --bs-btn-border-color: var(--brand-text-on-dark-2);
    --bs-btn-hover-color: var(--brand-ink);
    --bs-btn-hover-bg: var(--brand-text-on-dark-2);
    --bs-btn-hover-border-color: var(--brand-text-on-dark-2);
    --bs-btn-active-color: var(--brand-ink);
    --bs-btn-active-bg: var(--brand-text-on-dark-2);
    --bs-btn-active-border-color: var(--brand-text-on-dark-2);
}
[data-bs-theme=dark] #j2commerce-checkout .btn-dark,
[data-bs-theme=dark] .j2commerce-confirmation .btn-dark {
    --bs-btn-color: var(--brand-ink);
    --bs-btn-bg: var(--brand-text-on-dark-soft);
    --bs-btn-border-color: var(--brand-text-on-dark-soft);
    --bs-btn-hover-color: var(--brand-ink);
    --bs-btn-hover-bg: var(--brand-primary-on-dark);
    --bs-btn-hover-border-color: var(--brand-primary-on-dark);
    --bs-btn-active-color: var(--brand-ink);
    --bs-btn-active-bg: var(--brand-primary-on-dark);
    --bs-btn-active-border-color: var(--brand-primary-on-dark);
}

/* Dark-mode: mobile order-summary toggle. #j2commerce-checkout .btn-light already forces its
   BACKGROUND to --bs-body-bg above (both themes -- keeps it flush with the panels around it),
   but Bootstrap's own .btn-light default text/icon colour (near-black) is untouched by that
   rule, so it stays illegible once the background it sits on flips dark. */
[data-bs-theme=dark] #j2commerce-checkout .btn-light {
    --bs-btn-color: var(--brand-text-on-dark);
    --bs-btn-hover-color: var(--brand-text-on-dark);
    --bs-btn-active-color: var(--brand-text-on-dark);
}

/* Dark-mode: login/register auth tabs (default_login.php, styled at template.css:887-898). */
[data-bs-theme=dark].page-checkout .auth-tabs {
    border-bottom-color: var(--brand-border-dark);
}
[data-bs-theme=dark].page-checkout .auth-tabs .nav-link {
    color: var(--brand-text-on-dark-2);
}
[data-bs-theme=dark].page-checkout .auth-tabs .nav-link:hover {
    color: var(--brand-text-on-dark);
}
[data-bs-theme=dark].page-checkout .auth-tabs .nav-link.active {
    color: var(--brand-primary-on-dark);
    border-bottom-color: var(--brand-primary-on-dark);
}
[data-bs-theme=dark].page-checkout .account-option-divider {
    color: var(--brand-text-on-dark-2);
}
[data-bs-theme=dark].page-checkout .account-option-divider::before,
[data-bs-theme=dark].page-checkout .account-option-divider::after {
    background: var(--brand-border-dark);
}

/* Dark-mode: confirmation page (core components/com_j2commerce/tmpl/confirmation/bootstrap5/
   default.php, styled at core j2commerce.css:891-904). Both surfaces are unconditional
   light-mode hex with no theme guard at all, so descendant text -- which DOES inherit the
   flipped --bs-body-color -- goes near-white on a still-light panel. */
[data-bs-theme=dark] .j2commerce-confirmation .j2c-sidebar-bg {
    background-color: var(--brand-ink-2);
}
[data-bs-theme=dark] .j2commerce-confirmation .j2c-item-placeholder {
    background: var(--brand-border-dark);
}

/* The page-scoped token remap that used to live here is gone: colors.css now ships a real
   [data-bs-theme=dark] palette, so --brand-* flips site-wide and scoping it to the checkout
   would just be a second, divergent source of truth for the same values. */
/* The card-brand SVGs are dark artwork (Visa navy, Amex blue, Discover near-black) drawn for a
   light chip. Inverting the chip to ink makes them disappear, so the chip stays light in dark
   mode and the row border moves instead. */
[data-bs-theme=dark] .checkout-pay-icons-row img {
    background: var(--brand-text-on-dark-soft);
    border-color: var(--brand-border-on-dark);
}

/* 1.4.11 Non-text Contrast applies to the BOUNDARY of a form control, not just its text: the
   remap above puts --brand-border at --brand-border-dark, which is a decorative-hairline value
   (measured 1.55:1 against the field fill) and leaves the inputs edgeless. --brand-border-strong
   is the token colors.css already reserves for "UI component edges" and measures 4.55:1 here.
   Decorative rules and card hairlines deliberately keep the softer value. */
body.page-checkout[data-bs-theme=dark] :is(.form-control, .form-select, .form-check-input, .input-group-text, .iti__selected-flag, .iti),
body.page-confirmation[data-bs-theme=dark] :is(.form-control, .form-select, .form-check-input, .input-group-text) {
    border-color: var(--brand-border-strong);
}

/* A CHECKED checkbox is a filled control: Bootstrap paints border and fill the same accent, and
   the brand red measures 2.49:1 against the ink panel, so the control's outline disappears.
   Keeping the red fill (white tick on it is 6.24:1) and drawing the edge in the UI-edge token
   restores the boundary without changing the checked colour. */
body.page-checkout[data-bs-theme=dark] .form-check-input:checked,
body.page-confirmation[data-bs-theme=dark] .form-check-input:checked {
    border-color: var(--brand-border-strong);
}

/* ---- Dark mode: logo plates, chips and badges ----
   Three surfaces that a palette flip alone cannot fix, because the thing that needs to
   stay readable is an IMAGE, not a colour the tokens control. */

/* Manufacturer logos are supplied artwork: mostly dark marks on transparency, and several
   are brand-coloured. .mega-brands a sets background: var(--brand-bg), which now flips to
   ink and paints a dark plate under dark artwork. Inverting the images would corrupt the
   brand colours, so the PLATE stays light instead -- the same choice the checkout payment
   chips make. */
[data-bs-theme=dark] .mega-brands a {
    background: var(--brand-text-on-dark-soft);
    border-color: var(--brand-border-on-dark);
    color: var(--brand-ink);
}
[data-bs-theme=dark] .mega-brands a:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary-active);
}

/* The press logos are already greyscaled, so there is no brand colour left to protect and
   they can simply be flipped to white artwork. brightness(0) crushes them to solid black
   first so invert(1) lands on a flat white regardless of each PNG's own tone. */
[data-bs-theme=dark] .seen-on img {
    filter: grayscale(1) brightness(0) invert(1);
    opacity: .7;
}

/* --brand-charcoal is held one step lighter in dark mode (see colors.css) so these chips
   separate from the page, but at 1.5:1 that edge is still too soft to read as a chip on
   its own -- a border carries the boundary instead (1.4.11 wants 3:1 for it). */
[data-bs-theme=dark] :is(.badge-premade, .badge-years) {
    border: 1px solid var(--brand-border-strong);
}

/* ---- Dark mode: fills whose label colour is fixed white ---- */

/* A checked filter chip fills with --brand-text and labels it with --brand-text-on-dark.
   On white those are near-black on white; on ink BOTH resolve to #FFFFFF and the chip
   turns white-on-white. The fill keeps the light value and the label takes the ink. */
[data-bs-theme=dark] .btn-check:checked + .btn-chip {
    background: var(--brand-text-on-dark-soft);
    border-color: var(--brand-text-on-dark-soft);
    color: var(--brand-ink);
}

/* Core com_j2commerce paints its skip link with --bs-primary, which is the TEXT red on
   ink (#FF6B7D) and only carries its white label at 2.74:1. The fill red does. */
[data-bs-theme=dark] .j2commerce-skip-link {
    background: var(--brand-primary-fill);
    color: var(--brand-text-on-dark);
}

/* Bootstrap contextual fills (.bg-primary/.bg-danger/.bg-secondary) resolve to the TEXT
   tokens in dark mode, so anything relying on them for a solid chip -- the nav cart count
   is the visible one -- loses its white label. */
[data-bs-theme=dark] :is(.bg-primary, .bg-danger) {
    background-color: var(--brand-primary-fill) !important;   /* Bootstrap's own utility is !important */
}
[data-bs-theme=dark] .bg-secondary {
    background-color: var(--brand-secondary-fill) !important;
}

/* Vehicle category icons (images/store/icon-*.png and the identical images/icons/icon-*.png).
   Measured: 0% coloured pixels, average luma 31 on 60-73% transparency -- monochrome near-black
   silhouettes drawn for a white tile, so on ink they all but disappear. There is no brand colour
   to protect here (unlike .mega-brands, which keeps a light plate instead), so inverting is the
   faithful move: luma 31 becomes ~224, about 12:1 on the ink ground.

   Matched on the src rather than on a container class deliberately -- the same seven files are
   rendered by .type-tile, .type-card-head, the categories module's grid AND slider layouts, the
   tag listing and the videos page's .video-type chip. A container-by-container list would have
   missed one, and would miss the next new one. */
[data-bs-theme=dark] :is(img[src*="/images/store/icon-"], img[src*="/images/icons/icon-"]) {
    filter: invert(1);
}

/* Brand tiles. The light design mutes each mark to grayscale(1)/opacity .85 and reveals its true
   colour on hover. grayscale() already throws the brand colour away at rest, so inverting the
   muted state costs nothing and turns near-black marks into white ones on the ink tile.

   The HOVER colour-reveal is deliberately NOT restored in dark: the ten marks here are a mix
   (Honda red reads on ink, Yamaha/Suzuki/KTM are near-black and do not), so `filter: none` would
   make some brands vanish on hover -- worse than the muted state. Dark keeps the white silhouette
   and carries the hover affordance on opacity, plus the red border and lift the tile already has.
   If the colour reveal matters more than uniform legibility, the alternative is a light plate
   behind the img on hover, the way .mega-brands keeps one permanently. */
[data-bs-theme=dark] .brand-tile img {
    filter: grayscale(1) brightness(0) invert(1);
    opacity: .75;
}
[data-bs-theme=dark] .brand-tile:hover img {
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 1;
}

/* WCAG 2.2 SC 1.4.3 Contrast (Minimum): core's empty-cart notice (components/com_j2commerce/
   tmpl/carts/bootstrap5/default.php) is Bootstrap's stock .alert-info pairing -- #0D6EFD on
   #E7F1FF measures 3.95:1 (needs 4.5:1). Scoped to only this alert via :has() so no other
   .alert-info on the site is touched. Darkened to #0A58CA -- 5.6:1 on the same fill. */
.alert-info:has(.cart-no-items) {
    --bs-alert-color: #0A58CA;
}