/* ---- removed 9 page bundles (dealer-account, fitment, sizes, dealer-apply,
   dealer-portal, financing, reviews, brands, faq): every rule in them was scoped to a
   .page-* class that templates/tires/index.php $pageMap and no menu pageclass_sfx can
   emit, so none of it could ever match. Restore from git if those pages get built. ---- */
/* ===========================================================
   tires template — template.css
   Universal component library (MOCKUP/assets/css/styles.css)
   + cart-drawer theme override (§A only, per cart-drawer.css)
   + every page's scoped .page-* CSS from MOCKUP/assets/css/pages/
   CDN resets removed (Bootstrap 5 + Font Awesome loaded via WAM in head.php).
   =========================================================== */

/* ---- styles.css (universal component library) ---- */
/* ============================================
   INVICTA WHOLESALE TIRE — Universal Styles
   Reviewed: 2026-05-30 by css-expert.
   Decisions: all color:#fff replaced with var(--brand-text-on-primary) or
   var(--brand-text-on-dark); rgba() overlays tokenized to rgba(var(--brand-bg-rgb),...);
   .cta-band.gradient stop colors tokenized; .hero gradient stops tokenized.
   The ONE source of truth for component CSS. Dark-first.
   Page-specific rules appended below, scoped .page-[name].
   ============================================ */

/* ---- GLOBAL / RESET ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--brand-text-body);
    background-color: var(--brand-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-primary-light); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--brand-secondary); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.container-xl { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }
.section { padding-block: var(--section-py); }
.section-sm { padding-block: var(--section-py-sm); }
.section-lg { padding-block: var(--section-py-lg); }
.bg-surface { background-color: var(--brand-bg-surface); }
.bg-alt { background-color: var(--brand-bg-alt); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- TYPOGRAPHY ---- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--brand-text);
    margin: 0 0 var(--space-4);
    text-transform: uppercase;
}
h1,.h1 { font-size: var(--text-4xl); }
h2,.h2 { font-size: var(--text-3xl); }
h3,.h3 { font-size: var(--text-2xl); letter-spacing: var(--tracking-normal); }
h4,.h4 { font-size: var(--text-xl); letter-spacing: var(--tracking-normal); }
h5,.h5 { font-size: var(--text-lg); letter-spacing: var(--tracking-normal); }
h6,.h6 { font-size: var(--text-base); letter-spacing: var(--tracking-wide); }
p { margin: 0 0 var(--space-4); }
/* Bootstrap's own .lead ships font-weight:300, which this site never loads —
   Inter is requested at 400-700. Pin it so the lead paragraph resolves to a
   real cut instead of falling back through the family. */
.lead { font-size: var(--text-md); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--brand-text-body); }
.text-secondary-c { color: var(--brand-text-secondary) !important; }
.text-gold { color: var(--brand-secondary) !important; }
.text-copper { color: var(--brand-primary-light) !important; }
.display-hero { font-size: var(--text-5xl); line-height: 1.05; letter-spacing: var(--tracking-tight); }

/* Eyebrow / section label */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--brand-secondary);
    margin-bottom: var(--space-3);
}
.eyebrow::before { content:""; width:28px; height:2px; background: var(--brand-primary); display:inline-block; }

.section-head { max-width: 760px; margin-bottom: var(--space-12); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* ---- UTILITY TOP BAR ---- */
.utility-bar {
    background: var(--brand-bg);
    border-bottom: 1px solid var(--brand-border);
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
}
.utility-bar .container-xl { display:flex; align-items:center; justify-content:space-between; min-height: 40px; gap: var(--space-4); }
.utility-bar a { color: var(--brand-text-secondary); }
.utility-bar a:hover { color: var(--brand-secondary); }
.utility-bar .util-promo { font-family: var(--font-heading); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-text); }
.utility-bar .util-promo strong { color: var(--brand-secondary); }
.utility-bar .util-links { display:flex; gap: var(--space-5); align-items:center; }
@media (max-width: 767.98px){ .utility-bar .util-links { display:none; } }

/* ---- NAVBAR ---- */
.site-navbar {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: var(--brand-bg-elevated);
    border-bottom: 1px solid var(--brand-border);
    transition: background var(--transition-base), box-shadow var(--transition-base);
}
.site-navbar .container-xl { display:flex; align-items:center; gap: var(--space-6); min-height: 76px; }
.site-navbar.is-transparent { background: transparent; border-bottom-color: transparent; }
.site-navbar.scrolled { background: var(--brand-bg); box-shadow: var(--shadow-md); border-bottom-color: var(--brand-border); }
.navbar-brand-c { display:flex; align-items:center; gap: var(--space-3); margin-right: auto; }
.navbar-brand-c img { height: 64px; width:auto; }
.navbar-brand-c .brand-text { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xl); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text); }
.navbar-brand-c .brand-text span { color: var(--brand-primary); }
.nav-links { display:flex; align-items:center; gap: var(--space-1); list-style:none; margin:0; padding:0; }
.nav-links > li > a {
    display:block; padding: var(--space-3) var(--space-4);
    font-family: var(--font-heading); font-weight: var(--weight-medium);
    font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-wide);
    color: var(--brand-text); border-radius: var(--radius-sm);
}
.nav-links > li > a:hover, .nav-links > li.active > a { color: var(--brand-primary-light); }
.nav-actions { display:flex; align-items:center; gap: var(--space-2); }
.btn-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius: var(--radius-sm);
    color: var(--brand-text); background: transparent; border:1px solid transparent;
    transition: all var(--transition-fast); position: relative; cursor: pointer;
}
.btn-icon:hover { color: var(--brand-primary-light); background: var(--brand-bg-card); }

/* J2Commerce findbar modal trigger — matches the mockup's .btn-icon nav action
   look. Compound selector out-specifies both the module's own .j2c-findbar__trigger
   rule (findbar.css) and the generic .btn-icon rule above regardless of load
   order, and keeps the WCAG 2.5.8 44x44 touch target the module CSS also sets. */
.nav-actions .j2c-findbar__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    gap: 0;
    border-radius: var(--radius-sm);
    color: var(--brand-text);
    background: transparent;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    position: relative;
    cursor: pointer;
}
.nav-actions .j2c-findbar__trigger:hover {
    color: var(--brand-primary-light);
    background: var(--brand-bg-card);
}

.cart-count {
    position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 4px;
    background: var(--brand-primary); color: var(--brand-text-on-primary); font-size:11px; font-weight:700; line-height:18px;
    text-align:center; border-radius: var(--radius-pill);
}
.nav-toggle { display:none; }
@media (max-width: 991.98px){
    .nav-links { display:none; }
    .nav-toggle { display:inline-flex; }
}

/* ---- MEGA MENU ---- */
.has-mega { position: static; }
.mega-menu {
    position:absolute; left:0; right:0; top:100%;
    background: var(--brand-bg-surface); border-top:2px solid var(--brand-primary);
    box-shadow: var(--shadow-xl); padding: var(--space-8) 0;
    opacity:0; visibility:hidden; transform: translateY(8px);
    transition: all var(--transition-base); z-index: var(--z-dropdown);
}
.has-mega:hover .mega-menu, .has-mega:focus-within .mega-menu { opacity:1; visibility:visible; transform: translateY(0); }
.mega-menu .mega-col h6 { color: var(--brand-secondary); margin-bottom: var(--space-3); }
.mega-menu .mega-col a { display:block; padding: var(--space-1) 0; color: var(--brand-text-body); font-family: var(--font-body); text-transform:none; letter-spacing:normal; }
.mega-menu .mega-col a:hover { color: var(--brand-primary-light); }

/* ---- BUTTONS (custom beyond Bootstrap) ---- */
.btn-c {
    display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
    font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-base);
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
    padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
    border: 2px solid transparent; cursor: pointer; text-align:center; line-height:1.2;
    transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base), color var(--transition-base);
}
.btn-c-primary { background: var(--brand-primary); color: var(--brand-text-on-primary); border-color: var(--brand-primary); }
.btn-c-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); color: var(--brand-text-on-primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-c-outline { background: transparent; color: var(--brand-text); border-color: var(--brand-secondary); }
.btn-c-outline:hover { background: var(--brand-secondary); color: var(--brand-text-on-light); transform: translateY(-2px); }
.btn-c-ghost { background: transparent; color: var(--brand-text); border-color: var(--brand-border-strong); }
.btn-c-ghost:hover { border-color: var(--brand-primary); color: var(--brand-primary-light); }
.btn-c-gold { background: var(--brand-secondary); color: var(--brand-text-on-light); border-color: var(--brand-secondary); }
.btn-c-gold:hover { background: var(--brand-secondary-hover); border-color: var(--brand-secondary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-c-lg { font-size: var(--text-md); padding: var(--space-4) var(--space-8); }
.btn-c-sm { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); }
.btn-c-block { width:100%; }

/* ============================================================================
   CORE BOOTSTRAP BUTTON VARIANTS — re-point --bs-btn-* to brand tokens
   ----------------------------------------------------------------------------
   Joomla core + J2Commerce emit plain Bootstrap .btn-primary/-secondary/-link/
   -outline-x/-danger/etc. markup this template doesn't otherwise touch (its
   own button system above is .btn-c-*), so it fell through to Bootstrap's
   stock blue/gray/red. Bootstrap 5.3 drives every .btn state through
   --bs-btn-* custom properties (see the checkout .btn-checkout-step block
   below for the full write-up of why re-pointing beats longhand overrides),
   so each variant here re-points its own state vars at brand tokens instead.
   Outlines stay outline, danger stays destructive-red, link stays
   link-styled — only the hue moves. success/warning/info/light/dark have no
   confirmed on-site occurrence but are covered defensively since Joomla core
   can emit any of them; danger/success/info have no dedicated "hover" token
   in colors.css, so those three darken via color-mix() instead of inventing
   new brand tokens.
   ========================================================================== */
.btn-primary {
    --bs-btn-color: var(--brand-text-on-primary);
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-text-on-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-color: var(--brand-text-on-primary);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-color: var(--brand-text-on-primary);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary-light);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-text-on-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: var(--brand-text-on-primary);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-color: var(--brand-text-secondary);
    --bs-btn-disabled-border-color: var(--brand-border);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

.btn-secondary {
    --bs-btn-color: var(--brand-text-on-light);
    --bs-btn-bg: var(--brand-secondary);
    --bs-btn-border-color: var(--brand-secondary);
    --bs-btn-hover-color: var(--brand-text-on-light);
    --bs-btn-hover-bg: var(--brand-secondary-hover);
    --bs-btn-hover-border-color: var(--brand-secondary-hover);
    --bs-btn-active-color: var(--brand-text-on-light);
    --bs-btn-active-bg: var(--brand-secondary-hover);
    --bs-btn-active-border-color: var(--brand-secondary-hover);
    --bs-btn-disabled-color: var(--brand-text-on-light);
    --bs-btn-disabled-bg: var(--brand-secondary);
    --bs-btn-disabled-border-color: var(--brand-secondary);
    --bs-btn-focus-shadow-rgb: var(--brand-secondary-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--brand-text);
    --bs-btn-border-color: var(--brand-secondary);
    --bs-btn-hover-color: var(--brand-text-on-light);
    --bs-btn-hover-bg: var(--brand-secondary);
    --bs-btn-hover-border-color: var(--brand-secondary);
    --bs-btn-active-color: var(--brand-text-on-light);
    --bs-btn-active-bg: var(--brand-secondary-hover);
    --bs-btn-active-border-color: var(--brand-secondary-hover);
    --bs-btn-disabled-color: var(--brand-text-secondary);
    --bs-btn-disabled-border-color: var(--brand-border);
    --bs-btn-focus-shadow-rgb: var(--brand-secondary-rgb);
}

.btn-link {
    --bs-btn-color: var(--brand-primary-light);
    --bs-btn-hover-color: var(--brand-secondary);
    --bs-btn-active-color: var(--brand-secondary);
    --bs-btn-disabled-color: var(--brand-text-secondary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

.btn-outline-danger {
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: var(--brand-text-on-primary);
    --bs-btn-hover-bg: var(--color-danger);
    --bs-btn-hover-border-color: var(--color-danger);
    --bs-btn-active-color: var(--brand-text-on-primary);
    --bs-btn-active-bg: var(--color-danger);
    --bs-btn-active-border-color: var(--color-danger);
    --bs-btn-disabled-color: var(--color-danger);
    --bs-btn-disabled-border-color: var(--color-danger);
    --bs-btn-focus-shadow-rgb: var(--color-danger-rgb);
}

.btn-danger {
    --bs-btn-color: var(--brand-text-on-primary);
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: var(--brand-text-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 82%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-danger) 82%, black);
    --bs-btn-active-color: var(--brand-text-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 82%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-danger) 82%, black);
    --bs-btn-disabled-color: var(--brand-text-on-primary);
    --bs-btn-disabled-bg: var(--color-danger);
    --bs-btn-disabled-border-color: var(--color-danger);
    --bs-btn-focus-shadow-rgb: var(--color-danger-rgb);
}

.btn-success {
    --bs-btn-color: var(--brand-text-on-primary);
    --bs-btn-bg: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-color: var(--brand-text-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-success) 82%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-success) 82%, black);
    --bs-btn-active-color: var(--brand-text-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-success) 82%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-success) 82%, black);
    --bs-btn-disabled-color: var(--brand-text-on-primary);
    --bs-btn-disabled-bg: var(--color-success);
    --bs-btn-disabled-border-color: var(--color-success);
    --bs-btn-focus-shadow-rgb: var(--color-success-rgb);
}
.btn-outline-success {
    --bs-btn-color: var(--color-success-text);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-color: var(--brand-text-on-primary);
    --bs-btn-hover-bg: var(--color-success);
    --bs-btn-hover-border-color: var(--color-success);
    --bs-btn-active-color: var(--brand-text-on-primary);
    --bs-btn-active-bg: var(--color-success);
    --bs-btn-active-border-color: var(--color-success);
    --bs-btn-disabled-color: var(--color-success-text);
    --bs-btn-disabled-border-color: var(--color-success);
    --bs-btn-focus-shadow-rgb: var(--color-success-rgb);
}

/* --color-warning === --brand-secondary (gold) in both themes, so this reuses
   the secondary/gold hover + focus tokens rather than duplicating values. */
.btn-warning {
    --bs-btn-color: var(--brand-text-on-light);
    --bs-btn-bg: var(--color-warning);
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-hover-color: var(--brand-text-on-light);
    --bs-btn-hover-bg: var(--brand-secondary-hover);
    --bs-btn-hover-border-color: var(--brand-secondary-hover);
    --bs-btn-active-color: var(--brand-text-on-light);
    --bs-btn-active-bg: var(--brand-secondary-hover);
    --bs-btn-active-border-color: var(--brand-secondary-hover);
    --bs-btn-disabled-color: var(--brand-text-on-light);
    --bs-btn-disabled-bg: var(--color-warning);
    --bs-btn-disabled-border-color: var(--color-warning);
    --bs-btn-focus-shadow-rgb: var(--brand-secondary-rgb);
}
.btn-outline-warning {
    --bs-btn-color: var(--color-warning-text);
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-hover-color: var(--brand-text-on-light);
    --bs-btn-hover-bg: var(--color-warning);
    --bs-btn-hover-border-color: var(--color-warning);
    --bs-btn-active-color: var(--brand-text-on-light);
    --bs-btn-active-bg: var(--color-warning);
    --bs-btn-active-border-color: var(--color-warning);
    --bs-btn-disabled-color: var(--color-warning-text);
    --bs-btn-disabled-border-color: var(--color-warning);
    --bs-btn-focus-shadow-rgb: var(--brand-secondary-rgb);
}

/* No --color-info-rgb token exists in colors.css; the triplet below is the
   plain rgb() decomposition of --color-info (#5B9BD5 / light theme #2F6FA8
   both round to a similar mid-blue focus ring, so a single static value is
   an acceptable approximation for a focus outline). */
.btn-info {
    --bs-btn-color: var(--brand-text-on-primary);
    --bs-btn-bg: var(--color-info);
    --bs-btn-border-color: var(--color-info);
    --bs-btn-hover-color: var(--brand-text-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-info) 82%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-info) 82%, black);
    --bs-btn-active-color: var(--brand-text-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-info) 82%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-info) 82%, black);
    --bs-btn-disabled-color: var(--brand-text-on-primary);
    --bs-btn-disabled-bg: var(--color-info);
    --bs-btn-disabled-border-color: var(--color-info);
    --bs-btn-focus-shadow-rgb: 91, 157, 213;
}
.btn-outline-info {
    --bs-btn-color: var(--color-info-text);
    --bs-btn-border-color: var(--color-info);
    --bs-btn-hover-color: var(--brand-text-on-primary);
    --bs-btn-hover-bg: var(--color-info);
    --bs-btn-hover-border-color: var(--color-info);
    --bs-btn-active-color: var(--brand-text-on-primary);
    --bs-btn-active-bg: var(--color-info);
    --bs-btn-active-border-color: var(--color-info);
    --bs-btn-disabled-color: var(--color-info-text);
    --bs-btn-disabled-border-color: var(--color-info);
    --bs-btn-focus-shadow-rgb: 91, 157, 213;
}

.btn-light {
    --bs-btn-color: var(--brand-text-on-light);
    --bs-btn-bg: var(--brand-bg-light);
    --bs-btn-border-color: var(--brand-bg-light);
    --bs-btn-hover-color: var(--brand-text-on-light);
    --bs-btn-hover-bg: var(--brand-bg-light-alt);
    --bs-btn-hover-border-color: var(--brand-bg-light-alt);
    --bs-btn-active-color: var(--brand-text-on-light);
    --bs-btn-active-bg: var(--brand-bg-light-alt);
    --bs-btn-active-border-color: var(--brand-bg-light-alt);
    --bs-btn-disabled-color: var(--brand-text-on-light);
    --bs-btn-disabled-bg: var(--brand-bg-light);
    --bs-btn-disabled-border-color: var(--brand-bg-light);
    --bs-btn-focus-shadow-rgb: var(--brand-text-rgb);
}
.btn-outline-light {
    --bs-btn-color: var(--brand-text);
    --bs-btn-border-color: var(--brand-border-light);
    --bs-btn-hover-color: var(--brand-text-on-light);
    --bs-btn-hover-bg: var(--brand-bg-light);
    --bs-btn-hover-border-color: var(--brand-bg-light);
    --bs-btn-active-color: var(--brand-text-on-light);
    --bs-btn-active-bg: var(--brand-bg-light-alt);
    --bs-btn-active-border-color: var(--brand-bg-light-alt);
    --bs-btn-disabled-color: var(--brand-text-secondary);
    --bs-btn-disabled-border-color: var(--brand-border);
    --bs-btn-focus-shadow-rgb: var(--brand-text-rgb);
}

.btn-dark {
    --bs-btn-color: var(--brand-text);
    --bs-btn-bg: var(--brand-bg-card);
    --bs-btn-border-color: var(--brand-bg-card);
    --bs-btn-hover-color: var(--brand-text);
    --bs-btn-hover-bg: var(--brand-bg-elevated);
    --bs-btn-hover-border-color: var(--brand-bg-elevated);
    --bs-btn-active-color: var(--brand-text);
    --bs-btn-active-bg: var(--brand-bg-elevated);
    --bs-btn-active-border-color: var(--brand-bg-elevated);
    --bs-btn-disabled-color: var(--brand-text-secondary);
    --bs-btn-disabled-bg: var(--brand-bg-card);
    --bs-btn-disabled-border-color: var(--brand-bg-card);
    --bs-btn-focus-shadow-rgb: var(--brand-bg-rgb);
}
.btn-outline-dark {
    --bs-btn-color: var(--brand-text);
    --bs-btn-border-color: var(--brand-border-strong);
    --bs-btn-hover-color: var(--brand-text);
    --bs-btn-hover-bg: var(--brand-bg-card);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: var(--brand-text);
    --bs-btn-active-bg: var(--brand-bg-elevated);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-disabled-color: var(--brand-text-secondary);
    --bs-btn-disabled-border-color: var(--brand-border);
    --bs-btn-focus-shadow-rgb: var(--brand-bg-rgb);
}

/* ---- HERO SECTIONS ---- */
.hero {
    position: relative; min-height: 90vh; display:flex; align-items:center;
    overflow:hidden; background: var(--brand-bg);
}
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
/* Hero scrim. It exists to make the copy legible, not to mute the photo —
   so it holds its strength only under the text column on the left and is
   fully clear by 82%, leaving the machine and the tires unwashed. The copy
   carries its own text-shadow as insurance where the scrim has thinned. */
.hero::after {
    content:""; position:absolute; inset:0; z-index:1;
    background: linear-gradient(100deg,
        rgba(var(--brand-bg-rgb), .88) 0%,
        rgba(var(--brand-bg-rgb), .66) 28%,
        rgba(var(--brand-bg-rgb), .26) 55%,
        rgba(var(--brand-bg-rgb), 0)   82%);
}
.hero .hero-inner { position:relative; z-index:2; width:100%; }
.hero .hero-heading,
.hero .display-hero { text-shadow: 0 2px 18px rgba(var(--brand-bg-rgb), .55); }
.hero .hero-sub,
.hero .hero-eyebrow { text-shadow: 0 1px 10px rgba(var(--brand-bg-rgb), .5); }
.hero-eyebrow {
    display:inline-flex; align-items:center; gap: var(--space-2);
    background: rgba(var(--brand-secondary-rgb), .14); border:1px solid rgba(var(--brand-secondary-rgb), .4);
    color: var(--brand-secondary-light); font-family: var(--font-heading);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest);
    text-transform: uppercase; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
    margin-bottom: var(--space-5);
}
.hero-heading { font-size: var(--text-5xl); line-height:1.05; letter-spacing: var(--tracking-tight); color: var(--brand-text); margin-bottom: var(--space-5); max-width: 16ch; }
.hero-sub { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--brand-text-body); max-width: 52ch; margin-bottom: var(--space-8); }
.hero-actions { display:flex; flex-wrap:wrap; gap: var(--space-4); }
/* Interior page hero (shorter) */
.hero-interior { min-height: 38vh; }
.hero-interior::after { background: linear-gradient(180deg, rgba(var(--brand-bg-rgb),.7), rgba(var(--brand-bg-rgb),.92)); }
.hero-interior .hero-heading { font-size: var(--text-4xl); margin-bottom: var(--space-3); }

/* ---- BREADCRUMB ---- */
.breadcrumb-c { display:flex; flex-wrap:wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--brand-text-secondary); list-style:none; padding:0; margin:0 0 var(--space-4); }
.breadcrumb-c li:not(:last-child)::after { content:"/"; margin-left: var(--space-2); color: var(--brand-border-strong); }
.breadcrumb-c a { color: var(--brand-text-secondary); }
.breadcrumb-c a:hover { color: var(--brand-secondary); }
.breadcrumb-c .current { color: var(--brand-text); }

/* ---- TRUST BAR ---- */
.trust-bar { background: var(--brand-bg-surface); border-block:1px solid var(--brand-border); }
.trust-bar .trust-row { display:flex; flex-wrap:wrap; justify-content:space-around; gap: var(--space-6); padding-block: var(--space-5); }
.trust-item { display:flex; align-items:center; gap: var(--space-3); color: var(--brand-text); font-family: var(--font-heading); text-transform:uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-sm); }
.trust-item i { color: var(--brand-primary); font-size: 1.4rem; }

/* ---- FITMENT FINDER ---- */
.fitment-finder {
    background: var(--brand-bg-card); border:1px solid var(--brand-border-strong);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: var(--space-6);
}
.fitment-finder .ff-tabs { display:flex; gap: var(--space-1); margin-bottom: var(--space-5); border-bottom:1px solid var(--brand-border); }
.fitment-finder .ff-tab {
    padding: var(--space-3) var(--space-5); font-family: var(--font-heading); text-transform:uppercase;
    letter-spacing: var(--tracking-wide); color: var(--brand-text-secondary); background:transparent; border:none;
    border-bottom:3px solid transparent; cursor:pointer; transition: all var(--transition-fast);
}
.fitment-finder .ff-tab.active { color: var(--brand-primary-light); border-bottom-color: var(--brand-primary); }
.fitment-finder .ff-grid { display:grid; grid-template-columns: repeat(3,1fr) auto; gap: var(--space-3); align-items:end; }
@media (max-width: 767.98px){ .fitment-finder .ff-grid { grid-template-columns:1fr; } }
.fitment-finder label { display:block; font-size: var(--text-xs); text-transform:uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text-secondary); margin-bottom: var(--space-1); }
.fitment-finder select, .fitment-finder input {
    width:100%; background: var(--brand-bg); border:1px solid var(--brand-border); color: var(--brand-text);
    padding: var(--space-3); border-radius: var(--radius-sm); font-family: var(--font-body);
}
.fitment-finder select:focus { outline:none; border-color: var(--brand-primary); box-shadow: var(--shadow-glow-primary); }

/* ---- CARDS (generic) ---- */
.card-c {
    background: var(--brand-bg-card); border:1px solid var(--brand-border);
    border-radius: var(--radius-md); overflow:hidden; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.card-c:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-border-strong); }
.card-c .card-c-body { padding: var(--space-6); }

/* ---- PRODUCT CARD ---- */
.product-card {
    background: var(--brand-bg-card); border:1px solid var(--brand-border); border-radius: var(--radius-md);
    overflow:hidden; display:flex; flex-direction:column; position:relative;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-primary); }
.product-card .pc-media { position:relative; aspect-ratio:1/1; background: var(--brand-bg-elevated); overflow:hidden; }
.product-card .pc-media img { width:100%; height:100%; object-fit:cover; transition: transform var(--transition-slow); }
.product-card:hover .pc-media img { transform: scale(1.05); }
.pc-badge { position:absolute; top: var(--space-3); left: var(--space-3); z-index:2; font-family: var(--font-heading); font-size: var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing: var(--tracking-wide); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); }
.pc-badge.save { background: var(--brand-secondary); color: var(--brand-text-on-light); }
.pc-badge.sale { background: var(--brand-sale); color: var(--brand-text-on-primary); }
.pc-wish { position:absolute; top: var(--space-3); right: var(--space-3); z-index:2; width:36px; height:36px; border-radius: var(--radius-pill); background: rgba(var(--brand-bg-rgb),.7); color: var(--brand-text); display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; transition: all var(--transition-fast); }
.pc-wish:hover { background: var(--brand-primary); color: var(--brand-text-on-primary); }
.product-card .pc-body { padding: var(--space-5); display:flex; flex-direction:column; gap: var(--space-2); flex:1; }
.pc-brand { font-size: var(--text-xs); text-transform:uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text-secondary); font-weight:600; }
.pc-name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight:600; color: var(--brand-text); text-transform:uppercase; line-height: var(--leading-snug); margin:0; }
.pc-size { display:inline-block; align-self:flex-start; font-family: var(--font-mono); font-size: var(--text-xs); padding: var(--space-0-5) var(--space-2); border:1px solid var(--brand-border-strong); border-radius: var(--radius-xs); color: var(--brand-text-body); }
.pc-rating { display:flex; align-items:center; gap: var(--space-1); font-size: var(--text-sm); color: var(--brand-text-secondary); }
.pc-rating .stars { color: var(--color-star); letter-spacing:1px; }
.pc-price-row { display:flex; align-items:baseline; gap: var(--space-2); margin-top: auto; }
.pc-price { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight:700; color: var(--brand-text); }
.pc-price-retail { font-size: var(--text-sm); color: var(--brand-text-secondary); text-decoration: line-through; }
.pc-stock { display:inline-flex; align-items:center; gap: var(--space-2); font-size: var(--text-xs); text-transform:uppercase; letter-spacing: var(--tracking-wide); }
.pc-stock.in { color: var(--color-success-text); }
.pc-stock.low { color: var(--color-warning-text); }
.pc-stock.out { color: var(--color-danger-text); }
.pc-stock .dot { width:8px; height:8px; border-radius:50%; background: currentColor; }
/* Same .pc-stock look, applied to the class names J2Commerce's own JS controls
   (media/com_j2commerce/js/site/j2commerce.js only ever writes 'in-stock'/
   'out-of-stock'), so the chip survives the variant-click DOM rebuild. The dot
   is a ::before instead of a child span for the same reason. .low-stock must
   stay after .in-stock in source order — it has equal specificity and both
   classes are present together on a low-stock element. */
.j2commerce-product-stock-container .in-stock,
.j2commerce-product-stock-container .out-of-stock,
.j2commerce-product-stock.in-stock,
.j2commerce-product-stock.out-of-stock { display:inline-flex; align-items:center; gap: var(--space-2); font-size: var(--text-xs); text-transform:uppercase; letter-spacing: var(--tracking-wide); }
.j2commerce-product-stock-container .in-stock,
.j2commerce-product-stock.in-stock { color: var(--color-success-text); }
.j2commerce-product-stock-container .out-of-stock,
.j2commerce-product-stock.out-of-stock { color: var(--color-danger-text); }
.j2commerce-product-stock-container .low-stock,
.j2commerce-product-stock.low-stock { color: var(--color-warning-text); }
.j2commerce-product-stock-container .in-stock::before,
.j2commerce-product-stock-container .out-of-stock::before,
.j2commerce-product-stock.in-stock::before,
.j2commerce-product-stock.out-of-stock::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background: currentColor; flex:0 0 auto; }
.product-card .pc-body .btn-c { margin-top: var(--space-3); }

/* ---- CATEGORY CARD FITMENT VERDICT (plg_j2commerce_app_fitment fits_badge, compact) ---- */
/* Dispatched at AfterProductListItemDisplay, so it lands outside .pc-body and directly inside
   .product-card — styled here as a card footer strip that inherits .pc-body's padding and the
   uppercase micro-type of .pc-brand / .pc-stock. */
.product-card .pc-fitment {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--brand-border);
    font-size: var(--text-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
    line-height: var(--leading-snug);
}
.product-card .pc-fitment .pc-fitment-text { min-width: 0; }
/* Icon box matches the first text line's height so it aligns to line 1 when the label wraps. */
.product-card .pc-fitment > [class*="fa-"] { line-height: var(--leading-snug); flex: 0 0 auto; }
.product-card .pc-fitment.fits   { color: var(--color-success-text); }
.product-card .pc-fitment.no-fit { color: var(--color-warning-text); }


/* ---- WISHLIST GRID (plg_j2commerce_app_wishlist wishlist_grid) ---- */
/* The card body comes from the shared list.category.item_* layouts. .j2c-wishlist-card becomes
   the card shell so the wishlist footer sits INSIDE the same border/background as the product
   card, rather than floating below it. */
.j2c-wishlist-card {
    position: relative; height: 100%; display: flex; flex-direction: column;
    background: var(--brand-bg-card); border: 1px solid var(--brand-border);
    border-radius: var(--radius-md); overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.j2c-wishlist-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-primary); }
.j2c-wishlist-card > .product-card {
    flex: 1; background: none; border: 0; border-radius: 0; overflow: visible;
}
/* The shell owns the hover lift, so the inner card must not double it. */
.j2c-wishlist-card > .product-card:hover { transform: none; box-shadow: none; border-color: transparent; }
/* The product card's own add-to-wishlist heart is meaningless here — the remove button replaces
   it. Hide the whole wrapper: the button carries both .pc-wish and .j2commerce-wishlist-toggle,
   and the later `.pc-media .j2commerce-wishlist-toggle` rule would otherwise win on source order. */
.j2c-wishlist-card .pc-media .j2commerce-product-wishlist { display: none; }

/* Remove sits where .pc-wish sits on a shop card, so the eye lands in the same place. */
.j2c-wishlist-card .j2c-wishlist-remove {
    position: absolute; top: var(--space-3); right: var(--space-3); z-index: 3;
    width: 36px; height: 36px; border: none; border-radius: var(--radius-pill); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--brand-bg-rgb), .7); color: var(--brand-text);
    transition: all var(--transition-fast);
}
.j2c-wishlist-card .j2c-wishlist-remove:hover { background: var(--color-danger-text); color: var(--brand-text-on-primary); }

.j2c-wishlist-card .j2c-wishlist-foot {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--brand-border);
}
.j2c-wishlist-card .j2c-wishlist-foot .btn-c { flex: 1; }
.j2c-wishlist-card .j2commerce-wishlist-item-notification { padding: 0 var(--space-5) var(--space-3); font-size: var(--text-xs); }

/* ---- CATEGORY / TERRAIN TILES ---- */
.tile {
    position:relative; border-radius: var(--radius-md); overflow:hidden; min-height: 240px;
    display:flex; align-items:flex-end; padding: var(--space-6); isolation:isolate;
    transition: transform var(--transition-base);
}
.tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform var(--transition-slow); }
.tile::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(var(--brand-bg-rgb),.1), rgba(var(--brand-bg-rgb),.85)); }
.tile:hover { transform: translateY(-4px); }
.tile:hover img { transform: scale(1.06); }
.tile .tile-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight:700; text-transform:uppercase; color: var(--brand-text-on-dark); margin:0; }
.tile .tile-meta { font-size: var(--text-sm); color: var(--brand-text-body); }

/* ---- FORMS ---- */
.form-label-c { display:block; font-family: var(--font-heading); font-size: var(--text-sm); text-transform:uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text); margin-bottom: var(--space-2); }
.form-control-c, .form-select-c, textarea.form-control-c {
    width:100%; background: var(--brand-bg); border:1px solid var(--brand-border); color: var(--brand-text);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control-c::placeholder { color: var(--brand-text-secondary); }
.form-control-c:focus, .form-select-c:focus, textarea.form-control-c:focus { outline:none; border-color: var(--brand-primary); box-shadow: var(--shadow-glow-primary); }
.form-group-c { margin-bottom: var(--space-5); }
.input-group-c { display:flex; gap: var(--space-2); }
.input-group-c .form-control-c { flex:1; }

/* ---- BADGES / CHIPS ---- */
.chip {
    display:inline-flex; align-items:center; gap: var(--space-2); font-family: var(--font-heading);
    font-size: var(--text-sm); text-transform:uppercase; letter-spacing: var(--tracking-wide);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
    border:1px solid var(--brand-border-strong); color: var(--brand-text-body); background: var(--brand-bg-card);
    cursor:pointer; transition: all var(--transition-fast);
}
.chip:hover { border-color: var(--brand-primary); color: var(--brand-primary-light); }
.chip.active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-text-on-primary); }
.badge-c { display:inline-block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing: var(--tracking-wide); padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs); }
.badge-copper { background: var(--brand-primary); color: var(--brand-text-on-primary); }
.badge-gold { background: var(--brand-secondary); color: var(--brand-text-on-light); }
.badge-outline { border:1px solid var(--brand-border-strong); color: var(--brand-text-body); }

/* ---- STATS ROW ---- */
.stats-row { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
@media (max-width: 767.98px){ .stats-row { grid-template-columns: repeat(2,1fr); } }
.stat { text-align:center; }
.stat .stat-num { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--brand-secondary); line-height:1; }
.stat .stat-label { font-size: var(--text-sm); text-transform:uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text-secondary); margin-top: var(--space-2); }

/* ---- TESTIMONIAL CARD ---- */
.testimonial { background: var(--brand-bg-card); border:1px solid var(--brand-border); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6) var(--space-6); position:relative; }
.testimonial::before { content:"\201C"; position:absolute; top: var(--space-2); left: var(--space-5); font-family: Georgia, serif; font-size: 4rem; line-height:1; color: rgba(var(--brand-primary-rgb), .35); }
.testimonial .t-stars { color: var(--color-star); margin-bottom: var(--space-3); }
.testimonial .t-quote { color: var(--brand-text-body); font-size: var(--text-base); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); }
.testimonial .t-author { display:flex; align-items:center; gap: var(--space-3); }
.testimonial .t-author img { width:48px; height:48px; border-radius: var(--radius-pill); object-fit:cover; }
.testimonial .t-name { font-family: var(--font-heading); text-transform:uppercase; color: var(--brand-text); font-size: var(--text-base); }
.testimonial .t-loc { font-size: var(--text-sm); color: var(--brand-text-secondary); }
.testimonial .t-review-images { margin-bottom: var(--space-5); }
.testimonial .t-review-image { width:56px; height:56px; object-fit:cover; border-radius: var(--radius-sm); border:1px solid var(--brand-border); cursor:pointer; transition: transform var(--transition-fast); }
.testimonial .t-review-image:hover { transform: scale(1.06); }

/* Equal-height cards. A CSS grid already stretches .testimonial to the row's
   tallest, but a swiper slide only stretches the SLIDE — the card inside still
   sizes to its own quote. Make the card a column that fills whatever box it
   lands in, and let the author row absorb the slack so short quotes don't leave
   it floating mid-card. height:auto on the slide overrides Swiper's height:100%,
   which cannot resolve against the wrapper's auto height. */
.testimonial { display:flex; flex-direction:column; }
.testimonial .t-author { margin-top:auto; }
.j2c-reviews .swiper-slide { display:flex; height:auto; }
.j2c-reviews .swiper-slide > .testimonial { flex:1 1 auto; }

/* ---- BRAND LOGO ROW ---- */
.brand-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--space-8); }
.brand-row .brand-logo { font-family: var(--font-heading); font-size: var(--text-xl); font-weight:700; text-transform:uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text-secondary); opacity:.7; transition: all var(--transition-fast); }
.brand-row .brand-logo:hover { color: var(--brand-secondary); opacity:1; }

/* ---- ACCORDION (FAQ) ---- */
.accordion-c { border-top:1px solid var(--brand-border); }
.accordion-c .acc-item { border-bottom:1px solid var(--brand-border); }
.accordion-c .acc-trigger {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--space-4);
    background:transparent; border:none; cursor:pointer; padding: var(--space-5) 0; text-align:left;
    font-family: var(--font-heading); font-size: var(--text-lg); text-transform:uppercase; color: var(--brand-text);
}
.accordion-c .acc-trigger i { color: var(--brand-primary); transition: transform var(--transition-fast); }
.accordion-c .acc-item.open .acc-trigger i { transform: rotate(45deg); }
.accordion-c .acc-panel { max-height:0; overflow:hidden; transition: max-height var(--transition-base); }
.accordion-c .acc-item.open .acc-panel { max-height: 400px; }
.accordion-c .acc-panel p { padding-bottom: var(--space-5); color: var(--brand-text-body); margin:0; }

/* ---- PAGINATION ---- */
.pagination-c { display:flex; gap: var(--space-2); justify-content:center; list-style:none; padding:0; margin: var(--space-10) 0 0; }
.pagination-c a, .pagination-c span { display:flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 var(--space-3); border:1px solid var(--brand-border); border-radius: var(--radius-sm); color: var(--brand-text); font-family: var(--font-heading); }
.pagination-c a:hover { border-color: var(--brand-primary); color: var(--brand-primary-light); }
.pagination-c .active span { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-text-on-primary); }

/* ---- CTA BAND ---- */
.cta-band { position:relative; background: var(--brand-bg-surface); border-block:1px solid var(--brand-border); text-align:center; }
.cta-band.gradient { background: linear-gradient(120deg, var(--brand-bg-surface), var(--brand-primary-subtle)); }
.cta-band .cta-inner { max-width: 760px; margin-inline:auto; }

/* ---- NEWSLETTER ---- */
.newsletter { background: var(--brand-bg-card); border:1px solid var(--brand-border-strong); border-radius: var(--radius-lg); padding: var(--space-10); text-align:center; }
.newsletter form { display:flex; gap: var(--space-2); max-width: 480px; margin: var(--space-5) auto 0; }
@media (max-width: 575.98px){ .newsletter form { flex-direction:column; } }

/* ---- FOOTER ---- */
.site-footer { background: var(--brand-bg); border-top:1px solid var(--brand-border); color: var(--brand-text-secondary); }
.site-footer .footer-main { display:grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: var(--space-8); padding-block: var(--space-16); }
@media (max-width: 991.98px){ .site-footer .footer-main { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575.98px){ .site-footer .footer-main { grid-template-columns:1fr; } }
.site-footer h6 { color: var(--brand-text); margin-bottom: var(--space-4); }
.site-footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: var(--space-2); }
.site-footer a { color: var(--brand-text-secondary); }
.site-footer a:hover { color: var(--brand-secondary); }
.footer-brand img { height:52px; margin-bottom: var(--space-4); }

/* ---- THEME-AWARE LOGO ----
   Theme is a runtime toggle on <body> (js/scripts.js), not a per-page setting,
   so the logo has to swap with it rather than be baked into the markup.
   White wordmark on the dark theme, gold/copper wordmark on the light theme.
   Both files ship; only one is ever displayed. */
.logo-theme-light { display: none; }
[data-bs-theme=light] .logo-theme-dark { display: none; }
[data-bs-theme=light] .logo-theme-light { display: block; }
.footer-social { display:flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a { width:40px; height:40px; border-radius: var(--radius-pill); border:1px solid var(--brand-border-strong); display:flex; align-items:center; justify-content:center; color: var(--brand-text); }
.footer-social a:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-text-on-primary); }
.footer-bottom { border-top:1px solid var(--brand-border); padding-block: var(--space-5); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--space-4); font-size: var(--text-sm); }
.footer-pay { display:flex; gap: var(--space-3); align-items:center; color: var(--brand-text-secondary); font-size: 1.5rem; }
.footer-dealer-cta { background: var(--brand-primary-subtle); border:1px solid var(--brand-border-strong); border-radius: var(--radius-md); padding: var(--space-5); }

/* ---- LIGHT THEME OVERRIDE (dealer portal / long-form) ---- */
.theme-light {
    --brand-bg:#F5F0EA; --brand-bg-surface:#EDE6DC; --brand-bg-alt:#E5DDD0; --brand-bg-card:#FFFFFF;
    --brand-text:#1A1612; --brand-text-body:#2B2318; --brand-text-secondary:#5A3A22; --brand-border:#D9CEBD;
    --brand-border-strong:#C9B89D;
    color: var(--brand-text-body); background: var(--brand-bg);
}

/* ---- ANIMATIONS ---- */
@media (prefers-reduced-motion: no-preference){
    .reveal { opacity:0; transform: translateY(24px); 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; }
}

/* ---- GRID HELPERS ---- */
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
.grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-8); }
@media (max-width: 991.98px){ .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575.98px){ .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; } }

/* ---- RESPONSIVE: Tablet (768px) ---- */
@media (max-width: 767.98px){
    .hero { min-height: 80vh; }
    .hero-heading { font-size: var(--text-4xl); }
    .section-head { margin-bottom: var(--space-8); }
}

/* ---- RESPONSIVE: Mobile (575px) ---- */
@media (max-width: 575.98px){
    .hero-actions { flex-direction:column; align-items:stretch; }
    .hero-actions .btn-c { width:100%; }
    .trust-bar .trust-row { gap: var(--space-4); }
}

/* ============================================
   DISPLAY TIER — Anton, the logo voice
   Declared last so it beats the earlier per-component weights
   (.tile-title 700, .pc-price 700, .brand-text 800, .display-hero 800).
   Anton has a single 400 cut; anything heavier renders as faux-bold.
   Everything NOT listed here stays on Oswald, which keeps real weights.
   ============================================ */
h1, h2, .h1, .h2,
.display-hero,
.hero-heading,
.blog-hero-heading,
.navbar-brand-c .brand-text,
.tile .tile-title,
.pc-price,
.stat .stat-num {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: var(--tracking-normal);
}

/* Opt-out: semantic h2s that are visually chrome, not display.
   Every one of these sits at --text-xl or smaller, where Anton's stroke
   closes up the counters. They keep Oswald and its real 500/600/700. */
h2.pc-name, .pc-name,
h2.panel-title, .panel-section-title,
.cart-summary-title,
.da-sidebar-title,
.faq-group-title,
.reviewer-name {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

/* ============================================
   PAGE-SPECIFIC sections appended by each mockup agent below
   ============================================ */

/* ---- cart-drawer.css $A THEME OVERRIDE (advancedcart plugin re-theme; $B mockup shim intentionally NOT ported) ---- */
/* ============================================================
   ADVANCED CART DRAWER  —  plg_j2commerce_app_advancedcart
   (the app_ plugin, NOT the deprecated plg_system_j2commerce_advancedcart)

   This file has TWO sections and they have different destinations:

   §A  THEME OVERRIDE — PORT THIS to the template.
       The plugin ships its own layout CSS (media/css/advanced_cart.css, 539
       lines) and exposes 12 --j2c-drawer-* custom properties as its themeing
       contract. Re-theming means overriding those VALUES, exactly like the
       factory's --template-* pattern. Do not restate the plugin's layout.

   §B  MOCKUP SHIM — DO NOT PORT.
       The plugin's stylesheet does not exist in a static mockup, so §B
       reproduces just enough of its layout for the drawer to demonstrate.
       On the real site the plugin provides all of it and §B must be dropped,
       or it will fight the plugin and break on update.
   ============================================================ */


/* ============================================================
   §A  THEME OVERRIDE  —  PORT THIS
   ============================================================ */

/* ⚠️ SPECIFICITY — do not lower these selectors.
   advanced_cart.css is registered by the plugin during rendering, so it loads
   AFTER template.css. The plugin declares its 12 --j2c-drawer-* properties on
   `.j2c-drawer` — the same specificity a bare `.j2c-drawer` override here would
   have — so on a source-order tie the plugin wins and the drawer renders in its
   shipped light palette (white panel, #374151 text) on top of our dark page.
   Scoping to the wrapper id lifts these to (1,1,0) so they win on merit rather
   than on load order, which also survives the plugin being re-registered
   earlier or later in a future release. */

#j2c-advanced-cart .j2c-drawer {
    --j2c-drawer-width: 420px;
    --j2c-drawer-bg: var(--brand-bg-card);
    --j2c-drawer-text: var(--brand-text-body);
    --j2c-drawer-border: var(--brand-border);
    --j2c-drawer-muted: var(--brand-text-secondary);
    --j2c-drawer-hover-bg: var(--brand-bg-elevated);
    --j2c-drawer-close-color: var(--brand-text-secondary);
    --j2c-drawer-close-hover: var(--brand-primary);
    --j2c-drawer-overlay-opacity: 0.72;
    --j2c-progress-bg: var(--brand-bg-elevated);
    --j2c-progress-fill: var(--brand-primary);
    --j2c-progress-complete: var(--brand-secondary);
}

/* Every value below is a token, so the light theme flips with the rest of the
   site when [data-bs-theme="light"] is set on <body> — no second palette. */

#j2c-advanced-cart .j2c-drawer {
    background: var(--brand-bg-card);
    color: var(--brand-text-body);
    border-inline-start: 1px solid var(--brand-border);
    box-shadow: -12px 0 32px rgb(0 0 0 / 45%);
}

#j2c-advanced-cart .j2c-drawer-header,
#j2c-advanced-cart .j2c-drawer-footer,
#j2c-advanced-cart .j2c-drawer-totals,
#j2c-advanced-cart .j2c-drawer-grandtotal,
#j2c-advanced-cart .j2c-drawer-item,
#j2c-advanced-cart .j2c-drawer-item-thumb,
#j2c-advanced-cart .j2c-qty-wrap {
    border-color: var(--brand-border);
}

#j2c-advanced-cart .j2c-drawer-header,
#j2c-advanced-cart .j2c-drawer-footer {
    background: var(--brand-bg-elevated);
}

#j2c-advanced-cart .j2c-drawer-item-attrs,
#j2c-advanced-cart .j2c-total-label,
#j2c-advanced-cart .j2c-drawer-empty {
    color: var(--brand-text-secondary);
}

/* Close control and the "continue shopping" link read as the same quiet tier. */
#j2c-advanced-cart .j2c-drawer-close,
#j2c-advanced-cart .j2c-continue-link {
    color: var(--brand-text-secondary);
    background: none;
    border: 0;
}

#j2c-advanced-cart .j2c-drawer-close:hover,
#j2c-advanced-cart .j2c-drawer-close:focus-visible,
#j2c-advanced-cart .j2c-continue-link:hover,
#j2c-advanced-cart .j2c-continue-link:focus-visible {
    color: var(--brand-primary);
}

/* Quantity control — matches the .qty-stepper pair on the product page. */
#j2c-advanced-cart .j2c-qty-wrap {
    border: 1px solid var(--brand-border);
    background: var(--brand-bg-elevated);
}

#j2c-advanced-cart .j2c-qty-btn {
    color: var(--brand-text-secondary);
    background: none;
    border: 0;
}

#j2c-advanced-cart .j2c-qty-btn:hover {
    background: var(--brand-primary);
    color: var(--brand-text-on-primary);
}

#j2c-advanced-cart .j2c-qty-input {
    background: var(--brand-bg-elevated);
    color: var(--brand-text);
    border: 0;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

#j2c-advanced-cart .j2c-qty-input::-webkit-outer-spin-button,
#j2c-advanced-cart .j2c-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* The plugin hardcodes #ef4444; use the palette's own danger so the red sits in
   the same family as the rest of the site. */
#j2c-advanced-cart .j2c-remove-item,
#j2c-advanced-cart .j2c-clear-cart {
    color: var(--color-danger);
    background: none;
    border: 0;
}

#j2c-advanced-cart .j2c-remove-item:hover,
#j2c-advanced-cart .j2c-clear-cart:hover {
    color: var(--brand-primary);
}

#j2c-advanced-cart .j2c-coupon-toggle,
#j2c-advanced-cart .j2c-voucher-toggle {
    color: var(--brand-primary-light);
}

#j2c-advanced-cart .j2c-coupon-toggle:hover,
#j2c-advanced-cart .j2c-voucher-toggle:hover {
    color: var(--brand-primary);
}

#j2c-advanced-cart .j2c-coupon-input-wrap input,
#j2c-advanced-cart .j2c-voucher-input-wrap input {
    background: var(--brand-bg-elevated);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
}

#j2c-advanced-cart .j2c-coupon-input-wrap input::placeholder,
#j2c-advanced-cart .j2c-voucher-input-wrap input::placeholder {
    color: var(--brand-text-secondary);
}

#j2c-advanced-cart .j2c-coupon-input-wrap input:focus,
#j2c-advanced-cart .j2c-voucher-input-wrap input:focus {
    outline: none;
    border-color: var(--brand-primary);
}

/* Bootstrap btn-secondary greys these; make them read as the drawer's own. */
#j2c-advanced-cart .j2c-apply-coupon,
#j2c-advanced-cart .j2c-apply-voucher {
    background: transparent;
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);
}

#j2c-advanced-cart .j2c-apply-coupon:hover,
#j2c-advanced-cart .j2c-apply-voucher:hover {
    background: var(--brand-primary);
    color: var(--brand-text-on-primary);
}

/* Typography tiers — the plugin sets no font-family, so this puts the drawer on
   the same display/heading system as the rest of the site. */
#j2c-advanced-cart .j2c-drawer-title,
#j2c-advanced-cart .j2c-drawer-item-name,
#j2c-advanced-cart .j2c-total-label {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
}

#j2c-advanced-cart .j2c-total-label {
    color: var(--brand-text-secondary);
}

#j2c-advanced-cart .j2c-drawer-item-count {
    color: var(--brand-primary);
}

#j2c-advanced-cart .j2c-drawer-item-total,
#j2c-advanced-cart .j2c-total-value,
#j2c-advanced-cart .j2c-grandtotal-value {
    font-family: var(--font-display);
    font-weight: 400;                /* Anton ships a single 400 cut */
    color: var(--brand-text);
}

/* The plugin hardcodes a #010156 navy here, which is the single most
   out-of-place element in the drawer. */
#j2c-advanced-cart .j2c-drawer-btn-checkout {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    background: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    color: var(--brand-text-on-primary);
    border-radius: var(--radius-sm);
}

#j2c-advanced-cart .j2c-drawer-btn-checkout:hover,
#j2c-advanced-cart .j2c-drawer-btn-checkout:focus-visible {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--brand-text);
}

/* Bootstrap's .btn-close is a black SVG mask — invisible on a dark panel. */
#j2c-advanced-cart .j2c-drawer-alert-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.75;
}

[data-bs-theme="light"] #j2c-advanced-cart .j2c-drawer-alert-close {
    filter: none;
}

#j2c-advanced-cart .j2c-drawer-payment-icons img {
    background: var(--brand-text);
    border-radius: 2px;
    padding: 1px;
}

/* The unscoped .j2c-* rules that used to live here were superseded by the
   #j2c-advanced-cart block above — they lost every source-order tie against
   advanced_cart.css, which is exactly the bug that block documents. */

/* ⚠️ PLUGIN BUG WORKAROUND — keep this in the template override.
   drawer.php renders the alert bar with BOTH the `hidden` attribute and
   Bootstrap's `d-flex`. `.d-flex{display:flex!important}` beats the UA
   stylesheet's `[hidden]{display:none}`, so the alert shows as an empty
   coloured band every time the drawer opens, on any Bootstrap 5 site.
   Reported upstream; this restores the intended behaviour meanwhile. */
.j2c-drawer-alert[hidden] { display: none !important; }

/* And put the alert on our palette rather than Bootstrap's yellow. */
.j2c-drawer-alert {
    background: var(--color-warning-bg, var(--brand-bg-card));
    border: 0;
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-text);
}

/* Toggle badge — mod_j2commerce_advancedcart_toggle renders its own inline
   background colour from a module param, so set that param to the copper in
   the module, not here. This only aligns the badge with our pill radius. */
.j2c-cart-toggle-badge { border-radius: var(--radius-pill); }

/* Header wishlist control — visual twin of .j2c-cart-toggle so the two icons
   sit as a matched pair in .nav-actions. */
.j2c-wishlist-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    padding: var(--space-2);
    background: none;
    border: 0;
    color: inherit;
    font-size: var(--text-base);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.j2c-wishlist-toggle:hover,
.j2c-wishlist-toggle:focus-visible {
    color: var(--brand-primary);
    text-decoration: none;
}

.j2c-wishlist-toggle-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 0.3rem;
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border-radius: var(--radius-pill);
    transform: translate(5px, -5px);
}


/* ============================================================

/* ---- pages/account.css ---- */
/* ============================================================
   INVICTA WHOLESALE TIRE — Page: Account Dashboard
   Scoped to .page-account. Dark-first, copper/gold palette.
   ZERO hardcoded hex — use var() throughout.
   ============================================================ */

/* ---- ACCOUNT HEADER BAND ---- */
.page-account .account-header-band {
    background: var(--brand-bg-surface);
    border-bottom: 1px solid var(--brand-border);
    padding-block: var(--space-8) var(--space-10);
    position: relative;
    overflow: hidden;
}
.page-account .account-header-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .08) 0%, transparent 60%);
    pointer-events: none;
}
.page-account .account-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    position: relative;
}
.page-account .account-header-avatar {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-pill);
    background: var(--brand-bg-elevated);
    border: 2px solid var(--brand-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary-light);
    font-size: 1.75rem;
    flex-shrink: 0;
}
.page-account .account-header-info {
    flex: 1;
    min-width: 0;
}
.page-account .account-header-greeting {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-heading);
    margin: 0;
}
.page-account .account-header-name {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
    color: var(--brand-text);
    margin: var(--space-0-5) 0 var(--space-1);
}
.page-account .account-header-sub {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    margin: 0;
}
.page-account .account-header-sub .text-gold {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.page-account .account-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}
.page-account .account-logout-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    transition: color var(--transition-fast);
}
.page-account .account-logout-link:hover {
    color: var(--color-danger-text);
}
@media (max-width: 767.98px) {
    .page-account .account-header-inner {
        flex-wrap: wrap;
        gap: var(--space-4);
    }
    .page-account .account-header-actions {
        width: 100%;
        margin-top: var(--space-2);
    }
    .page-account .account-header-name {
        font-size: var(--text-2xl);
    }
}

/* ---- ACCOUNT MAIN LAYOUT ---- */
.page-account .account-main {
    min-height: 60vh;
}
.page-account .account-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-10);
    align-items: start;
}
@media (max-width: 991.98px) {
    .page-account .account-layout {
        grid-template-columns: 200px 1fr;
        gap: var(--space-6);
    }
}
@media (max-width: 767.98px) {
    .page-account .account-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* ---- GENERIC LEFT/RIGHT SIDEBAR (category & detail Template-tab sidebar) ---- */
.tmpl-sidebar-sticky {
    position: sticky;
    top: calc(76px + var(--space-6));
}
@media (max-width: 991.98px) {
    .tmpl-sidebar-sticky {
        position: static;
    }
}

/* ---- ACCOUNT SIDEBAR ---- */
.page-account .account-sidebar {
    position: sticky;
    top: calc(76px + var(--space-6));
}
.page-account .account-nav, #accountOffcanvas .account-nav {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.page-account .account-nav-item, #accountOffcanvas .account-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    transition: all var(--transition-fast);
    text-decoration: none;
    position: relative;
}
.page-account .account-nav-item i:first-child, #accountOffcanvas .account-nav-item i:first-child,
.page-account .account-nav-item .account-nav-icon, #accountOffcanvas .account-nav-item .account-nav-icon {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}
/* Only the LABEL absorbs the free space. The icon and the trailing chevron are
   spans too now, so both must be excluded or they stretch and eat the row. */
.page-account .account-nav-item span:not(.account-nav-icon):not(.account-nav-arrow),
#accountOffcanvas .account-nav-item span:not(.account-nav-icon):not(.account-nav-arrow) {
    flex: 1;
}
.page-account .account-nav-item:hover, #accountOffcanvas .account-nav-item:hover {
    background: var(--brand-bg-elevated);
    color: var(--brand-text);
    border-left-color: var(--brand-border-strong);
}
.page-account .account-nav-item:hover i:first-child, #accountOffcanvas .account-nav-item:hover i:first-child,
.page-account .account-nav-item:hover .account-nav-icon, #accountOffcanvas .account-nav-item:hover .account-nav-icon {
    color: var(--brand-primary-light);
}
.page-account .account-nav-item.active, #accountOffcanvas .account-nav-item.active {
    background: var(--brand-primary-subtle);
    color: var(--brand-primary-light);
    border-left-color: var(--brand-primary);
    font-weight: var(--weight-semibold);
}
.page-account .account-nav-item.active i:first-child, #accountOffcanvas .account-nav-item.active i:first-child,
.page-account .account-nav-item.active .account-nav-icon, #accountOffcanvas .account-nav-item.active .account-nav-icon {
    color: var(--brand-primary-light);
}
.page-account .account-nav-arrow, #accountOffcanvas .account-nav-arrow {
    font-size: 0.65rem;
    color: var(--brand-text-secondary);
    margin-left: auto;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}
.page-account .account-nav-item.active .account-nav-arrow, #accountOffcanvas .account-nav-item.active .account-nav-arrow {
    color: var(--brand-primary-light);
}
.page-account .account-nav-badge, #accountOffcanvas .account-nav-badge {
    min-width: 20px;
    height: 20px;
    padding-inline: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: var(--brand-text-on-primary);
    font-size: 11px;
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    margin-right: var(--space-1);
}
.page-account .account-nav-divider, #accountOffcanvas .account-nav-divider {
    height: 1px;
    background: var(--brand-border);
    margin: var(--space-1) 0;
}
.page-account .account-nav-logout, #accountOffcanvas .account-nav-logout {
    color: var(--brand-text-secondary);
    border-top: 1px solid var(--brand-border);
    margin-top: var(--space-1);
}
.page-account .account-nav-logout:hover, #accountOffcanvas .account-nav-logout:hover {
    color: var(--color-danger-text);
    background: var(--color-danger-bg);
    border-left-color: var(--color-danger);
}
.page-account .account-mobile-select-wrapper {
    display: none;
}
@media (max-width: 767.98px) {
    .page-account .account-nav {
        display: none;
    }
    .page-account .account-sidebar {
        position: static;
    }
    .page-account .account-mobile-select-wrapper {
        display: block;
    }
}

/* ---- ACCOUNT PANELS ---- */
.page-account .account-panels {
    min-width: 0;
}
.page-account .account-panel {
    display: none;
}
.page-account .account-panel.active {
    display: block;
}

/* ---- PANEL COMMON ---- */
.page-account .panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}
.page-account .panel-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
    color: var(--brand-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.page-account .panel-title i {
    color: var(--brand-primary-light);
    font-size: 1.25rem;
}
.page-account .panel-sub {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    margin: var(--space-2) 0 0;
    width: 100%;
}
.page-account .panel-section {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-6);
}
.page-account .panel-section-header {
    padding: var(--space-4) var(--space-6);
    background: var(--brand-bg-elevated);
    border-bottom: 1px solid var(--brand-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.page-account .panel-section-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin: 0;
}

/* ---- DASHBOARD CARDS ---- */
.page-account .dashboard-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}
@media (max-width: 1099.98px) {
    .page-account .dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575.98px) {
    .page-account .dashboard-cards {
        grid-template-columns: 1fr;
    }
}
.page-account .dash-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.page-account .dash-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}
.page-account .dash-card-order::before { background: var(--brand-primary); }
.page-account .dash-card-savings::before { background: var(--brand-secondary); }
.page-account .dash-card-wishlist::before { background: var(--color-danger); }
.page-account .dash-card:hover {
    border-color: var(--brand-border-strong);
    box-shadow: var(--shadow-md);
}
.page-account .dash-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--brand-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.page-account .dash-card-order .dash-card-icon { color: var(--brand-primary-light); }
.page-account .dash-card-savings .dash-card-icon { color: var(--brand-secondary); }
.page-account .dash-card-wishlist .dash-card-icon { color: var(--color-danger-text); }
.page-account .dash-card-body {
    flex: 1;
}
.page-account .dash-card-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-text-secondary);
    margin: 0 0 var(--space-1);
}
.page-account .dash-card-value {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--brand-text);
    margin: 0 0 var(--space-1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
}
.page-account .dash-card-sub {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    margin: 0;
}
.page-account .dash-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-primary-light);
    font-weight: var(--weight-semibold);
    transition: gap var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.page-account .dash-card-link:hover {
    color: var(--brand-secondary);
    gap: var(--space-3);
}
.page-account .dash-card-eyebrow {
    font-size: var(--text-xs);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
}

/* ---- ORDERS TABLE ---- */
.page-account .orders-filter-bar {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.page-account .orders-search {
    flex: 1;
    min-width: 200px;
    position: relative;
}
.page-account .orders-search i {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-text-secondary);
    font-size: var(--text-sm);
    pointer-events: none;
}
.page-account .orders-search .form-control-c {
    padding-left: calc(var(--space-4) + 1.2rem + var(--space-2));
}
.page-account .orders-filter-select {
    min-width: 160px;
    flex-shrink: 0;
}
.page-account .account-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--brand-border);
}
.page-account .account-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.page-account .account-table thead {
    background: var(--brand-bg-elevated);
    border-bottom: 1px solid var(--brand-border);
}
.page-account .account-table th {
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-text-secondary);
    white-space: nowrap;
    text-align: left;
}
.page-account .account-table td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-text-body);
    vertical-align: middle;
}
.page-account .account-table tbody tr:last-child td {
    border-bottom: none;
}
.page-account .account-table tbody tr {
    background: var(--brand-bg-card);
    transition: background var(--transition-fast);
}
.page-account .account-table tbody tr:hover {
    background: var(--brand-bg-elevated);
}
.page-account .order-num {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    color: var(--brand-text);
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-sm);
    white-space: nowrap;
}
.page-account .invoice-num {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--brand-text);
    white-space: nowrap;
}
.page-account .order-date {
    color: var(--brand-text-secondary);
    white-space: nowrap;
}
.page-account .order-total {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--brand-text);
    white-space: nowrap;
}
.page-account .order-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}
.page-account .order-items-col {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.page-account .order-thumbs {
    display: flex;
    gap: var(--space-1);
}
.page-account .order-thumbs img {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--brand-border);
    background: var(--brand-bg-elevated);
}
.page-account .order-items-count {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    white-space: nowrap;
}

/* ---- ORDER STATUS BADGES ---- */
.page-account .order-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 3px var(--space-3);
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
}
.page-account .status-processing {
    background: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid var(--color-info);
}
.page-account .status-shipped {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning);
}
.page-account .status-delivered {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success);
}
.page-account .status-cancelled {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger);
}
.page-account .status-paid {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success);
}

/* Bootstrap badge classes arriving from J2htmlHelper::badgeClass(orderstatus_cssclass) —
   badge_style="atum" strips "text-" to "bg-*"; badge_style="j2commerce" (this store's
   setting) keeps "text-bg-*". No --color-primary-*/--color-secondary-* tokens exist in
   colors.css, so DELIVERED (text-bg-primary) reuses the info tokens and CANCELLED
   (text-bg-secondary) gets a neutral pill from the existing brand-* tokens. */
.page-account .order-status.bg-success, .page-account .order-status.text-bg-success {
    background: var(--color-success-bg) !important;
    color: var(--color-success-text) !important;
    border: 1px solid var(--color-success);
}
.page-account .order-status.bg-info, .page-account .order-status.text-bg-info {
    background: var(--color-info-bg) !important;
    color: var(--color-info-text) !important;
    border: 1px solid var(--color-info);
}
.page-account .order-status.bg-danger, .page-account .order-status.text-bg-danger {
    background: var(--color-danger-bg) !important;
    color: var(--color-danger-text) !important;
    border: 1px solid var(--color-danger);
}
.page-account .order-status.bg-warning, .page-account .order-status.text-bg-warning {
    background: var(--color-warning-bg) !important;
    color: var(--color-warning-text) !important;
    border: 1px solid var(--color-warning);
}
.page-account .order-status.bg-primary, .page-account .order-status.text-bg-primary {
    background: var(--color-info-bg) !important;
    color: var(--color-info-text) !important;
    border: 1px solid var(--color-info);
}
.page-account .order-status.bg-secondary, .page-account .order-status.text-bg-secondary {
    background: var(--brand-bg-elevated) !important;
    color: var(--brand-text-secondary) !important;
    border: 1px solid var(--brand-border-strong);
}

/* ---- WISHLIST GRID ---- */
.page-account .pc-price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-block: var(--space-2);
}
.page-account .wish-card-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.page-account .wish-card-actions .btn-c-block {
    flex: 1;
}

/* ---- ADDRESS CARDS ---- */
.page-account .address-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
}
.page-account .address-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: border-color var(--transition-fast);
}
.page-account .address-card-default {
    border-color: var(--brand-primary);
}
.page-account .address-card:hover {
    border-color: var(--brand-border-strong);
}
.page-account .address-card-default:hover {
    border-color: var(--brand-primary-light);
}
.page-account .address-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.page-account .address-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
}
.page-account .address-body {
    flex: 1;
}
.page-account .address-body p {
    margin: 0;
    line-height: var(--leading-snug);
    font-size: var(--text-sm);
    color: var(--brand-text-body);
}
.page-account .address-name {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text) !important;
    margin-bottom: var(--space-2) !important;
}
.page-account .address-phone {
    margin-top: var(--space-2) !important;
    color: var(--brand-text-secondary) !important;
}
.page-account .address-card-actions {
    display: flex;
    gap: var(--space-2);
    border-top: 1px solid var(--brand-border);
    padding-top: var(--space-4);
    flex-wrap: wrap;
}
.page-account .address-delete-btn {
    color: var(--color-danger-text);
}
.page-account .address-delete-btn:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}
.page-account .address-add-card {
    border-style: dashed;
    border-color: var(--brand-border-strong);
}

/* ---- ADDRESS FORM ---- */
.page-account .address-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.page-account .address-form .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.page-account .address-form .form-row-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 575.98px) {
    .page-account .address-form .form-row-2,
    .page-account .address-form .form-row-3 {
        grid-template-columns: 1fr;
    }
}
.page-account .address-form-actions {
    display: flex;
    gap: var(--space-3);
}

/* The address fields are built by CustomFieldHelper::renderField(), which hardcodes
   Bootstrap's .form-label/.form-control/.form-select. Its zone (country/state) and
   telephone branches forward no extra class at all, so those four controls cannot be
   handed .form-control-c from the layout — the input skin has to reach them by
   selector instead. Scoped to .address-form so nothing outside the account form moves. */
.page-account .address-form .form-control,
.page-account .address-form .form-select {
    width: 100%;
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.page-account .address-form .form-control::placeholder {
    color: var(--brand-text-secondary);
}
.page-account .address-form .form-control:focus,
.page-account .address-form .form-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-glow-primary);
}
.page-account .address-form .form-label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}

/* ---- SETTINGS SECTIONS ---- */
.page-account .settings-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.page-account .settings-form {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.page-account .settings-form .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 575.98px) {
    .page-account .settings-form .form-row-2 {
        grid-template-columns: 1fr;
    }
}
.page-account .settings-form-actions {
    margin-top: var(--space-2);
    display: flex;
    gap: var(--space-3);
}

/* ---- NOTIFICATION TOGGLES ---- */
.page-account .notif-list {
    padding: var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column;
}
.page-account .notif-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--brand-border);
    cursor: pointer;
}
.page-account .notif-item:last-child {
    border-bottom: none;
}
.page-account .notif-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.page-account .notif-label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
}
.page-account .notif-desc {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
}
.page-account .notif-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--brand-bg-elevated);
    border: 2px solid var(--brand-border-strong);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-base);
}
.page-account .notif-toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    background: var(--brand-text-secondary);
    transition: all var(--transition-base);
}
.page-account .notif-toggle:checked {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}
.page-account .notif-toggle:checked::after {
    left: calc(100% - 18px);
    background: var(--brand-text-on-primary);
}

/* ---- DANGER ZONE ---- */
.page-account .panel-section-danger .panel-section-header {
    border-color: var(--color-danger);
}
.page-account .panel-section-danger {
    border-color: rgba(var(--color-danger-rgb), .35);
}
.page-account .settings-danger-desc {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    padding: var(--space-4) var(--space-6) 0;
    margin: 0;
}
.page-account .settings-delete-btn {
    margin: var(--space-4) var(--space-6) var(--space-5);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger);
    background: var(--color-danger-bg);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--transition-fast);
}
.page-account .settings-delete-btn:hover {
    background: var(--color-danger);
    color: var(--brand-text-on-primary);
}

/* ---- FORM NOTE OVERRIDE (success state) ---- */
.page-account [data-form-note] {
    padding: var(--space-3) var(--space-5);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-sm);
    color: var(--color-success-text);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.page-account [data-form-note]::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    flex-shrink: 0;
}

/* ---- RESPONSIVE: mobile panel collapse ---- */
@media (max-width: 767.98px) {
    .page-account .panel-title {
        font-size: var(--text-xl);
    }
    .page-account .dashboard-cards {
        gap: var(--space-4);
    }
    .page-account .account-table th,
    .page-account .account-table td {
        padding: var(--space-3) var(--space-4);
    }
    .page-account .order-items-col {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
    .page-account .address-cards {
        grid-template-columns: 1fr;
    }
    .page-account .settings-form {
        padding: var(--space-5) var(--space-4);
    }
    .page-account .notif-list {
        padding-inline: var(--space-4);
    }
    .page-account .panel-section-header {
        padding-inline: var(--space-4);
    }
}
@media (max-width: 575.98px) {
    .page-account .account-table .order-items-col {
        display: none;
    }
    .page-account .orders-filter-bar {
        flex-direction: column;
    }
}

/* ---- pages/contact.css ---- */
/* ============================================================
   INVICTA WHOLESALE TIRE — Contact Page
   Scoped: .page-contact  |  Target: 110–220 lines
   Covers: hero, two-column contact layout, map placeholder,
   support options grid, dealer callout band, FAQ accordion.
   All values via var() — zero hardcoded hex.
   ============================================================ */

/* ---- TWO-COLUMN CONTACT LAYOUT ---- */
.page-contact .contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
}
@media (max-width: 991.98px) {
    .page-contact .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* ---- CONTACT FORM CARD ---- */
.page-contact .contact-form-wrap .card-c {
    padding: var(--space-8);
}
.page-contact .contact-form-wrap .card-c h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}
.page-contact .contact-form-wrap .card-c .form-lead {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    margin-bottom: var(--space-6);
    line-height: var(--leading-relaxed);
}
.page-contact .contact-form-wrap .form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 575.98px) {
    .page-contact .contact-form-wrap .form-row-split {
        grid-template-columns: 1fr;
    }
    .page-contact .contact-form-wrap .card-c {
        padding: var(--space-5);
    }
}

/* form note / success message */
.page-contact [data-form-note] {
    display: none;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: rgba(var(--brand-success-rgb, 34 197 94), .12);
    border: 1px solid rgba(var(--brand-success-rgb, 34 197 94), .35);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--brand-success, #22c55e);
    margin-top: var(--space-5);
}
.page-contact [data-form-note] i {
    font-size: var(--text-lg);
    flex-shrink: 0;
}

/* ---- CONTACT DETAILS CARD ---- */
.page-contact .contact-details-wrap .card-c {
    padding: var(--space-8);
}
@media (max-width: 575.98px) {
    .page-contact .contact-details-wrap .card-c {
        padding: var(--space-5);
    }
}
.page-contact .contact-details-wrap h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-6);
}

/* detail rows */
.page-contact .detail-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--brand-border);
}
.page-contact .detail-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.page-contact .detail-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-primary-rgb), .12);
    border: 1px solid rgba(var(--brand-primary-rgb), .3);
    border-radius: var(--radius-sm);
    color: var(--brand-primary);
    font-size: var(--text-base);
}
.page-contact .detail-body strong {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-1);
}
.page-contact .detail-body span,
.page-contact .detail-body a {
    font-size: var(--text-sm);
    color: var(--brand-text-body);
    line-height: var(--leading-snug);
    display: block;
}
.page-contact .detail-body a:hover {
    color: var(--brand-primary-light);
}

/* quick links list */
.page-contact .quick-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.page-contact .quick-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--brand-text-body);
    transition: color var(--transition-fast);
}
.page-contact .quick-links a i {
    color: var(--brand-primary);
    font-size: var(--text-xs);
    width: 14px;
}
.page-contact .quick-links a:hover {
    color: var(--brand-primary-light);
}

/* map placeholder — shared sizing (fallback icon+label card AND the live
   Leaflet map share the id/class pair, see contact/default.php) */
.page-contact .map-placeholder {
    width: 100%;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-6);
}
/* fallback: icon + label, shown only when geocoding is unavailable */
.page-contact .map-placeholder:not(.leaflet-map-container) {
    aspect-ratio: 16 / 7;
    background: var(--brand-bg-elevated);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--brand-text-secondary);
}
.page-contact .map-placeholder:not(.leaflet-map-container) i {
    font-size: 2.5rem;
    color: var(--brand-border-strong);
}
.page-contact .map-placeholder:not(.leaflet-map-container) span {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
}
/* live map: Leaflet renders its own canvas, so no flex centering here */
.page-contact .map-placeholder.leaflet-map-container {
    display: block;
    min-height: 260px;
}

/* ---- CORE com_contact FORM + ADDRESS RESKIN ----
   default_form.php / default_address.php are core Joomla templates
   (loaded via $this->loadTemplate()) and are never hand-rolled — CSS
   targets their real wrapper classes (.control-group/.control-label/
   .controls from layouts/joomla/form/renderfield.php, and the plain
   dl.dl-horizontal from default_address.php) instead. */
.page-contact .contact-form-wrap .com-contact__form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-2);
}
.page-contact .contact-form-wrap .com-contact__form legend {
    display: none;
}
.page-contact .contact-form-wrap .com-contact__form .control-group {
    margin-bottom: var(--space-5);
}
.page-contact .contact-form-wrap .com-contact__form .control-label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}
.page-contact .contact-form-wrap .com-contact__form .controls input,
.page-contact .contact-form-wrap .com-contact__form .controls textarea,
.page-contact .contact-form-wrap .com-contact__form .controls select {
    width: 100%;
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.page-contact .contact-form-wrap .com-contact__form .controls input:focus,
.page-contact .contact-form-wrap .com-contact__form .controls textarea:focus,
.page-contact .contact-form-wrap .com-contact__form .controls select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-glow-primary);
}
.page-contact .contact-form-wrap .com-contact__form .controls input[type="checkbox"] {
    width: auto;
}
.page-contact .contact-form-wrap .com-contact__form button.btn-primary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
    border: 2px solid var(--brand-primary);
    background: var(--brand-primary);
    color: var(--brand-text-on-primary);
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}
.page-contact .contact-form-wrap .com-contact__form button.btn-primary:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.page-contact .contact-details-wrap .com-contact__address {
    margin: 0 0 var(--space-5);
}
.page-contact .contact-details-wrap .com-contact__address dt {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-top: var(--space-3);
}
.page-contact .contact-details-wrap .com-contact__address dt:first-child {
    margin-top: 0;
}
.page-contact .contact-details-wrap .com-contact__address dd {
    font-size: var(--text-sm);
    color: var(--brand-text-body);
    margin: 0;
}

/* ---- SUPPORT OPTIONS GRID ---- */
.support-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-7) var(--space-6);
    text-align: center;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.support-card:hover {
    border-color: var(--brand-primary-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
.support-card .support-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--brand-primary-rgb), .12);
    border: 1px solid rgba(var(--brand-primary-rgb), .3);
    color: var(--brand-primary);
    font-size: var(--text-xl);
}
.support-card h3,
.page-legal .support-card h2 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}
.support-card p {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}
/* ---- TRUST BAR CARDS (mod_j2commerce_tools trustbanner override) ---- */
.trust-bar .support-card {
    padding: 1rem;
}

/* ---- POLICIES GRID (category 9 via html/com_content/category/policies.php) ---- */
.page-legal .support-card {
    display: flex;
    flex-direction: column;
}
.page-legal .support-card h2 a {
    color: inherit;
    text-decoration: none;
}
.page-legal .support-card h2 a:hover {
    color: var(--brand-primary);
}
.page-legal .support-card p {
    flex: 1 1 auto;
}
.page-legal .support-card .support-cta {
    align-self: center;
}

.support-card .support-meta {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-secondary);
}
.avail-dot {
    color: var(--color-success);
    font-size: .5rem;
    vertical-align: middle;
}

/* ---- FAQ SECTION ---- */
.page-contact .contact-faq .section-head {
    margin-bottom: var(--space-8);
}
.page-contact .contact-faq .acc-max-width {
    max-width: 800px;
    margin: 0 auto;
}

/* ---- RESPONSIVE TWEAKS ---- */
@media (max-width: 767.98px) {
    .page-contact .support-card,
    .page-legal .support-card {
        padding: var(--space-5) var(--space-5);
    }
}

/* ---- pages/homepage.css ---- */
/* ============================================================
   INVICTA WHOLESALE TIRE — Homepage Page Styles
   Scope: every rule prefixed .page-homepage
   Tokens from copper.css / styles.css — ZERO hardcoded hex.
   ============================================================ */

/* ---- HERO (transparent navbar offset) ---- */
.page-homepage .hero {
    min-height: 100vh;
    padding-top: 0;
}

.page-homepage .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(var(--brand-bg-rgb), .96) 0%,
        rgba(var(--brand-bg-rgb), .82) 42%,
        rgba(var(--brand-bg-rgb), .28) 100%
    );
}

.page-homepage .hero .hero-inner {
    padding-top: calc(76px + 40px);
    padding-bottom: var(--space-32);
}

.page-homepage .hero-heading {
    font-size: var(--text-6xl);
    max-width: 14ch;
}

.page-homepage .hero-sub {
    max-width: 48ch;
    font-size: var(--text-lg);
}

.page-homepage .hero-badge-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
}

.page-homepage .hero-badge-row i {
    color: var(--brand-secondary);
}

@media (max-width: 767.98px) {
    .page-homepage .hero {
        min-height: 90vh;
    }
    .page-homepage .hero .hero-inner {
        padding-top: calc(76px + 40px + var(--space-8));
        padding-bottom: var(--space-24);
    }
    .page-homepage .hero-heading {
        font-size: var(--text-4xl);
    }
}

/* ---- FITMENT FINDER — overlaps hero bottom ---- */
.page-homepage .fitment-finder-wrap {
    margin-top: calc(-1 * var(--space-16));
    position: relative;
    z-index: var(--z-raised);
    padding-bottom: var(--space-12);
}

@media (max-width: 767.98px) {
    .page-homepage .fitment-finder-wrap {
        margin-top: calc(-1 * var(--space-8));
    }
}

.ff-quick-links {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

.ff-quick-links a,
.ff-quick-links button {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: color var(--transition-fast);
}

.ff-quick-links a:hover,
.ff-quick-links button:hover:not(:disabled) {
    color: var(--brand-secondary);
}

.ff-quick-links button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.ff-quick-links button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ff-quick-links a i,
.ff-quick-links a span[class*="fa-"],
.ff-quick-links button span[class*="fa-"] {
    font-size: .75rem;
    color: var(--brand-primary);
}

/* ---- TRUST BAR ---- */
.page-homepage .trust-bar {
    background: var(--brand-bg-surface);
}

/* ---- VEHICLE CLASS TILES ---- */
/* Two classes since the Golf Cart category was pulled -- no golf-cart product
   exists in the range. Restore repeat(3, 1fr) if that line is ever added.
   Also scoped to .page-shop: the /shop category-cards band (com_j2commerce
   categories_tires override) reuses this exact tile design — see
   templates/tires/html/com_j2commerce/templates/categories_tires/default.php. */
.page-homepage .vehicle-tiles,
.page-shop .vehicle-tiles,
.page-guides .vehicle-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.page-homepage .vehicle-tile,
.page-shop .vehicle-tile,
.page-guides .vehicle-tile {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    padding: var(--space-7) var(--space-6) var(--space-6);
    isolation: isolate;
    text-decoration: none;
    transition: transform var(--transition-base);
}

.page-homepage .vehicle-tile img,
.page-shop .vehicle-tile img,
.page-guides .vehicle-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform var(--transition-slow);
}

.page-homepage .vehicle-tile::after,
.page-shop .vehicle-tile::after,
.page-guides .vehicle-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(var(--brand-bg-rgb), .08) 0%,
        rgba(var(--brand-bg-rgb), .75) 55%,
        rgba(var(--brand-bg-rgb), .92) 100%
    );
    transition: background var(--transition-base);
}

.page-homepage .vehicle-tile:hover,
.page-shop .vehicle-tile:hover,
.page-guides .vehicle-tile:hover {
    transform: translateY(-5px);
}

.page-homepage .vehicle-tile:hover img,
.page-shop .vehicle-tile:hover img,
.page-guides .vehicle-tile:hover img {
    transform: scale(1.07);
}

.page-homepage .vehicle-tile:hover::after,
.page-shop .vehicle-tile:hover::after,
.page-guides .vehicle-tile:hover::after {
    background: linear-gradient(
        180deg,
        rgba(var(--brand-bg-rgb), .08) 0%,
        rgba(var(--brand-bg-rgb), .6) 45%,
        rgba(var(--brand-bg-rgb), .88) 100%
    );
}

.page-homepage .vehicle-tile .vt-content,
.page-shop .vehicle-tile .vt-content,
.page-guides .vehicle-tile .vt-content {
    position: relative;
    z-index: 1;
}

.page-homepage .vehicle-tile .vt-label,
.page-shop .vehicle-tile .vt-label,
.page-guides .vehicle-tile .vt-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.page-homepage .vehicle-tile .vt-title,
.page-shop .vehicle-tile .vt-title,
.page-guides .vehicle-tile .vt-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-text);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-3);
}

.page-homepage .vehicle-tile .vt-cta,
.page-shop .vehicle-tile .vt-cta,
.page-guides .vehicle-tile .vt-cta {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-primary-light);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.page-homepage .vehicle-tile:hover .vt-cta,
.page-shop .vehicle-tile:hover .vt-cta,
.page-guides .vehicle-tile:hover .vt-cta {
    gap: var(--space-3);
    color: var(--brand-secondary);
}

@media (max-width: 767.98px) {
    .page-homepage .vehicle-tiles,
    .page-shop .vehicle-tiles,
    .page-guides .vehicle-tiles {
        grid-template-columns: 1fr;
    }
    .page-homepage .vehicle-tile,
    .page-shop .vehicle-tile,
    .page-guides .vehicle-tile {
        min-height: 220px;
    }
}

/* Guides has three subcategories where home and shop have two. */
.page-guides .vehicle-tiles {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991.98px) {
    .page-guides .vehicle-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- TERRAIN TILES ---- */
.terrain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.terrain-tile {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: flex-end;
    padding: var(--space-4);
    isolation: isolate;
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.terrain-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform var(--transition-slow);
}

.terrain-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.78) 100%);
}

.terrain-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.terrain-tile:hover img {
    transform: scale(1.08);
}

.terrain-tile .tt-name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: #fff;
    margin: 0;
    position: relative;
    z-index: 1;
}

.terrain-tile .tt-icon {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
    color: rgba(255,255,255,.6);
    font-size: 1.1rem;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.terrain-tile:hover .tt-icon {
    color: var(--brand-secondary);
    transform: scale(1.2);
}

@media (max-width: 991.98px) {
    .terrain-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575.98px) {
    .terrain-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .terrain-tile {
        min-height: 150px;
    }
}

/* ---- FEATURED PRODUCTS ---- */
.page-homepage .featured-products-section .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-bottom: var(--space-10);
}

.page-homepage .featured-products-section .section-head-text {
    max-width: 600px;
}

.page-homepage .featured-products-section .view-all-link {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-primary-light);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.page-homepage .featured-products-section .view-all-link:hover {
    color: var(--brand-secondary);
    gap: var(--space-3);
}

/* ---- BRAND ROW SECTION ---- */
.page-homepage .brands-section {
    background: var(--brand-bg-surface);
    border-block: 1px solid var(--brand-border);
}

.page-homepage .brands-eyebrow {
    margin-bottom: var(--space-6);
    display: flex;
    justify-content: center;
}

.page-homepage .brands-eyebrow-inner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ---- WHOLESALE DIFFERENCE ---- */
.page-homepage .wholesale-diff {
    background: var(--brand-bg);
}

.page-homepage .wd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.page-homepage .wd-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.page-homepage .wd-point {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}

.page-homepage .wd-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--brand-primary-light);
    font-size: 1.35rem;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.page-homepage .wd-point:hover .wd-icon {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.page-homepage .wd-point-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}

.page-homepage .wd-point-body {
    color: var(--brand-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.page-homepage .wd-stat-block {
    background: linear-gradient(135deg, var(--brand-bg-card), var(--brand-bg-elevated));
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-10);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-homepage .wd-stat-block::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--brand-border-accent), transparent 60%);
    opacity: .3;
    pointer-events: none;
}

.page-homepage .wd-big-num {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: var(--weight-bold);
    line-height: 1;
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-homepage .wd-big-label {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-top: var(--space-2);
}

.page-homepage .wd-big-sub {
    font-size: var(--text-base);
    color: var(--brand-text-secondary);
    max-width: 28ch;
    margin: var(--space-3) auto 0;
    line-height: var(--leading-relaxed);
}

.page-homepage .wd-stat-cta {
    margin-top: var(--space-8);
}

@media (max-width: 991.98px) {
    .page-homepage .wd-grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    .page-homepage .wd-stat-block {
        order: -1;
    }
}

/* ---- STATS BAND ---- */
.page-homepage .stats-section {
    background: var(--brand-bg-surface);
    border-block: 1px solid var(--brand-border);
}

.page-homepage .stats-section .stat-num {
    font-size: var(--text-5xl);
}

/* ---- TESTIMONIALS ---- */
.page-homepage .testimonials-section {
    background: var(--brand-bg-alt);
}

/* ---- GUIDES TEASER ---- */
.page-homepage .guide-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    text-decoration: none;
}

.page-homepage .guide-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-primary);
}

.page-homepage .guide-card .gc-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.page-homepage .guide-card .gc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.page-homepage .guide-card:hover .gc-img img {
    transform: scale(1.06);
}

.page-homepage .guide-card .gc-category {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--brand-primary);
    color: #fff;
}

.page-homepage .guide-card .gc-body {
    padding: var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.page-homepage .guide-card .gc-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-text);
    line-height: var(--leading-snug);
    margin: 0;
    transition: color var(--transition-fast);
}

.page-homepage .guide-card:hover .gc-title {
    color: var(--brand-primary-light);
}

.page-homepage .guide-card .gc-excerpt {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
    flex: 1;
}

.page-homepage .guide-card .gc-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    padding-top: var(--space-3);
    border-top: 1px solid var(--brand-border);
    margin-top: var(--space-3);
}

.page-homepage .guide-card .gc-meta i {
    color: var(--brand-primary);
}

.page-homepage .guide-card .gc-read-more {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-primary-light);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.page-homepage .guide-card:hover .gc-read-more {
    color: var(--brand-secondary);
    gap: var(--space-2);
}

/* ---- NEWSLETTER ---- */
.page-homepage .newsletter-section {
    background: var(--brand-bg);
}

.page-homepage .newsletter {
    background: linear-gradient(135deg, var(--brand-bg-card) 0%, var(--brand-bg-elevated) 100%);
    border-color: var(--brand-border-strong);
    position: relative;
    overflow: hidden;
}

.page-homepage .newsletter::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 240px;
    height: 240px;
    border-radius: var(--radius-pill);
    background: radial-gradient(circle, rgba(var(--brand-primary-rgb), .12) 0%, transparent 70%);
    pointer-events: none;
}

.page-homepage .newsletter-heading {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

.page-homepage .newsletter-sub {
    color: var(--brand-text-secondary);
    max-width: 44ch;
    margin-inline: auto;
    line-height: var(--leading-relaxed);
}

.page-homepage .newsletter-disclaimer {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    margin-top: var(--space-3);
}

/* ---- GUIDES VIEW ALL ---- */
.page-homepage .guides-view-all {
    text-align: center;
    margin-top: var(--space-10);
}

/* ---- NEWSLETTER ---- */
.page-homepage .newsletter-eyebrow {
    justify-content: center;
}

/* ---- RESPONSIVE MISC ---- */
@media (max-width: 575.98px) {
    .page-homepage .featured-products-section .section-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- pages/shop.css ---- */
/* ============================================================
   INVICTA WHOLESALE TIRE — Shop / Category Page
   Scoped: .page-shop  |  Target: 150–300 lines
   Covers: sidebar filters, sort bar, product grid,
   SEO copy block, buying-guide links, FAQ, pagination.
   All values via var() — zero hardcoded hex.
   ============================================================ */

/* ---- FITMENT FINDER (sticky strip below hero) ---- */
.page-shop .shop-fitment-strip {
    background: var(--brand-bg-card);
    border-bottom: 2px solid var(--brand-primary);
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 76px; /* navbar height */
    z-index: var(--z-raised);
}
.page-shop .shop-fitment-strip .ff-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    padding-block: var(--space-4);
}
@media (max-width: 991.98px) {
    .page-shop .shop-fitment-strip {
        position: static;
    }
    /* Below lg the strip's grid only ever renders inside the offcanvas drawer,
       where every control gets its own row. This used to be a 2-up grid for the
       inline strip; left at 1fr 1fr it outranks the drawer rule below (three
       classes beats two) and the drawer comes out two-across. */
    .page-shop .shop-fitment-strip .ff-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575.98px) {
    .page-shop .shop-fitment-strip .ff-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- FITMENT FINDER: offcanvas drawer below lg ----
   Not scoped to .page-shop: the same drawer serves the homepage card layout,
   which renders outside that page class. */
.shop-fitment-toggle {
    margin-block: var(--space-4);
}

.shop-fitment-drawer {
    --bs-offcanvas-width: min(22rem, 88vw);
    --bs-offcanvas-bg: var(--brand-bg-card);
    --bs-offcanvas-color: var(--brand-text);
    --bs-offcanvas-border-color: var(--brand-border);
}

.shop-fitment-drawer .offcanvas-header {
    background: var(--brand-bg-elevated);
    border-bottom: 1px solid var(--brand-border);
}

.shop-fitment-drawer .offcanvas-title {
    font-size: var(--text-lg);
}

/* Bootstrap's .btn-close is a black SVG mask — invisible against this
   drawer's dark --bs-offcanvas-bg (set above). Every OTHER .btn-close on the
   site sits on an unstyled, stock-white Bootstrap .modal-content or the
   findbar's .j2c-findbar__modal-dialog (both resolve var(--bs-body-bg, #fff),
   which this template never redefines), so those are left alone — inverting
   them would erase the icon on white instead of fixing anything. */
.shop-fitment-drawer .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
    opacity: .75;
}
.shop-fitment-drawer .btn-close:hover {
    opacity: 1;
}
[data-bs-theme="light"] .shop-fitment-drawer .btn-close {
    filter: none;
}

@media (max-width: 991.98px) {
    /* One control per row inside the drawer — the grid the strip and the card
       both use collapses to a single column, whatever it was outside. */
    .shop-fitment-drawer .ff-grid,
    .shop-fitment-drawer .ff-grid--results {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding-block: 0;
    }

    .shop-fitment-drawer .ff-tabs {
        flex-wrap: wrap;
    }
}

@media (min-width: 992px) {
    /* Above the breakpoint Bootstrap zeroes the offcanvas itself but switches
       .offcanvas-body to display:flex, which shrink-wraps a single child. Block
       restores exactly the desktop layout that existed before the wrapper. */
    .shop-fitment-drawer > .offcanvas-body {
        display: block;
    }
}

/*
 * Both finder wrappers set position + z-index (.fitment-finder-wrap is
 * relative/10, .shop-fitment-strip is sticky/10), so each opens a stacking
 * context that the drawer's own z-index cannot escape — the fixed panel gets
 * capped at 10 and the sticky navbar (z-index 200) paints straight over it.
 * Lift the wrapper only while the drawer is on screen. 1046 clears Bootstrap's
 * .offcanvas-backdrop (1040), so the panel sits above its own scrim rather
 * than being dimmed by it.
 */
.fitment-finder-wrap:has(.j2c-fitment-panel.show, .j2c-fitment-panel.showing, .j2c-fitment-panel.hiding),
.shop-fitment-strip:has(.j2c-fitment-panel.show, .j2c-fitment-panel.showing, .j2c-fitment-panel.hiding) {
    z-index: 1046;
}

/* ---- MAIN LAYOUT: sidebar + content ---- */
.page-shop .shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-8);
    align-items: start;
}
@media (max-width: 991.98px) {
    .page-shop .shop-layout {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 992px) {
    /* list_filter_position = "right": content stays first in the DOM (for a11y/tab order),
       the sidebar's track just moves to the second column instead of the first. */
    .page-shop .shop-layout.j2commerce-filter-right {
        grid-template-columns: 1fr 280px;
    }
}

/* ---- SIDEBAR ---- */
.page-shop .shop-sidebar {
    position: sticky;
    top: calc(76px + 72px); /* navbar + fitment strip */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-border-strong) transparent;
}
.page-shop .shop-sidebar::-webkit-scrollbar {
    width: 4px;
}
.page-shop .shop-sidebar::-webkit-scrollbar-thumb {
    background: var(--brand-border-strong);
    border-radius: var(--radius-pill);
}
@media (max-width: 991.98px) {
    .page-shop .shop-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

/* sidebar filter card */
.page-shop .filter-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
/* The head is a <button> so the whole bar is keyboard-operable, which means it
   needs the button reset (buttons are shrink-to-fit and carry a UA border). */
.page-shop .filter-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: var(--brand-bg-elevated);
    border: 0;
    border-bottom: 1px solid var(--brand-border);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    text-align: left;
    color: var(--brand-text);
    cursor: pointer;
}
/* Font Awesome 6 ships as <span class="fa-solid …"> here, not <i>. */
.page-shop .filter-card-head i,
.page-shop .filter-card-head > span[class*="fa-"] {
    color: var(--brand-primary);
    transition: transform var(--transition-fast);
    font-size: var(--text-xs);
}
/* Collapse state comes from Bootstrap's aria-expanded on the head, not a class
   on the card, so the chevron follows the same source of truth. */
.page-shop .filter-card-head[aria-expanded="false"] i,
.page-shop .filter-card-head[aria-expanded="false"] > span[class*="fa-"] {
    transform: rotate(-90deg);
}
.page-shop .filter-card-body {
    padding: var(--space-5);
    flex-direction: column;
    gap: var(--space-3);
}
/* Only the shown panel becomes a flex column — declaring display:flex
   unconditionally would beat Bootstrap's .collapse:not(.show){display:none}
   and leave every panel permanently open. */
.page-shop .filter-card-body.show,
.page-shop .filter-card-body.collapsing {
    display: flex;
}
.page-shop .filter-card-body:not(.show):not(.collapsing) {
    display: none;
}

/* filter checkboxes */
.page-shop .filter-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--brand-text-body);
    line-height: var(--leading-snug);
}
.page-shop .filter-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
}
.page-shop .filter-check:hover {
    color: var(--brand-text);
}
.page-shop .filter-check .check-count {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    background: var(--brand-bg-elevated);
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
}

/* price range slider */
.page-shop .price-range-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.page-shop .price-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--brand-secondary);
    font-weight: var(--weight-semibold);
}
.page-shop input[type="range"] {
    width: 100%;
    accent-color: var(--brand-primary);
    cursor: pointer;
    height: 4px;
}

/* in-stock toggle */
.page-shop .toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.page-shop .toggle-label {
    font-size: var(--text-sm);
    color: var(--brand-text-body);
    font-family: var(--font-body);
}
.page-shop .toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.page-shop .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.page-shop .toggle-track {
    position: absolute;
    inset: 0;
    background: var(--brand-bg-elevated);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.page-shop .toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--brand-text-secondary);
    border-radius: 50%;
    transition: transform var(--transition-fast), background var(--transition-fast);
}
.page-shop .toggle-switch input:checked + .toggle-track {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}
.page-shop .toggle-switch input:checked + .toggle-track::after {
    transform: translateX(20px);
    background: #fff;
}

/* ---- SORT BAR ---- */
.page-shop .sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.page-shop .sort-bar .result-count {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
}
.page-shop .sort-bar .result-count strong {
    color: var(--brand-secondary);
}
.page-shop .sort-bar .sort-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.page-shop .sort-bar label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-text-secondary);
    white-space: nowrap;
}
.page-shop .sort-bar .form-select-c {
    min-width: 180px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

/* ---- SEO COPY BLOCK ---- */
.page-shop .seo-block {
    background: var(--brand-bg-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-10);
}
.page-shop .seo-block h2 {
    font-size: var(--text-2xl);
    color: var(--brand-text);
    margin-bottom: var(--space-4);
}
.page-shop .seo-block p {
    color: var(--brand-text-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    max-width: 80ch;
}
.page-shop .guide-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}
.page-shop .guide-link-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-body);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.page-shop .guide-link-item i {
    color: var(--brand-primary);
    font-size: var(--text-base);
}
.page-shop .guide-link-item:hover {
    border-color: var(--brand-primary-light);
    color: var(--brand-text);
    background: var(--brand-bg-elevated);
}

/* ---- MOBILE FILTER DRAWER TOGGLE ---- */
.page-shop .mobile-filter-btn {
    display: none;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
}
@media (max-width: 991.98px) {
    .page-shop .mobile-filter-btn {
        display: flex;
    }
    .page-shop .shop-sidebar {
        display: none;
    }
    .page-shop .shop-sidebar.filters-open {
        display: block;
    }
}

/* ---- ACTIVE FILTER CHIPS ---- */
.page-shop .active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
/* The strip is rendered on every load so the filter JS has a container to fill,
   but the mockup shows it only once a filter is applied. The chips are injected
   by com_j2commerce's filter JS, so presence of a chip is the only reliable
   signal available to CSS. */
.page-shop .active-filters:not(:has(.filter-chip)):not(:has(.filter-tag)) {
    display: none;
}
.page-shop .active-filters .filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-1) var(--space-3);
    background: rgba(var(--brand-primary-rgb), .15);
    border: 1px solid rgba(var(--brand-primary-rgb), .4);
    border-radius: var(--radius-pill);
    color: var(--brand-primary-light);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.page-shop .active-filters .filter-tag i {
    font-size: 10px;
    opacity: .7;
}
.page-shop .active-filters .filter-tag:hover {
    background: rgba(var(--brand-primary-rgb), .28);
}

/* The tiles container (#j2commerce-active-filter-tiles) is a real element so the filter JS has
   something to replaceChildren() on without wiping the "Filtered" label / Clear All next to it —
   display:contents drops it from the box model so its chip children lay out as if they were
   direct flex items of .active-filters. */
.page-shop .active-filters .j2commerce-active-filter-tiles {
    display: contents;
}

/* j2commerce-filters.es6.js builds active-filter chips itself (both the AJAX path and this
   template's own no-JS fallback) using the shared .filter-chip class plus Bootstrap utility
   classes — that markup shape lives in a core JS file outside this template's scope, so the
   chips are re-skinned here to read as the mockup's .filter-tag pill regardless of which path
   built them. */
.page-shop .active-filters .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-1) var(--space-3);
    /* The chip is built by com_j2commerce's filter JS with Bootstrap utilities
       (.badge.bg-light.text-dark.border), and Bootstrap's colour utilities are
       !important — so the theme colours have to be too. */
    background: rgba(var(--brand-primary-rgb), .15) !important;
    border: 1px solid rgba(var(--brand-primary-rgb), .4) !important;
    border-radius: var(--radius-pill);
    color: var(--brand-primary-light) !important;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.page-shop .active-filters .filter-chip:hover {
    background: rgba(var(--brand-primary-rgb), .28) !important;
}
/* Bootstrap's close glyph is a near-black SVG mask, invisible on the dark chip. */
.page-shop .active-filters .filter-chip .btn-close {
    font-size: 10px;
    opacity: .75;
    filter: invert(1) grayscale(1) brightness(1.8);
}
.page-shop .active-filters .filter-chip .btn-close:hover {
    opacity: 1;
}

/* ---- FITMENT STRIP: reset inherited .fitment-finder chrome ---- */
.page-shop .fitment-finder--strip {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-block: 0;
}

/* ---- ACTIVE FILTERS label ---- */
.page-shop .active-filters-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* ---- RESPONSIVE PRODUCT GRID ---- */
@media (max-width: 767.98px) {
    .page-shop .shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-4);
    }
}
@media (max-width: 479.98px) {
    .page-shop .shop-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- FAQ SECTION TWEAK ---- */
.page-shop .shop-faq-intro {
    max-width: 680px;
}

/* ---- pages/tire-size-calculator.css ---- */
/* ============================================================
   TIRE SIZE CALCULATOR — Page CSS
   Scope: .page-calculator
   All colors via var() from copper.css / styles.css.
   Dark-first. No hardcoded hex values.
   ============================================================ */

/* ---- HERO INTERIOR ---- */
.page-calculator .hero-interior .hero-inner {
    padding-block: var(--space-12) var(--space-10);
}

.page-calculator .hero-interior .breadcrumb-c {
    margin-bottom: var(--space-5);
}

/* ---- CALCULATOR SECTION ---- */
.page-calculator .calc-section {
    padding-block: var(--space-12);
    background: var(--brand-bg);
}

.page-calculator .calc-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.page-calculator .calc-card-header {
    background: var(--brand-bg-elevated);
    border-bottom: 1px solid var(--brand-border-strong);
    padding: var(--space-6) var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.page-calculator .calc-card-header i {
    font-size: 1.75rem;
    color: var(--brand-primary-light);
}

.page-calculator .calc-card-header h2 {
    font-size: var(--text-2xl);
    margin: 0;
}

.page-calculator .calc-card-header p {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    margin: 0;
}

.page-calculator .calc-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

@media (max-width: 991.98px) {
    .page-calculator .calc-body {
        grid-template-columns: 1fr;
    }
}

/* ---- INPUT PANEL ---- */
.page-calculator .calc-inputs {
    padding: var(--space-8);
    border-right: 1px solid var(--brand-border);
}

@media (max-width: 991.98px) {
    .page-calculator .calc-inputs {
        border-right: none;
        border-bottom: 1px solid var(--brand-border);
    }
}

.page-calculator .tire-group {
    margin-bottom: var(--space-8);
}

.page-calculator .tire-group-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-secondary);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--brand-border);
}

.page-calculator .tire-group-label .group-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-secondary);
    flex-shrink: 0;
}

.page-calculator .tire-group-label.new-tire .group-dot {
    background: var(--brand-primary-light);
}

.page-calculator .tire-group-label.new-tire {
    color: var(--brand-primary-light);
}

.page-calculator .calc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 575.98px) {
    .page-calculator .calc-grid-3 {
        grid-template-columns: 1fr;
    }
}

.page-calculator .calc-field label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    margin-bottom: var(--space-2);
}

.page-calculator .calc-field .field-unit {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    margin-top: var(--space-1);
    font-family: var(--font-mono);
}

.page-calculator .calc-format-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-sm);
}

.page-calculator .calc-format-toggle i {
    color: var(--brand-primary);
}

.page-calculator .calc-format-toggle strong {
    color: var(--brand-text);
}

.page-calculator .calc-compare-btn {
    width: 100%;
    margin-top: var(--space-4);
    padding-block: var(--space-4);
    font-size: var(--text-md);
}

/* ---- RESULTS PANEL ---- */
.page-calculator .calc-results {
    padding: var(--space-8);
    background: var(--brand-bg-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.page-calculator .results-header {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-calculator .results-header i {
    color: var(--brand-primary);
}

.page-calculator .result-row {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    transition: border-color var(--transition-fast);
}

.page-calculator .result-row:hover {
    border-color: var(--brand-border-strong);
}

.page-calculator .result-label {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-heading);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-calculator .result-label i {
    color: var(--brand-primary);
    width: 16px;
    text-align: center;
}

.page-calculator .result-values {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.page-calculator .result-val {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--brand-text);
    min-width: 60px;
    text-align: right;
}

.page-calculator .result-diff {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    min-width: 54px;
    text-align: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-xs);
}

.page-calculator .result-diff.plus {
    color: var(--color-success-text);
    background: var(--color-success-bg);
}

.page-calculator .result-diff.minus {
    color: var(--color-danger-text);
    background: var(--color-danger-bg);
}

.page-calculator .result-diff.neutral {
    color: var(--brand-text-secondary);
    background: var(--brand-bg-alt);
}

/* Speedometer / percent diff row */
.page-calculator .result-row.speedo {
    border-color: var(--brand-border-strong);
}

.page-calculator .result-row.speedo .result-val {
    color: var(--brand-secondary);
    font-size: var(--text-xl);
}

/* Safe-to-fit indicator */
.page-calculator .fit-indicator {
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.page-calculator .fit-indicator.safe {
    background: var(--color-success-bg);
    border: 1px solid rgba(var(--color-success-rgb), .3);
}

.page-calculator .fit-indicator.caution {
    background: var(--color-warning-bg);
    border: 1px solid rgba(var(--brand-secondary-rgb), .3);
}

.page-calculator .fit-indicator i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.page-calculator .fit-indicator.safe i {
    color: var(--color-success-text);
}

.page-calculator .fit-indicator.caution i {
    color: var(--color-warning-text);
}

.page-calculator .fit-indicator-text strong {
    display: block;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-base);
}

.page-calculator .fit-indicator.safe .fit-indicator-text strong {
    color: var(--color-success-text);
}

.page-calculator .fit-indicator.caution .fit-indicator-text strong {
    color: var(--color-warning-text);
}

.page-calculator .fit-indicator-text p {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    margin: 0;
}

.page-calculator .results-note {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    padding-top: var(--space-4);
    border-top: 1px solid var(--brand-border);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.page-calculator .results-note i {
    color: var(--brand-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

/* ---- HOW TO READ SECTION ---- */
.page-calculator .read-section {
    padding-block: var(--space-12);
    background: var(--brand-bg-alt);
}

.page-calculator .tire-notation-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

@media (max-width: 767.98px) {
    .page-calculator .tire-notation-cards {
        grid-template-columns: 1fr;
    }
}

.page-calculator .notation-card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.page-calculator .notation-card-head {
    background: var(--brand-bg-elevated);
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--brand-border);
}

.page-calculator .notation-type-label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-secondary);
}

.page-calculator .notation-badge {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--radius-xs);
    color: var(--brand-text-body);
}

.page-calculator .notation-card-body {
    padding: var(--space-6);
}

/* Visual tire size breakdown */
.page-calculator .tire-breakdown {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    flex-wrap: wrap;
}

.page-calculator .tb-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.page-calculator .tb-num {
    color: var(--brand-text);
    line-height: 1;
}

.page-calculator .tb-sep {
    color: var(--brand-border-strong);
    margin-inline: var(--space-1);
    line-height: 1;
    align-self: flex-start;
    padding-top: 4px;
}

.page-calculator .tb-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.page-calculator .tb-seg.seg-diameter .tb-num,
.page-calculator .tb-seg.seg-diameter .tb-label {
    color: var(--brand-secondary);
}

.page-calculator .tb-seg.seg-width .tb-num,
.page-calculator .tb-seg.seg-width .tb-label {
    color: var(--brand-primary-light);
}

.page-calculator .tb-seg.seg-rim .tb-num,
.page-calculator .tb-seg.seg-rim .tb-label {
    color: var(--color-info-text);
}

.page-calculator .breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.page-calculator .breakdown-table th {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--brand-border);
    text-align: left;
}

.page-calculator .breakdown-table td {
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-text-body);
    vertical-align: top;
}

.page-calculator .breakdown-table tr:last-child td {
    border-bottom: none;
}

.page-calculator .breakdown-table td.swatch {
    width: 28px;
    padding-right: 0;
}

.page-calculator .swatch-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-top: 3px;
}

.page-calculator .swatch-dot.c-diameter { background: var(--brand-secondary); }
.page-calculator .swatch-dot.c-width    { background: var(--brand-primary-light); }
.page-calculator .swatch-dot.c-rim      { background: var(--color-info-text); }
.page-calculator .swatch-dot.c-aspect   { background: var(--color-success-text); }

.page-calculator .breakdown-table td strong {
    font-family: var(--font-mono);
    color: var(--brand-text);
}

/* ---- COMPARISON TABLE SECTION ---- */
.page-calculator .compare-section {
    padding-block: var(--space-12);
    background: var(--brand-bg);
}

.page-calculator .notation-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--radius-lg);
}

.page-calculator .notation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.page-calculator .notation-table thead tr {
    background: var(--brand-bg-elevated);
}

.page-calculator .notation-table th {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--brand-border-strong);
    text-align: left;
    white-space: nowrap;
}

.page-calculator .notation-table th:first-child {
    border-radius: var(--radius-lg) 0 0 0;
}

.page-calculator .notation-table th:last-child {
    border-radius: 0 var(--radius-lg) 0 0;
}

.page-calculator .notation-table td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-text-body);
    vertical-align: middle;
}

.page-calculator .notation-table tr:last-child td {
    border-bottom: none;
}

.page-calculator .notation-table tbody tr:hover {
    background: var(--brand-bg-alt);
}

.page-calculator .notation-table td.mono {
    font-family: var(--font-mono);
    color: var(--brand-text);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.page-calculator .notation-table td.highlight {
    color: var(--brand-secondary);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
}

.page-calculator .notation-table .badge-fmt {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-xs);
}

.page-calculator .notation-table .badge-fmt.std {
    background: var(--brand-primary-subtle);
    color: var(--brand-primary-light);
    border: 1px solid var(--brand-border-accent);
}

.page-calculator .notation-table .badge-fmt.metric {
    background: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid rgba(var(--brand-primary-rgb), .2);
}

/* ---- FAQ SECTION ---- */
.page-calculator .faq-section {
    padding-block: var(--space-12);
    background: var(--brand-bg-alt);
}

.page-calculator .faq-section .accordion-c {
    max-width: var(--container-narrow);
    margin-inline: auto;
}

/* ---- CTA BAND ---- */
.page-calculator .cta-section {
    padding-block: var(--space-12);
}

.page-calculator .cta-band.gradient {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.page-calculator .cta-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-8);
}

@media (max-width: 767.98px) {
    .page-calculator .cta-cards {
        grid-template-columns: 1fr;
    }
}

.page-calculator .cta-link-card {
    background: rgba(var(--brand-bg-surface-rgb), .6);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    transition: all var(--transition-base);
    text-decoration: none;
}

.page-calculator .cta-link-card:hover {
    background: var(--brand-bg-card);
    border-color: var(--brand-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.page-calculator .cta-link-card .cta-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--brand-primary-subtle);
    border: 1px solid var(--brand-border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-calculator .cta-link-card .cta-icon i {
    font-size: 1.5rem;
    color: var(--brand-primary-light);
}

.page-calculator .cta-link-card .cta-text strong {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-1);
}

.page-calculator .cta-link-card .cta-text p {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    margin: 0;
}

.page-calculator .cta-link-card .cta-arrow {
    margin-left: auto;
    color: var(--brand-primary);
    font-size: 1.1rem;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.page-calculator .cta-link-card:hover .cta-arrow {
    transform: translateX(4px);
}

/* ---- NOTATION CARD NOTE PARAGRAPHS ---- */
.page-calculator .calc-note {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    margin-top: var(--space-4);
}

/* ---- ASPECT-RATIO SEGMENT OVERRIDE ---- */
.page-calculator .tb-seg.seg-aspect .tb-num.is-aspect,
.page-calculator .tb-seg.seg-aspect .tb-label.is-aspect {
    color: var(--color-success-text);
}

/* ---- RESPONSIVE ADJUSTMENTS ---- */
@media (max-width: 767.98px) {
    .page-calculator .calc-card-header {
        padding: var(--space-5) var(--space-5);
        flex-wrap: wrap;
    }

    .page-calculator .calc-inputs,
    .page-calculator .calc-results {
        padding: var(--space-5);
    }

    .page-calculator .tire-breakdown {
        font-size: var(--text-xl);
    }
}

/* ---- Account offcanvas + login extras (template-authored, not from mockup pages/*.css) ---- */
.password-wrap { position: relative; }
.password-wrap .form-control-c,
.password-wrap .form-control { padding-right: 2.75rem; }
.j2c-pw-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-3, .75rem);
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--brand-text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.j2c-pw-toggle:hover,
.j2c-pw-toggle:focus-visible { color: var(--brand-primary-light); }
.j2c-extra-icon img,
.j2c-extra-icon svg { width: 1.25rem; height: 1.25rem; }

/* ---- Login offcanvas panel (mod_login "_:offcanvas" layout) ----
   templates/tires/html/mod_login/offcanvas.php renders .auth-panel-header /
   .auth-panel-tag / .form-check-c / .auth-divider, but those classes only
   exist scoped to .page-login in p-login.css, which head.php loads ONLY on
   the dedicated login page (see head.php $pageStyles map). The account
   offcanvas renders on every page, so equivalents are scoped to
   #accountOffcanvas here instead, leaving p-login.css and the .page-login
   page untouched. Mirrors p-login.css lines 142-244 + 265-282; h2 uses
   --text-xl (not the login page's --text-3xl) to fit the narrow drawer. */
#accountOffcanvas .auth-panel-header {
    margin-bottom: var(--space-6);
}
#accountOffcanvas .auth-panel-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-primary-light);
    background: rgba(var(--brand-primary-rgb), .1);
    border: 1px solid rgba(var(--brand-primary-rgb), .28);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
}
#accountOffcanvas .auth-panel-header h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-normal);
    color: var(--brand-text);
    margin-bottom: 0;
}
#accountOffcanvas .form-check-c {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
#accountOffcanvas .form-check-input-c {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--brand-primary);
    cursor: pointer;
}
#accountOffcanvas .form-check-label-c {
    font-size: var(--text-sm);
    color: var(--brand-text-body);
    cursor: pointer;
    user-select: none;
}
#accountOffcanvas .auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-text-secondary);
}
#accountOffcanvas .auth-divider::before,
#accountOffcanvas .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--brand-border);
}

/* --- Wishlist heart (plg_j2commerce_app_wishlist) ------------------------
   The plugin renders its own button markup and cannot be overridden from the
   template, so the design is applied by aliasing its hook classes onto the
   mockup's .pc-wish treatment. Keep in sync with .pc-wish above. */
.pc-media .j2commerce-product-wishlist {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
}

.pc-media .j2commerce-wishlist-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(var(--brand-bg-rgb), .7);
    color: var(--brand-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pc-media .j2commerce-wishlist-toggle:hover,
.pc-media .j2commerce-wishlist-toggle:focus-visible {
    background: var(--brand-primary);
    color: var(--brand-text-on-primary);
    text-decoration: none;
}

.pc-media .j2commerce-wishlist-added {
    color: var(--brand-primary);
}

.pc-media .j2commerce-wishlist-added:hover {
    color: var(--brand-text-on-primary);
}

.pc-media .j2commerce-wishlist-icon {
    font-size: .95rem;
    line-height: 1;
}

/* --- Product card: title link inherits the card's type colour -------------
   com_j2commerce renders .pc-name > a; without this the anchor picks up the
   global link colour and the title renders copper instead of bone. */
.product-card .pc-name a {
    color: inherit;
    text-decoration: none;
}

.product-card .pc-name a:hover,
.product-card .pc-name a:focus-visible {
    color: var(--brand-primary);
    text-decoration: none;
}

/* Keep every card's title block one line tall so rows stay aligned even when
   a product name is long; the full name remains in the link's title attr. */
.product-card .pc-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- SHOP SIDEBAR: real Bootstrap 5 collapse (data-bs-toggle="collapse") ----
   .filter-card-head is now a <button data-bs-toggle="collapse">; Bootstrap toggles the
   real .collapse / .show classes on .filter-card-body and the real .collapsed class + the
   aria-expanded attribute on the trigger button itself. The .filter-card.collapsed rules
   above are no longer set by any markup and are left in place unused rather than removed. */
.page-shop .filter-card-head {
    appearance: none;
    border: none;
    border-bottom: 1px solid var(--brand-border);
}
.page-shop .filter-card-head.collapsed i {
    transform: rotate(-90deg);
}
.page-shop .filter-card-body.collapse:not(.show) {
    display: none;
}

/* ---- MOBILE FILTER DRAWER: also a real Bootstrap collapse (target #shop-sidebar) ----
   Bootstrap's own base rule (.collapse:not(.show) { display: none; }) would hide the
   sidebar at desktop widths too since #shop-sidebar always carries the .collapse class;
   force it visible there regardless of collapse state. At mobile widths, Bootstrap's own
   .show class (not the old .filters-open class) now controls visibility. */
@media (min-width: 992px) {
    .page-shop .shop-sidebar.collapse:not(.show) {
        display: block;
    }
}
@media (max-width: 991.98px) {
    .page-shop .shop-sidebar.show {
        display: block;
    }
}

/*******CUSTOM*******/
.title-center .section-head {text-align:center;max-width:none;width:100%;}
.j2c-reviews .j2c-stars.stars-display {margin-bottom:0;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:-4px;}
.swiper-button-prev:hover, .swiper-button-next:hover, #j2c-reviews-164 .swiper-button-prev, #j2c-reviews-164 .swiper-button-next {
    background-color: transparent;color:var(--nl-secondary);
}
.site-navbar {
    background: var(--brand-bg-elevated);
}
#breadCrumbs {
    padding-top: var(--space-4);
}


#bundleDetails .pdp-description-copy, #bundleDetails .pdp-description-image {width:100%;}
/****** END CUSTOM******/

@media (max-width: 991.98px) {
    .navbar-brand-c img {
        height: auto;
    }
}

/* ============================================================================
   CHECKOUT — component-stylesheet reconciliation
   ----------------------------------------------------------------------------
   com_j2commerce registers media/com_j2commerce/css/site/checkout.css, whose
   selectors are ID-scoped (#j2commerce-checkout .checkout-heading = 1,1,0) and
   therefore outrank the .page-checkout .form-section-* rules above (0,2,0).
   That stylesheet cannot simply be dropped: its
   `.checkout-content{display:none}` / `.checkout-content.active{display:block}`
   pair IS the step accordion, so removing it would open every step at once.

   These rules re-assert the tires treatment at (1,2,0) for the COSMETIC
   properties only. Nothing here touches display, visibility or [aria-busy],
   which stay owned by the component.
   ========================================================================== */

.page-checkout #j2commerce-checkout .checkout-heading {
    padding: var(--space-4) var(--space-6);
    background: var(--brand-bg-elevated);
    border: none;
    border-bottom: 1px solid var(--brand-border);
    margin-bottom: 0;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
}

/* The component renders step titles as a bare <span>/<div>, not the <h2> the
   mockup used, so the heading typography has to be inherited rather than
   selected by tag. */
.page-checkout #j2commerce-checkout .checkout-heading > span,
.page-checkout #j2commerce-checkout .checkout-heading > div > span {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

/* Padding only — display is deliberately left to the component. */
.page-checkout #j2commerce-checkout .checkout-content {
    padding: var(--space-6);
}

/* Sections stack vertically; .checkout-grid's gap only separates the columns. */
.page-checkout .checkout-form-col > .form-section {
    margin-bottom: var(--space-5);
}

.page-checkout .checkout-form-col > .form-section:last-child {
    margin-bottom: 0;
}

/* Same root cause as .page-account .address-form above: the checkout's address,
   zone and telephone controls come from CustomFieldHelper::renderField(), which
   hardcodes Bootstrap's .form-label/.form-control/.form-select and forwards no
   extra class, so the layout cannot hand them .form-control-c. The skin has to
   reach them by selector.

   Scoped through #j2commerce-checkout rather than .page-checkout alone because
   component checkout.css already claims .form-control:focus at (1,2,0) inside
   its coupon and voucher forms. */
.page-checkout #j2commerce-checkout .form-control,
.page-checkout #j2commerce-checkout .form-select {
    width: 100%;
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.page-checkout #j2commerce-checkout .form-control::placeholder {
    color: var(--brand-text-secondary);
}

.page-checkout #j2commerce-checkout .form-control:focus,
.page-checkout #j2commerce-checkout .form-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-glow-primary);
}

.page-checkout #j2commerce-checkout .form-label,
.page-checkout #j2commerce-checkout .form-normal label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}

/* Bootstrap's .bg-light panels inside the step bodies read as white cut-outs on
   the dark surface. The sidecart wrapper is handled in the layout override; these
   are the ones the component emits from partials we do not restyle. */
.page-checkout #j2commerce-checkout .bg-light {
    background: var(--brand-bg-elevated) !important;
    color: var(--brand-text);
}

/* ============================================================================
   CONFIRMATION (order received)
   ----------------------------------------------------------------------------
   com_j2commerce ships this view already well-classed (.j2c-block-*, .card,
   .alert, .j2c-sidebar-bg), so unlike the checkout it needs no markup override
   at all - the skin reaches it entirely by selector. index.php maps
   com_j2commerce.confirmation to .page-confirmation to give these rules a hook.
   ========================================================================== */

.page-confirmation .j2commerce-confirmation {
    padding-block: var(--space-8);
}

/* ---- CARDS ---- */
.page-confirmation .card {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
    color: var(--brand-text-body);
}

.page-confirmation .card-body {
    padding: var(--space-6);
}

.page-confirmation .j2c-sidebar-bg {
    background: var(--brand-bg-elevated);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-md);
}

/* ---- STATUS BANNER + ALERTS ----
   Bootstrap's contextual alert backgrounds are near-white and read as holes in
   the dark page, so each variant is re-toned onto the brand surface while
   keeping its semantic colour on the border and heading. */
.page-confirmation .alert {
    background: var(--brand-bg-elevated);
    border: 1px solid var(--brand-border);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    color: var(--brand-text-body);
}

.page-confirmation .alert-success { border-left-color: var(--color-success-text); }
.page-confirmation .alert-info    { border-left-color: var(--brand-primary); }
.page-confirmation .alert-warning { border-left-color: var(--color-warning-text); }
.page-confirmation .alert-danger  { border-left-color: var(--color-danger-text); }

.page-confirmation .alert-heading {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
}

.page-confirmation .j2c-block-status-banner {
    background: var(--brand-bg-card);
}

/* Template-native status banner (replaces Bootstrap .alert on this element only —
   media/com_j2commerce/css/site/j2commerce_bs5.css:21 marks .j2commerce .alert-success
   !important, which beats every .page-confirmation .alert rule above). */
.page-confirmation .j2c-status-banner {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    padding: var(--space-6);
    color: var(--brand-text-body);
}

.page-confirmation .j2c-status-success { border-left-color: var(--color-success-text); }
.page-confirmation .j2c-status-pending { border-left-color: var(--brand-primary); }
.page-confirmation .j2c-status-failed  { border-left-color: var(--color-danger-text); }

.page-confirmation .j2c-status-heading {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
}

/* ---- LABELS AND TOTALS ---- */
.page-confirmation .j2c-info-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-text-secondary);
}

.page-confirmation .j2c-summary-total,
.page-confirmation .j2c-block-grand-total {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--brand-text);
}

.page-confirmation .j2c-summary-currency {
    color: var(--brand-text-secondary);
}

/* ---- ORDER ITEMS ---- */
.page-confirmation .j2c-order-item-img,
.page-confirmation .j2c-item-placeholder {
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-sm);
    background: var(--brand-bg-elevated);
}

.page-confirmation .j2c-order-item-qty {
    font-family: var(--font-heading);
    color: var(--brand-text-secondary);
}

/* ---- TABLES ---- */
.page-confirmation table {
    color: var(--brand-text-body);
}

.page-confirmation table th {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    border-bottom-color: var(--brand-border);
}

.page-confirmation table td {
    border-color: var(--brand-border);
}

/* Bootstrap paints these from its own light palette. */
.page-confirmation .bg-light,
.page-confirmation .table-light > :not(caption) > * > * {
    background: var(--brand-bg-elevated) !important;
    color: var(--brand-text-body) !important;
}

/* ---- SECTION SPACING ---- */
.page-confirmation [class*="j2c-block-"] + [class*="j2c-block-"] {
    margin-top: var(--space-5);
}

/* ============================================================================
   CHECKOUT — step + cart buttons adopt the site button skin
   ----------------------------------------------------------------------------
   The component renders these as class="btn btn-primary btn-checkout-step", so
   three sources compete: Bootstrap .btn and .btn-primary (0,1,0 each, plus
   0,2,0 for their :hover/:active pairs) and component checkout.css's
   #j2commerce-checkout .btn-checkout-step (1,1,0). .j2commerce-cart-button is
   grouped in alongside it exactly as component checkout.css already groups the
   two at its lines 79-80. Scoping through
   .page-checkout AND the #j2commerce-checkout id lands these at (1,2,0) - and
   (1,3,0) for the state rules - so they win outright without !important.

   The declarations below are the composed equivalent of
   .btn-c.btn-c-primary.btn-c-lg.btn-c-block. Bootstrap 5.3 drives .btn through
   --bs-btn-* custom properties, so those are re-pointed at the brand tokens as
   well as the longhands being set: that way any Bootstrap sub-rule reading a
   variable (hover, active, disabled) resolves to the brand palette instead of
   #0d6efd rather than merely being out-specified.
   ========================================================================== */

.page-checkout #j2commerce-checkout .btn-checkout-step,
.page-checkout #j2commerce-checkout .j2commerce-cart-button {
    /* re-point Bootstrap's own variables */
    --bs-btn-color: var(--brand-text-on-primary);
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-text-on-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-color: var(--brand-text-on-primary);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-color: var(--brand-text-on-primary);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: transparent;

    /* .btn-c */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
    transition: background var(--transition-base), transform var(--transition-fast),
                box-shadow var(--transition-base), color var(--transition-base);

    /* .btn-c-primary */
    background: var(--brand-primary);
    color: var(--brand-text-on-primary);
    border-color: var(--brand-primary);

    /* .btn-c-lg */
    font-size: var(--text-md);
    padding: var(--space-4) var(--space-8);

    /* .btn-c-block (also what the component's own rule was doing) */
    width: 100%;
}

.page-checkout #j2commerce-checkout .btn-checkout-step:hover,
.page-checkout #j2commerce-checkout .btn-checkout-step:focus,
.page-checkout #j2commerce-checkout .btn-checkout-step:active,
.page-checkout #j2commerce-checkout .j2commerce-cart-button:hover,
.page-checkout #j2commerce-checkout .j2commerce-cart-button:focus,
.page-checkout #j2commerce-checkout .j2commerce-cart-button:active {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--brand-text-on-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* checkout.css paints a #0d6efd outline + halo here at (1,2,0); this is (1,3,0)
   and swaps it for the brand focus ring without losing keyboard visibility. */
.page-checkout #j2commerce-checkout .btn-checkout-step:focus-visible,
.page-checkout #j2commerce-checkout .j2commerce-cart-button:focus-visible {
    outline: 3px solid var(--brand-primary-light);
    outline-offset: 2px;
    box-shadow: var(--shadow-glow-primary);
}

.page-checkout #j2commerce-checkout .btn-checkout-step:disabled,
.page-checkout #j2commerce-checkout .btn-checkout-step.disabled,
.page-checkout #j2commerce-checkout .j2commerce-cart-button:disabled,
.page-checkout #j2commerce-checkout .j2commerce-cart-button.disabled {
    transform: none;
    box-shadow: none;
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- 404 / error page ---- */
.error-page .error-hero .hero-sub { margin-inline: auto; }
.error-page .error-search-form {
    display: flex; gap: var(--space-3); max-width: 480px; margin: 0 auto var(--space-8);
}
.error-page .error-search-form .input-group-c { flex: 1; }
.error-page .hero-actions { margin-bottom: var(--space-10); }
.error-page .error-links {
    max-width: 900px; margin-inline: auto;
}
.error-page .error-link-card {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    padding: var(--space-6) var(--space-4); border-radius: var(--radius-md);
    border: 1px solid var(--brand-border); background: var(--brand-bg-card, var(--brand-bg-alt));
    color: var(--brand-text); text-decoration: none; text-align: center;
    font-family: var(--font-heading); font-size: var(--text-sm); text-transform: uppercase;
    letter-spacing: var(--tracking-wide); transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.error-page .error-link-card span:first-child { font-size: var(--text-2xl); color: var(--brand-primary-light); }
.error-page .error-link-card:hover { transform: translateY(-3px); border-color: var(--brand-primary); color: var(--brand-text); }

.error-page .error-404-figure {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(.25rem, 2vw, 1rem);
    max-width: none;
    font-size: clamp(4rem, 18vw, 11rem);
    line-height: 1;
}
.error-page .error-404-digit { font-family: var(--font-display); }
.error-page .error-404-tire {
    /* Rubber stays black in both themes — a tire does not recolour with the
       page, so these are local tokens rather than the theme's bg vars. */
    --tire-rubber: #17120f;
    --tire-sidewall: #2b211a;
    --tire-lug: var(--brand-primary);
    --tire-rim: var(--brand-secondary);
    width: clamp(3.25rem, 15vw, 9rem);
    height: clamp(3.25rem, 15vw, 9rem);
    flex-shrink: 0;
    transform-origin: 50% 50%;
    animation: error404TireSpin 6s linear infinite;
}
@keyframes error404TireSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .error-page .error-404-tire { animation: none; }
}

/* ---- cart line-item variant options ---- */
/* The option markup comes from the component's own orderitem.attributes layout,
   so the mockup's `.chip.active.cart-size-chip` is applied by selector here
   rather than by forking that layout. */
.page-cart .cart-item-options {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.page-cart .cart-item-options .item-option-name {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
}

.page-cart .cart-item-options .item-option-value {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: var(--brand-text-on-primary);
}