/*
 * Go-Parts v2 legacy-class bridge.
 * Restyles markup from hl-product.php / cscraper/product-new.php / mmp_template_final.php /
 * part-guide-viewer.php so the pages pick up the mockup visual language without needing
 * a full HTML rewrite. Selectors target the classes already in those files.
 *
 * Load AFTER mockup-theme.css.
 */

/* ======================================================================
   Global page body — soft bg, sans-serif stack matches mockup
   NOTE: `background` intentionally left OFF here. The cursor-follow
   aurora backdrop lives in mockup-theme.css via a later `body{background:...}`
   rule that references var(--mx)/var(--my). Setting a body background here
   (especially with !important) kills the orange-cursor glow.
   ====================================================================== */
body {
    color: var(--ink, #0f172a);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ======================================================================
   hl-product.php / cscraper/product-new.php hero area bridge
   ====================================================================== */

.main,
.beautified-product,
.hollander-product-container {
    background: transparent !important;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 32px;
}

.beautified-product {
    margin-top: 12px;
}

.product-main,
.product-container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

@media (max-width: 900px) {
    .product-main,
    .product-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Gallery */
.product-gallery,
.product-gallery-container {
    position: relative;
}
.product-gallery .main-image,
.product-gallery-container .main-image {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 18px;
    box-shadow:
        0 12px 28px -14px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    overflow: hidden;
    padding: 6px;
}
.product-gallery .main-image img,
.product-gallery-container .main-image img {
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.product-gallery .image-thumbnails,
.thumb-row,
.product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    margin-top: 14px;
}
.product-gallery .thumb,
.thumb-row .thumb,
.product-gallery-thumbs .thumb {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    padding: 6px;
    cursor: pointer;
    transition: border-color .12s, transform .12s;
}
.product-gallery .thumb:hover,
.thumb-row .thumb:hover,
.product-gallery-thumbs .thumb:hover {
    border-color: var(--blue, #2563eb);
}
.product-gallery .thumb.active,
.thumb-row .thumb.active,
.product-gallery-thumbs .thumb.active {
    border-color: var(--blue, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Product info column (summary) */
.product-info,
.product-info-panel,
.product-description-container {
    background: transparent;
    padding: 0;
}

.product-title,
h1.product-title,
.beautified-product h1 {
    font-size: clamp(24px, 3.2vw, 36px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink, #0f172a) !important;
    margin: 0 0 14px 0 !important;
    text-align: center !important;
}

/* Meta row (SKU / Brand / Condition) */
.product-meta,
.product-sku,
.product-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13px;
    color: var(--muted, #64748b);
    margin-bottom: 16px;
}

/* Price card */
.product-price,
.price-box,
.price-container {
    background: linear-gradient(180deg, #fff, #f8fafc);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 18px;
    padding: 24px 28px;
    margin: 16px 0 20px 0;
    box-shadow:
        0 4px 14px -6px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.product-price .price,
.price-box .price,
.product-price .actual-price,
.beautified-price {
    font-size: 44px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink, #0f172a) !important;
    line-height: 1 !important;
    display: inline-block !important;
    margin: 0 !important;
}

.product-price .old-price,
.product-price .regular-price .price,
.price-box .old-price {
    color: var(--muted, #94a3b8) !important;
    text-decoration: line-through !important;
    font-size: 18px !important;
}

/* Affirm/financing badge */
.affirm_badge,
.affirm-as-low-as {
    margin: 10px 0 !important;
    color: var(--muted, #64748b) !important;
    font-size: 13px !important;
}

/* hl-product actual price breakdown classes */
.price-section {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 6px 0 10px 0;
}
.price-value {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}
.price-sign {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ink, #0f172a) !important;
    vertical-align: super;
    margin-right: 2px;
}
.price-number {
    font-size: 44px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink, #0f172a) !important;
    line-height: 1 !important;
}
.price-cents {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--muted, #475569) !important;
    vertical-align: super;
}

/* Guarantee banner (hl-product) — stacked 2-line layout.
   Line 1 ("Restored to OEM Specs + warranty") and line 2
   ("Like New, Priced Smart!") break across two rows, separator
   " - " is hidden. `flex-basis:100%` on each span forces wrap. */
.guarantee-banner {
    background: rgba(37, 99, 235, 0.05) !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin: 14px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 0 !important;
    font-size: 13px !important;
    text-align: center;
}
.guarantee-line-1 {
    font-weight: 800 !important;
    color: var(--blue, #1e40af) !important;
    display: block !important;
    text-align: center !important;
}
.guarantee-line-2 {
    color: var(--muted, #64748b) !important;
    display: block !important;
    text-align: center !important;
    margin-top: 2px !important;
}
.guarantee-separator {
    display: none !important;
}

/* Add to cart section wrapper */
.add-to-cart-section {
    margin: 14px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Legacy `.btn-add-to-cart` orange-gradient rule removed. Mockup-v12-
 * hyperspace styling now applies via `.price-card .buy-col .btn.primary.btn-
 * add-to-cart` further down in this file. */

/* Wrenchy button — unified vertical spacing so HL / PS / Magento product
   pages all show the same gaps around the Ask Wrenchy + See Other pair:
   22px above Ask, 20px between, 22px below See Other. */
.ask-wrenchy-button-container {
    margin: 22px 0 10px !important;
}
/* PS (inside `.beautified-product`) lays `.product-info` out as flex column
   with `gap:12px`, which otherwise inflates each gap by 12px. Compensate
   with negative margins so the visible rhythm matches the HL/Mag block
   layout where margins collapse. */
.beautified-product .ask-wrenchy-button-container{margin:10px 0 -12px !important}
.beautified-product .sec-ctas{margin-bottom:-12px !important}
.wrenchy-button {
    background: rgba(37, 99, 235, 0.06) !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    color: var(--blue, #2563eb) !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background .12s;
}
.wrenchy-button:hover {
    background: rgba(37, 99, 235, 0.1) !important;
}

/* Delivery estimate panel (hl-product) */
.delivery-estimate-section {
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin: 12px 0 !important;
    font-size: 13px;
}
.delivery-estimate-header {
    font-weight: 700 !important;
    color: var(--ink, #0f172a) !important;
    margin-bottom: 6px;
}
.delivery-estimate-dates {
    color: var(--blue, #2563eb) !important;
    font-weight: 800 !important;
}
.countdown-timer {
    color: #ea580c !important;
    font-weight: 800 !important;
}

/* Zoom lens (hl-product image) */
.zoom-lens {
    border: 2px solid var(--blue, #2563eb) !important;
    box-shadow: 0 4px 14px -6px rgba(37, 99, 235, 0.35) !important;
}

.guarantee-text {
    color: var(--ink, #1e293b) !important;
    font-size: 13px !important;
}

/* Why Go-Parts panel (appears on hl-product below-the-fold) */
.why-goparts-panel {
    background: linear-gradient(135deg, #0d1424 0%, #1e3a8a 100%) !important;
    color: #fff !important;
    border-radius: 22px !important;
    padding: 40px 48px !important;
    margin: 32px 0 !important;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.35);
}
.why-goparts-panel h2,
.why-goparts-panel h3 {
    color: #fff !important;
}
.why-goparts-panel p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Trophy badge (bottom trust strip on multiple pages) */
.trophy-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
    margin-bottom: 8px;
}

/* Spacing sanity — don't let legacy chrome ram up against masthead */
.main,
.beautified-product,
.hollander-product-container,
.category-container,
.category-container-header,
.kb-page {
    margin-top: 12px !important;
}

/* ======================================================================
   Static PHP page heroes — about_us / contact_us / shipping / privacy_terms /
   testimonials / shop_by_make / about_wrenchy all open with `.xxx-hero > h1 + p`
   inside `<div class="main">`. Give them uniform mockup hero treatment.
   ====================================================================== */

.about-hero,
.help-hero,
.shipping-hero,
.policy-hero,
.testimonials-hero,
.shop-hero,
.contact-hero,
.media-hero,
.post-hero {
    /* `min(1280px, 100% - 32px)` gives the hero a guaranteed 16px side
     * gap on any viewport narrower than 1312px — so the card doesn't
     * slam against the edge on tablet/mobile — while still capping at
     * 1280px on wider desktops. */
    max-width: min(1280px, 100% - 32px);
    margin: 24px auto 28px auto !important;
    padding: 48px 40px !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.05)) !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
    border-radius: 22px !important;
    color: var(--ink, #0d1424) !important;
    text-align: center !important;
    box-shadow: 0 20px 50px -30px rgba(15, 23, 42, 0.2);
    position: relative;
    overflow: hidden;
}
.about-hero::before,
.help-hero::before,
.shipping-hero::before,
.policy-hero::before,
.testimonials-hero::before,
.shop-hero::before,
.contact-hero::before,
.media-hero::before,
.post-hero::before {
    content: '';
    position: absolute;
    inset: auto -40% -60% auto;
    width: 60%;
    height: 180%;
    background: radial-gradient(circle at center, rgba(249, 115, 22, 0.08), transparent 60%);
    pointer-events: none;
}
.about-hero h1,
.help-hero h1,
.shipping-hero h1,
.policy-hero h1,
.testimonials-hero h1,
.shop-hero h1,
.contact-hero h1,
.media-hero h1,
.post-hero h1 {
    font-size: clamp(30px, 4vw, 48px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 12px 0 !important;
    color: var(--ink, #0d1424) !important;
    line-height: 1.1 !important;
    position: relative;
}
.about-hero p,
.help-hero p,
.shipping-hero p,
.policy-hero p,
.testimonials-hero p,
.shop-hero p,
.contact-hero p,
.media-hero p,
.post-hero p {
    font-size: 17px !important;
    color: var(--muted, #475569) !important;
    margin: 0 auto !important;
    max-width: 700px;
    position: relative;
}

/* media_post.php hero — breadcrumbs + post meta were colored for a dark
   hero bg, but the bridge repaints these as pale cards. Bump to readable
   brand colors instead of the amber/cream left over from the old skin. */
.post-hero .breadcrumbs{margin-bottom:14px !important;color:var(--muted,#475569) !important}
.post-hero .breadcrumbs a{color:var(--blue,#1d4ed8) !important;text-decoration:none !important;font-weight:600 !important}
.post-hero .breadcrumbs a:hover{color:var(--orange,#f97316) !important;text-decoration:underline !important}
.post-hero .breadcrumbs span{color:var(--muted,#94a3b8) !important}
.post-hero h1{
  text-shadow:none !important;
  padding:0 !important;max-width:900px !important;margin-left:auto !important;margin-right:auto !important;
}
.post-hero-meta{
  color:var(--muted,#64748b) !important;
  font-size:14px !important;font-weight:500 !important;
  justify-content:center !important;gap:18px !important;
}

/* about_wrenchy.php — "AI Parts Assistant" reads like a taglink, so upgrade
   it to a pill kicker that stands out against the blue hero gradient. */
.about-hero p {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #1d4ed8 !important;
    background: rgba(29, 78, 216, 0.12) !important;
    border: 1px solid rgba(29, 78, 216, 0.25) !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    max-width: none !important;
    margin: 6px auto 0 !important;
}

/* Generic content-body class some static pages use */
.main .content-body,
.main .page-content,
.main .article-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 40px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink, #1e293b);
}
.main .content-body h2,
.main .page-content h2,
.main .article-content h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 28px 0 12px 0 !important;
    color: var(--ink, #0d1424) !important;
}
.main .content-body h3,
.main .page-content h3,
.main .article-content h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 22px 0 8px 0 !important;
    color: var(--ink, #0d1424) !important;
}

/* Constrain the whole .main container on static pages so content doesn't stretch */
body.cms-no-route .main,
.main > .about-hero ~ *,
.main > .help-hero ~ *,
.main > .shipping-hero ~ *,
.main > .policy-hero ~ *,
.main > .testimonials-hero ~ *,
.main > .shop-hero ~ *,
.main > .contact-hero ~ *,
.main > .media-hero ~ *,
.main > .post-hero ~ * {
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Was fixed 40px — which ate ~20% of the screen on a 390vp phone.
     * Now scales from 16px (mobile) → 40px (desktop) so body content
     * reads full-width on small screens and stays padded on wide ones. */
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
}

/* ======================================================================
   v2 utility buttons (used across standalone scripts to replace
   inline-styled gradient buttons)
   ====================================================================== */

.btn-v2-primary {
    background: linear-gradient(180deg, #f97316, #ea580c) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(249, 115, 22, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transition: transform .12s, box-shadow .12s;
    font-family: inherit !important;
    line-height: 1.2;
    display: inline-block;
}
.btn-v2-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(249, 115, 22, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-v2-secondary {
    background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(37, 99, 235, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transition: transform .12s, box-shadow .12s;
    font-family: inherit !important;
    line-height: 1.2;
    display: inline-block;
}
.btn-v2-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(37, 99, 235, 0.6) !important;
}

.btn-v2-ghost {
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
    color: var(--ink, #0d1424) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 22px !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: border-color .12s, background .12s;
    font-family: inherit !important;
    display: inline-block;
}
.btn-v2-ghost:hover {
    border-color: var(--blue, #2563eb) !important;
    background: rgba(37, 99, 235, 0.05) !important;
}

.btn-v2-green {
    background: linear-gradient(180deg, #10b981, #059669) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(16, 185, 129, 0.5) !important;
    transition: transform .12s;
    font-family: inherit !important;
    display: inline-block;
}
.btn-v2-green:hover {
    transform: translateY(-1px);
}

/* (Removed stray DEBUG pink background on customer-account-login — the
   login page now inherits the same radial-gradient body treatment as
   forgotpassword / create pages via the `.auth-wrap` block below.) */

/* ======================================================================
   AUTH pages — login / register / forgotpassword (lifted from
   mockup-login.html / mockup-create-account.html / mockup-forgot-password.html)
   ====================================================================== */

.auth-wrap {
    padding: 48px 0 80px !important;
    position: relative !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}
.auth-wrap .wrap {
    padding: 0 32px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}
.auth-grid {
    display: grid !important;
    grid-template-columns: 1.15fr .85fr !important;
    gap: 28px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
}
.auth-grid.auth-grid-single {
    grid-template-columns: 1fr !important;
    max-width: 640px !important;
    margin: 0 auto !important;
}
.auth-card,
.auth-card.glass-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.auth-grid.auth-grid-single {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
}
.auth-card,
.auth-side {
    padding: 38px 40px 34px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
}
.auth-card.auth-centered {
    text-align: left;
}
.auth-head {
    margin-bottom: 28px;
}
.auth-head .kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 980px;
    background: rgba(29, 78, 216, 0.12);
    border: 1px solid rgba(29, 78, 216, 0.3);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--blue, #1d4ed8);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.auth-head .kicker-orange {
    color: #ea580c;
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.3);
}
.auth-head h1 {
    font-size: 42px;
    font-weight: 800;
    color: var(--ink, #0d1424);
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0 0 10px;
}
.auth-head h1 em {
    font-style: italic;
    background: linear-gradient(100deg, var(--blue, #1d4ed8), #f97316);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    padding-right: .12em;
    margin-right: -.06em;
}
.auth-head p {
    font-size: 15.5px;
    color: var(--muted, #6b7797);
    margin: 0;
    line-height: 1.55;
    max-width: 440px;
}

.auth-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
}
.af-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
.af-l {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink, #0d1424);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.af-l em {
    color: #dc2626;
    font-style: normal;
    margin-right: 4px;
}
.af-label input,
.af-label input[type="text"],
.af-label input[type="email"],
.af-label input[type="password"] {
    padding: 14px 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
    border-radius: 12px !important;
    font: inherit !important;
    font-size: 15.5px !important;
    background: #fff !important;
    color: var(--ink, #0d1424) !important;
    outline: none !important;
    transition: border-color .15s, box-shadow .15s !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.af-label input:focus {
    border-color: var(--blue, #1d4ed8) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1) !important;
}

.af-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.af-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 2px !important;
    width: 100% !important;
}
.af-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ink, #1e293b);
    cursor: pointer;
    font-weight: 500;
}
.af-check input {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--blue, #1d4ed8);
}
.af-check-wide {
    width: 100%;
    align-items: flex-start;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
}
.af-forgot {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--blue, #1d4ed8);
    text-decoration: none;
    transition: color .15s;
}
.af-forgot:hover {
    color: #f97316;
    text-decoration: underline;
}

.af-submit {
    margin-top: 10px;
    height: 54px;
    padding: 0 24px !important;
    border-radius: 12px !important;
    border: 0 !important;
    cursor: pointer;
    background: linear-gradient(135deg, var(--blue, #1d4ed8), #3b82f6) !important;
    color: #fff !important;
    font: inherit !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 12px 28px -8px rgba(29, 78, 216, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s !important;
}
.af-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 38px -10px rgba(29, 78, 216, 0.55) !important;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 16px;
    color: var(--muted, #6b7797);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(148, 163, 184, 0.3);
}

.auth-sso {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sso-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 20px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 12px;
    background: #fff;
    color: var(--ink, #0d1424);
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s ease;
}
.sso-btn:hover {
    border-color: var(--blue, #1d4ed8);
    background: rgba(29, 78, 216, 0.03);
    box-shadow: 0 6px 14px -4px rgba(29, 78, 216, 0.15);
}
.sso-alt {
    background: transparent;
}

.auth-side {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)),
                radial-gradient(520px 260px at 100% 0%, rgba(29, 78, 216, 0.08), transparent 65%),
                radial-gradient(520px 260px at 0% 100%, rgba(249, 115, 22, 0.06), transparent 65%);
    backdrop-filter: blur(22px);
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.auth-side-head .kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 980px;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.3);
    font-size: 11.5px;
    font-weight: 800;
    color: #ea580c;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.auth-side h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink, #0d1424);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 10px;
}
.auth-side h2 em {
    font-style: italic;
    background: linear-gradient(100deg, var(--blue, #1d4ed8), #f97316);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    padding-right: .12em;
    margin-right: -.06em;
}
.auth-side p {
    font-size: 15px;
    color: var(--muted, #6b7797);
    margin: 0;
    line-height: 1.6;
}
.auth-perks {
    list-style: none;
    padding: 0;
    margin: 24px 0 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-perks li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14.5px;
    color: var(--ink, #1e293b);
    line-height: 1.5;
}
.auth-perks .check {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #059669;
    font-weight: 900;
    font-size: 13px;
    display: grid;
    place-items: center;
}
.auth-perks li div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.auth-perks li b {
    color: var(--ink, #0d1424);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.auth-perks li span {
    color: var(--muted, #6b7797);
    font-size: 13.5px;
}
.auth-side-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ink, #0d1424), #1e2a50);
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(10, 20, 36, 0.45);
    transition: transform .2s, box-shadow .2s;
}
.auth-side-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px rgba(10, 20, 36, 0.55);
    color: #fff;
}
.auth-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 18px;
}
.at-tile {
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    text-align: center;
}
.at-tile b {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink, #0d1424);
}
.at-tile span {
    font-size: 12px;
    color: var(--muted, #6b7797);
}

@media (max-width: 880px) {
    .auth-wrap { padding: 24px 0 60px; }
    .auth-wrap .wrap { padding: 0 18px; }
    .auth-grid { grid-template-columns: 1fr; gap: 20px; }
    .auth-card, .auth-side { padding: 26px 22px 24px; }
    .auth-head h1 { font-size: 28px; }
    .auth-side h2 { font-size: 22px; }
    .af-grid-2 { grid-template-columns: 1fr; gap: 14px; }
}

/* ======================================================================
   My Account dashboard — mockup-my-account styles (bridge)
   ====================================================================== */

.myacc-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 32px 80px;
}
.myacc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.mah-kick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #059669;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.mah-kick .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #059669;
}
.myacc-head h1 {
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--ink, #0d1424);
}
.myacc-head h1 em {
    font-style: italic;
    background: linear-gradient(100deg, var(--blue, #1d4ed8), #f97316);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.myacc-head p {
    color: var(--muted, #6b7797);
    font-size: 15px;
    margin: 0;
}
.mah-signout {
    color: var(--muted, #6b7797);
    font-weight: 600;
    text-decoration: none;
    padding: 10px 18px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 10px;
    transition: color .15s, border-color .15s;
}
.mah-signout:hover {
    color: #ea580c;
    border-color: rgba(249, 115, 22, 0.4);
}

.myacc-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) {
    .myacc-grid { grid-template-columns: 1fr; }
}

.myacc-nav {
    position: sticky;
    top: 80px;
    padding: 12px;
    border-radius: 16px;
}
.myacc-nav nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--muted, #475569);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.nav-item:hover {
    background: rgba(29, 78, 216, 0.06);
    color: var(--blue, #1d4ed8);
}
.nav-item.active {
    background: rgba(29, 78, 216, 0.1);
    color: var(--blue, #1d4ed8);
}
.nav-item .count {
    margin-left: auto;
    background: rgba(148, 163, 184, 0.15);
    color: var(--muted, #64748b);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.myacc-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.stat {
    padding: 18px 20px;
    border-radius: 14px;
}
.stat .sk {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--muted, #6b7797);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.stat b {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink, #0d1424);
    letter-spacing: -0.02em;
}
.stat .sv-sub {
    display: block;
    font-size: 12px;
    color: var(--muted, #94a3b8);
    margin-top: 4px;
}

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 22px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.panel-head h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: var(--ink, #0d1424);
}
.panel-head h2 em {
    font-style: italic;
    color: var(--blue, #1d4ed8);
}
.panel-head-link {
    color: var(--blue, #1d4ed8);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.order-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.order-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    align-items: center;
}
.order-row:last-child { border-bottom: 0; }
.or-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(29, 78, 216, 0.08);
    color: var(--blue, #1d4ed8);
    display: grid;
    place-items: center;
}
.or-icon.oi-done { background: rgba(16, 185, 129, 0.08); color: #059669; }
.or-icon.oi-ship { background: rgba(249, 115, 22, 0.08); color: #ea580c; }
.or-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.or-top b {
    color: var(--ink, #0d1424);
    font-size: 14px;
}
.or-date {
    color: var(--muted, #94a3b8);
    font-size: 12px;
}
.or-items {
    color: var(--muted, #475569);
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 4px;
}
.or-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
}
.or-status {
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
}
.or-status.shipped { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
.or-status.processing { background: rgba(29, 78, 216, 0.1); color: var(--blue, #1d4ed8); }
.or-status.delivered { background: rgba(16, 185, 129, 0.1); color: #059669; }
.or-side {
    text-align: right;
}
.or-total {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink, #0d1424);
    margin-bottom: 4px;
}
.or-cta {
    display: inline-block;
    padding: 6px 14px;
    background: var(--blue, #1d4ed8);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
}
.or-cta.ghost {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: var(--ink, #1e293b);
}

.split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 760px) {
    .split-row { grid-template-columns: 1fr; }
    .myacc-main { gap: 16px; }
    .myacc-wrap { padding: 16px 18px 60px; }
}

/* ======================================================================
   Track order — mockup-track-order styles
   ====================================================================== */

.track-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 32px 80px;
}
.track-head {
    max-width: 680px;
    margin: 0 auto 28px;
    text-align: center;
}
.track-head .kicker-orange {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: #ea580c;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.track-head h1 {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--ink, #0d1424);
}
.track-head h1 em {
    font-style: italic;
    background: linear-gradient(100deg, var(--blue, #1d4ed8), #f97316);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.track-head p {
    color: var(--muted, #6b7797);
    font-size: 16px;
    margin: 0;
    line-height: 1.55;
}

.track-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 880px) {
    .track-grid { grid-template-columns: 1fr; }
    .track-wrap { padding: 24px 18px 60px; }
}

.track-form {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.track-submit {
    align-self: flex-start;
}
.track-help {
    font-size: 13px;
    color: var(--muted, #6b7797);
    margin: 0;
}

.track-side {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ts-tile {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--ink, #1e293b);
    line-height: 1.45;
}
.ts-tile b {
    display: block;
    color: var(--ink, #0d1424);
    margin-bottom: 2px;
}

/* ======================================================================
   Checkout success — mockup-checkout-success styles
   ====================================================================== */

.cs-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 32px 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cs-social {
    padding: 18px 22px;
}
.cs-social-head h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink, #0d1424);
}
.cs-social-head h3 em {
    font-style: normal;
    color: var(--blue, #1d4ed8);
}
.cs-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cs-sl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    color: var(--ink, #0d1424);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: border-color .15s, color .15s;
}
.cs-sl:hover {
    border-color: var(--blue, #1d4ed8);
    color: var(--blue, #1d4ed8);
}
.cs-si {
    display: grid;
    place-items: center;
}

.cs-hero {
    padding: 32px 36px;
    display: flex;
    gap: 22px;
    align-items: flex-start;
}
@media (max-width: 760px) {
    .cs-hero { flex-direction: column; padding: 22px; }
    .cs-wrap { padding: 20px 18px 60px; }
}
.cs-check {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #059669;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px -8px rgba(5, 150, 105, 0.5);
}
.cs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.cs-kicker .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #059669;
}
.cs-hero-body h1 {
    font-size: clamp(26px, 3.2vw, 34px);
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--ink, #0d1424);
    letter-spacing: -0.02em;
}
.cs-hero-body h1 em {
    font-style: italic;
    color: var(--blue, #1d4ed8);
}
.cs-lead {
    color: var(--muted, #475569);
    font-size: 15px;
    margin: 0 0 16px;
    line-height: 1.55;
}
.cs-orderbar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 14px 18px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    background: #fff;
}
.cs-obl {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--muted, #6b7797);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.cs-obv {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink, #0d1424);
    text-decoration: none;
}
.cs-obv:hover { color: var(--blue, #1d4ed8); }

.cs-ship {
    padding: 20px 24px;
}
.cs-ship h3 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted, #6b7797);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cs-ship p {
    margin: 0;
    color: var(--ink, #1e293b);
    font-size: 14px;
    line-height: 1.5;
}

.cs-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 0;
}
.cs-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    background: linear-gradient(180deg, #f97316, #ea580c);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 4px 14px -4px rgba(249, 115, 22, 0.55);
}
.cs-cta-primary:hover { transform: translateY(-1px); color: #fff; }

/* ======================================================================
   Generic glass-panel (already in mockup-theme but reinforce for bridge)
   ====================================================================== */
.glass-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72));
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    box-shadow: 0 8px 28px -14px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(10px);
}

/* Buy buttons wrapper. Margin zeroed out so the divider + affirm
   footer sits directly under the buttons (gap comes from the footer's
   own `margin-top:8px`). Previously `margin: 14px 0 18px 0` pushed the
   divider 18px below the buttons on HL + Magento; PS already had an
   inline `margin: 0 !important` override, creating an inconsistency. */
.product-page-buttons-wrapper,
.product-actions,
.btn-cart-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.btn-cart,
.addtocrt,
.add-to-cart-btn,
button.btn.btn-primary.add-to-cart {
    background: linear-gradient(180deg, #f97316, #ea580c) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: 0.01em !important;
    padding: 16px 26px !important;
    border-radius: 14px !important;
    cursor: pointer;
    box-shadow:
        0 4px 14px -4px rgba(249, 115, 22, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform .12s, box-shadow .12s;
    text-transform: none !important;
}
.btn-cart:hover,
.addtocrt:hover,
.add-to-cart-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 18px -4px rgba(249, 115, 22, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.bolt-checkout-button,
.bolt-multi-step-checkout {
    border-radius: 14px !important;
}

/* Core charge / deposit explainer */
.core-charge,
.core-refund,
.price-breakdown {
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 10px 0;
    font-size: 13px;
    color: var(--ink, #1e293b);
}

/* Product nav buttons (prev/next, see other) */
.product-nav-buttons {
    gap: 10px !important;
}
.product-nav-buttons a,
.product-nav-buttons button {
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
    color: var(--ink, #0f172a) !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: border-color .12s, background .12s;
}
.product-nav-buttons a:hover,
.product-nav-buttons button:hover {
    border-color: var(--blue, #2563eb) !important;
    background: rgba(37, 99, 235, 0.05) !important;
}

/* "Looking for a different?" panel */
.product-looking-for,
.looking-for-different,
.looking-different-panel {
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    margin: 14px 0 !important;
    box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.08);
}
.product-looking-for h3,
.looking-for-different h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--muted, #64748b) !important;
    margin: 0 0 10px 0 !important;
}

/* Fitment / product tabs */
.product-tabs {
    margin-top: 40px;
}
.product-tabs .tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    margin-bottom: 24px;
    padding-bottom: 0;
}
.product-tabs .tab-button {
    background: transparent !important;
    border: 0 !important;
    color: var(--muted, #64748b) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
    cursor: pointer;
    position: relative;
    border-bottom: 2px solid transparent !important;
    transition: color .12s, border-color .12s;
}
.product-tabs .tab-button:hover {
    color: var(--ink, #0f172a) !important;
}
.product-tabs .tab-button.active {
    color: var(--blue, #2563eb) !important;
    border-bottom-color: var(--blue, #2563eb) !important;
}
.product-tabs .tab-content {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 18px;
    padding: 24px 28px;
    box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.08);
}

/* Warranty / trust strip */
.warranty-section,
.trust-section,
.guarantee-box {
    background: rgba(37, 99, 235, 0.04);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 12px 0;
    display: flex;
    gap: 12px;
    align-items: center;
}

/* SEO nav at bottom */
.hl-seo-nav {
    margin: 40px 0 12px !important;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
}
.hl-seo-nav a {
    color: var(--muted, #64748b) !important;
    font-size: 13px;
    margin-right: 10px;
}
.hl-seo-nav a:hover {
    color: var(--blue, #2563eb) !important;
}

/* Related products strip */
.related-products {
    margin-top: 48px !important;
}
.related-products h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--ink, #0f172a) !important;
    margin: 0 0 18px 0 !important;
}

/* ======================================================================
   cscraper/mmp_template_final.php (PS-MMP) bridge
   ====================================================================== */

.mmp-container,
.mmp-wrapper,
#mmp-products,
.mmp-results {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 32px;
}

.mmp-results-grid,
.mmp-products-grid,
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}
@media (min-width: 1280px) {
    .mmp-results-grid,
    .mmp-products-grid,
    .products-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.mmp-card,
.product-card,
.mmp-product {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 18px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 280px;
}
.mmp-card:hover,
.product-card:hover,
.mmp-product:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.18);
}
.mmp-card img,
.product-card img,
.mmp-product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    mix-blend-mode: multiply;
    padding: 10px;
}
.mmp-card .product-name,
.product-card .product-name,
.mmp-product h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--ink, #0f172a) !important;
    margin: 0 0 4px 0 !important;
}
.mmp-card .price,
.product-card .price,
.mmp-product .price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--ink, #0f172a) !important;
    margin-top: auto !important;
}

/* Hide old MMP filter/sort/view-toggle bars (mockup has none) */
.mmp-filter-bar,
.mmp-sort-bar,
.results-bar,
.toolbar-results-count,
.category-toolbar-top {
    display: none !important;
}

/* ======================================================================
   cscraper/mmp_template_final.php — ACTUAL "beautified" classes
   ====================================================================== */

.category-container,
.category-container-header {
    background: transparent !important;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 32px;
}
.category-title-wrapper {
    margin: 24px 0 18px !important;
}
.category-title,
.category-title-wrapper h1 {
    font-size: clamp(24px, 3vw, 34px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink, #0f172a) !important;
}

/* Beautified filter sidebar */
.filters-section-beautified {
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: 18px !important;
    padding: 22px 20px !important;
    position: sticky;
    top: 80px;
    align-self: start;
}
.filter-group-beautified {
    border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
    padding: 12px 0 !important;
}
.filter-group-beautified:last-child {
    border-bottom: 0 !important;
}
.filter-title-beautified {
    font-weight: 700 !important;
    color: var(--ink, #0f172a) !important;
    font-size: 14px !important;
    margin-bottom: 8px;
}
.filter-btn-beautified {
    background: rgba(148, 163, 184, 0.1) !important;
    border: 1px solid transparent !important;
    color: var(--ink, #1e293b) !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: inline-block;
    margin: 2px 2px !important;
    transition: background .12s, border-color .12s;
}
.filter-btn-beautified:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
}
.filter-btn-beautified.active {
    background: var(--blue, #2563eb) !important;
    color: #fff !important;
    border-color: var(--blue, #2563eb) !important;
}

/* Beautified product grid items */
.item.product.product-item,
.product-content-row {
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.item.product.product-item:hover,
.product-content-row:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.35) !important;
    box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.18) !important;
}
.product-brand-data {
    font-size: 11px !important;
    color: var(--muted, #64748b) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.product-attributes-data {
    font-size: 12px !important;
    color: var(--muted, #64748b) !important;
}

/* ======================================================================
   cscraper/product-new.php (PS product) — ACTUAL "beautified" classes
   ====================================================================== */

.beautified-product {
    background: transparent !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 20px 32px !important;
}
.beautified-product .product-container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}
@media (max-width: 900px) {
    .beautified-product .product-container {
        grid-template-columns: 1fr;
    }
}

/* PS product fitment accordion */
.fitment-table-wrapper,
.fitment-scroll-container {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 16px 0;
}
.fitment-accordion {
    margin-top: 12px;
}
.make-header {
    background: rgba(37, 99, 235, 0.04) !important;
    border: 1px solid rgba(37, 99, 235, 0.15) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-weight: 700 !important;
    cursor: pointer;
    color: var(--ink, #0f172a) !important;
}
.make-header.expanded {
    background: rgba(37, 99, 235, 0.08) !important;
}
.make-content-inner {
    padding: 10px 0 !important;
}
.fitment-details-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}
.fitment-details-table th,
.fitment-details-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.fitment-details-table th {
    color: var(--muted, #64748b);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}

/* PS product feature/badge pills */
.features-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 12px 0;
}
.badge {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #065f46;
}
.badge-icon { color: #059669; }
.badge-text b { color: #064e3b; }

/* ======================================================================
   hollander-interchange/part-guide-viewer.php — ACTUAL classes (kb-*)
   ====================================================================== */

.kb-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 32px;
}

.kb-article-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}
@media (max-width: 900px) {
    .kb-article-layout { grid-template-columns: 1fr; }
}

/* Strip the outer `.kb-article-toc` panel styling — the inner `.kb-toc-card`
   already renders as a proper glass card, and the outer was creating a
   visible panel-in-panel nesting. Keep only the sticky positioning. */
.kb-article-toc {
    position: sticky;
    top: 80px;
    align-self: start;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: 13px;
    box-shadow: none;
}
.kb-article-toc a {
    display: block;
    padding: 8px 10px;
    color: var(--muted, #64748b);
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: 3px;
    transition: background .12s, color .12s;
}
.kb-article-toc a:hover,
.kb-article-toc a.active {
    background: rgba(37, 99, 235, 0.06);
    color: var(--blue, #2563eb);
}

.kb-article-main {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 20px;
    padding: 36px 44px;
    box-shadow: 0 8px 28px -14px rgba(15, 23, 42, 0.1);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink, #1e293b);
}
@media (max-width: 700px) {
    .kb-article-main { padding: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; }
}

.kb-article-header h1,
.kb-body h1 {
    font-size: clamp(26px, 3.4vw, 38px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 12px 0 !important;
    color: var(--ink, #0f172a) !important;
}
.kb-body h2 {
    font-size: 23px !important;
    font-weight: 800 !important;
    margin: 32px 0 12px 0 !important;
    color: var(--ink, #0f172a) !important;
}
.kb-body h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 22px 0 8px 0 !important;
    color: var(--ink, #0f172a) !important;
}
.kb-body p,
.kb-body ul,
.kb-body ol {
    margin: 12px 0 !important;
}

.kb-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;
}
.kb-action-btn {
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    color: var(--muted, #475569) !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color .12s, color .12s;
}
.kb-action-btn:hover {
    border-color: var(--blue, #2563eb) !important;
    color: var(--blue, #2563eb) !important;
}

.kb-author-card {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(37, 99, 235, 0.04);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    margin: 18px 0;
}
.kb-author-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: 0 0 44px;
}

.kb-drive-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700;
    margin: 14px 0;
}
.kb-drive-yes-but {
    background: rgba(249, 115, 22, 0.08);
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.kb-browse-more {
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 22px 0;
}
.kb-browse-more-title {
    font-weight: 800 !important;
    color: var(--ink, #0f172a) !important;
    font-size: 15px !important;
    margin-bottom: 8px;
}
.kb-browse-more-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kb-browse-more-link {
    background: #fff !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    color: var(--ink, #0f172a) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: border-color .12s;
}
.kb-browse-more-link:hover {
    border-color: var(--blue, #2563eb) !important;
    color: var(--blue, #2563eb) !important;
}

.kb-garage-banner {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(249, 115, 22, 0.06));
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 24px 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Garage browse/hero classes */
.kb-hero {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.06));
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 20px;
    padding: 36px 40px;
    margin-bottom: 24px;
}
.kb-hero h1 {
    font-size: clamp(28px, 3.6vw, 40px) !important;
    font-weight: 800 !important;
    color: var(--ink, #0f172a) !important;
    margin: 0 0 8px 0 !important;
}

/* ======================================================================
   hollander-interchange/part-guide-viewer.php (garage article) legacy bridge
   — also map to generic selectors just in case
   ====================================================================== */

.part-guide-container,
.garage-article-container,
.article-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
}
@media (max-width: 900px) {
    .part-guide-container,
    .garage-article-container,
    .article-page {
        grid-template-columns: 1fr;
    }
}

.article-sidebar,
.garage-sidebar,
.toc {
    position: sticky;
    top: 80px;
    align-self: start;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    padding: 18px 16px;
    font-size: 13px;
}
.article-sidebar a,
.garage-sidebar a,
.toc a {
    display: block;
    padding: 6px 8px;
    color: var(--muted, #64748b);
    border-radius: 6px;
    text-decoration: none;
    margin-bottom: 2px;
}
.article-sidebar a:hover,
.garage-sidebar a:hover,
.toc a:hover {
    background: rgba(37, 99, 235, 0.06);
    color: var(--blue, #2563eb);
}
.article-sidebar a.active,
.garage-sidebar a.active,
.toc a.active {
    background: rgba(37, 99, 235, 0.08);
    color: var(--blue, #2563eb);
    font-weight: 600;
}

.article-main,
.garage-article-main,
.article-body {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    padding: 32px 40px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink, #1e293b);
    box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.08);
}
.article-main h1,
.garage-article-main h1,
.article-body h1 {
    font-size: clamp(26px, 3.4vw, 38px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 10px 0 !important;
}
.article-main h2,
.garage-article-main h2,
.article-body h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 28px 0 10px 0 !important;
    color: var(--ink, #0f172a) !important;
}
.article-main h3,
.garage-article-main h3,
.article-body h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 22px 0 8px 0 !important;
    color: var(--ink, #0f172a) !important;
}

/* Hide old "Updated" metadata / byline strip styling; let it pick up v2 */
.article-meta,
.article-byline {
    color: var(--muted, #94a3b8) !important;
    font-size: 13px !important;
}

/* Related-IC chips at bottom */
.related-ics,
.ic-chips,
.siblings-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.related-ics a,
.ic-chips a,
.siblings-list a {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--ink, #0f172a);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: border-color .12s;
}
.related-ics a:hover,
.ic-chips a:hover,
.siblings-list a:hover {
    border-color: var(--blue, #2563eb);
    color: var(--blue, #2563eb);
}

/* ======================================================================
   Legacy Magento catalog grid (shop-by-make, category.phtml)
   ====================================================================== */

.category-products .products-grid,
.category-products .products-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.category-products .product-image {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    padding: 10px;
}

/* Old Magento product-name shims */
h2.product-name,
.product-name a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--ink, #0f172a) !important;
    line-height: 1.3 !important;
}

/* ======================================================================
   HOME PAGE — lifted from mockup-home.html <style> block
   ====================================================================== */
/* ════════ HOME PAGE ONLY ════════ */
.home-hero{
  padding:40px 0 56px;position:relative;
}

/* ───── ?v=old — strip the stage panel, revert to pre-panel hero layout ───── */
html.v-old .home-hero-stage{
  padding:0 !important;border:0 !important;border-radius:0 !important;
  background:none !important;box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  overflow:visible !important;
}
html.v-old .home-hero-stage::before,
html.v-old .home-hero-stage::after{display:none !important}
html.v-old .home-hero{padding:64px 0 72px;overflow:hidden;border-bottom:1px solid rgba(26,61,176,.06)}
html.v-old .home-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(680px 380px at 8% 20%,rgba(255,122,26,.1),transparent 60%),
    radial-gradient(720px 420px at 92% 40%,rgba(26,61,176,.12),transparent 62%),
    radial-gradient(520px 300px at 40% 100%,rgba(251,191,36,.06),transparent 65%);
}
html.v-old .home-hero::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(26,61,176,.18),transparent);
}
html.v-old .home-hero .wrap{position:relative;z-index:2}
/* Wrap the entire hero inside a distinct liquid-glass "stage" panel */
.home-hero-stage{
  position:relative;border-radius:28px;padding:56px clamp(32px,5vw,72px) 56px;
  background:
    radial-gradient(680px 380px at 10% 20%,rgba(255,122,26,.13),transparent 60%),
    radial-gradient(720px 420px at 90% 30%,rgba(26,61,176,.14),transparent 62%),
    radial-gradient(520px 300px at 40% 100%,rgba(251,191,36,.08),transparent 65%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 40px 80px -32px rgba(26,61,176,.22),
    0 0 0 1px rgba(26,61,176,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  overflow:hidden;
}
.home-hero-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(255,255,255,.4),transparent 50%),
    radial-gradient(260px 160px at 100% 0%,rgba(26,61,176,.08),transparent 70%);
  mix-blend-mode:overlay;
}
.home-hero-stage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none;border-radius:0 0 28px 28px;
  background:linear-gradient(90deg,transparent,var(--orange) 35%,var(--blue) 65%,transparent);
  opacity:.5;
}
.home-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;z-index:1}

/* Full-width H1 spanning both columns of the hero stage */
.home-hero-title{
  position:relative;z-index:1;
  /* `isolation:isolate` creates a new stacking context so the ::before
   * checker pattern (z-index:-1) renders behind the h1's own text but
   * above the hero stage's background layers. */
  isolation:isolate;
  font-size:88px;font-weight:800;color:var(--ink);letter-spacing:-0.045em;line-height:1;
  /* Wrap the h1 text in a glass pill — inline-block + auto margins so
   * the pill shrink-wraps the text rather than spanning the full card. */
  display:inline-block !important;
  width:fit-content !important;max-width:100% !important;
  padding:18px 52px 22px !important;
  border-radius:22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74)) !important;
  border:1px solid rgba(148,163,184,.32) !important;
  box-shadow:
    0 24px 48px -26px rgba(15,23,42,.3),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  margin:0 auto 36px !important;text-align:center;
}
/* Stage needs centering for the inline-block pill to sit in the middle. */
.home-hero-stage{text-align:center}
@media(max-width:640px){
  .home-hero-title{padding:14px 26px 16px !important;border-radius:18px !important}
}
/* (Checkered-flag background pattern removed — replaced by the animated
 * gradient sheen on `.home-hero-title em` below.) */
.home-hero-title em{
  font-style:italic;
  /* Two stacked layers used for the sheen sweep:
   *   layer 1: a moving white highlight (large background-size so we can
   *            slide it across on a keyframe animation)
   *   layer 2: the static blue→orange brand gradient
   * Both are clipped to the text via background-clip:text. The sweep
   * creates a periodic shimmer running across the gradient word. */
  background:
    linear-gradient(100deg, transparent 30%, rgba(255,255,255,.72) 50%, transparent 70%) 0 0 / 220% 100% no-repeat,
    linear-gradient(100deg, var(--blue), var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.12em;margin-right:-0.06em;
  animation:gp-sheen 5s cubic-bezier(.4,0,.2,1) infinite;
  will-change:background-position;
}
@keyframes gp-sheen{
  0%        { background-position: 220% 0, 0 0 }
  55%, 100% { background-position:-120% 0, 0 0 }
}
/* Respect reduced-motion users — they just see the static gradient word. */
@media (prefers-reduced-motion: reduce){
  .home-hero-title em{animation:none}
}
@media(max-width:880px){
  .home-hero-title{font-size:56px;margin-bottom:28px}
}
@media(max-width:520px){
  .home-hero-title{font-size:42px;margin-bottom:22px}
}

/* "Welcome to Go-Parts." — elegant large intro line above the H1 */
.home-hero-copy .welcome{
  display:block;margin-bottom:18px;
  font-size:28px;font-weight:500;color:var(--ink-2);letter-spacing:-0.02em;line-height:1.15;
  font-style:italic;
}
.home-hero-copy .welcome em{
  font-style:italic;font-weight:800;letter-spacing:-0.025em;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.12em;margin-right:-0.06em;
}
.home-hero-copy h1{
  font-size:72px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;line-height:1;
  margin:0 0 11px;
}
.home-hero-copy h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
/* Tagline — one confident sentence, with subtle emphasis on the commitment half */
.home-hero-copy .tagline{
  font-size:21px;color:var(--ink-2);margin:0 0 7px;line-height:1.55;font-weight:500;max-width:560px;
}
.home-hero-copy .tagline b{color:var(--ink);font-weight:700}
/* Promise — sits as an italic caption with a small orange accent dash */
.home-hero-copy .promise{
  font-size:15px;color:var(--blue);margin:0 0 17px;font-weight:700;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;font-style:normal;
}
.home-hero-copy .promise .pm-dash{
  width:28px;height:2px;background:linear-gradient(90deg,var(--orange),transparent);border-radius:2px;
}

/* Proof strip — three inline stats below CTAs */
.hero-proof{
  margin-top:26px;display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.6));
  border:1px solid rgba(26,61,176,.08);
  box-shadow:0 8px 22px -14px rgba(26,61,176,.18),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
}
.hero-proof .pf-chip{display:flex;flex-direction:column;line-height:1.1}
.hero-proof .pf-chip b{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-0.02em}
.hero-proof .pf-chip em{font-size:12px;color:var(--muted);font-weight:600;font-style:normal;margin-top:3px;letter-spacing:.01em}
.hero-proof .pf-dot{
  width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,var(--orange),transparent);
  opacity:.5;
}
.home-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.home-cta{
  display:inline-flex;align-items:center;gap:10px;
  height:56px;padding:0 28px;border-radius:14px;
  font-size:15px;font-weight:700;letter-spacing:-0.005em;border:0;cursor:pointer;
  text-decoration:none;transition:all .2s ease;
}
.home-cta.primary{
  background:linear-gradient(135deg,var(--ink),#1e2a50);color:#fff;
  box-shadow:0 12px 32px -10px rgba(10,20,36,.5),inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;overflow:hidden;
}
.home-cta.primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.home-cta.primary:hover::after{transform:translateX(100%)}
.home-cta.primary:hover{box-shadow:0 16px 40px -8px rgba(29,78,216,.5)}
.home-cta.secondary{
  background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;
  box-shadow:0 12px 32px -10px rgba(255,122,26,.55),inset 0 1px 0 rgba(255,255,255,.2);
}
.home-cta.secondary:hover{transform:translateY(-1px);box-shadow:0 16px 40px -6px rgba(255,122,26,.6)}

/* Hero image card */
.home-hero-media{
  position:relative;border-radius:22px;overflow:hidden;
  box-shadow:0 40px 80px -24px rgba(10,20,36,.4),0 0 0 1px rgba(26,61,176,.06);
}
.home-hero-media img{display:block;width:100%;height:auto}
.home-hero-media::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(26,61,176,.18),transparent 40%,transparent 60%,rgba(255,122,26,.18));
  mix-blend-mode:overlay;
}
.home-hero-media .badge{
  position:absolute !important;top:22px !important;left:22px !important;
  display:inline-flex !important;align-items:center !important;gap:8px !important;
  padding:8px 14px !important;border-radius:980px !important;
  background:rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  font-size:12.5px !important;font-weight:700 !important;color:var(--ink) !important;letter-spacing:0.02em !important;
  box-shadow:0 6px 16px -4px rgba(10,20,36,.2) !important;
}
.home-hero-media .badge .dot{width:7px !important;height:7px !important;background:#10b981 !important;border-radius:50% !important;animation:livePulse 2s infinite !important;border:0 !important;padding:0 !important}

/* B2B button — sleek dark pill with orange wrench accent */
.b2b-btn{
  margin:28px 0 0;display:inline-flex;align-items:center;gap:11px;
  padding:11px 18px 11px 13px;border-radius:980px;
  background:linear-gradient(135deg,#0f1729,#1e2a50);
  color:#fff;text-decoration:none;font-size:14.5px;font-weight:700;letter-spacing:-0.01em;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 24px -10px rgba(10,20,36,.45),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s;
  position:relative;overflow:hidden;
}
.b2b-btn::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(180px 60px at 100% 50%,rgba(255,122,26,.22),transparent 70%);
  opacity:0;transition:opacity .25s ease;
}
.b2b-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(255,122,26,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.b2b-btn:hover::before{opacity:1}
.b2b-btn .b2b-ico{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;
  box-shadow:0 4px 10px -3px rgba(255,122,26,.55);
}
.b2b-btn .b2b-copy{color:rgba(255,255,255,.7);font-weight:500}
.b2b-btn .b2b-copy b{color:#fff;font-weight:800;margin-left:3px}
.b2b-btn .b2b-arrow{color:var(--orange);font-weight:800;font-size:16px;transition:transform .2s ease;margin-left:2px}
.b2b-btn:hover .b2b-arrow{transform:translateX(4px)}
.b2b-banner .arrow{margin-left:6px;color:var(--orange);font-weight:700;transition:transform .2s ease}
.b2b-banner:hover .arrow{transform:translateX(4px)}

/* USP grid — glass cards */
.usp-section{padding:56px 0 56px}
.usp-head{text-align:center;margin-bottom:40px}
.usp-head .kicker{
  display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--orange);
  letter-spacing:0;margin-bottom:14px;
}
.usp-head .kicker .dash{width:40px;height:1px;background:var(--orange);opacity:.5}
.usp-head h2{font-size:52px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;line-height:1.05;margin:0}
.usp-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.usp-head p{font-size:17px;color:var(--muted);margin:14px auto 0;max-width:620px;line-height:1.55}

.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.usp-card{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:32px 28px;
  /* 4 layers in a FIXED ORDER so box-shadow transitions interpolate smoothly
     1: drop  2: ring  3: halo (invisible in base)  4: inset highlight */
  box-shadow:
    0 20px 50px -20px rgba(26,61,176,.15),
    0 0 0 1px rgba(26,61,176,.04),
    0 0 0 rgba(26,61,176,0),
    inset 0 1px 0 rgba(255,255,255,.9);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;text-align:center;
  position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.25,.9,.3,1),box-shadow .25s ease;
}
.usp-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(26,61,176,.15),transparent 50%,rgba(255,122,26,.1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.6;
}
.usp-card.tap:hover{
  /* Same layer order as base so transition interpolates layer-by-layer */
  background:linear-gradient(180deg,rgba(239,246,255,.95),rgba(224,236,255,.82));
  border-color:rgba(26,61,176,.22);
  box-shadow:
    0 24px 56px -18px rgba(26,61,176,.45),
    0 0 0 1px rgba(26,61,176,.38),
    0 0 40px rgba(26,61,176,.38),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.usp-card.tap{cursor:pointer}
.usp-card .icon-wrap{
  width:88px;height:88px;border-radius:22px;
  display:grid;place-items:center;margin-bottom:22px;
  background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.05));
  border:1px solid rgba(26,61,176,.12);
  position:relative;z-index:1;
}
.usp-card.wrenchy .icon-wrap{background:linear-gradient(135deg,rgba(255,212,59,.2),rgba(255,122,26,.15));border-color:rgba(255,122,26,.25)}
.usp-card .icon-wrap img{width:64px;height:64px;object-fit:contain}
.usp-card .icon-wrap svg{width:48px;height:48px;color:var(--blue)}
.usp-card.wrenchy .icon-wrap img{width:72px;height:72px}
.usp-card h3{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-0.015em;line-height:1.25;margin:0 0 10px;position:relative;z-index:1}
.usp-card p{font-size:14px;color:var(--ink-2);line-height:1.6;margin:0;position:relative;z-index:1}
.usp-card .tap-hint{margin-top:18px;font-size:12px;font-weight:700;color:var(--blue);letter-spacing:0.04em;text-transform:uppercase;position:relative;z-index:1}
.usp-card .tap-hint .arrow{display:inline-block;margin-left:4px;transition:transform .2s ease}
.usp-card.tap:hover .tap-hint .arrow{transform:translateX(3px)}

/* Color accents per card */
.usp-card.accent-blue .icon-wrap{background:linear-gradient(135deg,rgba(26,61,176,.12),rgba(29,78,216,.06));color:var(--blue)}
.usp-card.accent-blue .icon-wrap svg{color:var(--blue)}
.usp-card.accent-green .icon-wrap{background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(34,197,94,.08));border-color:rgba(16,185,129,.25)}
.usp-card.accent-green .icon-wrap svg{color:#059669}
.usp-card.accent-purple .icon-wrap{background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(139,92,246,.08));border-color:rgba(124,58,237,.25)}
.usp-card.accent-purple .icon-wrap svg{color:#7c3aed}
.usp-card.accent-teal .icon-wrap{background:linear-gradient(135deg,rgba(8,145,178,.14),rgba(6,182,212,.08));border-color:rgba(8,145,178,.25)}
.usp-card.accent-teal .icon-wrap svg{color:#0891b2}
.usp-card.accent-amber .icon-wrap{background:linear-gradient(135deg,rgba(217,119,6,.14),rgba(251,191,36,.08));border-color:rgba(217,119,6,.25)}
.usp-card.accent-amber .icon-wrap svg{color:#d97706}

/* Reviews */
.home-reviews{padding:48px 0 64px}

/* Responsive */
@media (max-width:1024px){
  .home-hero-copy h1{font-size:52px}
  .usp-head h2{font-size:42px}
}
@media (max-width:768px){
  .home-hero-grid{grid-template-columns:1fr;gap:36px}
  .home-hero-copy h1{font-size:40px;margin-bottom:0 !important}
  .home-hero-copy .tagline{font-size:17px;margin-bottom:0 !important}
  .home-hero-copy .helper,.home-hero-copy .promise{font-size:15px;margin-bottom:0 !important}
  .home-cta{height:50px;padding:0 22px;font-size:14px}
  .usp-head h2{font-size:32px}
  .usp-grid{grid-template-columns:1fr;gap:14px}
  .usp-card{padding:28px 24px}
}

/* ════════ READABILITY BUMPS — mockup-home final override layer ════════ */
.home-hero-copy .tagline{font-size:22px !important;line-height:1.6 !important}
.home-hero-copy .promise{font-size:16px !important;letter-spacing:.015em !important}
.hero-proof .pf-chip b{font-size:18px !important}
.hero-proof .pf-chip em{font-size:13px !important}
.home-hero-media .badge{font-size:13.5px !important;padding:9px 15px !important}
.b2b-btn{font-size:15px !important;padding:12px 20px 12px 14px !important}
.b2b-btn .b2b-copy{font-size:15px !important}
.usp-head .kicker{font-size:15px !important}
.usp-head p{font-size:18px !important}
.usp-card h3{font-size:21px !important}
.usp-card p{font-size:15.5px !important;line-height:1.65 !important}
.usp-card .tap-hint{font-size:13px !important}
.racing-head .kicker{font-size:14.5px !important}
.video-card .label b{font-size:17px !important}
.video-card .label span{font-size:12.5px !important}
.reviews-head .rh-txt{font-size:15.5px !important}
.foot-brand .tag{font-size:17px !important}
.foot-brand .meta{font-size:13px !important;line-height:1.75 !important}
.foot-links a{font-size:14.5px !important}
.brand-copy{font-size:13px !important}

/* ===== CART PAGE (mockup-cart.html) ===== */
/* ════════ CART PAGE ════════ */
.continue-link{font-size:14px;font-weight:700;color:var(--blue);text-decoration:none;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:#fff;transition:all .15s ease}
.continue-link:hover{border-color:var(--blue);transform:translateX(-2px);box-shadow:0 4px 14px -4px rgba(26,61,176,.25)}

.cart-body{padding:20px 0 80px}
.cart-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:28px;align-items:start}
.cart-main{min-width:0;display:flex;flex-direction:column;gap:16px}

.cart-items-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}
.cart-items-head h2{font-size:22px}
.items-count{font-size:13px;color:var(--muted);font-weight:500;margin-left:10px}
.items-count b{color:var(--blue);font-weight:800}

.cart-list{display:flex;flex-direction:column;gap:4px}

/* Individual cart line item */
.cart-item{
  display:grid;grid-template-columns:76px 1fr auto;gap:16px;
  align-items:center;padding:12px 14px;border-radius:12px;
  transition:background .15s ease;
  position:relative;
}
.cart-item + .cart-item{border-top:1px solid var(--line-soft)}
.cart-item.removing{opacity:0;transform:translateX(-12px);transition:all .3s ease}
.cart-item .thumb{
  width:76px;height:76px;border-radius:10px;
  background:#fff;border:1px solid var(--line);
  background-size:84%;background-repeat:no-repeat;background-position:center;
  box-shadow:0 2px 6px rgba(10,20,36,.05);flex:none;
}
.cart-item .info{display:flex;flex-direction:column;gap:4px;min-width:0}
.cart-item .title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;line-height:1.3}
.cart-item .title a{color:inherit;text-decoration:none}
.cart-item .title a:hover{color:var(--blue)}
.cart-item .vehicle{font-size:13px;color:var(--muted);font-weight:500}
.cart-item .meta-row{display:flex;align-items:center;gap:14px;margin-top:4px;flex-wrap:wrap}
.cart-item .qty-box{height:32px !important}
.cart-item .qty-box button{width:28px}
.cart-item .qty-box input{width:32px;font-size:13.5px}
.cart-item .price-col{min-width:80px !important;gap:2px !important}
.cart-item .line-price{font-size:19px !important}
.cart-item .sku{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--muted);letter-spacing:0.04em}
.cart-item .sku b{color:var(--ink);font-weight:700;margin-left:4px}
.cart-item .condition{font-size:11px;font-weight:700;padding:3px 9px;border-radius:980px;background:rgba(22,163,74,.1);color:#059669;border:1px solid rgba(22,163,74,.22);letter-spacing:0.04em;text-transform:uppercase}
.cart-item .qty-box{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;height:36px;overflow:hidden}
.cart-item .qty-box button{width:32px;height:100%;background:transparent;border:0;font:inherit;font-size:16px;cursor:pointer;color:var(--ink);font-weight:700}
.cart-item .qty-box button:hover{background:var(--bg-2)}
.cart-item .qty-box input{width:36px;text-align:center;border:0;outline:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--ink)}
.cart-item .remove-btn{background:transparent;border:0;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;letter-spacing:0;padding:0;display:inline-flex;align-items:center;gap:4px}
.cart-item .remove-btn:hover{color:#dc2626;text-decoration:underline}
.cart-item .price-col{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:90px}
.cart-item .line-price{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;font-variant-numeric:tabular-nums;line-height:1}
.cart-item .unit-price{font-size:11.5px;color:var(--muted);font-weight:500}

/* Promo / gift card rows */
.promo-row{border-bottom:1px solid var(--line-soft)}
.promo-row:last-child{border-bottom:0}
.promo-row summary{display:flex;align-items:center;gap:14px;padding:20px 28px;cursor:pointer;list-style:none;user-select:none;transition:background .15s ease}
.promo-row summary::-webkit-details-marker{display:none}
.promo-row summary:hover{background:var(--bg-2)}
.promo-row .icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.05));color:var(--blue);display:grid;place-items:center;flex:none}
.promo-row .text{flex:1;font-size:14.5px;color:var(--ink-2)}
.promo-row .text b{color:var(--ink);font-weight:800;margin-right:4px}
.promo-row .chev{color:var(--muted);transition:transform .2s ease;font-size:16px}
.promo-row[open] .chev{transform:rotate(180deg)}
.promo-row .promo-body{padding:0 28px 22px;display:flex;flex-direction:column;gap:10px}
.btn-apply{height:46px;padding:0 20px;border:0;border-radius:10px;background:var(--ink);color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;letter-spacing:-0.005em}
.btn-apply:hover{background:var(--blue)}
.promo-note{font-size:13px;color:#047857;font-weight:700}

/* Right sidebar */
.cart-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:100px;align-self:start}

.summary-panel .sum-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;font-size:15px;color:var(--ink-2)}
.summary-panel .sum-row span.muted{color:var(--muted);font-size:13.5px}
.summary-panel .sum-row b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;font-size:16px}
.summary-panel .sum-divider{height:1px;background:var(--line);margin:10px -4px 8px}
.summary-panel .sum-row.total{font-size:19px;padding:8px 0 18px}
.summary-panel .sum-row.total span{font-weight:700;color:var(--ink)}
.summary-panel .sum-row.total b{font-size:28px;letter-spacing:-0.03em;color:var(--ink)}

.checkout-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:58px;border:0;border-radius:14px;
  background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;
  font:inherit;font-weight:800;font-size:17px;letter-spacing:-0.005em;cursor:pointer;
  box-shadow:0 16px 32px -10px rgba(255,122,26,.55),inset 0 1px 0 rgba(255,255,255,.25);
  transition:all .2s ease;position:relative;overflow:hidden;
}
.checkout-btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.checkout-btn:hover::after{transform:translateX(100%)}
.checkout-btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -8px rgba(255,122,26,.65)}

/* (old .pay-methods styles removed — now using simple img row matching live cart) */
.pay{
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;min-width:44px;padding:0 9px;border-radius:6px;
  font-size:10.5px;font-weight:900;letter-spacing:0.02em;color:#fff;
  background:#333;border:1px solid rgba(255,255,255,.1);
}
.pay.visa{background:linear-gradient(135deg,#1a1f71,#0e2c82)}
.pay.mc{background:linear-gradient(135deg,#eb001b,#f79e1b);color:#fff}
.pay.amex{background:linear-gradient(135deg,#2e77bb,#1f4e8b)}
.pay.disc{background:linear-gradient(135deg,#ff6000,#ff8d3f);color:#fff}
.pay.paypal{background:linear-gradient(135deg,#003087,#009cde)}
.pay.amzn{background:linear-gradient(135deg,#ff9900,#ff7200);color:#000}
.pay.affirm{background:#000;color:#fff;font-style:italic}

.secure-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;padding:10px 14px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.2);border-radius:10px;font-size:12.5px;color:#047857;font-weight:600}

/* Trust stack — each tile shows a guarantee */
.trust-stack{display:flex;flex-direction:column;gap:10px}
.trust-tile{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 24px -12px rgba(26,61,176,.15),inset 0 1px 0 rgba(255,255,255,.9);
}
.trust-tile .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.trust-tile .txt{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px;color:var(--muted);line-height:1.45}
.trust-tile .txt b{color:var(--ink);font-weight:800;font-size:14px;letter-spacing:-0.01em}
.trust-tile.accent-green .ico{background:rgba(22,163,74,.12);color:#059669}
.trust-tile.accent-purple .ico{background:rgba(124,58,237,.12);color:#7c3aed}
.trust-tile.accent-teal .ico{background:rgba(8,145,178,.12);color:#0891b2}

/* Empty-cart state */
.cart-empty{text-align:center;padding:60px 28px}
.cart-empty .empty-icon{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:var(--bg-2);color:var(--muted);display:grid;place-items:center}
.cart-empty h3{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;margin:0 0 6px}
.cart-empty p{color:var(--muted);font-size:15px;margin:0 0 22px}
.cart-empty-actions{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cart-empty .go-shop{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:12px;text-decoration:none;font-weight:700;font-size:14px;transition:all .2s ease}
.cart-empty .go-shop.primary{background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;box-shadow:0 10px 24px -8px rgba(255,122,26,.5)}
.cart-empty .go-shop.primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px -8px rgba(255,122,26,.6)}
.cart-empty .go-shop.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.cart-empty .go-shop.ghost:hover{background:var(--bg-2);border-color:var(--ink)}

/* ════════ CART NOTICES (hazmat, cat-restriction) ════════ */
.cart-notice{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 20px;border-radius:16px;
  margin:0;position:relative;overflow:hidden;
  border:1px solid transparent;
  backdrop-filter:blur(18px);
}
.cart-notice.hazmat{
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(5,150,105,.06));
  border-color:rgba(16,185,129,.3);
}
.cart-notice.hazmat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#10b981,#059669);
}
.cart-notice.catres{
  background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(220,38,38,.06));
  border-color:rgba(220,38,38,.35);
}
.cart-notice.catres::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#ef4444,#b91c1c);
}
.cart-notice .n-ico{
  flex:none;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;font-size:22px;
}
.cart-notice.hazmat .n-ico{background:rgba(16,185,129,.15);color:#059669}
.cart-notice.catres .n-ico{background:rgba(239,68,68,.15);color:#b91c1c}
.cart-notice.catres strong{color:#b91c1c !important;}
.cart-notice .n-body{flex:1;min-width:0}
.cart-notice strong{display:block;font-size:15px;color:var(--ink);font-weight:800;margin-bottom:3px;letter-spacing:-0.01em}
.cart-notice p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}
.cart-notice p b{color:var(--ink);font-weight:700}

/* ════════ ITEM EXTRAS (core refund chip, free shipping, need more) ════════ */
.item-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;align-items:center}
.core-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:980px;
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(5,150,105,.06));
  border:1px solid rgba(16,185,129,.28);
  font-size:12px;font-weight:700;color:#059669;letter-spacing:0;
  position:relative;cursor:help;
}
.core-chip svg{opacity:.7}
.core-chip .core-tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:260px;padding:12px 14px;border-radius:10px;
  background:#0f1729;color:#e2e8f0;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:0;
  opacity:0;visibility:hidden;transition:all .18s ease;pointer-events:none;z-index:40;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.45);
}
.core-chip .core-tooltip::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#0f1729;
}
.core-chip:hover .core-tooltip,.core-chip:focus-within .core-tooltip{opacity:1;visibility:visible}
.free-ship-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:980px;
  background:linear-gradient(135deg,#059669,#10b981);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;
  box-shadow:0 4px 10px -4px rgba(16,185,129,.5);
}
.free-ship-chip svg{opacity:.95}
.need-more{
  font-size:12px;font-weight:700;color:var(--blue);text-decoration:none;
  padding:3px 8px;border-radius:8px;background:rgba(26,61,176,.06);border:1px dashed rgba(26,61,176,.3);
  transition:all .15s;
}
.need-more:hover{background:var(--blue);color:#fff;border-style:solid;border-color:var(--blue)}

/* ════════ CUSTOMERS ALSO BOUGHT ════════ */
.cab-section{margin-top:18px}
.cab-section h2{
  font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.2;margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.cab-section h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.cab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1024px){.cab-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.cab-grid{grid-template-columns:repeat(2,1fr)}}
.cab-card{
  display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(26,61,176,.1);
  box-shadow:0 10px 24px -16px rgba(26,61,176,.2);
  text-decoration:none;color:inherit;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s;
  position:relative;overflow:hidden;
}
.cab-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(26,61,176,.28);border-color:var(--blue)}
.cab-thumb{
  aspect-ratio:1.25/1;border-radius:10px;background:#fff center/contain no-repeat;
  border:1px solid var(--line-soft);
}
.cab-brand{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:0.06em;text-transform:uppercase}
.cab-name{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35;letter-spacing:-0.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cab-price{font-size:18px;font-weight:800;color:var(--ink);margin-top:auto}
.cab-price .small{font-size:12px;font-weight:700;color:var(--muted);margin-left:4px;text-decoration:line-through}
.cab-add{
  margin-top:6px;padding:8px 12px;border-radius:9px;
  background:rgba(26,61,176,.08);border:1px solid rgba(26,61,176,.18);
  color:var(--blue);font-size:12.5px;font-weight:800;text-align:center;letter-spacing:0.01em;
  transition:all .15s;
}
.cab-card:hover .cab-add{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Dynamic cab-card layout: clickable top + action buttons pinned to bottom */
.cab-card-top{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;flex:1}
.cab-card-top:hover{text-decoration:none}
.cab-actions{display:grid;grid-template-columns:1fr;gap:6px;margin-top:8px}
.cab-add-form{margin:0;display:block}
.cab-btn{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  padding:10px 8px;border-radius:9px;font-size:13px;font-weight:800;
  text-decoration:none;cursor:pointer;letter-spacing:0.01em;
  transition:all .15s;min-height:40px;line-height:1.2;white-space:nowrap;box-sizing:border-box;
}
.cab-btn-add{background:var(--orange,#f59e0b);color:#fff;border:1px solid var(--orange,#f59e0b)}
.cab-btn-add:hover{background:#d97706;border-color:#d97706}
.cab-btn-view{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.cab-btn-view:hover{background:rgba(26,61,176,.08);text-decoration:none}
.cab-show-more-wrap{text-align:center;margin-top:16px}
.cab-show-more-btn{
  background:var(--blue);color:#fff;border:0;padding:12px 24px;border-radius:10px;
  font-weight:800;font-size:14px;cursor:pointer;letter-spacing:0.01em;
  transition:all .15s;
}
.cab-show-more-btn:hover{background:#1a3db0;transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(26,61,176,.4)}
@media(max-width:768px){
  .cab-btn{font-size:11.5px;padding:8px 4px;min-height:36px}
}

/* ════════ REVIEWS STRIP ════════ */
.reviews-strip{
  margin-top:18px;padding:24px 28px;border-radius:18px;
  background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(255,183,77,.08),rgba(255,122,26,.06));
  border:1px solid rgba(251,191,36,.28);
  position:relative;overflow:hidden;
}
.reviews-strip::before{
  content:"";position:absolute;top:-30px;right:-30px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.25),transparent 70%);
  pointer-events:none;
}
.reviews-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.reviews-head .rh-stars{color:#f59e0b;font-size:18px;letter-spacing:3px}
.reviews-head .rh-score{font-size:28px;font-weight:900;color:var(--ink);letter-spacing:-0.02em}
.reviews-head .rh-txt{font-size:14px;font-weight:600;color:var(--ink-2)}
.reviews-head .rh-txt b{color:var(--ink);font-weight:800}

/* ════════ MONEY-BACK GUARANTEE PANEL (sidebar) ════════ */
.guarantee-panel{
  display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-radius:16px;
  background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(5,150,105,.08));
  border:1px solid rgba(16,185,129,.28);
  box-shadow:0 16px 38px -22px rgba(16,185,129,.28),inset 0 1px 0 rgba(255,255,255,.6);
  position:relative;overflow:hidden;
  backdrop-filter:blur(18px);
}
.guarantee-panel::before{
  content:"";position:absolute;top:-24px;right:-24px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.18),transparent 70%);pointer-events:none;
}
.guarantee-panel > *{position:relative;z-index:1}
.guarantee-panel .g-icon{
  flex:none;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,#10b981,#059669);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 6px 14px -4px rgba(16,185,129,.55);
}
.guarantee-panel .g-body{flex:1;min-width:0}
.guarantee-panel .g-head{
  font-size:15px;font-weight:800;color:#065f46;letter-spacing:-0.015em;margin-bottom:4px;
}
.guarantee-panel p{
  margin:0 0 6px;font-size:13px;color:#0f5132;line-height:1.5;font-weight:500;
}
.guarantee-panel .g-link{
  display:inline-flex;align-items:center;gap:4px;margin-top:2px;
  font-size:12.5px;font-weight:700;color:#059669;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px;
}
.guarantee-panel .g-link:hover{color:var(--orange);border-color:var(--orange)}

@media(max-width:1024px){.cart-grid{grid-template-columns:1.3fr 1fr;gap:20px}}
@media(max-width:820px){
  /* Mobile: flatten the grid to a flex column AND hoist `.cart-main`
     children up to the cart-grid level via `display:contents`, so we
     can reorder the aside (Money-Back + Order Summary) to sit right
     below the cart items form — above "Customers Also Bought",
     reviews strip, and Magento crosssell. Without this hoist, order
     only sorts within each flex parent and the aside is stuck at the
     bottom of the main column. */
  .cart-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:18px;
  }
  .cart-grid > .cart-main{ display:contents !important; }
  /* After `display:contents`, cart-main's children become direct flex
     items of cart-grid, so `order` on them sorts within the flex column.
     Explicit values keep notices → cart items → aside → cross-sell →
     reviews in the desired visual order on mobile. */
  .cart-grid > .cart-main > .cart-notice{ order:1; }
  .cart-grid > .cart-main > .cart-items{ order:2; }
  .cart-grid > .cart-aside{ order:3; position:static !important; }
  .cart-grid > .cart-main > .cab-section,
  .cart-grid > .cart-main > .customers-also-bought-section,
  .cart-grid > .cart-main > .reviews-strip,
  .cart-grid > .cart-main > [class*="crosssell"]{ order:4; }
  /* The state / hazmat notices and the cart-items wrapper inherit
     order:0 by default, so they render above the aside. */
  .cart-item{grid-template-columns:80px 1fr auto;gap:14px;padding:14px}
  .cart-item .thumb{width:80px;height:80px}
  .cart-item .title{font-size:14.5px}
  .cart-item .line-price{font-size:18px}
  .summary-panel .sum-row.total b{font-size:24px}
  .checkout-btn{height:54px;font-size:16px}
  .page-hero h1{font-size:32px}
}

</style>

/* ===== mockup-mmp-door-mirror.html ===== */
/* ════════ SHARED CONTENT-PAGE LAYOUT ════════ */
.page-hero{padding:48px 0 32px;position:relative}
.page-hero .kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.06));
  border:1px solid rgba(26,61,176,.18);
  font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin-bottom:18px;
}
.page-hero .kicker .dot{width:7px;height:7px;background:var(--orange);border-radius:50%}
.page-hero h1{
  font-size:56px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;line-height:1.02;margin:0 0 14px;
}
.page-hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.page-hero .lead{font-size:19px;color:var(--muted);margin:0;max-width:720px;line-height:1.55}
.page-body{padding:24px 0 80px}

/* Glass content panel */
.glass-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:36px 40px;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
  margin-bottom:22px;
}
.glass-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px 200px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(460px 200px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.glass-panel > *{position:relative;z-index:1}

.glass-panel h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 16px;
}
.glass-panel h2 em{color:var(--blue);font-style:normal}
.glass-panel h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.015em;margin:24px 0 10px}
.glass-panel h3:first-child{margin-top:0}
.glass-panel p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.glass-panel p:last-child{margin-bottom:0}
.glass-panel ul, .glass-panel ol{font-size:15px;color:var(--ink-2);line-height:1.8;padding-left:22px;margin:0 0 16px}
.glass-panel ul li::marker{color:var(--blue)}
.glass-panel a{color:var(--blue);font-weight:600}
.glass-panel a:hover{text-decoration:underline}
.glass-panel b, .glass-panel strong{color:var(--ink);font-weight:700}

/* Two-col grid inside panels */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.split-2{grid-template-columns:1fr}}

/* Heads-up notice */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(255,122,26,.08));
  border:1px solid rgba(255,122,26,.25);
  margin:18px 0;
}
.notice svg{flex:none;color:var(--orange);margin-top:2px}
.notice strong{color:var(--ink);font-weight:800}

/* Responsive */
@media(max-width:768px){
  .page-hero{padding:28px 0 24px}
  .page-hero h1{font-size:38px}
  .page-hero .lead{font-size:16px}
  .glass-panel{padding:24px 22px;border-radius:16px}
  .glass-panel h2{font-size:22px}
}

/* ════════ SHOP BY MAKE — FILTER BAR ════════ */
.sbm-filterbar{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 34px -22px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04);
  margin-bottom:20px;position:sticky;top:12px;z-index:40;backdrop-filter:blur(20px);
}
.sbm-filterbar .search-icon{width:18px;height:18px;color:var(--muted);flex:none}
.sbm-filterbar input{
  flex:1;min-width:200px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);outline:none;
}
.sbm-filterbar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}
.sbm-count{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ════════ ALPHA NAV ════════ */
.alpha-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.alpha-btn{
  min-width:28px;height:28px;padding:0 7px;border:1px solid rgba(26,61,176,.15);
  border-radius:8px;background:rgba(26,61,176,.04);color:var(--blue);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .16s;
}
.alpha-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ════════ MAKE GRID ════════ */
.makes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.make-tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;
  min-height:92px;padding:16px 18px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background .18s;
  box-shadow:0 3px 8px rgba(10,20,36,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.make-tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 90px at 100% 100%,rgba(255,122,26,.07),transparent 65%);
  opacity:0;transition:opacity .25s;
}
.make-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 14px 32px -10px rgba(26,61,176,.28);background:#fff}
.make-tile:hover::before{opacity:1}
.make-tile .make-name{font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.15}
.make-tile .make-count{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0}
.make-tile .make-arrow{
  position:absolute;right:16px;bottom:14px;color:var(--muted);font-weight:700;font-size:16px;
  transition:all .2s ease;
}
.make-tile:hover .make-arrow{color:var(--orange);transform:translateX(4px)}
.make-tile.hidden{display:none}

/* ════════ DETAIL VIEW ════════ */
.make-detail{
  padding:30px 36px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 52px -22px rgba(26,61,176,.18),0 0 0 1px rgba(26,61,176,.04);
  position:relative;overflow:hidden;
}
.make-detail::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px 220px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(520px 220px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.make-detail > *{position:relative;z-index:1}

.detail-head{margin-bottom:22px}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px 0 10px;border:1px solid rgba(26,61,176,.2);
  border-radius:10px;background:rgba(26,61,176,.05);color:var(--blue);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  margin-bottom:14px;transition:all .18s;
}
.back-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.detail-head h2{
  font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.05;margin:0 0 8px;
}
.detail-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.detail-head p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}
.detail-head p b{color:var(--ink)}

.detail-models{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;
}
.model-link{
  display:block;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  transition:all .16s;
}
.model-link:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(26,61,176,.4)}

@media(max-width:768px){
  .makes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .make-detail{padding:24px 22px;border-radius:16px}
  .detail-head h2{font-size:26px}
  .detail-models{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .sbm-filterbar{padding:12px 14px;gap:10px}
}

/* ════════ ACURA MDX — MMP PAGE STYLES ════════ */
.mmp-hero{padding:24px 0 0;position:relative}
.mmp-breadcrumb{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mmp-breadcrumb a{color:var(--muted);text-decoration:none;transition:color .15s}
.mmp-breadcrumb a:hover{color:var(--blue)}
.mmp-breadcrumb .sep{color:rgba(148,163,184,.5)}
.mmp-breadcrumb .here{color:var(--ink);font-weight:700}

.mmp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.mmp-head-txt{flex:1;min-width:280px}
.mmp-h1{
  font-size:46px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;line-height:1.04;margin:0;
}
.mmp-h1 .make{color:var(--blue);font-weight:700;letter-spacing:0.01em;font-size:.82em;text-transform:uppercase;display:inline;margin-right:.35em}
.mmp-h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.mmp-sub{font-size:15.5px;color:var(--muted);margin:0;font-weight:500;line-height:1.5;max-width:640px}
.mmp-sub b{color:var(--ink);font-weight:800}

.change-vehicle{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;border:0;font:inherit;font-size:14px;font-weight:800;
  cursor:pointer;letter-spacing:0.01em;transition:all .2s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 10px 24px -8px rgba(59,130,246,.5);
}
.change-vehicle:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(59,130,246,.6)}

.parts-filter{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 34px -22px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04);
  margin-bottom:22px;position:sticky;top:12px;z-index:40;backdrop-filter:blur(20px);
}
.parts-filter .search-icon{width:18px;height:18px;color:var(--muted);flex:none}
.parts-filter input{
  flex:1;min-width:220px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:16px;background:#fff;color:var(--ink);outline:none;
}
/* iOS Safari zooms inputs <16px on focus — keep ≥16px to prevent that */
.parts-filter input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}
.pc{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap}

.parts-section-head{margin-bottom:16px}
.parts-section-head .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:980px;
  background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(245,158,11,.08));
  border:1px solid rgba(245,158,11,.3);
  font-size:11.5px;font-weight:800;color:#b45309;letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:12px;
}
.parts-section-head .kicker .dot{width:6px;height:6px;background:#f59e0b;border-radius:50%}
.parts-section-head h2{
  font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.1;margin:0;
}
.parts-section-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}

.parts-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:10px;
}
.part-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 14px 14px;
  border-radius:14px;min-height:180px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(26,61,176,.1);
  box-shadow:0 4px 10px -6px rgba(10,20,36,.08),inset 0 1px 0 rgba(255,255,255,.9);
  text-decoration:none;color:var(--ink);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s,background .2s;
  position:relative;overflow:hidden;text-align:center;
}
.part-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(240px 120px at 50% 0%,rgba(26,61,176,.06),transparent 70%);
  opacity:0;transition:opacity .25s;
}
.part-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 18px 36px -12px rgba(26,61,176,.3),inset 0 1px 0 rgba(255,255,255,.95);background:#fff}
.part-card:hover::before{opacity:1}
.part-card.hidden{display:none}
.part-thumb{
  width:90px;height:90px;display:grid;place-items:center;
  background:#fff;border-radius:12px;border:1px solid var(--line-soft);padding:6px;
}
.part-thumb img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.part-name{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-0.005em;flex:1;display:flex;align-items:center}
.part-arrow{font-size:13px;color:var(--muted);transition:all .2s ease;font-weight:700}
.part-card:hover .part-arrow{color:var(--orange);transform:translateX(3px)}

.mdx-facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px;
}
.mdx-facts .fact{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:rgba(255,255,255,.7);border:1px solid rgba(26,61,176,.08);
  border-radius:12px;font-size:13.5px;color:var(--ink-2);
}
.mdx-facts .fact svg{color:var(--blue);flex:none}
.mdx-facts .fact b{color:var(--ink);font-weight:800;margin-right:2px}

@media(max-width:768px){
  .mmp-h1{font-size:32px}
  .mmp-head{flex-direction:column;align-items:flex-start}
  .change-vehicle{width:100%;justify-content:center}
  .parts-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .part-thumb{width:72px;height:72px}
  .mdx-facts{grid-template-columns:1fr}
  .parts-section-head h2{font-size:22px}
}


/* ════════ MMP PRODUCT GRID ════════ */
.mmp-filterrail{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.6);border-radius:16px;
  box-shadow:0 14px 34px -22px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04);
  padding:18px 22px;margin-bottom:22px;display:flex;flex-direction:column;gap:14px;
  backdrop-filter:blur(18px);
}
.mfr-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.mfr-label{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:0.06em;text-transform:uppercase;flex:none;min-width:120px;padding-top:6px}
.mfr-label .num{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900;box-shadow:0 4px 10px -3px rgba(26,61,176,.4)}
.mfr-opts{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.year-btn,.side-btn{padding:7px 14px;border-radius:9px;border:1px solid rgba(26,61,176,.18);background:rgba(26,61,176,.05);color:var(--blue);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;letter-spacing:.01em}
.year-btn:hover,.side-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.year-btn.active,.side-btn.active{background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;border-color:var(--blue);box-shadow:0 6px 14px -4px rgba(26,61,176,.4)}

.results-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 4px 14px;margin-bottom:6px}
.rb-left strong{color:var(--ink);font-weight:800;font-size:17px}
.rb-left{font-size:14px;color:var(--muted);font-weight:600}
.rb-right{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.rb-sort{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600}
.rb-sort select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13.5px;background:#fff;color:var(--ink);font-weight:700;cursor:pointer;outline:none}
.rb-sort select:focus{border-color:var(--blue)}
.rb-view{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:8px;padding:2px;background:#fff}
.v-btn{width:30px;height:28px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:6px;transition:all .15s}
.v-btn.active{background:var(--blue);color:#fff}
.v-btn:hover:not(.active){background:var(--bg-2);color:var(--ink)}

.mmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
@media(min-width:1200px){.mmp-grid{grid-template-columns:repeat(5,1fr)}}
.mmp-grid.list-view{grid-template-columns:1fr}
.mmp-grid.list-view .pcard{flex-direction:row;align-items:stretch}
.mmp-grid.list-view .pc-img{width:180px;flex:none;aspect-ratio:auto}
.mmp-grid.list-view .pc-body{flex:1}

.pcard{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86));border:1px solid rgba(26,61,176,.08);border-radius:16px;overflow:hidden;box-shadow:0 6px 14px -8px rgba(10,20,36,.08),inset 0 1px 0 rgba(255,255,255,.9);text-decoration:none;color:var(--ink);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;position:relative}
.pcard:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 22px 44px -18px rgba(26,61,176,.28),inset 0 1px 0 rgba(255,255,255,.95)}
/* When the core-deposit tooltip is hovered, let it escape the card
   boundary. z-index:10 is above sibling cards but below the sticky
   masthead (z-index:50). Corners poke — known trade-off, revisit later. */
body .mmp-grid > li > a.pcard:has(.core-tooltip:hover),
body .mmp-grid > li > a.pcard:has(.core-tooltip-icon-wrapper:hover),
body .standard-results-grid > li > a.pcard:has(.core-tooltip:hover),
body .standard-results-grid > li > a.pcard:has(.core-tooltip-icon-wrapper:hover),
.pcard:has(.core-tooltip:hover),
.pcard:has(.core-tooltip-icon-wrapper:hover){
  overflow:visible !important;
  z-index:10 !important;
}
.pcard.hidden{display:none}
.pc-img{position:relative;aspect-ratio:1.1/1;background:#fff;padding:16px;display:grid;place-items:center;border-bottom:1px solid var(--line-soft);border-radius:16px 16px 0 0;overflow:hidden}
.pc-img img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.pc-img .stock{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:980px;background:linear-gradient(135deg,rgba(16,185,129,.95),rgba(5,150,105,.95));color:#fff;font-size:11px;font-weight:800;letter-spacing:0.04em;box-shadow:0 4px 10px -3px rgba(16,185,129,.45)}
.pc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;min-height:0;flex:1;justify-content:flex-start}
.pc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.brand-pill{padding:3px 10px;border-radius:980px;background:rgba(26,61,176,.08);border:1px solid rgba(26,61,176,.2);color:var(--blue);font-size:11px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase}
.side-pill{padding:3px 10px;border-radius:980px;background:rgba(255,122,26,.1);border:1px solid rgba(255,122,26,.28);color:var(--orange);font-size:11px;font-weight:800;letter-spacing:0.03em}
.pc-name{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;line-height:1.35;margin:2px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-meta{font-size:12px;color:var(--muted);font-weight:500}
.pc-meta b{color:var(--ink);font-weight:700;letter-spacing:0.01em}
.pc-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:6px;padding-top:10px;border-top:1px solid var(--line-soft)}
.pc-price{color:var(--ink);font-weight:900;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1}
.pc-price .sign{font-size:14px;vertical-align:super;margin-right:1px;font-weight:700}
.pc-price .num{font-size:24px}
.pc-price .cents{font-size:12px;vertical-align:super;font-weight:700}
.pc-cta{font-size:12.5px;font-weight:800;color:var(--blue);letter-spacing:0}
.pcard:hover .pc-cta{color:var(--orange)}

@media(max-width:768px){
  .mmp-filterrail{padding:14px 16px}
  .mfr-row{flex-direction:column;gap:8px}
  .mfr-label{min-width:auto}
  .mmp-grid{grid-template-columns:1fr !important;gap:12px}
  .pc-name{font-size:14px}
  .pc-price .num{font-size:20px}
}


/* ===== mockup-v12-hyperspace.html ===== */
/* ════════════════════════════════════════
   V10 · PREMIUM CONFIGURATOR
   Tesla/Rivian feel · airy · confident · sleek light
   ════════════════════════════════════════ */
:root{
  --bg:#ffffff;
  --bg-2:#f5f7fa;
  --bg-3:#e9edf3;
  --ink:#0d1424;
  --ink-2:#32405a;
  --muted:#6b7797;
  --line:#e1e5ed;
  --line-soft:#eef1f6;
  --blue:#1d4ed8;
  --blue-2:#1e40af;
  --navy:#0d1424;
  --orange:#ff7a1a;
  --orange-2:#e66a0f;
  --yellow:#fbbf24;
  --green:#10b981;
  --shadow:0 2px 4px rgba(13,20,36,.04), 0 12px 28px -12px rgba(13,20,36,.1);
  --shadow-lg:0 30px 80px -30px rgba(13,20,36,.2);
  --radius:8px;
  --radius-lg:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;font-weight:400;letter-spacing:-0.005em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-0.03em;font-weight:700;line-height:1.05}
.mono{font-variant-numeric:tabular-nums}

.utility{background:var(--ink);color:rgba(255,255,255,.85);font-size:13px}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 32px}
.utility a{color:rgba(255,255,255,.85);margin-right:24px;font-weight:500}
.utility a:hover{color:#fff}
.utility .right{display:flex;gap:0}
.ticker{color:var(--yellow);font-weight:600}
.ticker::before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:8px;vertical-align:middle;animation:none}

.masthead{background:var(--bg);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:50}
.masthead::after{display:none}
.masthead .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;padding:20px 32px}
.wordmark{display:flex;align-items:center;gap:12px}
.wordmark .logo-img{height:44px;width:auto}
.wordmark .est{display:none}

.search{display:flex;align-items:center;background:var(--bg-2);border:1px solid transparent;border-radius:8px;height:46px;overflow:hidden;transition:all .2s}
.search:focus-within{background:var(--bg);border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.search .browse{padding:0 16px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;height:100%;display:flex;align-items:center;gap:6px}
.search .divider{width:1px;height:22px;background:var(--line)}
.search input{flex:1;border:0;outline:0;padding:0 18px;font-family:inherit;font-size:15px;color:var(--ink);background:transparent}
.search input::placeholder{color:var(--muted)}
.search button.submit{background:var(--ink);color:#fff;border:0;padding:0 22px;height:100%;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.search button.submit:hover{background:var(--blue)}

.head-right{display:flex;gap:12px;align-items:center}
.flag-chip{display:flex;gap:10px;align-items:center;padding:8px 14px;background:var(--bg-2);border-radius:8px}
.flag-chip .stars{width:22px;height:14px;background:linear-gradient(180deg,#c4152b 0 33%,#fff 33% 66%,#c4152b 66%);border-radius:2px;position:relative;overflow:hidden}
.flag-chip .stars::before{content:"";position:absolute;inset:0 60% 55% 0;background:#1a3478}
.flag-chip .txt{font-size:11px;color:var(--muted);line-height:1.2}
.flag-chip .txt b{color:var(--ink);font-weight:700;display:block;font-size:12px}
.cart-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:var(--ink);color:#fff;border-radius:8px;font-size:14px;font-weight:600;font-family:inherit}
.cart-btn:hover{background:var(--blue)}
.cart-btn .count{background:var(--orange);color:#fff;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}

.crumbs{background:var(--bg);border-bottom:1px solid var(--line-soft)}
.crumbs .wrap{display:flex;align-items:center;gap:10px;height:48px;font-size:13px;color:var(--muted);font-weight:500}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.4}
.crumbs .here{color:var(--ink);font-weight:600}

.hero{padding:56px 0 80px;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 60%)}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:72px;align-items:start}
.gallery{position:sticky;top:100px;align-self:start}
/* hl-product.php + ps-product-new.php use `.product-gallery` (not `.gallery`) but
 * still nest in `.hero-grid`. Mirror the sticky behavior so the images pin on
 * scroll like they do on the Magento product page. `align-self:start` is the
 * load-bearing bit — without it the grid stretches the column to the row's
 * height and sticky can't activate. */
.hero-grid > .product-gallery{position:sticky;top:100px;align-self:start;height:fit-content}
@media(max-width:960px){.hero-grid > .product-gallery{position:static}}

/* At-a-Glance card under thumbs */
.at-glance{margin-top:28px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 28px;box-shadow:var(--shadow)}
.at-glance-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.at-glance-head h4{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.015em}
.at-glance-head .brand-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-2);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;color:var(--ink)}
.at-glance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.glance-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line-soft)}
.glance-item:nth-child(-n+2){border-top:0;padding-top:0}
.glance-item svg{color:var(--blue);flex:none;margin-top:2px}
.glance-item .k{font-size:11px;color:var(--muted);font-weight:500;line-height:1.2}
.glance-item .v{font-size:13px;font-weight:700;color:var(--ink);margin-top:2px;line-height:1.2}

/* Sticky gallery gracefully disables on narrow screens */
@media(max-width:960px){.gallery{position:static}}

.gallery .frame{position:relative;background:var(--bg);border:0;border-radius:var(--radius-lg);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow-lg)}
.gallery .frame::before,.gallery .frame::after,.gallery .corner,.gallery .stamp,.gallery .ref{display:none}
.gallery .frame img{max-width:82%;max-height:82%}
.gallery .zoom{position:absolute;bottom:18px;right:18px;display:flex;gap:8px}
.gallery .zoom button{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border:1px solid var(--line);width:40px;height:40px;border-radius:8px;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:all .15s}
.gallery .zoom button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.thumbs{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:14px}
.thumb{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg);border:2px solid transparent;border-radius:10px;display:grid;place-items:center;cursor:pointer;transition:all .15s;box-shadow:var(--shadow)}
.thumb img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain}
.thumb.active{border-color:var(--blue)}
.thumb:hover:not(.active){transform:translateY(-2px)}
.thumb .idx{display:none}

.summary{padding-top:8px}
.summary .eyebrow{display:flex;gap:8px;margin-bottom:18px;align-items:center}
.summary .eyebrow .line{display:none}
.summary .eyebrow .tag{font-size:12px;color:var(--blue);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:0}

.title{font-size:48px;font-weight:800;letter-spacing:-0.035em;line-height:1.05;color:var(--ink)}
.title em{font-style:normal;color:var(--ink);font-weight:800}
.title em::after{content:"";display:inline-block;width:8px;height:8px;background:var(--orange);border-radius:50%;vertical-align:super;margin-left:6px;margin-top:12px}
.title .sub{display:block;font-size:17px;color:var(--muted);margin-top:20px;font-weight:400;line-height:1.6;letter-spacing:-0.005em}

.meta-row{display:flex;gap:28px;margin:24px 0 0;padding:20px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.meta-item{display:flex;gap:8px;align-items:baseline}
.meta-item .label{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0;text-transform:none}
.meta-item .val{font-size:14px;color:var(--ink);font-weight:700;font-family:inherit}
.stars-row{display:flex;gap:8px;align-items:center}
.stars{color:var(--yellow);font-size:14px}
.stars-row .num{font-weight:700;color:var(--ink)}
.stars-row .cnt{color:var(--muted);font-size:13px}

.price-card{background:var(--bg);border:0;border-radius:0;padding:32px 0 0;margin-top:0;box-shadow:none;position:relative}
.price-card::before,.price-card::after{display:none}
.save-pill{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:#fff;padding:5px 11px;border-radius:980px;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:12px;font-family:inherit}
.save-pill .dot{display:none}
.price-main{display:flex;align-items:baseline;font-family:inherit;line-height:1}
.price-main .cur{font-size:26px;font-weight:600;color:var(--ink);margin-right:2px}
.price-main .dol{font-size:72px;font-weight:800;letter-spacing:-0.04em;color:var(--ink)}
.price-main .cts{font-size:26px;font-weight:600;color:var(--ink);font-family:inherit;margin-top:8px}
.affirm{display:flex;align-items:center;gap:8px;padding-top:16px;margin-top:18px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--muted)}
.affirm b{color:var(--ink);font-weight:700}
.affirm-logo{color:var(--blue);font-weight:700;font-style:normal;border-bottom:0;padding:0}
.affirm a{color:var(--blue);font-weight:600}

.buy-row{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px;margin-top:24px}
.qty{display:flex;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;height:56px;width:130px;overflow:hidden}
.qty button{width:42px;height:100%;background:transparent;border:0;font-size:18px;cursor:pointer;color:var(--ink);font-weight:600}
.qty input{flex:1;text-align:center;border:0;outline:0;background:transparent;font-family:inherit;font-size:16px;font-weight:700;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;border:0;border-radius:8px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;transition:all .15s;padding:0 24px;text-transform:none;letter-spacing:-0.005em}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--blue)}
.btn.secondary{background:var(--orange);color:#fff}
.btn.secondary:hover{background:var(--orange-2)}
.btn .arrow{display:none}

.bullets{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:28px}
.bullet{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink-2)}
.bullet svg{color:var(--green);width:18px;height:18px;flex:none}
.bullet b{color:var(--ink);font-weight:700}
.bullet span{color:var(--muted)}

.warranty{display:flex;gap:16px;align-items:center;background:var(--ink);padding:22px 26px;border-radius:var(--radius-lg);margin-top:22px;color:#fff}
.warranty::before{display:none}
.warranty .seal{width:52px;height:52px;flex:none;aspect-ratio:1/1;border:2px solid var(--yellow);background:transparent;color:var(--yellow);border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;text-align:center;line-height:1;box-sizing:border-box}
.warranty .txt .tt{font-size:17px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.warranty .txt .ss{font-size:14.5px;color:rgba(255,255,255,.78);margin-top:3px;line-height:1.45}

.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;background:var(--bg-2);border:0;border-radius:var(--radius-lg)}
.trust-strip > div{padding:16px 18px;display:flex;gap:12px;align-items:center}
.trust-strip > div + div{border-left:1px solid var(--bg-3)}
.trust-strip .ico{width:36px;height:36px;border-radius:10px;background:var(--bg);color:var(--blue);display:grid;place-items:center;flex:none;box-shadow:var(--shadow)}
.trust-strip .tt{font-size:13px;font-weight:700;color:var(--ink);line-height:1.25}
.trust-strip .ss{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.trust-strip .txt{min-width:0;flex:1}

.sec-ctas{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.sec-ctas .link-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line);background:var(--bg);border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;letter-spacing:0;text-transform:none}
.sec-ctas .link-btn:hover{border-color:var(--ink);background:var(--bg-2)}
.sec-ctas .link-btn.wrenchy{background:var(--blue);color:#fff;border-color:var(--blue)}
.sec-ctas .link-btn.wrenchy:hover{background:var(--blue-2);border-color:var(--blue-2)}

.notes{margin-top:24px;background:var(--bg-2);border:0;border-radius:var(--radius-lg);padding:28px 32px}
.notes::before{display:none}
.notes h4{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;gap:8px;letter-spacing:-0.02em}
.notes h4 em{font-style:normal;color:var(--blue)}
.notes p{font-size:15px;color:var(--ink-2);line-height:1.65;margin-bottom:10px}
.notes .brand-line{display:flex;gap:24px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.notes .brand-line span{font-size:13px;color:var(--muted);font-family:inherit;letter-spacing:0}
.notes .brand-line span b{color:var(--ink);font-weight:700;margin-left:6px}

.wrenchy-band{margin:24px 0 20px;background:var(--ink);border-radius:var(--radius-lg);padding:48px 56px;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;color:#fff;position:relative;overflow:hidden}
.wrenchy-band::before{content:"";position:absolute;right:-100px;bottom:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(255,122,26,.3),transparent 60%);pointer-events:none}
.wrenchy-robot{width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-2));display:grid;place-items:center;font-size:42px;position:relative;z-index:1;box-shadow:0 0 40px rgba(29,78,216,.4)}
.wrenchy-band h3{font-size:34px;font-weight:800;letter-spacing:-0.03em;line-height:1.15;color:#fff;position:relative;z-index:1;white-space:nowrap}
.wrenchy-band h3 em{font-style:normal;color:var(--orange);font-weight:800}
.wrenchy-band h3 u{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:5px;font-style:italic;color:#fff}
.wrenchy-band p{font-size:17px;opacity:.75;margin-top:8px;color:#fff;position:relative;z-index:1;font-weight:400}
.wrenchy-band .ask-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);padding:16px 28px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;border:0;font-family:inherit;position:relative;z-index:1;letter-spacing:-0.005em;text-transform:none}
.wrenchy-band .ask-btn:hover{background:var(--bg-2)}

.tabs-wrap{margin-top:48px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:81px;z-index:5}
.tab{padding:22px 32px;cursor:pointer;font-size:15px;font-weight:600;color:var(--muted);position:relative;letter-spacing:-0.005em;text-transform:none}
.tab .num{display:none}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink)}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}

.tab-panel{padding:56px 0 20px;display:none}
.tab-panel.active{display:block}

.fitment-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px}
.fitment-head h2{font-size:42px;font-weight:800;letter-spacing:-0.035em;color:var(--ink)}
.fitment-head h2 em{font-style:normal;color:var(--blue)}
.fitment-head .desc{color:var(--muted);font-size:16px;margin-top:10px;max-width:480px;line-height:1.55}
.fitment-head .filter-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;background:var(--ink);color:#fff;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:0;letter-spacing:0;text-transform:none;font-family:inherit}

.fitment-table{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.fitment-maker{display:block;border-bottom:1px solid var(--line-soft)}
.fitment-maker:last-child{border-bottom:0}
/* Full-width header strip above the model rows (replaces the old left column) */
.maker-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 28px;background:var(--bg-2);border-bottom:1px solid var(--line-soft);
}
.maker-head-left{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.maker-head-kicker{
  font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;
}
.maker-head h3{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1;margin:0}
.maker-head-count{font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.fit-row{display:grid;grid-template-columns:minmax(180px,1.2fr) 2fr auto;align-items:center;gap:18px;padding:18px 28px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .15s}
.fit-row:hover{background:var(--bg-2)}
.fit-row .model{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fit-row .model b{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;font-family:inherit}
.fit-row .model span{font-size:12px;color:var(--muted);font-family:inherit;letter-spacing:0;text-transform:none}
.year-range{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-weight:600;font-family:inherit}
.year-range .bar{width:14px;height:2px;background:var(--muted);border-radius:1px;position:relative;flex:none}
.year-range .bar::before{content:"";position:absolute;inset:0;background:currentColor;border-radius:1px;opacity:.9}
.fit-row .expand{width:34px;height:34px;border-radius:50%;background:var(--bg-2);border:0;display:grid;place-items:center;color:var(--ink);font-size:16px}
.fit-row:hover .expand{background:var(--ink);color:#fff}
.fit-notice{margin-top:24px;padding:18px 24px;background:var(--bg-2);border:0;border-left:3px solid var(--orange);border-radius:8px;display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.fit-notice b{color:var(--ink);font-weight:700}

/* Prevent text selection on the Vehicle Fitment Guide content */
.tab-panel[data-panel="fit"]{
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
}
.tab-panel[data-panel="fit"] input,
.tab-panel[data-panel="fit"] textarea{
  user-select:text;-webkit-user-select:text;
}

.specs-grid{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.spec-row{display:grid;grid-template-columns:180px 1fr;padding:16px 24px;border-bottom:1px solid var(--line-soft);align-items:center}
.spec-row:nth-last-child(-n+2){border-bottom:0}
.spec-row:nth-child(odd){border-right:1px solid var(--line-soft)}
.spec-row .k{font-size:13px;color:var(--muted);font-family:inherit;letter-spacing:0;text-transform:none;font-weight:500}
.spec-row .v{font-size:15px;color:var(--ink);font-weight:600}
.spec-row.highlight{background:var(--bg-2)}
.spec-row.highlight .v{color:var(--blue)}

.interchange{margin-top:56px}
.interchange h3{font-size:28px;font-weight:800;letter-spacing:-0.025em;margin-bottom:6px}
.interchange .lead{color:var(--muted);font-size:15px;margin-bottom:22px}
.ic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ic-card{background:var(--bg);border:1px solid var(--line-soft);padding:14px 18px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;transition:all .15s;box-shadow:var(--shadow)}
.ic-card:hover{border-color:var(--ink);transform:translateY(-1px)}
.ic-card .brand{font-size:14px;font-weight:700;color:var(--ink)}
.ic-card .pn{font-size:13px;color:var(--blue);font-weight:600;font-family:inherit}
.ic-card.hl{background:var(--ink);border-color:var(--ink)}
.ic-card.hl .brand{color:#fff}
.ic-card.hl .pn{color:var(--yellow)}

.policies{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.policy-card{background:var(--bg);border:1px solid var(--line-soft);padding:32px 34px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.policy-card::before{display:none}
.policy-card h4{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:12px;letter-spacing:-0.02em}
.policy-card h4 .ch{width:34px;height:34px;background:var(--ink);color:#fff;display:grid;place-items:center;border-radius:50%;font-weight:700;font-size:14px}
.policy-card p{font-size:14px;color:var(--ink-2);line-height:1.6}

.why{margin-top:100px;padding:100px 0;background:var(--ink);color:#fff;border-radius:var(--radius-lg);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(29,78,216,.25),transparent 60%);pointer-events:none}
.why .inner{max-width:1120px;margin:0 auto;padding:0 56px;position:relative}
.why .kicker{display:flex;gap:10px;margin-bottom:22px;font-size:22px;color:var(--orange);font-weight:800;letter-spacing:-0.01em;text-transform:none}
.why .kicker .dash{display:none}
.why h2{font-size:68px;font-weight:800;letter-spacing:-0.04em;line-height:1.02;color:#fff;max-width:820px}
.why h2 em{font-style:normal;color:var(--orange)}
.why .sub{font-size:19px;color:rgba(255,255,255,.7);margin-top:18px;max-width:560px;font-weight:400}
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;background:transparent;padding:0}
.why-card{background:rgba(255,255,255,.05);padding:40px 36px;border-radius:var(--radius-lg);border:0;position:relative}
.why-card .num{font-size:60px;font-weight:800;color:#fff;letter-spacing:-0.04em;line-height:1;font-family:inherit}
.why-card .unit{font-size:16px;color:rgba(255,255,255,.75);margin-top:12px;letter-spacing:0;text-transform:none;font-weight:600}
.why-card h3{font-size:24px;font-weight:700;margin-top:24px;color:#fff;letter-spacing:-0.02em}
.why-card p{font-size:14px;color:rgba(255,255,255,.7);margin-top:10px;line-height:1.55}
.why-card .icon{display:none}
.why-strip{margin-top:48px;padding:20px 32px;background:rgba(255,255,255,.05);border:0;border-radius:10px;display:flex;justify-content:center;gap:48px;align-items:center;flex-wrap:wrap}
.why-strip span{font-size:15px;font-weight:600;color:#fff;display:flex;align-items:center;gap:10px;font-family:inherit;letter-spacing:0;text-transform:none}
.why-strip span .dot{color:var(--orange)}

.reviews{padding-top:100px;padding-bottom:100px}
.reviews h2{font-size:52px;font-weight:800;letter-spacing:-0.035em;color:var(--ink)}
.reviews h2 em{font-style:normal;color:var(--blue)}
.reviews .score .num{font-size:76px;font-weight:800;letter-spacing:-0.04em;color:var(--ink);font-family:inherit}
.reviews .score .num-small{font-size:28px;color:var(--muted);font-weight:600}
.reviews .score .detail b{color:var(--ink);font-weight:700;font-family:inherit;letter-spacing:0}
.reviews .score .detail span{color:var(--muted);font-size:13px;display:block}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review-card{background:var(--bg-2);border:0;padding:30px 32px;border-radius:var(--radius-lg);position:relative}
.review-card::before{display:none}
.review-card .who{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.review-card .avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;font-family:inherit}
.review-card .name{font-weight:700;color:var(--ink);font-size:15px}
.review-card .stars{margin-bottom:12px}
.review-card .quote{font-size:15px;line-height:1.6;color:var(--ink-2);font-family:inherit;font-style:normal;font-weight:400}
.review-card .date{font-size:12px;color:var(--muted);margin-top:16px;padding-top:16px;border-top:1px solid var(--line);letter-spacing:0;text-transform:none;font-family:inherit}

.racing{padding-top:88px;padding-bottom:44px;border-top:1px solid var(--line-soft)}
.racing-head{text-align:center;margin-bottom:48px}
.racing-head .kicker{font-size:13px;color:var(--orange);font-weight:700;letter-spacing:0;text-transform:none}
.racing h2{font-size:52px;font-weight:800;letter-spacing:-0.035em;margin-top:12px;color:var(--ink)}
.racing h2 em{font-style:normal;color:var(--blue)}
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.video-card{aspect-ratio:16/9;background:var(--ink);border-radius:var(--radius-lg);position:relative;overflow:hidden;cursor:pointer;border:0;box-shadow:var(--shadow);display:block;text-decoration:none}
.video-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:64px;height:64px;background:rgba(255,255,255,.95);border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(10px);transition:all .2s}
.video-card .play svg{color:var(--ink);margin-left:4px}
.video-card:hover .play{transform:translate(-50%,-50%) scale(1.1);background:var(--orange);color:#fff}
.video-card:hover .play svg{color:#fff}
.video-card .label{position:absolute;bottom:18px;left:20px;right:20px;z-index:3;color:#fff}
.video-card .label b{display:block;font-size:16px;font-weight:700;letter-spacing:-0.01em}
.video-card .label span{font-size:11px;color:rgba(255,255,255,.75);font-family:inherit;letter-spacing:0;text-transform:none;margin-top:2px;display:block}

footer{background:var(--bg-2);color:var(--ink);padding:72px 0 32px;border-top:1px solid var(--line-soft)}
footer::before{display:none}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:56px;align-items:start}
.foot-brand .mark img{height:44px;filter:none !important}
.foot-brand .tag{font-size:16px;color:var(--ink);font-weight:500;margin:18px 0;font-style:normal}
.foot-brand .email{color:var(--blue);font-weight:600;border-bottom:0;font-family:inherit}
.foot-brand .meta{margin-top:22px;font-size:12px;color:var(--muted);font-family:inherit;letter-spacing:0;text-transform:none;opacity:1;line-height:1.7}
.foot-col h4{font-size:14px;color:var(--ink);font-weight:700;letter-spacing:0;text-transform:none;margin-bottom:18px;padding-bottom:0;border-bottom:0;font-family:inherit}
.foot-col a{color:var(--muted);font-size:14px;padding:5px 0;opacity:1;font-weight:500}
.foot-col a:hover{color:var(--ink);padding-left:0}
.foot-social{display:flex;gap:8px;margin-top:22px}
.foot-social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);padding:0;background:var(--bg)}
.foot-social a:hover{background:var(--ink);color:#fff;border-color:var(--ink);padding:0}
.foot-bottom{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:13px;letter-spacing:0;text-transform:none;font-family:inherit;opacity:1}
.foot-bottom .heart{color:var(--orange)}

@media(max-width:960px){.hero-grid,.why-cards,.review-grid,.video-grid,.specs-grid,.ic-grid,.policies,.foot-grid{grid-template-columns:1fr}}

.reveal{opacity:0;transform:translateY(12px);animation:reveal .5s ease forwards}
.reveal.d1{animation-delay:.04s}.reveal.d2{animation-delay:.1s}.reveal.d3{animation-delay:.16s}.reveal.d4{animation-delay:.22s}.reveal.d5{animation-delay:.28s}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════
   V10b OVERRIDE · NAVY HEADER & FOOTER
   Like the live go-parts.com masthead: navy base,
   logo tucked into a white rounded card.
   ════════════════════════════════════════ */
:root{
  --navy:#1a3db0;
  --navy-2:#12307f;
  --navy-3:#0a1a5e;
}

/* Utility bar — deeper navy stripe above the masthead */
.utility{background:var(--navy-3);color:rgba(255,255,255,.88)}
.utility a{color:rgba(255,255,255,.88)}
.utility a:hover{color:#fff}

/* Masthead — royal navy gradient, thin accent line at bottom */
.masthead{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  border-bottom:0;
  position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 24px -12px rgba(10,26,94,.4);
}
.masthead::after{
  display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  /* Full-width racing ribbon — orange→yellow→orange with soft fades at
     the very edges so it reads as a decorative brand accent, not a
     clipped/loading progress bar. */
  background:linear-gradient(90deg, transparent 0%, var(--orange) 10%, var(--yellow) 50%, var(--orange) 90%, transparent 100%);
}
.masthead .wrap{padding:14px 32px}

/* Logo — white rounded card (like live site) */
.wordmark{
  background:#fff;border-radius:12px;padding:10px 18px;
  box-shadow:0 4px 12px rgba(10,26,94,.2);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .4s cubic-bezier(.25,.9,.3,1),box-shadow .4s ease;
  will-change:transform;
  --lmx:50%;--lmy:50%;
}
/* Ambient cursor-follow tint (inside the card) — stronger + no snap */
.wordmark::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(260px 140px at var(--lmx) var(--lmy),rgba(26,61,176,.32),transparent 60%),
    radial-gradient(220px 120px at calc(100% - var(--lmx)) calc(100% - var(--lmy)),rgba(255,122,26,.26),transparent 60%);
  opacity:0;transition:opacity .35s ease;z-index:1;mix-blend-mode:multiply;
}
/* Brand-tinted shimmer sweep — one-shot keyframe so mouseout doesn't
   reverse-animate the beam back across the card. */
.wordmark::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;right:0;
  pointer-events:none;
  background:linear-gradient(108deg,
    transparent 0%,
    transparent 34%,
    rgba(26,61,176,.30) 43%,
    rgba(26,61,176,.55) 48%,
    rgba(255,122,26,.55) 52%,
    rgba(255,122,26,.30) 57%,
    transparent 66%,
    transparent 100%);
  filter:blur(.5px);
  transform:translateX(-140%) skewX(-14deg);
  border-radius:inherit;z-index:4;   /* above logo so the beam passes over it */
  will-change:transform,opacity;
  opacity:0;
}
/* Shimmer is triggered by JS adding .shimmering on mouseenter and
   removed on animationend — so mousing out mid-sweep doesn't yank
   the animation and cause the beam to snap back. */
.wordmark.shimmering::after{animation:wordmarkShimmer 1.2s cubic-bezier(.2,.8,.25,1)}
@keyframes wordmarkShimmer{
  0%  {transform:translateX(-140%) skewX(-14deg);opacity:0}
  10% {opacity:1}
  90% {opacity:1}
  100%{transform:translateX(140%) skewX(-14deg);opacity:0}
}
/* Soften the ambient tint slightly so it doesn't compete with the beam */
.wordmark:hover::before{opacity:.75}
.wordmark .logo-img{height:42px;width:auto;filter:none !important;position:relative;z-index:3}

.wordmark:hover{
  box-shadow:
    0 18px 40px -14px rgba(26,61,176,.4),
    0 0 0 1px rgba(26,61,176,.08),
    0 0 28px -4px rgba(255,122,26,.18),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Search — translucent glass on navy */
.search{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);height:46px}
.search:focus-within{background:rgba(255,255,255,.95);border-color:#fff}
.search input{color:#fff}
.search input::placeholder{color:rgba(255,255,255,.65)}
.search:focus-within input{color:var(--ink)}
.search:focus-within input::placeholder{color:var(--muted)}
.search .browse{color:#fff;font-weight:600}
.search:focus-within .browse{color:var(--ink)}
.search .divider{background:rgba(255,255,255,.22)}
.search:focus-within .divider{background:var(--line)}
.search button.submit{background:var(--orange);color:#fff;font-weight:700}
.search button.submit:hover{background:var(--orange-2)}

/* Chip + cart */
.flag-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}
.flag-chip .txt{color:rgba(255,255,255,.85)}
.flag-chip .txt b{color:#fff}
.cart-btn{background:var(--orange);color:#fff;box-shadow:0 4px 14px -4px rgba(255,122,26,.5)}
.cart-btn:hover{background:var(--orange-2)}
.cart-btn .count{background:#fff;color:var(--orange)}

/* Footer — navy matches masthead for bookend effect */
footer{background:linear-gradient(180deg,var(--navy-2) 0%,var(--navy-3) 100%);color:#fff;border-top:0;position:relative}
footer::before{
  display:block;content:"";position:absolute;top:0;left:0;right:0;height:3px;
  /* Full-width racing ribbon — orange→yellow→orange with soft fades at
     the very edges so it reads as a decorative brand accent, not a
     clipped/loading progress bar. */
  background:linear-gradient(90deg, transparent 0%, var(--orange) 10%, var(--yellow) 50%, var(--orange) 90%, transparent 100%);
}
.foot-brand .tag{color:rgba(255,255,255,.85);font-weight:500;margin:0 0 10px;font-size:16px}
.foot-brand .email{color:var(--yellow);font-weight:700;border-bottom:0}
.foot-brand .meta{color:rgba(255,255,255,.55)}
.foot-col h4{color:#fff;font-weight:700}
.foot-col a{color:rgba(255,255,255,.75);font-weight:500}
.foot-col a:hover{color:var(--yellow)}
.foot-social a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.foot-social a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.foot-bottom{color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.12)}
.foot-bottom .heart{color:var(--orange)}

/* ════════════════════════════════════════════════════════
   V11 · NEXT-GEN OVERLAY
   Aurora backdrop · glassmorphism · live pulse pills
   Bento-tuned summary · floating buy dock · pill tabs
   ════════════════════════════════════════════════════════ */

/* Aurora backdrop — soft shifting color mesh behind the page */
body{
  background:
    radial-gradient(800px 400px at 10% 5%,rgba(26,61,176,.12),transparent 60%),
    radial-gradient(700px 400px at 90% 20%,rgba(255,122,26,.08),transparent 60%),
    radial-gradient(900px 600px at 50% 50%,rgba(251,191,36,.05),transparent 70%),
    radial-gradient(600px 400px at 15% 90%,rgba(26,61,176,.08),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* Hero — ambient glow, extra breathing room */
.hero{padding:48px 0 48px;background:transparent;position:relative}
/* Previous hero::before glow removed — it was anchored to the hero section
   (static) while the gallery image is sticky, so the glow visibly drifted
   away from the image on scroll. The body's fixed aurora backdrop already
   provides ambient color without that misalignment issue. */
.hero .wrap{position:relative;z-index:1}
.hero-grid{gap:56px}

/* Live status pill row — sits above the title */
.live-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.live-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:980px;
  font-size:12px;font-weight:600;letter-spacing:-0.005em;
  background:#fff;border:1px solid var(--line);
  color:var(--ink-2);
}
.live-pill.stock{color:#047857;background:rgba(4,120,87,.08);border-color:rgba(4,120,87,.2)}
.live-pill.stock::before{content:"";width:6px;height:6px;background:#10b981;border-radius:50%;box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:livePulse 2s infinite}
.live-pill.ships{background:rgba(29,78,216,.08);color:var(--blue);border-color:rgba(29,78,216,.2)}
.live-pill.free{background:rgba(255,122,26,.08);color:var(--orange);border-color:rgba(255,122,26,.2)}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}
  70%{box-shadow:0 0 0 6px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}

/* Gallery frame — glass with colored edge glow.
   Cap the height relative to viewport so thumbs + at-glance below always fit
   on shorter laptops (MacBook Air etc). aspect-ratio stays 1/1 so it shrinks
   uniformly; max-width:100% keeps it from overflowing the column. */
.gallery .frame{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 40px 80px -30px rgba(26,61,176,.25),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.9);
  max-height:calc(100vh - 260px);
  max-width:100%;
  margin:0 auto;
}
.gallery .frame::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(26,61,176,.3),transparent 40%,transparent 60%,rgba(255,122,26,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.gallery .frame img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(10,20,36,.15))}
.gallery .frame::after{display:none !important}

.thumb{background:rgba(255,255,255,.6);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(10,20,36,.05)}
.thumb.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.18),0 4px 12px rgba(26,61,176,.2)}

/* At a Glance — upgraded to colored-edge glass card */
.at-glance{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.7));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.18),inset 0 1px 0 rgba(255,255,255,.8);
  position:relative;
}
.at-glance::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(26,61,176,.25),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.at-glance-head h4{font-size:12px;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted);font-weight:700}
.at-glance-head .brand-chip{background:var(--ink);color:#fff;padding:5px 12px;letter-spacing:0.06em}
.glance-item svg{color:var(--blue)}
.glance-item .v{color:var(--ink);letter-spacing:-0.01em}

/* Title — dramatic scale + gradient ink */
.summary{padding-top:0}
.summary .eyebrow .tag{
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.08));
  border:1px solid rgba(26,61,176,.2);
  color:var(--ink);padding:6px 14px;border-radius:980px;
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
}
.title{font-size:52px;letter-spacing:-0.04em;line-height:1.02;font-weight:800}
.title em::after{
  background:linear-gradient(135deg,var(--orange),var(--yellow));
  width:10px;height:10px;box-shadow:0 0 16px rgba(255,122,26,.6);
}
.title .sub{font-size:17px;margin-top:22px;color:var(--ink-2);line-height:1.55}

/* Price card — glassmorphic with colored glow */
.price-card{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  padding:28px 32px;margin-top:28px;
  box-shadow:0 30px 60px -30px rgba(26,61,176,.3),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:visible;
}
.price-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(400px 200px at 100% 0%,rgba(255,122,26,.1),transparent 60%);
}
.price-card::after{
  display:block;content:"";position:absolute;right:-1px;top:-1px;bottom:-1px;width:4px;
  background:linear-gradient(180deg,var(--orange),var(--yellow));
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
.save-pill{background:linear-gradient(135deg,var(--orange),#ff5c33);box-shadow:0 6px 18px -4px rgba(255,122,26,.5)}
.price-main{position:relative;z-index:1}
.price-main .dol{font-size:76px;font-weight:800;background:linear-gradient(135deg,var(--ink),#2d3b5c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.045em;padding-right:.06em;margin-right:-.03em}

/* Per-month highlight row */
.price-per-month{
  margin-top:18px;padding:12px 14px;border-radius:10px;
  background:linear-gradient(135deg,rgba(26,61,176,.06),rgba(26,61,176,.02));
  border:1px solid rgba(26,61,176,.12);
  display:flex;justify-content:space-between;align-items:center;font-size:13px;
  color:var(--ink-2);
}
.price-per-month b{color:var(--blue);font-weight:700;font-size:15px}

/* Primary CTAs — animated gradient sweep */
.btn.primary{
  background:linear-gradient(135deg,var(--ink) 0%,#1e2a50 100%);
  box-shadow:0 12px 32px -10px rgba(10,20,36,.5),inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;overflow:hidden;
}
.btn.primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.btn.primary:hover::after{transform:translateX(100%)}
.btn.primary:hover{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 16px 40px -8px rgba(29,78,216,.5)}
.btn.secondary{
  background:linear-gradient(135deg,var(--orange),#ff5c33);
  box-shadow:0 12px 32px -10px rgba(255,122,26,.55),inset 0 1px 0 rgba(255,255,255,.2);
  position:relative;overflow:hidden;
}
.btn.secondary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.btn.secondary:hover::after{transform:translateX(100%)}
.btn.secondary:hover{box-shadow:0 16px 40px -6px rgba(255,122,26,.6)}

/* Warranty & trust — glass tiles */
.warranty{
  background:linear-gradient(135deg,rgba(26,61,176,.92),rgba(18,48,127,.95));
  position:relative;overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.4);
}
.warranty::before{
  display:block;content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(300px 150px at 100% 0%,rgba(255,255,255,.15),transparent 60%);
}
.warranty .seal{border-color:var(--yellow);color:var(--yellow)}

.trust-strip{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.7));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 30px -14px rgba(26,61,176,.15);
}
.trust-strip .ico{background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(26,61,176,.04));color:var(--blue);box-shadow:inset 0 0 0 1px rgba(26,61,176,.1)}

/* Secondary CTAs — pill + gradient hover */
.sec-ctas .link-btn{background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(10,20,36,.05)}
.sec-ctas .link-btn.wrenchy{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 8px 20px -6px rgba(29,78,216,.45)}

/* Notes — glass */
.notes{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}

/* Wrenchy — next-gen mesh */
.wrenchy-band{
  background:
    radial-gradient(50% 80% at 85% 50%,rgba(255,122,26,.35),transparent 60%),
    radial-gradient(50% 80% at 0% 50%,rgba(251,191,36,.15),transparent 60%),
    linear-gradient(135deg,#0a1a5e 0%,#1e2a50 60%,#1a3db0 100%);
  box-shadow:0 40px 100px -40px rgba(10,20,36,.5);
  overflow:hidden;
}
.wrenchy-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/60px 60px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/60px 60px;
}
.wrenchy-robot{
  background:transparent;box-shadow:none;border-radius:0;
  width:auto;height:120px;
  overflow:visible;position:relative;display:flex;align-items:flex-end;justify-content:center;font-size:0;
  flex:none;
}
.wrenchy-robot img{
  height:100%;width:auto;max-width:none;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
  pointer-events:none;
}
.wrenchy-band .ask-btn{
  background:#fff;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;padding:14px 20px 14px 14px;
}
.wrenchy-avatar{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  padding:2px;object-fit:cover;object-position:center top;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.link-btn.wrenchy .wrenchy-avatar{
  width:22px;height:22px;padding:1px;background:rgba(255,255,255,.2);
  box-shadow:none;
}

/* Liquid-glass tab bar — frosted, refractive, with a translucent sliding pill */
.tabs{
  display:inline-flex;gap:4px;padding:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.32));
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:980px;border-bottom:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 12px 30px -14px rgba(26,61,176,.22),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(26,61,176,.06);
  margin-bottom:8px;top:90px;position:sticky;overflow:hidden;
}
/* Subtle refractive highlight sweep across the whole bar */
.tabs{
  background-image:
    linear-gradient(110deg,transparent 0%,rgba(26,61,176,.05) 20%,transparent 40%,rgba(255,122,26,.04) 70%,transparent 100%),
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.32));
}
/* Sliding liquid pill — glass-on-glass, tinted, with inner lightning */
.tabs::before{
  content:"";position:absolute;
  top:6px;bottom:6px;
  left:var(--pill-left,6px);
  width:var(--pill-width,0);
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg,rgba(26,61,176,.92) 0%,rgba(18,48,127,.96) 100%);
  border-radius:980px;
  box-shadow:
    0 6px 18px -6px rgba(26,61,176,.6),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(10,20,60,.25),
    inset 0 0 0 1px rgba(255,255,255,.22);
  transition:left .42s cubic-bezier(.5,.05,.15,1),width .42s cubic-bezier(.5,.05,.15,1);
  z-index:0;pointer-events:none;
}
/* Hairline trailing highlight on the pill's top edge for extra "glass" feel */
.tabs::after{
  content:"";position:absolute;
  top:7px;height:2px;
  left:calc(var(--pill-left,6px) + 14px);
  width:calc(var(--pill-width,0) - 28px);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  border-radius:2px;
  transition:left .42s cubic-bezier(.5,.05,.15,1),width .42s cubic-bezier(.5,.05,.15,1);
  z-index:1;pointer-events:none;
}
.tab{padding:11px 22px;border-radius:980px;position:relative;z-index:2;background:transparent !important;transition:color .3s ease,text-shadow .3s ease}
.tab::after{display:none}
.tab:hover{color:var(--ink)}
.tab.active{background:transparent !important;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}

/* Animated tab-panel enter — fade + lift + slight blur */
.tab-panel{display:none}
.tab-panel.active{
  display:block;
  animation:tabPanelIn .55s cubic-bezier(.25,.9,.3,1) both;
}
@keyframes tabPanelIn{
  0%  {opacity:0;transform:translateY(18px) scale(.99);filter:blur(3px)}
  60% {filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
/* Staggered reveal for key child blocks inside the panel */
.tab-panel.active > .fitment-head,
.tab-panel.active > .fit-filter,
.tab-panel.active > .fitment-table,
.tab-panel.active > .fit-notice,
.tab-panel.active > .specs-grid,
.tab-panel.active > .interchange,
.tab-panel.active > .policies{
  animation:tabChildIn .6s cubic-bezier(.25,.9,.3,1) both;
}
.tab-panel.active > .fitment-head{animation-delay:.05s}
.tab-panel.active > .fit-filter{animation-delay:.11s}
.tab-panel.active > .fitment-table,
.tab-panel.active > .specs-grid,
.tab-panel.active > .policies{animation-delay:.17s}
.tab-panel.active > .interchange{animation-delay:.24s}
.tab-panel.active > .fit-notice{animation-delay:.3s}
@keyframes tabChildIn{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Fitment — big-type accent */
.fitment-head h2{font-size:44px}
.fitment-head h2 em{background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fitment-table{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}
.year-range .bar::before{background:var(--muted)}

/* Specs — glass panels */
.specs-grid{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}
.spec-row.highlight{background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.05))}

/* Interchange cards */
.ic-card{
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 2px 8px rgba(10,20,36,.04);
}
.ic-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(26,61,176,.25)}
.ic-card.hl{background:linear-gradient(135deg,var(--ink),#1e2a50);border-color:var(--ink)}

/* Policy cards — glass */
.policy-card{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}
.policy-card h4 .ch{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 4px 12px -2px rgba(29,78,216,.4)}

/* Why — starfield + aurora */
.why{
  background:
    radial-gradient(600px 300px at 20% 0%,rgba(26,61,176,.35),transparent 60%),
    radial-gradient(600px 300px at 80% 100%,rgba(255,122,26,.2),transparent 60%),
    #0a1220;
  color:#fff;border-radius:var(--radius-lg);
}
.why::before{
  display:block;content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 80% 25%,rgba(255,255,255,.25),transparent),
    radial-gradient(1px 1px at 50% 75%,rgba(255,255,255,.25),transparent),
    radial-gradient(1px 1px at 20% 60%,rgba(255,255,255,.2),transparent),
    radial-gradient(1px 1px at 70% 85%,rgba(255,255,255,.2),transparent);
  background-size:200px 200px,300px 300px,250px 250px,350px 350px,280px 280px;
  opacity:.6;
}
.why h2 em{background:linear-gradient(135deg,var(--orange),var(--yellow));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.why-card{background:rgba(255,255,255,.04);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}
.why-card .num{background:linear-gradient(135deg,var(--orange),var(--yellow));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Reviews */
.reviews h2 em{background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.reviews .score .num{background:linear-gradient(135deg,var(--ink),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.review-card{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 30px -14px rgba(26,61,176,.1);
}

/* Racing */
.racing h2 em{background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.video-card{box-shadow:0 20px 50px -20px rgba(10,20,36,.4)}

/* ════════ INTERACTIVE FITMENT ════════ */
.fit-filter{
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:12px;
  padding:4px 14px;height:52px;
  box-shadow:0 10px 30px -14px rgba(26,61,176,.12);
  transition:all .2s ease;
}
.fit-filter:focus-within{border-color:var(--blue);box-shadow:0 10px 30px -14px rgba(26,61,176,.3),0 0 0 3px rgba(26,61,176,.12)}
.fit-filter svg{color:var(--muted);flex:none}
.fit-filter input{flex:1;border:0;outline:0;background:transparent;font-family:inherit;font-size:15px;color:var(--ink);height:100%}
.fit-filter input::placeholder{color:var(--muted)}
.fit-count{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.fit-count b{color:var(--blue);font-weight:700}

/* ────────── Model row: sliding left border + card pop-on-expand ────────── */
/* Each model row is wrapped in a .fit-slot so the expanded state can style the
   whole slot (row + detail) as a single floating card. */
.fit-slot{
  position:relative;
  border-bottom:1px solid var(--line-soft);
  transition:
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease,
    margin .3s ease,
    border-radius .3s ease;
}
.fit-slot:last-child{border-bottom:0}

.fit-row{
  display:grid;grid-template-columns:minmax(180px,1.2fr) 2fr auto;
  align-items:center;gap:18px;
  padding:18px 28px;
  cursor:pointer;
  border-left:4px solid transparent;        /* the accent bar, transparent by default */
  transition:background .2s ease,border-left-color .25s cubic-bezier(.3,0,.3,1);
}
.fit-row:hover{
  background:linear-gradient(90deg,rgba(26,61,176,.05),transparent 70%);
  border-left-color:var(--blue);            /* hover: blue bar slides in */
}
.fit-row.open{
  background:linear-gradient(90deg,rgba(255,122,26,.06),transparent 75%);
  border-left-color:var(--orange);           /* expanded: orange bar stays */
}

/* Toggle: + rotates to × on open, + changes color */
.fit-row .expand{
  width:34px;height:34px;border-radius:50%;
  background:var(--bg-2);border:0;
  display:grid;place-items:center;
  color:var(--ink);font-size:18px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line),0 2px 4px rgba(10,20,36,.04);
  transition:all .28s cubic-bezier(.3,1.3,.5,1);
}
.fit-row:hover .expand{
  background:var(--blue);color:#fff;
  box-shadow:0 4px 12px -3px rgba(29,78,216,.45);
}
.fit-row.open .expand{
  background:var(--orange);color:#fff;
  box-shadow:0 6px 16px -4px rgba(255,122,26,.55);
  transform:rotate(45deg);                   /* + → × */
}

/* Expanded details panel — animated max-height reveal */
.fit-detail{
  max-height:0;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(248,250,253,.95));
  padding:0 28px;
  transition:max-height .4s cubic-bezier(.25,.9,.3,1),padding .3s ease,opacity .3s ease;
  opacity:0;
  border-top:1px solid transparent;
}
.fit-row.open + .fit-detail{
  max-height:1200px;                         /* large ceiling — animates smoothly */
  padding:14px 28px 22px;
  opacity:1;
  border-top-color:var(--line-soft);
}

/* Card pop-out: when a slot contains an open row, lift the whole slot
   into a floating card with an orange-tinted border + soft shadow. */
.fit-slot:has(.fit-row.open){
  margin:10px 6px;
  border:2px solid rgba(255,122,26,.55);
  border-radius:12px;
  border-bottom:2px solid rgba(255,122,26,.55);
  background:linear-gradient(180deg,#fffaf4 0%,#fff7ed 100%);
  box-shadow:0 10px 28px -10px rgba(255,122,26,.3),0 0 0 1px rgba(255,122,26,.08);
  overflow:hidden;
}
.fit-slot:has(.fit-row.open) .fit-row{
  background:transparent;
  border-left:0;
}
.fit-slot:has(.fit-row.open) .fit-detail{
  background:transparent;
  border-top-color:rgba(255,122,26,.18);
}
/* Fallback for browsers without :has() — :has() is widely supported but
   keep the underlying .fit-row.open styling working when it is not. */
@supports not selector(:has(*)){
  .fit-row.open{
    border:2px solid rgba(255,122,26,.55);
    border-radius:12px;
    background:#fffaf4;
    box-shadow:0 10px 28px -10px rgba(255,122,26,.3);
  }
}

/* Expanded detail grid — column order matches live page:
   Submodel | Body Style | Years | Engine | Attributes */
.fit-detail-head,
.fit-config{
  display:grid;
  grid-template-columns:minmax(130px,1.2fr) minmax(90px,.9fr) minmax(110px,1fr) minmax(150px,1.4fr) minmax(150px,1.3fr);
  gap:14px;padding:10px 16px;align-items:center;
}
.fit-detail-head{
  padding:8px 16px;font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-soft);margin-bottom:4px;
}
.fit-config{border-radius:8px;font-size:13.5px;transition:background .15s ease}
.fit-config:hover{background:rgba(26,61,176,.05)}
.fit-config .sub{font-weight:700;color:var(--ink)}
.fit-config .body{font-weight:500;color:var(--ink-2);text-transform:capitalize}
.fit-config .yr{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.fit-config .eng{font-weight:500;color:var(--ink-2)}
.fit-config .attrs{display:flex;flex-wrap:wrap;gap:4px}
.fit-config .chip{
  font-size:10.5px;font-weight:700;letter-spacing:0.04em;padding:3px 8px;border-radius:980px;
  background:rgba(29,78,216,.08);color:var(--blue);border:1px solid rgba(29,78,216,.15);
}
.fit-config .chip.drive{background:rgba(255,122,26,.08);color:var(--orange);border-color:rgba(255,122,26,.18)}

/* Empty state */
.fit-empty{padding:40px 28px;text-align:center;color:var(--muted);font-size:14px}
.fit-empty b{color:var(--ink);font-weight:700;display:block;margin-bottom:4px;font-size:15px}

/* highlight mark */
mark{background:linear-gradient(transparent 60%,rgba(251,191,36,.5) 60%);color:inherit;padding:0 2px;border-radius:2px}

/* ────────── Mobile fitment (≤720px): stacked card per config, nothing hidden ────────── */
@media(max-width:720px){
  .fit-detail-head{display:none !important}
  .fit-config{
    display:block !important;grid-template-columns:none !important;
    padding:12px 14px !important;
    border:1px solid var(--line-soft);border-radius:10px;background:#fff;
    margin:0 0 8px;box-shadow:0 1px 2px rgba(10,20,36,.03);
  }
  .fit-config:last-child{margin-bottom:0}
  .fit-config .sub{display:inline;font-size:14.5px;font-weight:700;color:var(--ink)}
  .fit-config .body{display:inline;font-size:13px;font-weight:500;color:var(--muted);text-transform:capitalize}
  .fit-config .sub::after{content:" · ";color:var(--muted);font-weight:400}
  .fit-config .yr{
    display:inline-block;float:right;font-size:12px;font-weight:700;
    padding:3px 10px;border-radius:999px;
    background:rgba(29,78,216,.08);color:var(--blue);border:1px solid rgba(29,78,216,.15);letter-spacing:0;
  }
  .fit-config .eng{display:block;margin-top:6px;font-size:13px;color:var(--ink-2);font-weight:500;line-height:1.4}
  .fit-config .attrs{display:flex !important;flex-wrap:wrap;gap:5px;margin-top:8px}
  .fit-config .chip{font-size:10px;padding:2px 7px;line-height:1.4}
  .fit-row.open + .fit-detail{padding:10px 12px 14px !important}
  .fit-detail{padding:0 12px !important}
  .fit-row{padding:14px 16px !important;gap:10px !important}
  .fit-row .model b{font-size:16px}
  .fit-row .year-range{font-size:13px}
  .fit-row .expand{width:28px;height:28px;font-size:14px}
  .maker-head{padding:12px 16px !important}
  .maker-head h3{font-size:18px}
}

/* ════════ FLOATING BUY DOCK ════════ */
.buy-dock{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);
  display:flex;align-items:center;gap:14px;
  padding:14px 18px 14px 14px;
  background:rgba(10,20,36,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 20px 60px -12px rgba(0,0,0,.5);
  z-index:80;max-width:calc(100vw - 32px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;
  opacity:0;pointer-events:none;
}
.buy-dock.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.buy-dock .dock-img{width:48px;height:48px;border-radius:10px;background:#fff;background-size:78%;background-repeat:no-repeat;background-position:center;flex:none}
.buy-dock .dock-info{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.buy-dock .dock-info .name{font-size:13px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.buy-dock .dock-info .sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;font-weight:500}
.buy-dock .dock-price{font-size:18px;color:#fff;font-weight:800;letter-spacing:-0.02em;padding:0 14px;border-left:1px solid rgba(255,255,255,.15);border-right:1px solid rgba(255,255,255,.15);height:48px;display:flex;align-items:center}
.buy-dock .dock-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 18px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:0;border:0;cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(255,122,26,.6),inset 0 1px 0 rgba(255,255,255,.2);
}
.buy-dock .dock-btn:hover{filter:brightness(1.05)}
.buy-dock .dock-close{
  width:32px;height:32px;border-radius:8px;background:transparent;border:0;cursor:pointer;
  color:rgba(255,255,255,.6);display:grid;place-items:center;
}
.buy-dock .dock-close:hover{background:rgba(255,255,255,.08);color:#fff}

@media(max-width:640px){
  .buy-dock .dock-info{display:none}
  .buy-dock{bottom:16px}
}

/* ════════════════════════════════════════════════════════
   V12 · HYPERSPACE OVERLAY
   Animated mesh · cursor spotlight · reactive tilt · live metrics
   ════════════════════════════════════════════════════════ */

/* Animated mesh — the aurora slowly drifts */
body{
  --mx:50%;   /* mouse x (set by JS) */
  --my:30%;   /* mouse y (set by JS) */
  background:
    radial-gradient(600px 350px at var(--mx) var(--my),rgba(255,122,26,.12),transparent 55%),
    radial-gradient(800px 500px at 10% 5%,rgba(26,61,176,.14),transparent 60%),
    radial-gradient(700px 450px at 90% 20%,rgba(255,122,26,.1),transparent 60%),
    radial-gradient(900px 600px at 50% 50%,rgba(251,191,36,.06),transparent 70%),
    radial-gradient(600px 400px at 15% 90%,rgba(26,61,176,.1),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:-40% -20%;pointer-events:none;z-index:0;opacity:.55;
  background:
    radial-gradient(40% 50% at 30% 30%,rgba(29,78,216,.12),transparent 60%),
    radial-gradient(40% 50% at 70% 70%,rgba(255,122,26,.1),transparent 60%),
    radial-gradient(35% 45% at 20% 75%,rgba(251,191,36,.08),transparent 60%);
  animation:meshDrift 24s ease-in-out infinite alternate;
  mix-blend-mode:multiply;
}
@keyframes meshDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(4%,-3%) scale(1.08)}
  100%{transform:translate(-3%,4%) scale(.96)}
}

/* Masthead slides out of view when the sticky mini buy-bar slides in,
   so they take turns occupying the top edge. */
.masthead{transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;will-change:transform}
.masthead--hidden{transform:translateY(-100%);box-shadow:none !important;pointer-events:none}

/* Sticky mini buy-bar — slides from top after hero scrolls away */
.mini-bar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transform:translateY(-110%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
  background:rgba(10,20,36,.85);backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
  will-change:transform;
}
.mini-bar.visible{transform:translateY(0)}
.mini-bar .wrap{display:flex;align-items:center;gap:16px;padding:10px 32px;max-width:1280px;margin:0 auto}
.mini-bar .mb-img{width:44px;height:44px;border-radius:10px;background:#fff;background-size:78%;background-repeat:no-repeat;background-position:center;flex:none}
.mini-bar .mb-info{display:flex;flex-direction:column;min-width:0;flex:1}
.mini-bar .mb-name{font-size:14px;color:#fff;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.mini-bar .mb-sub{font-size:12px;color:rgba(255,255,255,.65);font-weight:500;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.mini-bar .mb-price{font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.02em;padding:0 18px;border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12);height:44px;display:flex;align-items:center}
.mini-bar .mb-stock{
  display:inline-flex;align-items:center;gap:6px;color:#10b981;font-size:11px;font-weight:700;
  padding:4px 10px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.22);border-radius:980px;
}
.mini-bar .mb-stock::before{content:"";width:5px;height:5px;background:#10b981;border-radius:50%;animation:livePulse 2s infinite}
.mini-bar .mb-btns{display:flex;gap:8px}
.mini-bar .mb-btn{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border-radius:10px;
  font-size:13px;font-weight:700;letter-spacing:-0.005em;border:0;cursor:pointer;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.mini-bar .mb-btn.cart{background:#fff;color:var(--ink)}
.mini-bar .mb-btn.buy{background:linear-gradient(135deg,var(--orange),#ff5c33);box-shadow:0 6px 18px -4px rgba(255,122,26,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.mini-bar .mb-btn:hover{filter:brightness(1.05)}
@media(max-width:860px){.mini-bar .mb-info,.mini-bar .mb-stock{display:none}}

/* Live social-proof ticker — above the title */
.social-proof{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:14px;padding:7px 14px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.05));
  border:1px solid rgba(26,61,176,.18);
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  position:relative;overflow:hidden;
}
.social-proof::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-120%);animation:shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer{0%{transform:translateX(-120%)}60%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.social-proof .eye{width:14px;height:14px;color:var(--blue);flex:none}
.social-proof b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.social-proof .sep{width:4px;height:4px;background:var(--muted);border-radius:50%;opacity:.5}
.social-proof .cart-emoji{color:var(--orange);font-weight:700}

/* Tilt-on-hover depth — applied to price card + gallery frame + at-glance */
.tilt{transition:transform .25s cubic-bezier(.25,.9,.3,1),box-shadow .25s ease;will-change:transform;transform-style:preserve-3d}
.tilt:hover{transform:translateY(-2px)}

/* Price-history sparkline in the price card */
.price-trend{
  margin-top:14px;display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.18);border-radius:10px;
  font-size:12.5px;
}
.price-trend svg{flex:none}
.price-trend .label{color:var(--ink-2)}
.price-trend .label b{color:#047857;font-weight:800;font-variant-numeric:tabular-nums}

/* Scroll-reveal (IntersectionObserver) */
.fx-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.25,.9,.3,1),transform .7s cubic-bezier(.25,.9,.3,1)}
.fx-reveal.in{opacity:1;transform:translateY(0)}

/* Enhanced title — brand-gradient make names, upright (no italic).
 * Stays `display: inline` so descenders (the "g" in "Dodge", etc.) aren't
 * clipped by a tight inline-block line-box at the mockup's 1.02 line-height. */
.title em{
  background:linear-gradient(100deg,var(--blue) 0%,var(--orange) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;
  font-style:normal;
  display:inline;
  padding:0;margin:0;
}
.title em::after{display:none}

/* Data-pulse pills for key specs */
.spec-pulse{
  display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:980px;
  background:rgba(26,61,176,.08);border:1px solid rgba(26,61,176,.18);
  font-size:11.5px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin:0 4px 6px 0;
}
.spec-pulse svg{width:12px;height:12px;flex:none}


/* Medium viewports: tighten everything so Browse by Vehicle text is
   always fully visible. Logo shrinks, search input gets narrower,
   Search/Cart buttons lose side padding. */
@media (max-width:1100px) and (min-width:769px){
  .masthead .wordmark .logo-img{height:32px !important}
  .masthead .wordmark{flex:0 0 auto !important;max-width:180px !important}
  .masthead .wrap{gap:16px !important;padding:14px 16px !important}
  .search .browse-inline{font-size:12px !important;padding:0 10px !important;flex:none !important}
  .search button.submit{padding:0 12px !important;font-size:12px !important}
  .search input{padding:0 10px !important}
  .cart-btn{padding:10px 10px !important;font-size:12px !important}
}
.search button.submit{white-space:nowrap !important}
.search .browse-inline{flex:none !important}
/* Obvious "Browse by Vehicle" button tucked inside the search bar.
   Colored fill + soft shadow + inset highlight make it read as a button,
   not a label for the input. */
.search{padding-left:6px;gap:0;height:50px}
.search .browse-inline{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;margin-right:8px;padding:0 16px;
  border:0;cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,var(--orange) 0%,#ff5c33 100%);
  color:#fff;border-radius:9px;
  font:inherit;font-weight:700;font-size:13.5px;letter-spacing:-0.005em;
  box-shadow:
    0 4px 12px -2px rgba(255,122,26,.45),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.08);
  transition:transform .18s ease,box-shadow .25s ease,filter .25s ease,opacity .25s ease;
  position:relative;overflow:hidden;
}
/* When the user is typing in the search input, quiet the Browse button
   so it reads as a secondary option and stops competing with the text. */
.search:focus-within .browse-inline{
  opacity:.48;
  filter:saturate(.7);
  box-shadow:0 2px 8px -2px rgba(255,122,26,.2),inset 0 1px 0 rgba(255,255,255,.2);
}
.search:focus-within .browse-inline:hover,
.search:focus-within .browse-inline:focus-visible{
  opacity:1;
  filter:none;
  box-shadow:0 8px 20px -2px rgba(255,122,26,.6),inset 0 1px 0 rgba(255,255,255,.3);
}
/* Dim the divider a touch too so the input feels more separated */
.search:focus-within .divider{opacity:.4}
.search .browse-inline::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.search .browse-inline:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 8px 20px -2px rgba(255,122,26,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.search .browse-inline:hover::after{transform:translateX(120%)}
.search .browse-inline:active{transform:translateY(0)}
.search .browse-inline svg{flex:none}

/* Red × clear button inside the search bar — appears while the user has text */
.search .search-clear{
  display:grid;place-items:center;
  width:28px;height:28px;margin:0 8px 0 0;flex:none;
  background:#ef4444;color:#fff;border:0;border-radius:50%;cursor:pointer;
  box-shadow:0 2px 6px -2px rgba(239,68,68,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.search .search-clear:hover{background:#dc2626;transform:scale(1.08);box-shadow:0 4px 10px -2px rgba(239,68,68,.6)}
.search .search-clear:active{transform:scale(.95)}
.search .search-clear[hidden]{display:none}

/* ════════ POLICY LIST + WIDE CARD ════════ */
.policy-list{margin:10px 0 0;padding:0 0 0 22px;color:var(--ink-2);font-size:14px;line-height:1.7}
.policy-list li{margin-bottom:4px}
.policy-list li::marker{color:var(--blue)}
.policies .policy-wide{grid-column:1/-1}
.policies .policy-card > p + p{margin-top:10px}

/* ════════ EXPERT GUIDE CARD ════════ */
.expert-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:
    radial-gradient(600px 240px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
    radial-gradient(600px 240px at 100% 100%,rgba(255,122,26,.06),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  padding:44px 48px;
  text-decoration:none;color:inherit;
  box-shadow:0 30px 60px -30px rgba(26,61,176,.22),0 0 0 1px rgba(26,61,176,.05),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .25s cubic-bezier(.25,.9,.3,1),box-shadow .25s ease;
  position:relative;overflow:hidden;
}
.expert-card:hover{transform:translateY(-3px);box-shadow:0 40px 80px -30px rgba(26,61,176,.35),0 0 0 1px rgba(26,61,176,.1),inset 0 1px 0 rgba(255,255,255,.95)}
.expert-card-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:var(--blue);
  padding:6px 14px;background:rgba(26,61,176,.08);border:1px solid rgba(26,61,176,.18);
  border-radius:980px;
}
.expert-card-title{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:6px 0 0}
.expert-card-sub{font-size:16px;color:var(--muted);line-height:1.55;margin:0;max-width:620px}
.expert-card-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;padding:13px 24px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;
  font-size:14px;font-weight:700;letter-spacing:-0.005em;
  box-shadow:0 8px 24px -8px rgba(29,78,216,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transition:box-shadow .2s ease;
}
.expert-card:hover .expert-card-cta{box-shadow:0 12px 30px -8px rgba(29,78,216,.6)}
.expert-card-cta .arrow{transition:transform .25s ease}
.expert-card:hover .expert-card-cta .arrow{transform:translateX(4px)}

/* ════════ TASTEFUL ACCENT COLOR PALETTE ════════
   Jewel tones that play well with navy + orange without feeling candy-coated. */
:root{
  --green:#16a34a;     --green-2:#059669;
  --teal:#0891b2;      --teal-2:#0e7490;
  --amber:#d97706;     --amber-2:#b45309;
  --purple:#7c3aed;    --purple-2:#6d28d9;
}

/* Why Go-Parts stat cards — each gets its own meaningful accent */
/* 1st card: 100% Money-Back → GREEN (trust/safety) */
.why-card:nth-child(1) .num{
  background:linear-gradient(135deg,var(--green),#22c55e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.why-card:nth-child(1){
  box-shadow:inset 0 1px 0 rgba(34,197,94,.12),0 0 24px -6px rgba(34,197,94,.18);
}

/* 2nd card: 19 Years of Excellence → AMBER (legacy — pairs with trophy) */
.why-card:nth-child(2) .num{
  background:linear-gradient(135deg,var(--amber),#fbbf24);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.why-card:nth-child(2){
  box-shadow:inset 0 1px 0 rgba(251,191,36,.14),0 0 24px -6px rgba(251,191,36,.2);
}

/* 3rd card: OEM Grade Quality → CYAN/TEAL (precision/engineering) */
.why-card:nth-child(3) .num{
  background:linear-gradient(135deg,var(--teal),#06b6d4);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.why-card:nth-child(3){
  box-shadow:inset 0 1px 0 rgba(6,182,212,.14),0 0 24px -6px rgba(6,182,212,.2);
}

/* Policy card icons — distinct color per policy */
.policies .policy-card:nth-child(1) h4 .ch{background:linear-gradient(135deg,var(--green),var(--green-2));box-shadow:0 4px 12px -2px rgba(22,163,74,.45)}
.policies .policy-card:nth-child(1)::before{background:linear-gradient(180deg,var(--green),var(--green-2));box-shadow:0 0 12px rgba(22,163,74,.6)}

.policies .policy-card:nth-child(2) h4 .ch{background:linear-gradient(135deg,var(--teal),var(--teal-2));box-shadow:0 4px 12px -2px rgba(8,145,178,.45)}
.policies .policy-card:nth-child(2)::before{background:linear-gradient(180deg,var(--teal),var(--teal-2));box-shadow:0 0 12px rgba(8,145,178,.6)}

.policies .policy-card:nth-child(3) h4 .ch{background:linear-gradient(135deg,var(--purple),var(--purple-2));box-shadow:0 4px 12px -2px rgba(124,58,237,.45)}
.policies .policy-card:nth-child(3)::before{background:linear-gradient(180deg,var(--purple),var(--purple-2));box-shadow:0 0 12px rgba(124,58,237,.6)}

.policies .policy-card:nth-child(4) h4 .ch{background:linear-gradient(135deg,var(--orange),#ff5c33);box-shadow:0 4px 12px -2px rgba(255,122,26,.45)}
.policies .policy-card:nth-child(4)::before{background:linear-gradient(180deg,var(--orange),#ff5c33);box-shadow:0 0 12px rgba(255,122,26,.6)}

/* ════════ COMPACT REVIEWS HEADER ════════ */
.reviews{padding-top:72px !important;padding-bottom:72px !important}
.reviews-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:20px !important;
}
.reviews-head h2{margin:0;line-height:1.05}
.score-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:980px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 16px -8px rgba(26,61,176,.25),inset 0 1px 0 rgba(255,255,255,.95);
  font-size:14px;white-space:nowrap;
}
.score-pill .stars{color:var(--yellow);font-size:15px;letter-spacing:.5px}
.score-pill .num{color:var(--ink);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.score-pill .sep{width:4px;height:4px;background:var(--muted);border-radius:50%;opacity:.5}
.score-pill .count{color:var(--muted);font-size:13px;font-weight:500}
.score-pill .count b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ════════ LIQUID-GLASS LIFETIME WARRANTY PANEL ════════ */
.warranty{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 80% at 90% 0%,rgba(255,122,26,.22),transparent 60%),
    radial-gradient(60% 80% at 0% 100%,rgba(61,213,255,.15),transparent 55%),
    linear-gradient(180deg,rgba(26,61,176,.88) 0%,rgba(18,48,127,.96) 100%);
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 24px 48px -18px rgba(26,61,176,.5),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.15) !important;
}
.warranty::before{
  display:block !important;content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(110deg,transparent 20%,rgba(255,255,255,.15) 50%,transparent 80%);
  opacity:.45;
  background-size:100% 100%;
  mix-blend-mode:overlay;
}
/* Hairline gradient rim at top edge for glass-cap highlight */
.warranty::after{
  content:"";position:absolute;top:0;left:12px;right:12px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.warranty .seal{
  background:rgba(255,255,255,.12) !important;
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,224,100,.4) !important;
  color:var(--yellow) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 8px rgba(0,0,0,.2);
}

/* ════════ NEXT-GEN SEARCHABLE COMBOBOX ════════ */
.combo{position:relative;width:100%;font:inherit}
.combo-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(248,250,253,.7));
  backdrop-filter:blur(10px);
  border:1px solid rgba(10,20,36,.1);
  font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  cursor:pointer;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(10,20,36,.04);
  transition:all .2s cubic-bezier(.25,.9,.3,1);
}
.combo-btn:hover:not(:disabled){border-color:rgba(29,78,216,.35);background:linear-gradient(180deg,#fff,rgba(248,250,253,.88))}
.combo.open .combo-btn{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(29,78,216,.15),inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -6px rgba(29,78,216,.3);
  background:#fff;
}
.combo-btn:disabled{cursor:not-allowed;opacity:.55}
.combo-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.combo-value.is-placeholder{color:var(--muted);font-weight:500}
.combo-chev{flex:none;color:var(--muted);transition:transform .25s cubic-bezier(.25,.9,.3,1)}
.combo.open .combo-chev{transform:rotate(180deg);color:var(--blue)}

.combo-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,253,.88));
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  border-radius:14px;
  box-shadow:
    0 30px 60px -18px rgba(10,20,36,.3),
    0 0 0 1px rgba(26,61,176,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
  display:none;overflow:hidden;
}
.combo.open .combo-panel{display:block;animation:comboOpen .24s cubic-bezier(.25,.9,.3,1)}
@keyframes comboOpen{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.combo-search{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid rgba(10,20,36,.06);
  background:linear-gradient(180deg,rgba(26,61,176,.04),transparent);
}
.combo-search svg{color:var(--muted);flex:none}
.combo-search input{
  flex:1;border:0;outline:0;background:transparent;
  font:inherit;font-size:14px;color:var(--ink);
  min-width:0;
}
.combo-search input::placeholder{color:var(--muted)}

.combo-list{
  list-style:none;margin:0;padding:6px;max-height:240px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(10,20,36,.25) transparent;
}
.combo-list::-webkit-scrollbar{width:6px}
.combo-list::-webkit-scrollbar-thumb{background:rgba(10,20,36,.2);border-radius:3px}
.combo-opt{
  padding:9px 12px;border-radius:8px;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:background .12s ease;
}
.combo-opt:hover,.combo-opt.active{background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.04))}
.combo-opt.selected{background:linear-gradient(135deg,rgba(26,61,176,.14),rgba(26,61,176,.08));color:var(--blue);font-weight:700}
.combo-opt.selected::after{content:"✓";color:var(--blue);font-weight:800}
.combo-opt mark{background:rgba(255,196,0,.4);color:inherit;padding:0 1px;border-radius:2px;font-weight:700}

.combo-empty{padding:18px 14px;text-align:center;color:var(--muted);font-size:13px}

@media (max-width:480px){
  .combo-panel{left:-12px;right:-12px}
  .combo-list{max-height:200px}
}

/* ════════ YMM MODAL — solid interior so native <select> dropdowns work ════════
   Glass frosting only on the outer backdrop; everything inside the box is
   solid so the browser's native option popup is readable and renders on top. */
.ymm-modal{
  background:rgba(5,10,25,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.ymm-box{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  /* NO backdrop-filter here — it creates a stacking context that can trap native select popups */
  box-shadow:
    0 50px 120px -30px rgba(10,20,36,.5),
    0 0 0 1px rgba(26,61,176,.06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.ymm-box::before{
  background:
    radial-gradient(360px 160px at 20% 0%,rgba(26,61,176,.1),transparent 60%),
    radial-gradient(360px 160px at 80% 100%,rgba(255,122,26,.08),transparent 60%) !important;
}
.ymm-step{
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 1px 2px rgba(10,20,36,.04);
  transition:all .25s cubic-bezier(.25,.9,.3,1);
}
.ymm-step.active{
  background:#fff !important;
  border-color:rgba(29,78,216,.4) !important;
  box-shadow:0 0 0 3px rgba(29,78,216,.12),0 10px 20px -8px rgba(29,78,216,.18) !important;
}
.ymm-step.done{
  background:#f6fdfa !important;
  border-color:rgba(16,185,129,.35) !important;
}
/* Native <select> inside the step cards — solid, readable, no transparency */
.ymm-select{
  background-color:#fff !important;
  color:var(--ink) !important;
}
.ymm-num{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 4px rgba(10,20,36,.08)}
.ymm-step.active .ymm-num{
  box-shadow:0 0 0 4px rgba(29,78,216,.18),inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -3px rgba(29,78,216,.45) !important;
}

/* ════════ LIVE REVIEWS WIDGET WRAPPER ════════ */
.reviews-embed{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72));
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:18px;
  padding:18px 22px;
  box-shadow:0 30px 60px -30px rgba(26,61,176,.22),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.85);
  overflow:hidden;
}
.reviews-embed::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(340px 160px at 10% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(340px 160px at 95% 100%,rgba(255,122,26,.07),transparent 60%);
}
.embedsocial-reviews{position:relative;z-index:1}

/* ════════ COMPACT FOOTER ════════ */
footer{padding:40px 0 22px !important}
.foot-grid{grid-template-columns:1.2fr 1fr 1fr 1fr !important;gap:40px !important;margin-bottom:22px;align-items:center !important}
.foot-brand .tag{margin:0 0 8px !important;font-size:17px !important}
.foot-brand .email{font-size:15px}
.foot-brand .meta{margin-top:12px !important;font-size:12.5px !important;line-height:1.55 !important}
.foot-social{margin-top:14px !important;gap:10px}
.foot-social a{width:34px;height:34px;transition:background .18s ease,transform .18s ease,border-color .18s ease !important}
.foot-social a:hover{transform:translateY(-2px)}
.foot-social a[data-platform="facebook"]:hover {background:#1877f2;border-color:#1877f2;color:#fff}
.foot-social a[data-platform="tiktok"]:hover   {background:#000;border-color:#000;color:#fff}
.foot-social a[data-platform="youtube"]:hover  {background:#ff0000;border-color:#ff0000;color:#fff}
.foot-social a[data-platform="instagram"]:hover{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);border-color:#cc2366;color:#fff}
.foot-bottom{margin-top:22px !important;padding-top:16px !important;font-size:13.5px}

/* Two link columns styled as lists (matches the live page) */
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin:0 0 8px}
.foot-links a{
  color:rgba(255,255,255,.78);font-size:15.5px;font-weight:500;
  text-decoration:none;transition:color .18s ease;
  letter-spacing:0;text-transform:none;padding:0;opacity:1;
}
.foot-links a:hover{color:var(--yellow);padding-left:0}
.foot-links a.primary{color:#fff;font-weight:700}
.foot-links a.primary:hover{color:var(--yellow)}

/* Trophy block — tighter vertical spacing */
.foot-trophy{gap:4px !important}

/* Inline copyright & made-with lines that replace the old .foot-bottom row */
.brand-copy{
  margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.55);font-weight:500;
  letter-spacing:0;text-transform:none;
}
.trophy-made{
  margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.65);font-weight:500;
}
.trophy-made .heart{color:#ff5c77;filter:saturate(1.2)}

/* ════════ FOOTER TROPHY BADGE ════════ */
.foot-trophy{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.trophy-badge{
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(140deg, #ffd43b 0%, #f5a623 45%, #ff7a1a 100%);
  color:#3d2200;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2),
    0 8px 28px -6px rgba(255,170,40,.55),
    0 0 40px -4px rgba(255,170,40,.35),
    inset 0 2px 2px rgba(255,255,255,.45),
    inset 0 -8px 16px -4px rgba(140,60,0,.35);
  position:relative;margin-bottom:8px;
}
.trophy-badge svg{width:32px;height:32px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.trophy-title{
  font-size:17px;font-weight:800;color:#fbbf24;
  letter-spacing:-0.01em;margin:0;
  text-transform:none;padding:0;border:0;
}
.trophy-sub{
  font-size:14.5px;color:rgba(255,255,255,.78);margin:0;font-weight:500;
}
.trophy-sub span{font-weight:700;color:#fff}

/* ════════ UNIFIED PURCHASE PANEL ════════
   Price and buy controls share the same card so that blank space
   to the right of the price disappears. */
.price-card .price-card-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;
  position:relative;z-index:1;
}
.price-card .price-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.price-card .price-row{display:flex;align-items:flex-end;gap:18px}
.price-card .price-list-strike{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:10px;gap:2px}
.price-card .price-list-strike .was{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
.price-card .price-list-strike .was-price{
  font-size:16px;color:var(--muted);font-weight:700;
  text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(107,119,151,.6);
  font-variant-numeric:tabular-nums;
}
.price-card .price-per-month{margin-top:4px}

.price-card .buy-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.price-card .buy-col-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 2px}
.price-card .qty-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.price-card .buy-col .qty{
  display:inline-flex;align-items:center;background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:10px;height:38px;overflow:hidden;
}
.price-card .buy-col .qty button{width:32px;height:100%;background:transparent;border:0;font:inherit;font-size:16px;cursor:pointer;color:var(--ink);font-weight:600}
.price-card .buy-col .qty button:hover{background:rgba(0,0,0,.04)}
.price-card .buy-col .qty input{width:34px;text-align:center;border:0;outline:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--ink);padding:0;height:100%}
.price-card .buy-col .btn{height:50px;width:100%;padding:0 18px;font-size:14px;letter-spacing:-0.005em}
.price-card .buy-col .btn.primary{justify-content:space-between}
.price-card .buy-col .btn.primary .arrow{display:inline-block;transition:transform .2s ease}
.price-card .buy-col .btn.primary:hover .arrow{transform:translateX(4px)}
/* Mockup-v12-hyperspace Add to Cart — copied verbatim from the mockup's
 * `.btn.primary` + `.price-card .buy-col .btn.primary` layout rules.
 * `!important` is used because legacy pages declare `.btn.primary` earlier
 * in this file with !important, and we need to win the cascade unambiguously
 * without relying on file order. Keeps `.btn-add-to-cart` for JS hooks. */
.price-card .buy-col .btn.primary.btn-add-to-cart{
  /* flex-basis:auto so height:50px actually wins on the main axis in a
   * column flex container (the .product-page-buttons-wrapper). `flex:1`
   * shorthand would set flex-basis:0% and collapse the button to content.
   * `justify-content:center` keeps "Add to Cart →" centered; the arrow
   * still slides right on hover via the `.arrow` transform rule. */
  flex:0 0 auto !important;width:100% !important;min-height:50px !important;height:50px !important;
  padding:0 18px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  font-family:inherit !important;font-size:14px !important;font-weight:700 !important;line-height:normal !important;
  letter-spacing:-0.005em !important;text-transform:none !important;
  border:0 !important;border-radius:8px !important;color:#fff !important;
  background:linear-gradient(135deg,var(--ink) 0%,#1e2a50 100%) !important;
  box-shadow:0 12px 32px -10px rgba(10,20,36,.5),inset 0 1px 0 rgba(255,255,255,.15) !important;
  position:relative !important;overflow:hidden !important;
  transform:none !important;
  transition:box-shadow .2s ease, background .2s ease !important;
}
/* Animated gradient sweep across the button on hover (mockup `.btn.primary::after`) */
.price-card .buy-col .btn.primary.btn-add-to-cart::after{
  content:"" !important;position:absolute !important;inset:0 !important;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%) !important;
  transform:translateX(-100%) !important;transition:transform .6s ease !important;
  pointer-events:none !important;
}
.price-card .buy-col .btn.primary.btn-add-to-cart:hover::after{transform:translateX(100%) !important}
.price-card .buy-col .btn.primary.btn-add-to-cart:hover{
  background:linear-gradient(135deg,var(--blue),var(--blue-2)) !important;
  box-shadow:0 16px 40px -8px rgba(29,78,216,.5) !important;
  transform:none !important;
}
/* Arrow slides right on hover (mockup `.btn.primary .arrow`) */
.price-card .buy-col .btn.primary.btn-add-to-cart .arrow{
  display:inline-block;transition:transform .2s ease;
}
.price-card .buy-col .btn.primary.btn-add-to-cart:hover .arrow{transform:translateX(4px)}
.price-card .buy-col .btn.primary.btn-add-to-cart:disabled{
  background:#9ca3af !important;opacity:.6 !important;cursor:not-allowed !important;
}
.price-card .buy-col .btn.primary.btn-add-to-cart.in-cart{
  background:linear-gradient(135deg,#10b981,#059669) !important;
}
.price-card .buy-col .btn.primary.btn-add-to-cart.in-cart:hover{
  background:linear-gradient(135deg,#059669,#047857) !important;
}
.price-card .buy-col .product-page-buttons-wrapper{
  display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:none;margin-top:0;align-items:stretch;
}
.price-card .buy-col .bolt-product-checkout-button{width:100%}

/* On narrow screens collapse to single column */
@media(max-width:900px){
  .price-card .price-card-grid{grid-template-columns:1fr;gap:22px}
}

/* ════════ HOVER MINI-CART ════════ */
.cart-wrap{position:relative;display:inline-block}
.cart-wrap .cart-btn{position:relative;z-index:2}
/* tiny bounce when item added */
.cart-btn.bump{animation:cartBump .45s cubic-bezier(.3,1.3,.5,1)}
@keyframes cartBump{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-3px) scale(1.06)}
  100%{transform:translateY(0) scale(1)}
}
.cart-btn .count.highlight{background:#10b981 !important;color:#fff !important;animation:countFlash 1.1s ease}
@keyframes countFlash{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

.mini-cart{
  position:absolute;top:calc(100% + 12px);right:0;
  width:380px;max-width:94vw;
  background:rgba(255,255,255,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.8);border-radius:16px;
  box-shadow:
    0 30px 70px -20px rgba(10,20,36,.35),
    0 0 0 1px rgba(26,61,176,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:opacity .2s ease,transform .25s cubic-bezier(.3,1.3,.5,1);
  z-index:70;
  color:var(--ink);
}
.cart-wrap:hover .mini-cart,
.cart-wrap.open .mini-cart{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
/* extend hover bridge so moving between btn and dropdown doesn't close it */
.mini-cart::before{content:"";position:absolute;top:-14px;right:0;left:0;height:14px}

.mini-cart-arrow{
  position:absolute;top:-6px;right:28px;
  width:12px;height:12px;background:inherit;
  border-left:1px solid rgba(255,255,255,.8);
  border-top:1px solid rgba(255,255,255,.8);
  transform:rotate(45deg);
  background:rgba(255,255,255,.96);
}

.mini-cart-empty{padding:36px 28px;text-align:center}
.mini-cart-empty .empty-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--bg-2);color:var(--muted);display:grid;place-items:center}
.mini-cart-empty .empty-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.015em}
.mini-cart-empty .empty-sub{font-size:13px;color:var(--muted);margin-top:4px}

/* @property registers CSS custom properties as <length> so they can be
   smoothly transitioned. Without @property, custom properties are strings
   and changes are instant. Browsers that don't support @property (very old)
   fall back to instant swap — no visual breakage. */
@property --mc-top-fade { syntax: '<length>'; inherits: false; initial-value: 120px; }
@property --mc-bottom-fade { syntax: '<length>'; inherits: false; initial-value: 120px; }

.mini-cart-list{padding:8px;max-height:360px;overflow-y:auto;
  /* Fade only on edges where there's actually more content to scroll to.
     JS in minicart-v7.js toggles .mc-at-top / .mc-at-bottom based on scrollTop;
     each toggle smoothly animates the matching fade stop via @property. */
  --mc-top-fade: 120px;
  --mc-bottom-fade: 120px;
  transition: --mc-top-fade 0.25s ease, --mc-bottom-fade 0.25s ease;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--mc-top-fade),#000 calc(100% - var(--mc-bottom-fade)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--mc-top-fade),#000 calc(100% - var(--mc-bottom-fade)),transparent 100%);
}
.mini-cart-list.mc-at-top    { --mc-top-fade: 0px; }
.mini-cart-list.mc-at-bottom { --mc-bottom-fade: 0px; }
.mini-cart-item{
  display:grid;grid-template-columns:56px 1fr auto;gap:12px;
  align-items:center;padding:12px;border-radius:10px;
  transition:background .15s ease;
}
.mini-cart-item + .mini-cart-item{border-top:1px solid var(--line-soft)}
.mini-cart-item:hover{background:var(--bg-2)}
.mini-cart-item .thumb{width:56px;height:56px;border-radius:10px;background:#fff;background-size:86%;background-repeat:no-repeat;background-position:center;border:1px solid var(--line);flex:none}
.mini-cart-item .info{display:flex;flex-direction:column;gap:2px;min-width:0}
.mini-cart-item .name{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;line-height:1.25;max-height:2.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mini-cart-item .meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:4px}
.mini-cart-item .qty-mini{
  display:inline-flex;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;height:22px;overflow:hidden;
}
.mini-cart-item .qty-mini button{width:22px;height:22px;background:transparent;border:0;font:inherit;font-size:13px;line-height:1;color:var(--ink);cursor:pointer}
.mini-cart-item .qty-mini button:hover{background:var(--line-soft)}
.mini-cart-item .qty-mini .val{padding:0 6px;font:inherit;font-size:12px;font-weight:700;color:var(--ink);min-width:16px;text-align:center}
.mini-cart-item .mini-core-badge{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:4px;padding:2px 8px;border-radius:6px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);
  font-size:10.5px;font-weight:700;color:#15803d;letter-spacing:.01em;
  cursor:help;align-self:flex-start;
  /* Force natural (content) width so the badge doesn't stretch to fill the
     flex column it lives in. */
  width:fit-content;max-width:max-content;
}
.mini-cart-item .mini-core-label{text-transform:uppercase;letter-spacing:.04em}
.mini-cart-item .mini-core-amount{font-variant-numeric:tabular-nums;font-weight:800}
.mini-cart-item .price-col{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mini-cart-item .price{font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mini-cart-item .remove{font:inherit;font-size:11px;color:var(--muted);background:transparent;border:0;cursor:pointer;padding:0;letter-spacing:0}
.mini-cart-item .remove:hover{color:#ef4444;text-decoration:underline}

.mini-cart-footer{padding:14px 18px 16px;border-top:1px solid var(--line-soft);background:var(--bg-2);border-radius:0 0 16px 16px;
  /* container-type lets descendants use cqw (container-relative width) units */
  container-type:inline-size;
}
/* Subtotal label + value + "View Cart & Checkout" button share one row.
   Value font-size scales with container width (cqw) so a 5-figure subtotal
   still fits next to the button. Falls back to 18px on browsers without
   container query support. */
.mini-cart-totals{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;flex-wrap:nowrap;min-width:0}
.mini-cart-totals .totals-label{flex:0 0 auto}
.mini-cart-totals .totals-value{
  flex:1 1 auto;min-width:0;margin-right:auto;padding-left:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:18px;
  font-size:clamp(14px, 5.5cqw, 22px);
}
.mini-cart-totals .mini-btn.primary{flex:0 0 auto;height:38px;padding:0 14px;font-size:13px;white-space:nowrap}
.totals-label{font-size:13px;color:var(--muted);font-weight:600}
.totals-value{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;font-variant-numeric:tabular-nums}
.mini-cart-ship{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:4px 0 12px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:8px;font-size:11.5px;color:var(--ink-2)}
.mini-cart-ship svg{color:#10b981;flex:none}
.mini-cart-ship b{color:#047857;font-weight:700}
.mini-cart-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:10px;font:inherit;font-weight:700;font-size:13.5px;letter-spacing:-0.005em;cursor:pointer;border:0;text-decoration:none}
.mini-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.mini-btn.ghost:hover{background:var(--bg)}
.mini-btn.primary{background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;box-shadow:0 6px 16px -4px rgba(255,122,26,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.mini-btn.primary:hover{filter:brightness(1.05)}

@media(max-width:480px){
  .mini-cart{position:fixed;top:auto;bottom:16px;right:16px;left:16px;width:auto}
  .mini-cart-arrow{display:none}
}

/* "Added to cart" flash toast — appears briefly after adding */
.cart-flash{
  position:fixed;top:88px;right:24px;z-index:95;
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:#fff;border:1px solid rgba(16,185,129,.3);border-radius:12px;
  box-shadow:0 20px 40px -16px rgba(10,20,36,.25);
  opacity:0;transform:translateX(16px);pointer-events:none;
  transition:opacity .25s ease,transform .25s cubic-bezier(.3,1.3,.5,1);
  max-width:min(380px, calc(100vw - 48px));
  left:auto;bottom:auto;
}
.cart-flash.visible{opacity:1;transform:translateX(0)}
.cart-flash .check{width:28px;height:28px;border-radius:50%;background:#10b981;color:#fff;display:grid;place-items:center;flex:none}
.cart-flash .msg{font-size:13px;color:var(--ink);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-flash .msg b{font-weight:800}

/* ════════ YMM VEHICLE MODAL ════════ */
.ymm-modal{
  position:fixed;inset:0;z-index:110;display:none;
  background:rgba(5,10,25,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  /* Anchor the modal high up — maximizes vertical room below for native
     <select> dropdowns (Year/Make/Model) to expand. */
  align-items:flex-start;justify-content:center;padding:24px 20px 20px;
  overflow-y:auto;   /* let the modal itself scroll if content exceeds viewport */
}
.ymm-modal.open{display:flex;animation:ymmFade .25s ease}
@keyframes ymmFade{from{opacity:0}to{opacity:1}}
.ymm-box{
  width:min(520px,100%);position:relative;
  background:linear-gradient(180deg,#fff 0%,#fafbfd 100%);
  border:1px solid rgba(255,255,255,.9);border-radius:22px;
  box-shadow:0 60px 120px -40px rgba(5,10,25,.55),0 0 0 1px rgba(26,61,176,.08);
  /* overflow must stay visible so the native <select> dropdown popup isn't clipped */
  overflow:visible;
  animation:ymmPop .4s cubic-bezier(.3,1.3,.5,1);
}
.ymm-box::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  overflow:hidden;
  background:
    radial-gradient(320px 140px at 20% 0%,rgba(26,61,176,.12),transparent 60%),
    radial-gradient(320px 140px at 80% 100%,rgba(255,122,26,.1),transparent 60%);
}
@keyframes ymmPop{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.ymm-head{
  position:relative;z-index:1;padding:28px 28px 16px;display:flex;align-items:center;justify-content:space-between;
}
.ymm-head h3{
  display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1;margin:0;
}
.ymm-head h3 svg{width:22px;height:22px;color:var(--orange)}
.ymm-close{
  width:34px;height:34px;border-radius:50%;background:transparent;border:0;cursor:pointer;
  color:var(--muted);display:grid;place-items:center;transition:all .15s;
}
.ymm-close:hover{background:var(--bg-2);color:var(--ink)}
.ymm-sub{
  position:relative;z-index:1;padding:0 28px 4px;font-size:13.5px;color:var(--muted);
}
.ymm-body{position:relative;z-index:1;padding:18px 28px 28px;display:flex;flex-direction:column;gap:14px}

.ymm-step{
  display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;
  background:var(--bg);border:1px solid var(--line);
  transition:all .2s ease;
}
.ymm-step.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.1);background:#fff}
.ymm-step.done{background:linear-gradient(135deg,rgba(16,185,129,.05),rgba(16,185,129,.02));border-color:rgba(16,185,129,.3)}
.ymm-step.locked{opacity:.5;pointer-events:none}
.ymm-num{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--bg-2);color:var(--muted);
  font-size:13px;font-weight:800;
  transition:all .25s cubic-bezier(.3,1.3,.5,1);
}
.ymm-step.active .ymm-num{background:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(29,78,216,.15)}
.ymm-step.done .ymm-num{background:#10b981;color:#fff}
.ymm-step.done .ymm-num::before{content:"✓";font-size:14px}
.ymm-step.done .ymm-num-text{display:none}

.ymm-field{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.ymm-field label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.ymm-select{
  width:100%;appearance:none;-webkit-appearance:none;
  border:0;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  padding:2px 28px 2px 0;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7797' stroke-width='2.4' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right center;
}
.ymm-select:disabled{color:var(--muted);cursor:not-allowed}
.ymm-select:focus{outline:none}

.ymm-footer{
  padding:16px 28px 22px;background:var(--bg-2);border-top:1px solid var(--line);
  border-radius:0 0 22px 22px;   /* match ymm-box corner radius */
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:12.5px;color:var(--muted);
}
.ymm-footer .hint{display:flex;align-items:center;gap:8px}
.ymm-footer .hint svg{color:var(--blue);flex:none}
.ymm-reset{
  font:inherit;font-size:12px;font-weight:700;color:var(--muted);background:transparent;border:0;cursor:pointer;
  letter-spacing:0;
}
.ymm-reset:hover{color:var(--ink)}

.ymm-loading{
  position:absolute;inset:0;background:rgba(255,255,255,.88);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;z-index:10;
  border-radius:22px;
}
.ymm-loading.active{display:flex}
.ymm-loading .spinner{
  width:32px;height:32px;border:3px solid rgba(29,78,216,.18);border-top-color:var(--blue);border-radius:50%;
  animation:ymmSpin .7s linear infinite;
}
@keyframes ymmSpin{to{transform:rotate(360deg)}}
.ymm-loading span{font-size:13px;color:var(--ink);font-weight:600}

@media(max-width:520px){
  .ymm-head{padding:20px 20px 12px}
  .ymm-head h3{font-size:18px}
  .ymm-sub,.ymm-body{padding-left:20px;padding-right:20px}
  .ymm-footer{padding:14px 20px 18px;flex-direction:column;align-items:flex-start}
}

/* Command palette overlay (⌘K still opens it from the keyboard) */
.cmd-palette{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(10,20,36,.45);backdrop-filter:blur(12px);
  align-items:flex-start;justify-content:center;padding-top:12vh;
}
.cmd-palette.open{display:flex;animation:cmdFade .2s ease}
@keyframes cmdFade{from{opacity:0}to{opacity:1}}
.cmd-box{
  width:min(560px,90vw);background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.8);border-radius:16px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.4);
  overflow:hidden;animation:cmdPop .3s cubic-bezier(.3,1.4,.5,1);
}
@keyframes cmdPop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.cmd-input{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.cmd-input svg{color:var(--muted)}
.cmd-input input{flex:1;border:0;outline:0;font:inherit;font-size:16px;color:var(--ink);background:transparent}
.cmd-input kbd{font:inherit;font-size:11px;background:var(--bg-2);padding:3px 7px;border-radius:5px;color:var(--muted);font-weight:700}
.cmd-results{padding:8px;max-height:50vh;overflow-y:auto}
.cmd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink)}
.cmd-item:hover,.cmd-item.active{background:var(--bg-2)}
.cmd-item .cmd-icon{width:28px;height:28px;border-radius:6px;background:rgba(29,78,216,.08);color:var(--blue);display:grid;place-items:center;flex:none}
.cmd-item .cmd-tag{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — tablet & mobile
   ════════════════════════════════════════════════════════ */

/* Universal overflow guard.
   NOTE: using `overflow-x: clip` (not hidden) so `position: sticky` descendants
   like the masthead continue to pin to the viewport instead of getting trapped
   in a scroll container. Fallback to hidden for browsers without clip support. */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
.summary,.hero-grid,.tabs-wrap,.price-card,.at-glance,.notes,.price-card-grid,.summary > *,.hero > *,.reviews-head,.fitment-head{min-width:0}
.title{overflow-wrap:break-word;word-break:normal;hyphens:auto}
img{max-width:100%;height:auto}

/* ───────── TABLET (1024px and below) ───────── */
@media (max-width:1024px){
  .wrap{padding:0 20px}
  .masthead .wrap{gap:16px;padding:14px 20px}
  .hero{padding:40px 0 56px}
  .hero-grid{grid-template-columns:1fr 1fr;gap:32px}
  .title{font-size:40px}
  .title .sub{font-size:16px;margin-top:14px}
  .price-card{padding:22px 24px !important}
  .price-main .dol{font-size:56px}
  .price-main .cur,.price-main .cts{font-size:22px}
  .price-card .buy-col .btn{height:46px;font-size:13.5px}
  .at-glance{padding:18px 22px !important}

  .wrenchy-band{padding:36px 28px !important;gap:20px !important;grid-template-columns:auto 1fr !important}
  .wrenchy-band .ask-btn{grid-column:1/-1;justify-self:start;margin-top:6px}
  .wrenchy-band h3{white-space:normal;font-size:28px}

  /* Bigger tap targets */
  .tabs{top:84px}
  .tab{padding:10px 16px;font-size:14px}

  .why h2{font-size:44px}
  .why-cards{grid-template-columns:1fr 1fr;gap:12px}
  .why-card{padding:28px 24px}
  .why-card .num{font-size:48px}

  .reviews h2{font-size:36px}
  .reviews .score .num{font-size:54px}
  .racing h2{font-size:36px}
  .video-grid{grid-template-columns:1fr 1fr;gap:12px}

  .fitment-head h2{font-size:32px}

  footer .foot-grid{grid-template-columns:1.2fr 1fr 1fr !important;gap:28px !important}
  .foot-trophy{grid-column:1/-1 !important;margin-top:8px}
}

/* ───────── SMALL TABLET / LARGE PHONE (768px and below) ───────── */
@media (max-width:768px){
  .utility{display:none}

  /* Flex-wrap masthead: row 1 = logo + cart, row 2 = full-width search */
  .masthead .wrap{
    display:flex !important;flex-wrap:wrap !important;align-items:center !important;
    grid-template-columns:none !important;
    gap:10px !important;padding:10px 16px !important;
    width:100% !important;box-sizing:border-box !important;
  }
  .masthead .wordmark{padding:6px 10px !important;border-radius:10px !important;flex:0 1 auto !important;min-width:0 !important;max-width:60%}
  .masthead .wordmark .logo-img{height:28px !important;max-width:100%;object-fit:contain}
  .masthead .head-right{margin-left:auto !important;flex:0 0 auto !important;display:flex !important}
  .masthead .search{order:3 !important;flex:1 1 100% !important;width:100% !important;height:44px !important}
  /* Allow the search input to shrink below its placeholder's intrinsic width.
     Without this, it forces the whole masthead (and page) into horizontal overflow. */
  .masthead .search input{min-width:0;flex:1 1 auto}
  .search .browse-inline{height:34px;padding:0 12px;font-size:12.5px;margin-right:6px}
  .search .browse-inline span{display:none}          /* show just the icon on small screens */
  .search .browse-inline svg{width:18px;height:18px}
  .search .submit{padding:0 14px;font-size:12px;white-space:nowrap}
  .cart-btn{padding:10px 14px !important;font-size:13px}
  .cart-btn svg{width:18px;height:18px}

  /* Mini-cart fills the screen on phones */
  .mini-cart{width:calc(100vw - 24px);right:-6px;top:calc(100% + 8px)}
  .mini-cart-arrow{right:32px}

  .crumbs .wrap{height:40px;font-size:12px;flex-wrap:wrap;gap:6px}

  /* Hero stacks */
  .hero{padding:24px 0 40px}
  .hero-grid{grid-template-columns:1fr !important;gap:28px}
  .gallery{position:static !important}
  .gallery .frame{aspect-ratio:4/3.4}
  .thumbs{grid-template-columns:repeat(8,1fr);gap:6px}
  .thumb{border-radius:8px}
  .thumb img{max-width:76%;max-height:76%}

  .at-glance-grid{grid-template-columns:1fr !important;gap:8px}
  .glance-item:nth-child(2){border-top:1px solid var(--line-soft) !important;padding-top:10px !important}

  .live-pills{gap:6px;margin-bottom:10px}
  .live-pill{font-size:11px;padding:5px 10px}

  .title{font-size:32px;letter-spacing:-0.03em;line-height:1.08}
  .title .sub{font-size:15px;margin-top:12px;line-height:1.5}
  .meta-row{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 0;margin:18px 0 0}

  /* Price & buy panel single-column on phones */
  .price-card .price-card-grid{grid-template-columns:1fr !important;gap:20px}
  .price-main .dol{font-size:58px}
  .price-main .cur,.price-main .cts{font-size:22px}

  .bullets{grid-template-columns:1fr !important;gap:10px}
  .trust-strip{grid-template-columns:1fr !important}
  .trust-strip > div + div{border-left:0 !important;border-top:1px solid var(--line-soft)}
  .trust-strip .tt,.trust-strip .ss{white-space:normal}
  .sec-ctas{flex-direction:column}
  .sec-ctas .link-btn{width:100%;justify-content:center}

  .warranty{flex-wrap:wrap}
  .warranty .txt .tt{font-size:16px}

  .notes{padding:22px 22px !important}

  /* Wrenchy panel stacks */
  .wrenchy-band{grid-template-columns:1fr !important;text-align:left;padding:28px 22px !important;gap:16px !important}
  .wrenchy-band .ask-btn{justify-self:start}
  .wrenchy-band h3{font-size:26px;white-space:normal}

  /* Tabs: horizontally scrollable if they overflow */
  .tabs{top:0;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px;padding:4px;gap:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:9px 14px;font-size:13px;white-space:nowrap;flex:0 0 auto}
  .tabs::before{top:4px;bottom:4px}
  .tabs::after{top:5px}

  .tab-panel{padding:32px 0 12px}
  .fitment-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}
  .fitment-head h2{font-size:28px;line-height:1.1}
  .fitment-head .filter-btn{align-self:flex-start}

  .fit-filter{flex-wrap:wrap;padding:4px 12px;height:auto;gap:8px}
  .fit-filter input{font-size:14px;min-width:0;flex-basis:calc(100% - 60px)}
  .fit-filter .fit-count{flex-basis:100%;padding-bottom:8px}

  .fitment-maker{grid-template-columns:1fr !important}
  .maker-label{padding:14px 20px !important;flex-direction:row;justify-content:space-between;align-items:center}
  .maker-label::after{display:none !important}
  .fit-row{grid-template-columns:1fr auto auto !important;gap:8px;padding:14px 18px}
  .fit-row .year-range{flex-direction:column;gap:4px;align-items:flex-end;font-size:12px}
  .fit-row .year-range .bar{display:none}
  .fit-row .model b{font-size:16px}

  .fit-detail{padding:8px 12px 12px}
  .fit-detail-head{grid-template-columns:64px 1fr !important;font-size:9.5px;padding:6px 10px}
  .fit-detail-head span:nth-child(n+3){display:none}
  .fit-config{grid-template-columns:64px 1fr !important;padding:10px;font-size:12.5px}
  .fit-config .eng,.fit-config .attrs{display:none}

  .specs-grid{grid-template-columns:1fr !important}
  .spec-row{grid-template-columns:1fr !important;padding:12px 18px;gap:2px}
  .spec-row:nth-child(odd){border-right:0 !important}
  .spec-row .k{font-size:11px}

  .ic-grid{grid-template-columns:1fr !important}
  .policies{grid-template-columns:1fr !important;gap:12px}
  .policy-wide{grid-column:auto !important}
  .policy-card{padding:22px 24px}
  .policy-list{font-size:13.5px}

  .expert-card{padding:28px 24px}
  .expert-card-title{font-size:22px}
  .expert-card-sub{font-size:14.5px}

  .why{padding:56px 0 !important}
  .why .inner{padding:0 24px !important}
  .why h2{font-size:32px !important;line-height:1.08}
  .why .sub{font-size:15px}
  .why-cards{grid-template-columns:1fr !important;gap:10px}
  .why-strip{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 20px !important}

  .reviews{padding-top:48px !important;padding-bottom:48px !important}
  .reviews-head{flex-direction:column;align-items:center !important;text-align:center;gap:10px !important}
  .reviews-head h2{text-align:center}
  .reviews h2{font-size:28px}
  .score-pill{padding:8px 14px;gap:8px}
  .score-pill .count{font-size:12.5px}
  .reviews-embed{padding:10px 10px}

  .racing{padding-top:48px;padding-bottom:48px}
  .racing h2{font-size:28px}
  .video-grid{grid-template-columns:1fr !important;gap:10px}
  .video-card{aspect-ratio:16/9}

  footer{padding:28px 0 18px !important}
  footer .foot-grid{grid-template-columns:1fr !important;gap:20px !important;margin-bottom:16px}
  .foot-brand{text-align:left}
  .foot-social{justify-content:flex-start}
  .foot-links{text-align:left}
  .foot-trophy{align-items:flex-start !important;text-align:left !important;margin-top:0}
  .trophy-badge{margin-bottom:4px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:6px}

  /* Sticky mini buy-bar fits phones */
  .mini-bar .wrap{padding:8px 14px;gap:10px}
  .mini-bar .mb-img{width:36px;height:36px;border-radius:8px}
  .mini-bar .mb-price{font-size:17px;padding:0 10px;height:36px;border:0}
  .mini-bar .mb-btns{gap:6px}
  .mini-bar .mb-btn{height:36px;padding:0 12px;font-size:12px}

  /* Cart flash toast */
  .cart-flash{top:auto;bottom:88px;right:12px;left:12px;padding:12px 16px}
  .cart-flash .msg{font-size:12.5px}
}

/* ───────── PHONE (480px and below) ───────── */
@media (max-width:480px){
  .wrap{padding:0 16px}
  .masthead .wrap{padding:10px 14px}
  .masthead .wordmark .logo-img{height:24px !important}
  .masthead .wordmark{max-width:55% !important}

  .title{font-size:28px}
  .title .sub{font-size:14px}

  .price-main .dol{font-size:48px}
  .price-main .cur,.price-main .cts{font-size:18px}
  .save-pill{font-size:10.5px;padding:5px 10px}

  .thumbs{grid-template-columns:repeat(4,1fr)}
  .thumb:nth-child(n+5){display:none}         /* only show 4 thumbs on tiny screens */

  .fit-row{padding:12px 14px}
  .maker-label{padding:12px 14px !important}
  .maker-label h3{font-size:18px}

  .wrenchy-robot{height:96px}
  .wrenchy-band{padding:22px 18px !important}
  .wrenchy-band h3{font-size:22px;white-space:normal}

  .tab{padding:8px 12px;font-size:12.5px}

  .expert-card{padding:22px 18px}
  .expert-card-title{font-size:19px}

  .why h2{font-size:26px !important}
  .why-card{padding:22px 20px}
  .why-card .num{font-size:42px}

  /* Mini-bar: ultra-compact */
  .mini-bar .mb-img{display:none}
  .mini-bar .mb-price{font-size:15px;padding:0 6px}
  .mini-bar .mb-btn{font-size:11.5px;padding:0 10px}

  /* YMM modal: full-bleed step cards */
  .ymm-step{padding:12px}
  .ymm-num{width:28px;height:28px;font-size:12px}
  .ymm-field label{font-size:10px}
  .ymm-select{font-size:14px}

  /* Reviews embed wrapper */
  .reviews-embed{padding:6px 8px;border-radius:14px}
}

/* ───────── EXTRA-SMALL (360px and below) ───────── */
@media (max-width:360px){
  .search .browse-inline{padding:0 10px}
  .cart-btn{padding:8px 10px}
  .cart-btn span:not(.count){display:none}   /* just the icon + count */
  .price-main .dol{font-size:42px}
  .title{font-size:24px}
}


/* ===== mockup-v12-hl.html ===== */
/* ════════════════════════════════════════
   V10 · PREMIUM CONFIGURATOR
   Tesla/Rivian feel · airy · confident · sleek light
   ════════════════════════════════════════ */
:root{
  --bg:#ffffff;
  --bg-2:#f5f7fa;
  --bg-3:#e9edf3;
  --ink:#0d1424;
  --ink-2:#32405a;
  --muted:#6b7797;
  --line:#e1e5ed;
  --line-soft:#eef1f6;
  --blue:#1d4ed8;
  --blue-2:#1e40af;
  --navy:#0d1424;
  --orange:#ff7a1a;
  --orange-2:#e66a0f;
  --yellow:#fbbf24;
  --green:#10b981;
  --shadow:0 2px 4px rgba(13,20,36,.04), 0 12px 28px -12px rgba(13,20,36,.1);
  --shadow-lg:0 30px 80px -30px rgba(13,20,36,.2);
  --radius:8px;
  --radius-lg:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;font-weight:400;letter-spacing:-0.005em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-0.03em;font-weight:700;line-height:1.05}
.mono{font-variant-numeric:tabular-nums}

.utility{background:var(--ink);color:rgba(255,255,255,.85);font-size:13px}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 32px}
.utility a{color:rgba(255,255,255,.85);margin-right:24px;font-weight:500}
.utility a:hover{color:#fff}
.utility .right{display:flex;gap:0}
.ticker{color:var(--yellow);font-weight:600}
.ticker::before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:8px;vertical-align:middle;animation:none}

.masthead{background:var(--bg);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:50}
.masthead::after{display:none}
.masthead .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;padding:20px 32px}
.wordmark{display:flex;align-items:center;gap:12px}
.wordmark .logo-img{height:44px;width:auto}
.wordmark .est{display:none}

.search{display:flex;align-items:center;background:var(--bg-2);border:1px solid transparent;border-radius:8px;height:46px;overflow:hidden;transition:all .2s}
.search:focus-within{background:var(--bg);border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.search .browse{padding:0 16px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;height:100%;display:flex;align-items:center;gap:6px}
.search .divider{width:1px;height:22px;background:var(--line)}
.search input{flex:1;border:0;outline:0;padding:0 18px;font-family:inherit;font-size:15px;color:var(--ink);background:transparent}
.search input::placeholder{color:var(--muted)}
.search button.submit{background:var(--ink);color:#fff;border:0;padding:0 22px;height:100%;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.search button.submit:hover{background:var(--blue)}

.head-right{display:flex;gap:12px;align-items:center}
.flag-chip{display:flex;gap:10px;align-items:center;padding:8px 14px;background:var(--bg-2);border-radius:8px}
.flag-chip .stars{width:22px;height:14px;background:linear-gradient(180deg,#c4152b 0 33%,#fff 33% 66%,#c4152b 66%);border-radius:2px;position:relative;overflow:hidden}
.flag-chip .stars::before{content:"";position:absolute;inset:0 60% 55% 0;background:#1a3478}
.flag-chip .txt{font-size:11px;color:var(--muted);line-height:1.2}
.flag-chip .txt b{color:var(--ink);font-weight:700;display:block;font-size:12px}
.cart-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:var(--ink);color:#fff;border-radius:8px;font-size:14px;font-weight:600;font-family:inherit}
.cart-btn:hover{background:var(--blue)}
.cart-btn .count{background:var(--orange);color:#fff;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}

.crumbs{background:var(--bg);border-bottom:1px solid var(--line-soft)}
.crumbs .wrap{display:flex;align-items:center;gap:10px;height:48px;font-size:13px;color:var(--muted);font-weight:500}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.4}
.crumbs .here{color:var(--ink);font-weight:600}

.hero{padding:56px 0 80px;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 60%)}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:72px;align-items:start}
.gallery{position:sticky;top:100px;align-self:start}
/* hl-product.php + ps-product-new.php use `.product-gallery` (not `.gallery`) but
 * still nest in `.hero-grid`. Mirror the sticky behavior so the images pin on
 * scroll like they do on the Magento product page. `align-self:start` is the
 * load-bearing bit — without it the grid stretches the column to the row's
 * height and sticky can't activate. */
.hero-grid > .product-gallery{position:sticky;top:100px;align-self:start;height:fit-content}
@media(max-width:960px){.hero-grid > .product-gallery{position:static}}

/* At-a-Glance card under thumbs */
.at-glance{margin-top:28px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 28px;box-shadow:var(--shadow)}
.at-glance-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.at-glance-head h4{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.015em}
.at-glance-head .brand-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-2);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;color:var(--ink)}
.at-glance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.glance-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line-soft)}
.glance-item:nth-child(-n+2){border-top:0;padding-top:0}
.glance-item svg{color:var(--blue);flex:none;margin-top:2px}
.glance-item .k{font-size:11px;color:var(--muted);font-weight:500;line-height:1.2}
.glance-item .v{font-size:13px;font-weight:700;color:var(--ink);margin-top:2px;line-height:1.2}

/* Sticky gallery gracefully disables on narrow screens */
@media(max-width:960px){.gallery{position:static}}

.gallery .frame{position:relative;background:var(--bg);border:0;border-radius:var(--radius-lg);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow-lg)}
.gallery .frame::before,.gallery .frame::after,.gallery .corner,.gallery .stamp,.gallery .ref{display:none}
.gallery .frame img{max-width:82%;max-height:82%}
.gallery .zoom{position:absolute;bottom:18px;right:18px;display:flex;gap:8px}
.gallery .zoom button{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border:1px solid var(--line);width:40px;height:40px;border-radius:8px;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:all .15s}
.gallery .zoom button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.thumbs{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:14px}
.thumb{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg);border:2px solid transparent;border-radius:10px;display:grid;place-items:center;cursor:pointer;transition:all .15s;box-shadow:var(--shadow)}
.thumb img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain}
.thumb.active{border-color:var(--blue)}
.thumb:hover:not(.active){transform:translateY(-2px)}
.thumb .idx{display:none}

.summary{padding-top:8px}
.summary .eyebrow{display:flex;gap:8px;margin-bottom:18px;align-items:center}
.summary .eyebrow .line{display:none}
.summary .eyebrow .tag{font-size:12px;color:var(--blue);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:0}

.title{font-size:48px;font-weight:800;letter-spacing:-0.035em;line-height:1.05;color:var(--ink)}
.title em{font-style:normal;color:var(--ink);font-weight:800}
.title em::after{content:"";display:inline-block;width:8px;height:8px;background:var(--orange);border-radius:50%;vertical-align:super;margin-left:6px;margin-top:12px}
.title .sub{display:block;font-size:17px;color:var(--muted);margin-top:20px;font-weight:400;line-height:1.6;letter-spacing:-0.005em}

.meta-row{display:flex;gap:20px;flex-wrap:wrap;margin:24px 0 0;padding:20px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.meta-item{display:flex;gap:8px;align-items:baseline}
.meta-item .label{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0;text-transform:none}
.meta-item .val{font-size:14px;color:var(--ink);font-weight:700;font-family:inherit}
.stars-row{display:flex;gap:8px;align-items:center}
.stars{color:var(--yellow);font-size:14px}
.stars-row .num{font-weight:700;color:var(--ink)}
.stars-row .cnt{color:var(--muted);font-size:13px}

.price-card{background:var(--bg);border:0;border-radius:0;padding:32px 0 0;margin-top:0;box-shadow:none;position:relative}
.price-card::before,.price-card::after{display:none}
.save-pill{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:#fff;padding:5px 11px;border-radius:980px;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:12px;font-family:inherit}
.save-pill .dot{display:none}
.price-main{display:flex;align-items:baseline;font-family:inherit;line-height:1}
.price-main .cur{font-size:26px;font-weight:600;color:var(--ink);margin-right:2px}
.price-main .dol{font-size:72px;font-weight:800;letter-spacing:-0.04em;color:var(--ink)}
.price-main .cts{font-size:26px;font-weight:600;color:var(--ink);font-family:inherit;margin-top:8px}
.affirm{display:flex;align-items:center;gap:8px;padding-top:16px;margin-top:18px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--muted)}
.affirm b{color:var(--ink);font-weight:700}
.affirm-logo{color:var(--blue);font-weight:700;font-style:normal;border-bottom:0;padding:0}
.affirm a{color:var(--blue);font-weight:600}

.buy-row{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px;margin-top:24px}
.qty{display:flex;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;height:56px;width:130px;overflow:hidden}
.qty button{width:42px;height:100%;background:transparent;border:0;font-size:18px;cursor:pointer;color:var(--ink);font-weight:600}
.qty input{flex:1;text-align:center;border:0;outline:0;background:transparent;font-family:inherit;font-size:16px;font-weight:700;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;border:0;border-radius:8px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;transition:all .15s;padding:0 24px;text-transform:none;letter-spacing:-0.005em}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--blue)}
.btn.secondary{background:var(--orange);color:#fff}
.btn.secondary:hover{background:var(--orange-2)}
.btn .arrow{display:none}

.bullets{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:28px}
.bullet{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink-2)}
.bullet svg{color:var(--green);width:18px;height:18px;flex:none}
.bullet b{color:var(--ink);font-weight:700}
.bullet span{color:var(--muted)}

.warranty{display:flex;gap:16px;align-items:center;background:var(--ink);padding:22px 26px;border-radius:var(--radius-lg);margin-top:22px;color:#fff}
.warranty::before{display:none}
.warranty .seal{width:52px;height:52px;flex:none;aspect-ratio:1/1;border:2px solid var(--yellow);background:transparent;color:var(--yellow);border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;text-align:center;line-height:1;box-sizing:border-box}
.warranty .txt .tt{font-size:17px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.warranty .txt .ss{font-size:14.5px;color:rgba(255,255,255,.78);margin-top:3px;line-height:1.45}

.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;background:var(--bg-2);border:0;border-radius:var(--radius-lg)}
.trust-strip > div{padding:16px 18px;display:flex;gap:12px;align-items:center}
.trust-strip > div + div{border-left:1px solid var(--bg-3)}
.trust-strip .ico{width:36px;height:36px;border-radius:10px;background:var(--bg);color:var(--blue);display:grid;place-items:center;flex:none;box-shadow:var(--shadow)}
.trust-strip .tt{font-size:13px;font-weight:700;color:var(--ink);line-height:1.25}
.trust-strip .ss{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.trust-strip .txt{min-width:0;flex:1}

.sec-ctas{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.sec-ctas .link-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line);background:var(--bg);border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;letter-spacing:0;text-transform:none}
.sec-ctas .link-btn:hover{border-color:var(--ink);background:var(--bg-2)}
.sec-ctas .link-btn.wrenchy{background:var(--blue);color:#fff;border-color:var(--blue)}
.sec-ctas .link-btn.wrenchy:hover{background:var(--blue-2);border-color:var(--blue-2)}

.notes{margin-top:24px;background:var(--bg-2);border:0;border-radius:var(--radius-lg);padding:28px 32px}
.notes::before{display:none}
.notes h4{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;gap:8px;letter-spacing:-0.02em}
.notes h4 em{font-style:normal;color:var(--blue)}
.notes p{font-size:15px;color:var(--ink-2);line-height:1.65;margin-bottom:10px}
.notes .brand-line{display:flex;gap:24px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.notes .brand-line span{font-size:13px;color:var(--muted);font-family:inherit;letter-spacing:0}
.notes .brand-line span b{color:var(--ink);font-weight:700;margin-left:6px}

.wrenchy-band{margin:24px 0 20px;background:var(--ink);border-radius:var(--radius-lg);padding:48px 56px;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;color:#fff;position:relative;overflow:hidden}
.wrenchy-band::before{content:"";position:absolute;right:-100px;bottom:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(255,122,26,.3),transparent 60%);pointer-events:none}
.wrenchy-robot{width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-2));display:grid;place-items:center;font-size:42px;position:relative;z-index:1;box-shadow:0 0 40px rgba(29,78,216,.4)}
.wrenchy-band h3{font-size:34px;font-weight:800;letter-spacing:-0.03em;line-height:1.15;color:#fff;position:relative;z-index:1;white-space:nowrap}
.wrenchy-band h3 em{font-style:normal;color:var(--orange);font-weight:800}
.wrenchy-band h3 u{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:5px;font-style:italic;color:#fff}
.wrenchy-band p{font-size:17px;opacity:.75;margin-top:8px;color:#fff;position:relative;z-index:1;font-weight:400}
.wrenchy-band .ask-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);padding:16px 28px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;border:0;font-family:inherit;position:relative;z-index:1;letter-spacing:-0.005em;text-transform:none}
.wrenchy-band .ask-btn:hover{background:var(--bg-2)}

.tabs-wrap{margin-top:48px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:81px;z-index:5}
.tab{padding:22px 32px;cursor:pointer;font-size:15px;font-weight:600;color:var(--muted);position:relative;letter-spacing:-0.005em;text-transform:none}
.tab .num{display:none}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink)}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}

.tab-panel{padding:56px 0 20px;display:none}
.tab-panel.active{display:block}

.fitment-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px}
.fitment-head h2{font-size:42px;font-weight:800;letter-spacing:-0.035em;color:var(--ink)}
.fitment-head h2 em{font-style:normal;color:var(--blue)}
.fitment-head .desc{color:var(--muted);font-size:16px;margin-top:10px;max-width:480px;line-height:1.55}
.fitment-head .filter-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;background:var(--ink);color:#fff;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:0;letter-spacing:0;text-transform:none;font-family:inherit}

.fitment-table{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.fitment-maker{display:block;border-bottom:1px solid var(--line-soft)}
.fitment-maker:last-child{border-bottom:0}
/* Full-width header strip above the model rows (replaces the old left column) */
.maker-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 28px;background:var(--bg-2);border-bottom:1px solid var(--line-soft);
}
.maker-head-left{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.maker-head-kicker{
  font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;
}
.maker-head h3{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1;margin:0}
.maker-head-count{font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.fit-row{display:grid;grid-template-columns:minmax(180px,1.2fr) 2fr auto;align-items:center;gap:18px;padding:18px 28px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .15s}
.fit-row:hover{background:var(--bg-2)}
.fit-row .model{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fit-row .model b{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;font-family:inherit}
.fit-row .model span{font-size:12px;color:var(--muted);font-family:inherit;letter-spacing:0;text-transform:none}
.year-range{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-weight:600;font-family:inherit}
.year-range .bar{width:14px;height:2px;background:var(--muted);border-radius:1px;position:relative;flex:none}
.year-range .bar::before{content:"";position:absolute;inset:0;background:currentColor;border-radius:1px;opacity:.9}
.fit-row .expand{width:34px;height:34px;border-radius:50%;background:var(--bg-2);border:0;display:grid;place-items:center;color:var(--ink);font-size:16px}
.fit-row:hover .expand{background:var(--ink);color:#fff}
.fit-notice{margin-top:24px;padding:18px 24px;background:var(--bg-2);border:0;border-left:3px solid var(--orange);border-radius:8px;display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.fit-notice b{color:var(--ink);font-weight:700}

/* Prevent text selection on the Vehicle Fitment Guide content */
.tab-panel[data-panel="fit"]{
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
}
.tab-panel[data-panel="fit"] input,
.tab-panel[data-panel="fit"] textarea{
  user-select:text;-webkit-user-select:text;
}

.specs-grid{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.spec-row{display:grid;grid-template-columns:180px 1fr;padding:16px 24px;border-bottom:1px solid var(--line-soft);align-items:center}
.spec-row:nth-last-child(-n+2){border-bottom:0}
.spec-row:nth-child(odd){border-right:1px solid var(--line-soft)}
.spec-row .k{font-size:13px;color:var(--muted);font-family:inherit;letter-spacing:0;text-transform:none;font-weight:500}
.spec-row .v{font-size:15px;color:var(--ink);font-weight:600}
.spec-row.highlight{background:var(--bg-2)}
.spec-row.highlight .v{color:var(--blue)}

.interchange{margin-top:56px}
.interchange h3{font-size:28px;font-weight:800;letter-spacing:-0.025em;margin-bottom:6px}
.interchange .lead{color:var(--muted);font-size:15px;margin-bottom:22px}
.ic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ic-card{background:var(--bg);border:1px solid var(--line-soft);padding:14px 18px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;transition:all .15s;box-shadow:var(--shadow)}
.ic-card:hover{border-color:var(--ink);transform:translateY(-1px)}
.ic-card .brand{font-size:14px;font-weight:700;color:var(--ink)}
.ic-card .pn{font-size:13px;color:var(--blue);font-weight:600;font-family:inherit}
.ic-card.hl{background:var(--ink);border-color:var(--ink)}
.ic-card.hl .brand{color:#fff}
.ic-card.hl .pn{color:var(--yellow)}

.policies{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.policy-card{background:var(--bg);border:1px solid var(--line-soft);padding:32px 34px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.policy-card::before{display:none}
.policy-card h4{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:12px;letter-spacing:-0.02em}
.policy-card h4 .ch{width:34px;height:34px;background:var(--ink);color:#fff;display:grid;place-items:center;border-radius:50%;font-weight:700;font-size:14px}
.policy-card p{font-size:14px;color:var(--ink-2);line-height:1.6}

.why{margin-top:100px;padding:100px 0;background:var(--ink);color:#fff;border-radius:var(--radius-lg);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(29,78,216,.25),transparent 60%);pointer-events:none}
.why .inner{max-width:1120px;margin:0 auto;padding:0 56px;position:relative}
.why .kicker{display:flex;gap:10px;margin-bottom:22px;font-size:22px;color:var(--orange);font-weight:800;letter-spacing:-0.01em;text-transform:none}
.why .kicker .dash{display:none}
.why h2{font-size:68px;font-weight:800;letter-spacing:-0.04em;line-height:1.02;color:#fff;max-width:820px}
.why h2 em{font-style:normal;color:var(--orange)}
.why .sub{font-size:19px;color:rgba(255,255,255,.7);margin-top:18px;max-width:560px;font-weight:400}
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;background:transparent;padding:0}
.why-card{background:rgba(255,255,255,.05);padding:40px 36px;border-radius:var(--radius-lg);border:0;position:relative}
.why-card .num{font-size:60px;font-weight:800;color:#fff;letter-spacing:-0.04em;line-height:1;font-family:inherit}
.why-card .unit{font-size:16px;color:rgba(255,255,255,.75);margin-top:12px;letter-spacing:0;text-transform:none;font-weight:600}
.why-card h3{font-size:24px;font-weight:700;margin-top:24px;color:#fff;letter-spacing:-0.02em}
.why-card p{font-size:14px;color:rgba(255,255,255,.7);margin-top:10px;line-height:1.55}
.why-card .icon{display:none}
.why-strip{margin-top:48px;padding:20px 32px;background:rgba(255,255,255,.05);border:0;border-radius:10px;display:flex;justify-content:center;gap:48px;align-items:center;flex-wrap:wrap}
.why-strip span{font-size:15px;font-weight:600;color:#fff;display:flex;align-items:center;gap:10px;font-family:inherit;letter-spacing:0;text-transform:none}
.why-strip span .dot{color:var(--orange)}

.reviews{padding-top:100px;padding-bottom:100px}
.reviews h2{font-size:52px;font-weight:800;letter-spacing:-0.035em;color:var(--ink)}
.reviews h2 em{font-style:normal;color:var(--blue)}
.reviews .score .num{font-size:76px;font-weight:800;letter-spacing:-0.04em;color:var(--ink);font-family:inherit}
.reviews .score .num-small{font-size:28px;color:var(--muted);font-weight:600}
.reviews .score .detail b{color:var(--ink);font-weight:700;font-family:inherit;letter-spacing:0}
.reviews .score .detail span{color:var(--muted);font-size:13px;display:block}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review-card{background:var(--bg-2);border:0;padding:30px 32px;border-radius:var(--radius-lg);position:relative}
.review-card::before{display:none}
.review-card .who{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.review-card .avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;font-family:inherit}
.review-card .name{font-weight:700;color:var(--ink);font-size:15px}
.review-card .stars{margin-bottom:12px}
.review-card .quote{font-size:15px;line-height:1.6;color:var(--ink-2);font-family:inherit;font-style:normal;font-weight:400}
.review-card .date{font-size:12px;color:var(--muted);margin-top:16px;padding-top:16px;border-top:1px solid var(--line);letter-spacing:0;text-transform:none;font-family:inherit}

.racing{padding-top:88px;padding-bottom:44px;border-top:1px solid var(--line-soft)}
.racing-head{text-align:center;margin-bottom:48px}
.racing-head .kicker{font-size:13px;color:var(--orange);font-weight:700;letter-spacing:0;text-transform:none}
.racing h2{font-size:52px;font-weight:800;letter-spacing:-0.035em;margin-top:12px;color:var(--ink)}
.racing h2 em{font-style:normal;color:var(--blue)}
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.video-card{aspect-ratio:16/9;background:var(--ink);border-radius:var(--radius-lg);position:relative;overflow:hidden;cursor:pointer;border:0;box-shadow:var(--shadow);display:block;text-decoration:none}
.video-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:64px;height:64px;background:rgba(255,255,255,.95);border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(10px);transition:all .2s}
.video-card .play svg{color:var(--ink);margin-left:4px}
.video-card:hover .play{transform:translate(-50%,-50%) scale(1.1);background:var(--orange);color:#fff}
.video-card:hover .play svg{color:#fff}
.video-card .label{position:absolute;bottom:18px;left:20px;right:20px;z-index:3;color:#fff}
.video-card .label b{display:block;font-size:16px;font-weight:700;letter-spacing:-0.01em}
.video-card .label span{font-size:11px;color:rgba(255,255,255,.75);font-family:inherit;letter-spacing:0;text-transform:none;margin-top:2px;display:block}

footer{background:var(--bg-2);color:var(--ink);padding:72px 0 32px;border-top:1px solid var(--line-soft)}
footer::before{display:none}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:56px;align-items:start}
.foot-brand .mark img{height:44px;filter:none !important}
.foot-brand .tag{font-size:16px;color:var(--ink);font-weight:500;margin:18px 0;font-style:normal}
.foot-brand .email{color:var(--blue);font-weight:600;border-bottom:0;font-family:inherit}
.foot-brand .meta{margin-top:22px;font-size:12px;color:var(--muted);font-family:inherit;letter-spacing:0;text-transform:none;opacity:1;line-height:1.7}
.foot-col h4{font-size:14px;color:var(--ink);font-weight:700;letter-spacing:0;text-transform:none;margin-bottom:18px;padding-bottom:0;border-bottom:0;font-family:inherit}
.foot-col a{color:var(--muted);font-size:14px;padding:5px 0;opacity:1;font-weight:500}
.foot-col a:hover{color:var(--ink);padding-left:0}
.foot-social{display:flex;gap:8px;margin-top:22px}
.foot-social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);padding:0;background:var(--bg)}
.foot-social a:hover{background:var(--ink);color:#fff;border-color:var(--ink);padding:0}
.foot-bottom{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:13px;letter-spacing:0;text-transform:none;font-family:inherit;opacity:1}
.foot-bottom .heart{color:var(--orange)}

@media(max-width:960px){.hero-grid,.why-cards,.review-grid,.video-grid,.specs-grid,.ic-grid,.policies,.foot-grid{grid-template-columns:1fr}}

.reveal{opacity:0;transform:translateY(12px);animation:reveal .5s ease forwards}
.reveal.d1{animation-delay:.04s}.reveal.d2{animation-delay:.1s}.reveal.d3{animation-delay:.16s}.reveal.d4{animation-delay:.22s}.reveal.d5{animation-delay:.28s}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════
   V10b OVERRIDE · NAVY HEADER & FOOTER
   Like the live go-parts.com masthead: navy base,
   logo tucked into a white rounded card.
   ════════════════════════════════════════ */
:root{
  --navy:#1a3db0;
  --navy-2:#12307f;
  --navy-3:#0a1a5e;
}

/* Utility bar — deeper navy stripe above the masthead */
.utility{background:var(--navy-3);color:rgba(255,255,255,.88)}
.utility a{color:rgba(255,255,255,.88)}
.utility a:hover{color:#fff}

/* Masthead — royal navy gradient, thin accent line at bottom */
.masthead{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  border-bottom:0;
  position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 24px -12px rgba(10,26,94,.4);
}
.masthead::after{
  display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  /* Full-width racing ribbon — orange→yellow→orange with soft fades at
     the very edges so it reads as a decorative brand accent, not a
     clipped/loading progress bar. */
  background:linear-gradient(90deg, transparent 0%, var(--orange) 10%, var(--yellow) 50%, var(--orange) 90%, transparent 100%);
}
.masthead .wrap{padding:14px 32px}

/* Logo — white rounded card (like live site) */
.wordmark{
  background:#fff;border-radius:12px;padding:10px 18px;
  box-shadow:0 4px 12px rgba(10,26,94,.2);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .4s cubic-bezier(.25,.9,.3,1),box-shadow .4s ease;
  will-change:transform;
  --lmx:50%;--lmy:50%;
}
/* Ambient cursor-follow tint (inside the card) — stronger + no snap */
.wordmark::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(260px 140px at var(--lmx) var(--lmy),rgba(26,61,176,.32),transparent 60%),
    radial-gradient(220px 120px at calc(100% - var(--lmx)) calc(100% - var(--lmy)),rgba(255,122,26,.26),transparent 60%);
  opacity:0;transition:opacity .35s ease;z-index:1;mix-blend-mode:multiply;
}
/* Brand-tinted shimmer sweep — one-shot keyframe so mouseout doesn't
   reverse-animate the beam back across the card. */
.wordmark::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;right:0;
  pointer-events:none;
  background:linear-gradient(108deg,
    transparent 0%,
    transparent 34%,
    rgba(26,61,176,.30) 43%,
    rgba(26,61,176,.55) 48%,
    rgba(255,122,26,.55) 52%,
    rgba(255,122,26,.30) 57%,
    transparent 66%,
    transparent 100%);
  filter:blur(.5px);
  transform:translateX(-140%) skewX(-14deg);
  border-radius:inherit;z-index:4;   /* above logo so the beam passes over it */
  will-change:transform,opacity;
  opacity:0;
}
/* Shimmer is triggered by JS adding .shimmering on mouseenter and
   removed on animationend — so mousing out mid-sweep doesn't yank
   the animation and cause the beam to snap back. */
.wordmark.shimmering::after{animation:wordmarkShimmer 1.2s cubic-bezier(.2,.8,.25,1)}
@keyframes wordmarkShimmer{
  0%  {transform:translateX(-140%) skewX(-14deg);opacity:0}
  10% {opacity:1}
  90% {opacity:1}
  100%{transform:translateX(140%) skewX(-14deg);opacity:0}
}
/* Soften the ambient tint slightly so it doesn't compete with the beam */
.wordmark:hover::before{opacity:.75}
.wordmark .logo-img{height:42px;width:auto;filter:none !important;position:relative;z-index:3}

.wordmark:hover{
  box-shadow:
    0 18px 40px -14px rgba(26,61,176,.4),
    0 0 0 1px rgba(26,61,176,.08),
    0 0 28px -4px rgba(255,122,26,.18),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Search — translucent glass on navy */
.search{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);height:46px}
.search:focus-within{background:rgba(255,255,255,.95);border-color:#fff}
.search input{color:#fff}
.search input::placeholder{color:rgba(255,255,255,.65)}
.search:focus-within input{color:var(--ink)}
.search:focus-within input::placeholder{color:var(--muted)}
.search .browse{color:#fff;font-weight:600}
.search:focus-within .browse{color:var(--ink)}
.search .divider{background:rgba(255,255,255,.22)}
.search:focus-within .divider{background:var(--line)}
.search button.submit{background:var(--orange);color:#fff;font-weight:700}
.search button.submit:hover{background:var(--orange-2)}

/* Chip + cart */
.flag-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}
.flag-chip .txt{color:rgba(255,255,255,.85)}
.flag-chip .txt b{color:#fff}
.cart-btn{background:var(--orange);color:#fff;box-shadow:0 4px 14px -4px rgba(255,122,26,.5)}
.cart-btn:hover{background:var(--orange-2)}
.cart-btn .count{background:#fff;color:var(--orange)}

/* Footer — navy matches masthead for bookend effect */
footer{background:linear-gradient(180deg,var(--navy-2) 0%,var(--navy-3) 100%);color:#fff;border-top:0;position:relative}
footer::before{
  display:block;content:"";position:absolute;top:0;left:0;right:0;height:3px;
  /* Full-width racing ribbon — orange→yellow→orange with soft fades at
     the very edges so it reads as a decorative brand accent, not a
     clipped/loading progress bar. */
  background:linear-gradient(90deg, transparent 0%, var(--orange) 10%, var(--yellow) 50%, var(--orange) 90%, transparent 100%);
}
.foot-brand .tag{color:rgba(255,255,255,.85);font-weight:500;margin:0 0 10px;font-size:16px}
.foot-brand .email{color:var(--yellow);font-weight:700;border-bottom:0}
.foot-brand .meta{color:rgba(255,255,255,.55)}
.foot-col h4{color:#fff;font-weight:700}
.foot-col a{color:rgba(255,255,255,.75);font-weight:500}
.foot-col a:hover{color:var(--yellow)}
.foot-social a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.foot-social a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.foot-bottom{color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.12)}
.foot-bottom .heart{color:var(--orange)}

/* ════════════════════════════════════════════════════════
   V11 · NEXT-GEN OVERLAY
   Aurora backdrop · glassmorphism · live pulse pills
   Bento-tuned summary · floating buy dock · pill tabs
   ════════════════════════════════════════════════════════ */

/* Aurora backdrop — soft shifting color mesh behind the page */
body{
  background:
    radial-gradient(800px 400px at 10% 5%,rgba(26,61,176,.12),transparent 60%),
    radial-gradient(700px 400px at 90% 20%,rgba(255,122,26,.08),transparent 60%),
    radial-gradient(900px 600px at 50% 50%,rgba(251,191,36,.05),transparent 70%),
    radial-gradient(600px 400px at 15% 90%,rgba(26,61,176,.08),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* Hero — ambient glow, extra breathing room */
.hero{padding:48px 0 48px;background:transparent;position:relative}
/* Previous hero::before glow removed — it was anchored to the hero section
   (static) while the gallery image is sticky, so the glow visibly drifted
   away from the image on scroll. The body's fixed aurora backdrop already
   provides ambient color without that misalignment issue. */
.hero .wrap{position:relative;z-index:1}
.hero-grid{gap:56px}

/* Live status pill row — sits above the title */
.live-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.live-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:980px;
  font-size:12px;font-weight:600;letter-spacing:-0.005em;
  background:#fff;border:1px solid var(--line);
  color:var(--ink-2);
}
.live-pill.stock{color:#047857;background:rgba(4,120,87,.08);border-color:rgba(4,120,87,.2)}
.live-pill.stock::before{content:"";width:6px;height:6px;background:#10b981;border-radius:50%;box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:livePulse 2s infinite}
.live-pill.ships{background:rgba(29,78,216,.08);color:var(--blue);border-color:rgba(29,78,216,.2)}
.live-pill.free{background:rgba(255,122,26,.08);color:var(--orange);border-color:rgba(255,122,26,.2)}
.live-pill.warn{background:linear-gradient(135deg,#fff7ed,#fed7aa);color:#c2410c;border-color:rgba(234,88,12,.35);font-weight:800}
.live-pill.warn::before{content:"";width:7px;height:7px;background:#ea580c;border-radius:50%;animation:livePulse 1.5s infinite}
.live-pill.oem{background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(59,130,246,.04));color:var(--blue);border-color:rgba(26,61,176,.22)}

/* ════════ DELIVERY ESTIMATE ════════ */
.delivery-est{
  margin-top:18px;padding:16px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(5,150,105,.04));
  border:1px solid rgba(16,185,129,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.delivery-est .de-head{
  display:flex;align-items:center;gap:10px;color:#047857;font-size:13.5px;font-weight:700;letter-spacing:.01em;
}
.delivery-est .de-head svg{color:#059669;flex:none}
.delivery-est .de-head b{color:var(--ink);font-weight:800}
.delivery-est .de-dates{
  font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin:4px 0 6px;font-variant-numeric:tabular-nums;
}
.delivery-est .de-countdown{
  font-size:13.5px;color:var(--ink-2);font-weight:600;display:flex;gap:6px;flex-wrap:wrap;align-items:baseline;
}
.delivery-est .de-countdown b{color:var(--ink);font-weight:800}
.delivery-est .cd-timer{
  color:#c2410c;font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:800;
  padding:2px 8px;border-radius:6px;background:rgba(234,88,12,.08);border:1px solid rgba(234,88,12,.18);
}
.delivery-est .cd-ship{color:var(--muted);font-weight:500}

/* Qty fixed (unique inventory) */
.qty-fixed{
  display:inline-grid;place-items:center;min-width:48px;height:46px;padding:0 16px;
  background:linear-gradient(180deg,#fff,var(--bg-2));border:1px solid var(--line);border-radius:10px;
  font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-0.01em;
}
.qty-note{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:6px;letter-spacing:.01em}

/* ════════ MULTI-PART PRODUCT NOTES — LIQUID GLASS ════════ */
.notes-multi{
  margin-top:22px;padding:24px 28px;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.76));
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 22px 48px -22px rgba(26,61,176,.18),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
}
.notes-multi::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(480px 200px at 0% 0%,rgba(26,61,176,.07),transparent 60%),
    radial-gradient(480px 200px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.notes-multi > *{position:relative;z-index:1}
.notes-multi h4{
  font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin:0 0 12px;
  display:flex;align-items:center;gap:8px;
}
.notes-multi h4 em{font-style:normal;color:var(--blue)}
.notes-multi .nm-body p{font-size:14.5px;color:var(--ink-2);line-height:1.7;margin:0 0 10px}
.notes-multi .nm-body p:last-child{margin:0}
.notes-multi .nm-body b{color:var(--ink);font-weight:800}
.notes-multi .nm-oems code{
  display:inline-block;padding:3px 10px;margin:2px;border-radius:8px;
  background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(59,130,246,.04));
  border:1px solid rgba(26,61,176,.18);
  font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--blue);font-weight:700;letter-spacing:.02em;
}
.notes-multi .nm-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(26,61,176,.14),transparent);margin:16px 0}

/* Stat rows inside notes-multi */
.notes-multi .nm-meta{display:flex;align-items:center;gap:14px}
.notes-multi .nm-meta .nm-stat{
  font-size:13.5px;font-weight:700;color:var(--muted);letter-spacing:0.02em;text-transform:uppercase;flex:none;
}
.notes-multi .nm-meta .nm-stat b{
  display:block;margin-top:3px;color:var(--ink);font-weight:800;font-size:17px;letter-spacing:-0.01em;text-transform:none;
}
.notes-multi .nm-meta .nm-stat-sub{font-size:13px;color:var(--muted);flex:1;line-height:1.45}
.notes-multi .nm-meta .nm-odo{
  font-size:26px;font-weight:900;color:var(--ink);letter-spacing:-0.025em;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--ink),#2d3b5c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;flex:none;
}

/* ════════ WHY BUY USED OEM — LIQUID GLASS ════════ */
.why-oem{
  margin-top:22px;padding:26px 30px;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78));
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 24px 52px -22px rgba(26,61,176,.2),0 0 0 1px rgba(26,61,176,.05),inset 0 1px 0 rgba(255,255,255,.9);
}
/* Tinted variant — sky-blue wash (reverted indigo swap). Plain glass panel
 * without the left-edge gradient glow: the horizontal glow was the thing
 * reading as cartoony, not the color. Existing ::before radial gradients
 * plus the wash are enough to differentiate this panel from the default. */
.why-oem.why-oem--tinted{
  background:linear-gradient(180deg,rgba(240,249,255,.96),rgba(224,242,254,.82));
  border:1px solid rgba(14,165,233,.22);
  box-shadow:
    0 24px 52px -22px rgba(14,116,144,.22),
    0 0 0 1px rgba(14,165,233,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.why-oem.why-oem--tinted::before{
  background:
    radial-gradient(520px 220px at 100% 0%,rgba(14,165,233,.14),transparent 58%),
    radial-gradient(520px 220px at 0% 100%,rgba(255,122,26,.07),transparent 58%);
}
.why-oem.why-oem--tinted .why-oem-list li{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.62));
  border:1px solid rgba(14,165,233,.14);
}
.why-oem::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(520px 220px at 100% 0%,rgba(26,61,176,.09),transparent 58%),
    radial-gradient(520px 220px at 0% 100%,rgba(255,122,26,.07),transparent 58%);
}
.why-oem > *{position:relative;z-index:1}
.why-oem h4{
  display:flex;align-items:center;gap:10px;color:var(--ink);font-size:20px;font-weight:800;letter-spacing:-0.025em;margin:0 0 16px;
}
.why-oem h4 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding-right:.12em;margin-right:-.06em;font-weight:800;
}
.why-oem h4 svg{
  color:#fff;padding:6px;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),#3b82f6);
  box-shadow:0 6px 14px -4px rgba(26,61,176,.45);
}
.why-oem-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.why-oem-list li{
  font-size:13.5px;color:var(--ink-2);line-height:1.6;
  padding:14px 16px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.5));
  border:1px solid rgba(26,61,176,.08);
}
.why-oem-list li b{color:var(--ink);font-weight:800;letter-spacing:-0.005em;display:block;margin-bottom:3px;font-size:13px}
/* Guarantee banner — 3-stat glass strip, no emoji */
.why-oem-banner{
  margin-top:18px;padding:14px 22px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  background:
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.8)),
    linear-gradient(135deg,rgba(16,185,129,.08),rgba(26,61,176,.04));
  border:1px solid rgba(16,185,129,.28);
  box-shadow:0 10px 24px -14px rgba(16,185,129,.3),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.why-oem-banner::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(320px 140px at 50% 100%,rgba(16,185,129,.1),transparent 65%);
}
.why-oem-banner > *{position:relative;z-index:1}
.why-oem-banner .gb-shield{
  color:#059669;flex:none;padding:6px;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.08));
  border:1px solid rgba(16,185,129,.25);
}
.why-oem-banner .gb-stat{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1;
}
.why-oem-banner .gb-stat b{
  font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-0.015em;
}
.why-oem-banner .gb-stat em{
  font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;margin-top:3px;font-style:normal;
}
.why-oem-banner .gb-sep{
  width:1px;height:24px;background:linear-gradient(180deg,transparent,rgba(16,185,129,.28),transparent);
}
@media(max-width:560px){
  .why-oem-banner{gap:12px}
  .why-oem-banner .gb-sep{display:none}
}
@media(max-width:720px){
  .why-oem-list{grid-template-columns:1fr}
  .notes-multi .nm-meta{flex-direction:column;align-items:flex-start;gap:4px}
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}
  70%{box-shadow:0 0 0 6px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}

/* Delivery Estimate panel — mockup-v12-hl `.delivery-est` design mapped onto
 * the class names the live hl-product.php delivery JS renders (no rename
 * needed, same dynamic fetch/countdown wiring). Fires below the price-card. */
.delivery-estimate-section{
  margin-top:18px;padding:16px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(5,150,105,.04));
  border:1px solid rgba(16,185,129,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  text-align:center;
}
.delivery-estimate-header{
  display:flex;align-items:center;gap:10px;
  color:#047857;font-size:13.5px;font-weight:700;letter-spacing:.01em;
  justify-content:center;
}
.delivery-estimate-header svg{color:#059669;flex:none}
.delivery-estimate-header b,
.delivery-estimate-header #delivery-state{color:var(--ink);font-weight:800}
.delivery-estimate-dates{
  font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;
  margin:4px 0 6px;font-variant-numeric:tabular-nums;
}
.delivery-estimate-countdown{
  font-size:13.5px;color:var(--ink-2);font-weight:600;
  display:flex;gap:6px;flex-wrap:wrap;align-items:baseline;justify-content:center;
}
.delivery-estimate-countdown b{color:var(--ink);font-weight:800}
.delivery-estimate-countdown .countdown-timer{
  color:#c2410c;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  padding:2px 8px;border-radius:6px;
  background:rgba(234,88,12,.08);border:1px solid rgba(234,88,12,.18);
}
.delivery-estimate-countdown .ship-message{color:var(--muted);font-weight:500}
@media(max-width:480px){
  .delivery-estimate-dates{font-size:18px}
  .delivery-estimate-countdown{flex-wrap:wrap}
}

/* Gallery frame — glass with colored edge glow.
   Cap the height relative to viewport so thumbs + at-glance below always fit
   on shorter laptops (MacBook Air etc). aspect-ratio stays 1/1 so it shrinks
   uniformly; max-width:100% keeps it from overflowing the column. */
.gallery .frame{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 40px 80px -30px rgba(26,61,176,.25),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.9);
  max-height:calc(100vh - 260px);
  max-width:100%;
  margin:0 auto;
}
.gallery .frame::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(26,61,176,.3),transparent 40%,transparent 60%,rgba(255,122,26,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.gallery .frame img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(10,20,36,.15))}
.gallery .frame::after{display:none !important}

.thumb{background:rgba(255,255,255,.6);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(10,20,36,.05)}
.thumb.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.18),0 4px 12px rgba(26,61,176,.2)}

/* At a Glance — upgraded to colored-edge glass card */
.at-glance{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.7));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.18),inset 0 1px 0 rgba(255,255,255,.8);
  position:relative;
}
.at-glance::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(26,61,176,.25),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.at-glance-head h4{font-size:12px;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted);font-weight:700}
.at-glance-head .brand-chip{background:var(--ink);color:#fff;padding:5px 12px;letter-spacing:0.06em}
.glance-item svg{color:var(--blue)}
.glance-item .v{color:var(--ink);letter-spacing:-0.01em}

/* Title — dramatic scale + gradient ink */
.summary{padding-top:0}
.summary .eyebrow .tag{
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.08));
  border:1px solid rgba(26,61,176,.2);
  color:var(--ink);padding:6px 14px;border-radius:980px;
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
}
.title{font-size:52px;letter-spacing:-0.04em;line-height:1.02;font-weight:800}
.title em::after{
  background:linear-gradient(135deg,var(--orange),var(--yellow));
  width:10px;height:10px;box-shadow:0 0 16px rgba(255,122,26,.6);
}
.title .sub{font-size:17px;margin-top:22px;color:var(--ink-2);line-height:1.55}

/* Price card — glassmorphic with colored glow */
.price-card{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  padding:28px 32px;margin-top:28px;
  box-shadow:0 30px 60px -30px rgba(26,61,176,.3),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:visible;
}
.price-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(400px 200px at 100% 0%,rgba(255,122,26,.1),transparent 60%);
}
.price-card::after{
  display:block;content:"";position:absolute;right:-1px;top:-1px;bottom:-1px;width:4px;
  background:linear-gradient(180deg,var(--orange),var(--yellow));
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
.save-pill{background:linear-gradient(135deg,var(--orange),#ff5c33);box-shadow:0 6px 18px -4px rgba(255,122,26,.5)}
.price-main{position:relative;z-index:1}
.price-main .dol{font-size:76px;font-weight:800;background:linear-gradient(135deg,var(--ink),#2d3b5c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.045em;padding-right:.06em;margin-right:-.03em}

/* Per-month highlight row */
.price-per-month{
  margin-top:18px;padding:12px 14px;border-radius:10px;
  background:linear-gradient(135deg,rgba(26,61,176,.06),rgba(26,61,176,.02));
  border:1px solid rgba(26,61,176,.12);
  display:flex;justify-content:space-between;align-items:center;font-size:13px;
  color:var(--ink-2);
}
.price-per-month b{color:var(--blue);font-weight:700;font-size:15px}

/* Primary CTAs — animated gradient sweep */
.btn.primary{
  background:linear-gradient(135deg,var(--ink) 0%,#1e2a50 100%);
  box-shadow:0 12px 32px -10px rgba(10,20,36,.5),inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;overflow:hidden;
}
.btn.primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.btn.primary:hover::after{transform:translateX(100%)}
.btn.primary:hover{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 16px 40px -8px rgba(29,78,216,.5)}
.btn.secondary{
  background:linear-gradient(135deg,var(--orange),#ff5c33);
  box-shadow:0 12px 32px -10px rgba(255,122,26,.55),inset 0 1px 0 rgba(255,255,255,.2);
  position:relative;overflow:hidden;
}
.btn.secondary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.btn.secondary:hover::after{transform:translateX(100%)}
.btn.secondary:hover{box-shadow:0 16px 40px -6px rgba(255,122,26,.6)}

/* Warranty & trust — glass tiles */
.warranty{
  background:linear-gradient(135deg,rgba(26,61,176,.92),rgba(18,48,127,.95));
  position:relative;overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.4);
}
.warranty::before{
  display:block;content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(300px 150px at 100% 0%,rgba(255,255,255,.15),transparent 60%);
}
.warranty .seal{border-color:var(--yellow);color:var(--yellow)}

.trust-strip{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.7));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 30px -14px rgba(26,61,176,.15);
}
.trust-strip .ico{background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(26,61,176,.04));color:var(--blue);box-shadow:inset 0 0 0 1px rgba(26,61,176,.1)}

/* Secondary CTAs — pill + gradient hover */
.sec-ctas .link-btn{background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(10,20,36,.05)}
.sec-ctas .link-btn.wrenchy{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 8px 20px -6px rgba(29,78,216,.45)}

/* Notes — glass */
.notes{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}

/* Wrenchy — next-gen mesh */
.wrenchy-band{
  background:
    radial-gradient(50% 80% at 85% 50%,rgba(255,122,26,.35),transparent 60%),
    radial-gradient(50% 80% at 0% 50%,rgba(251,191,36,.15),transparent 60%),
    linear-gradient(135deg,#0a1a5e 0%,#1e2a50 60%,#1a3db0 100%);
  box-shadow:0 40px 100px -40px rgba(10,20,36,.5);
  overflow:hidden;
}
.wrenchy-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/60px 60px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/60px 60px;
}
.wrenchy-robot{
  background:transparent;box-shadow:none;border-radius:0;
  width:auto;height:120px;
  overflow:visible;position:relative;display:flex;align-items:flex-end;justify-content:center;font-size:0;
  flex:none;
}
.wrenchy-robot img{
  height:100%;width:auto;max-width:none;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
  pointer-events:none;
}
.wrenchy-band .ask-btn{
  background:#fff;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;padding:14px 20px 14px 14px;
}
.wrenchy-avatar{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  padding:2px;object-fit:cover;object-position:center top;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.link-btn.wrenchy .wrenchy-avatar{
  width:22px;height:22px;padding:1px;background:rgba(255,255,255,.2);
  box-shadow:none;
}

/* Liquid-glass tab bar — frosted, refractive, with a translucent sliding pill */
.tabs{
  display:inline-flex;gap:4px;padding:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.32));
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:980px;border-bottom:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 12px 30px -14px rgba(26,61,176,.22),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(26,61,176,.06);
  margin-bottom:8px;top:90px;position:sticky;overflow:hidden;
}
/* Subtle refractive highlight sweep across the whole bar */
.tabs{
  background-image:
    linear-gradient(110deg,transparent 0%,rgba(26,61,176,.05) 20%,transparent 40%,rgba(255,122,26,.04) 70%,transparent 100%),
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.32));
}
/* Sliding liquid pill — glass-on-glass, tinted, with inner lightning */
.tabs::before{
  content:"";position:absolute;
  top:6px;bottom:6px;
  left:var(--pill-left,6px);
  width:var(--pill-width,0);
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg,rgba(26,61,176,.92) 0%,rgba(18,48,127,.96) 100%);
  border-radius:980px;
  box-shadow:
    0 6px 18px -6px rgba(26,61,176,.6),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(10,20,60,.25),
    inset 0 0 0 1px rgba(255,255,255,.22);
  transition:left .42s cubic-bezier(.5,.05,.15,1),width .42s cubic-bezier(.5,.05,.15,1);
  z-index:0;pointer-events:none;
}
/* Hairline trailing highlight on the pill's top edge for extra "glass" feel */
.tabs::after{
  content:"";position:absolute;
  top:7px;height:2px;
  left:calc(var(--pill-left,6px) + 14px);
  width:calc(var(--pill-width,0) - 28px);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  border-radius:2px;
  transition:left .42s cubic-bezier(.5,.05,.15,1),width .42s cubic-bezier(.5,.05,.15,1);
  z-index:1;pointer-events:none;
}
.tab{padding:11px 22px;border-radius:980px;position:relative;z-index:2;background:transparent !important;transition:color .3s ease,text-shadow .3s ease}
.tab::after{display:none}
.tab:hover{color:var(--ink)}
.tab.active{background:transparent !important;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}

/* Animated tab-panel enter — fade + lift + slight blur */
.tab-panel{display:none}
.tab-panel.active{
  display:block;
  animation:tabPanelIn .55s cubic-bezier(.25,.9,.3,1) both;
}
@keyframes tabPanelIn{
  0%  {opacity:0;transform:translateY(18px) scale(.99);filter:blur(3px)}
  60% {filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
/* Staggered reveal for key child blocks inside the panel */
.tab-panel.active > .fitment-head,
.tab-panel.active > .fit-filter,
.tab-panel.active > .fitment-table,
.tab-panel.active > .fit-notice,
.tab-panel.active > .specs-grid,
.tab-panel.active > .interchange,
.tab-panel.active > .policies{
  animation:tabChildIn .6s cubic-bezier(.25,.9,.3,1) both;
}
.tab-panel.active > .fitment-head{animation-delay:.05s}
.tab-panel.active > .fit-filter{animation-delay:.11s}
.tab-panel.active > .fitment-table,
.tab-panel.active > .specs-grid,
.tab-panel.active > .policies{animation-delay:.17s}
.tab-panel.active > .interchange{animation-delay:.24s}
.tab-panel.active > .fit-notice{animation-delay:.3s}
@keyframes tabChildIn{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Fitment — big-type accent */
.fitment-head h2{font-size:44px}
.fitment-head h2 em{background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fitment-table{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}
.year-range .bar::before{background:var(--muted)}

/* Specs — glass panels */
.specs-grid{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}
.spec-row.highlight{background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.05))}

/* Interchange cards */
.ic-card{
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 2px 8px rgba(10,20,36,.04);
}
.ic-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(26,61,176,.25)}
.ic-card.hl{background:linear-gradient(135deg,var(--ink),#1e2a50);border-color:var(--ink)}

/* Policy cards — glass */
.policy-card{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}
.policy-card h4 .ch{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 4px 12px -2px rgba(29,78,216,.4)}

/* Why — starfield + aurora */
.why{
  background:
    radial-gradient(600px 300px at 20% 0%,rgba(26,61,176,.35),transparent 60%),
    radial-gradient(600px 300px at 80% 100%,rgba(255,122,26,.2),transparent 60%),
    #0a1220;
  color:#fff;border-radius:var(--radius-lg);
}
.why::before{
  display:block;content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 80% 25%,rgba(255,255,255,.25),transparent),
    radial-gradient(1px 1px at 50% 75%,rgba(255,255,255,.25),transparent),
    radial-gradient(1px 1px at 20% 60%,rgba(255,255,255,.2),transparent),
    radial-gradient(1px 1px at 70% 85%,rgba(255,255,255,.2),transparent);
  background-size:200px 200px,300px 300px,250px 250px,350px 350px,280px 280px;
  opacity:.6;
}
.why h2 em{background:linear-gradient(135deg,var(--orange),var(--yellow));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.why-card{background:rgba(255,255,255,.04);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}
.why-card .num{background:linear-gradient(135deg,var(--orange),var(--yellow));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Reviews */
.reviews h2 em{background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.reviews .score .num{background:linear-gradient(135deg,var(--ink),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.review-card{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 30px -14px rgba(26,61,176,.1);
}

/* Racing */
.racing h2 em{background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.video-card{box-shadow:0 20px 50px -20px rgba(10,20,36,.4)}

/* ════════ INTERACTIVE FITMENT ════════ */
.fit-filter{
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:12px;
  padding:4px 14px;height:52px;
  box-shadow:0 10px 30px -14px rgba(26,61,176,.12);
  transition:all .2s ease;
}
.fit-filter:focus-within{border-color:var(--blue);box-shadow:0 10px 30px -14px rgba(26,61,176,.3),0 0 0 3px rgba(26,61,176,.12)}
.fit-filter svg{color:var(--muted);flex:none}
.fit-filter input{flex:1;border:0;outline:0;background:transparent;font-family:inherit;font-size:15px;color:var(--ink);height:100%}
.fit-filter input::placeholder{color:var(--muted)}
.fit-count{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.fit-count b{color:var(--blue);font-weight:700}

/* ────────── Model row: sliding left border + card pop-on-expand ────────── */
/* Each model row is wrapped in a .fit-slot so the expanded state can style the
   whole slot (row + detail) as a single floating card. */
.fit-slot{
  position:relative;
  border-bottom:1px solid var(--line-soft);
  transition:
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease,
    margin .3s ease,
    border-radius .3s ease;
}
.fit-slot:last-child{border-bottom:0}

.fit-row{
  display:grid;grid-template-columns:minmax(180px,1.2fr) 2fr auto;
  align-items:center;gap:18px;
  padding:18px 28px;
  cursor:pointer;
  border-left:4px solid transparent;        /* the accent bar, transparent by default */
  transition:background .2s ease,border-left-color .25s cubic-bezier(.3,0,.3,1);
}
.fit-row:hover{
  background:linear-gradient(90deg,rgba(26,61,176,.05),transparent 70%);
  border-left-color:var(--blue);            /* hover: blue bar slides in */
}
.fit-row.open{
  background:linear-gradient(90deg,rgba(255,122,26,.06),transparent 75%);
  border-left-color:var(--orange);           /* expanded: orange bar stays */
}

/* Toggle: + rotates to × on open, + changes color */
.fit-row .expand{
  width:34px;height:34px;border-radius:50%;
  background:var(--bg-2);border:0;
  display:grid;place-items:center;
  color:var(--ink);font-size:18px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line),0 2px 4px rgba(10,20,36,.04);
  transition:all .28s cubic-bezier(.3,1.3,.5,1);
}
.fit-row:hover .expand{
  background:var(--blue);color:#fff;
  box-shadow:0 4px 12px -3px rgba(29,78,216,.45);
}
.fit-row.open .expand{
  background:var(--orange);color:#fff;
  box-shadow:0 6px 16px -4px rgba(255,122,26,.55);
  transform:rotate(45deg);                   /* + → × */
}

/* Expanded details panel — animated max-height reveal */
.fit-detail{
  max-height:0;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(248,250,253,.95));
  padding:0 28px;
  transition:max-height .4s cubic-bezier(.25,.9,.3,1),padding .3s ease,opacity .3s ease;
  opacity:0;
  border-top:1px solid transparent;
}
.fit-row.open + .fit-detail{
  max-height:1200px;                         /* large ceiling — animates smoothly */
  padding:14px 28px 22px;
  opacity:1;
  border-top-color:var(--line-soft);
}

/* Card pop-out: when a slot contains an open row, lift the whole slot
   into a floating card with an orange-tinted border + soft shadow. */
.fit-slot:has(.fit-row.open){
  margin:10px 6px;
  border:2px solid rgba(255,122,26,.55);
  border-radius:12px;
  border-bottom:2px solid rgba(255,122,26,.55);
  background:linear-gradient(180deg,#fffaf4 0%,#fff7ed 100%);
  box-shadow:0 10px 28px -10px rgba(255,122,26,.3),0 0 0 1px rgba(255,122,26,.08);
  overflow:hidden;
}
.fit-slot:has(.fit-row.open) .fit-row{
  background:transparent;
  border-left:0;
}
.fit-slot:has(.fit-row.open) .fit-detail{
  background:transparent;
  border-top-color:rgba(255,122,26,.18);
}
/* Fallback for browsers without :has() — :has() is widely supported but
   keep the underlying .fit-row.open styling working when it is not. */
@supports not selector(:has(*)){
  .fit-row.open{
    border:2px solid rgba(255,122,26,.55);
    border-radius:12px;
    background:#fffaf4;
    box-shadow:0 10px 28px -10px rgba(255,122,26,.3);
  }
}

/* Expanded detail grid — column order matches live page:
   Submodel | Body Style | Years | Engine | Attributes */
.fit-detail-head,
.fit-config{
  display:grid;
  grid-template-columns:minmax(130px,1.2fr) minmax(90px,.9fr) minmax(110px,1fr) minmax(150px,1.4fr) minmax(150px,1.3fr);
  gap:14px;padding:10px 16px;align-items:center;
}
.fit-detail-head{
  padding:8px 16px;font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-soft);margin-bottom:4px;
}
.fit-config{border-radius:8px;font-size:13.5px;transition:background .15s ease}
.fit-config:hover{background:rgba(26,61,176,.05)}
.fit-config .sub{font-weight:700;color:var(--ink)}
.fit-config .body{font-weight:500;color:var(--ink-2);text-transform:capitalize}
.fit-config .yr{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.fit-config .eng{font-weight:500;color:var(--ink-2)}
.fit-config .attrs{display:flex;flex-wrap:wrap;gap:4px}
.fit-config .chip{
  font-size:10.5px;font-weight:700;letter-spacing:0.04em;padding:3px 8px;border-radius:980px;
  background:rgba(29,78,216,.08);color:var(--blue);border:1px solid rgba(29,78,216,.15);
}
.fit-config .chip.drive{background:rgba(255,122,26,.08);color:var(--orange);border-color:rgba(255,122,26,.18)}

/* Empty state */
.fit-empty{padding:40px 28px;text-align:center;color:var(--muted);font-size:14px}
.fit-empty b{color:var(--ink);font-weight:700;display:block;margin-bottom:4px;font-size:15px}

/* highlight mark */
mark{background:linear-gradient(transparent 60%,rgba(251,191,36,.5) 60%);color:inherit;padding:0 2px;border-radius:2px}

/* ────────── Mobile fitment (≤720px): stacked card per config, nothing hidden ────────── */
@media(max-width:720px){
  .fit-detail-head{display:none !important}
  .fit-config{
    display:block !important;grid-template-columns:none !important;
    padding:12px 14px !important;
    border:1px solid var(--line-soft);border-radius:10px;background:#fff;
    margin:0 0 8px;box-shadow:0 1px 2px rgba(10,20,36,.03);
  }
  .fit-config:last-child{margin-bottom:0}
  .fit-config .sub{display:inline;font-size:14.5px;font-weight:700;color:var(--ink)}
  .fit-config .body{display:inline;font-size:13px;font-weight:500;color:var(--muted);text-transform:capitalize}
  .fit-config .sub::after{content:" · ";color:var(--muted);font-weight:400}
  .fit-config .yr{
    display:inline-block;float:right;font-size:12px;font-weight:700;
    padding:3px 10px;border-radius:999px;
    background:rgba(29,78,216,.08);color:var(--blue);border:1px solid rgba(29,78,216,.15);letter-spacing:0;
  }
  .fit-config .eng{display:block;margin-top:6px;font-size:13px;color:var(--ink-2);font-weight:500;line-height:1.4}
  .fit-config .attrs{display:flex !important;flex-wrap:wrap;gap:5px;margin-top:8px}
  .fit-config .chip{font-size:10px;padding:2px 7px;line-height:1.4}
  .fit-row.open + .fit-detail{padding:10px 12px 14px !important}
  .fit-detail{padding:0 12px !important}
  .fit-row{padding:14px 16px !important;gap:10px !important}
  .fit-row .model b{font-size:16px}
  .fit-row .year-range{font-size:13px}
  .fit-row .expand{width:28px;height:28px;font-size:14px}
  .maker-head{padding:12px 16px !important}
  .maker-head h3{font-size:18px}
}

/* ════════ FLOATING BUY DOCK ════════ */
.buy-dock{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);
  display:flex;align-items:center;gap:14px;
  padding:14px 18px 14px 14px;
  background:rgba(10,20,36,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 20px 60px -12px rgba(0,0,0,.5);
  z-index:80;max-width:calc(100vw - 32px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;
  opacity:0;pointer-events:none;
}
.buy-dock.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.buy-dock .dock-img{width:48px;height:48px;border-radius:10px;background:#fff;background-size:78%;background-repeat:no-repeat;background-position:center;flex:none}
.buy-dock .dock-info{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.buy-dock .dock-info .name{font-size:13px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.buy-dock .dock-info .sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;font-weight:500}
.buy-dock .dock-price{font-size:18px;color:#fff;font-weight:800;letter-spacing:-0.02em;padding:0 14px;border-left:1px solid rgba(255,255,255,.15);border-right:1px solid rgba(255,255,255,.15);height:48px;display:flex;align-items:center}
.buy-dock .dock-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 18px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:0;border:0;cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(255,122,26,.6),inset 0 1px 0 rgba(255,255,255,.2);
}
.buy-dock .dock-btn:hover{filter:brightness(1.05)}
.buy-dock .dock-close{
  width:32px;height:32px;border-radius:8px;background:transparent;border:0;cursor:pointer;
  color:rgba(255,255,255,.6);display:grid;place-items:center;
}
.buy-dock .dock-close:hover{background:rgba(255,255,255,.08);color:#fff}

@media(max-width:640px){
  .buy-dock .dock-info{display:none}
  .buy-dock{bottom:16px}
}

/* ════════════════════════════════════════════════════════
   V12 · HYPERSPACE OVERLAY
   Animated mesh · cursor spotlight · reactive tilt · live metrics
   ════════════════════════════════════════════════════════ */

/* Animated mesh — the aurora slowly drifts */
body{
  --mx:50%;   /* mouse x (set by JS) */
  --my:30%;   /* mouse y (set by JS) */
  background:
    radial-gradient(600px 350px at var(--mx) var(--my),rgba(255,122,26,.12),transparent 55%),
    radial-gradient(800px 500px at 10% 5%,rgba(26,61,176,.14),transparent 60%),
    radial-gradient(700px 450px at 90% 20%,rgba(255,122,26,.1),transparent 60%),
    radial-gradient(900px 600px at 50% 50%,rgba(251,191,36,.06),transparent 70%),
    radial-gradient(600px 400px at 15% 90%,rgba(26,61,176,.1),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:-40% -20%;pointer-events:none;z-index:0;opacity:.55;
  background:
    radial-gradient(40% 50% at 30% 30%,rgba(29,78,216,.12),transparent 60%),
    radial-gradient(40% 50% at 70% 70%,rgba(255,122,26,.1),transparent 60%),
    radial-gradient(35% 45% at 20% 75%,rgba(251,191,36,.08),transparent 60%);
  animation:meshDrift 24s ease-in-out infinite alternate;
  mix-blend-mode:multiply;
}
@keyframes meshDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(4%,-3%) scale(1.08)}
  100%{transform:translate(-3%,4%) scale(.96)}
}

/* Masthead slides out of view when the sticky mini buy-bar slides in,
   so they take turns occupying the top edge. */
.masthead{transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;will-change:transform}
.masthead--hidden{transform:translateY(-100%);box-shadow:none !important;pointer-events:none}

/* Sticky mini buy-bar — slides from top after hero scrolls away */
.mini-bar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transform:translateY(-110%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
  background:rgba(10,20,36,.85);backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
  will-change:transform;
}
.mini-bar.visible{transform:translateY(0)}
.mini-bar .wrap{display:flex;align-items:center;gap:16px;padding:10px 32px;max-width:1280px;margin:0 auto}
.mini-bar .mb-img{width:44px;height:44px;border-radius:10px;background:#fff;background-size:78%;background-repeat:no-repeat;background-position:center;flex:none}
.mini-bar .mb-info{display:flex;flex-direction:column;min-width:0;flex:1}
.mini-bar .mb-name{font-size:14px;color:#fff;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.mini-bar .mb-sub{font-size:12px;color:rgba(255,255,255,.65);font-weight:500;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.mini-bar .mb-price{font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.02em;padding:0 18px;border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12);height:44px;display:flex;align-items:center}
.mini-bar .mb-stock{
  display:inline-flex;align-items:center;gap:6px;color:#10b981;font-size:11px;font-weight:700;
  padding:4px 10px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.22);border-radius:980px;
}
.mini-bar .mb-stock::before{content:"";width:5px;height:5px;background:#10b981;border-radius:50%;animation:livePulse 2s infinite}
.mini-bar .mb-btns{display:flex;gap:8px}
.mini-bar .mb-btn{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border-radius:10px;
  font-size:13px;font-weight:700;letter-spacing:-0.005em;border:0;cursor:pointer;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.mini-bar .mb-btn.cart{background:#fff;color:var(--ink)}
.mini-bar .mb-btn.buy{background:linear-gradient(135deg,var(--orange),#ff5c33);box-shadow:0 6px 18px -4px rgba(255,122,26,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.mini-bar .mb-btn:hover{filter:brightness(1.05)}
@media(max-width:860px){.mini-bar .mb-info,.mini-bar .mb-stock{display:none}}

/* Live social-proof ticker — above the title */
.social-proof{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:14px;padding:7px 14px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.05));
  border:1px solid rgba(26,61,176,.18);
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  position:relative;overflow:hidden;
}
.social-proof::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-120%);animation:shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer{0%{transform:translateX(-120%)}60%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.social-proof .eye{width:14px;height:14px;color:var(--blue);flex:none}
.social-proof b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.social-proof .sep{width:4px;height:4px;background:var(--muted);border-radius:50%;opacity:.5}
.social-proof .cart-emoji{color:var(--orange);font-weight:700}

/* Tilt-on-hover depth — applied to price card + gallery frame + at-glance */
.tilt{transition:transform .25s cubic-bezier(.25,.9,.3,1),box-shadow .25s ease;will-change:transform;transform-style:preserve-3d}
.tilt:hover{transform:translateY(-2px)}

/* Price-history sparkline in the price card */
.price-trend{
  margin-top:14px;display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.18);border-radius:10px;
  font-size:12.5px;
}
.price-trend svg{flex:none}
.price-trend .label{color:var(--ink-2)}
.price-trend .label b{color:#047857;font-weight:800;font-variant-numeric:tabular-nums}

/* Scroll-reveal (IntersectionObserver) */
.fx-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.25,.9,.3,1),transform .7s cubic-bezier(.25,.9,.3,1)}
.fx-reveal.in{opacity:1;transform:translateY(0)}

/* Enhanced title — brand-gradient make names, upright (no italic).
 * Stays `display: inline` so descenders (the "g" in "Dodge", etc.) aren't
 * clipped by a tight inline-block line-box at the mockup's 1.02 line-height. */
.title em{
  background:linear-gradient(100deg,var(--blue) 0%,var(--orange) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;
  font-style:normal;
  display:inline;
  padding:0;margin:0;
}
.title em::after{display:none}

/* Data-pulse pills for key specs */
.spec-pulse{
  display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:980px;
  background:rgba(26,61,176,.08);border:1px solid rgba(26,61,176,.18);
  font-size:11.5px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin:0 4px 6px 0;
}
.spec-pulse svg{width:12px;height:12px;flex:none}

/* Obvious "Browse by Vehicle" button tucked inside the search bar.
   Colored fill + soft shadow + inset highlight make it read as a button,
   not a label for the input. */
.search{padding-left:6px;gap:0;height:50px}
.search .browse-inline{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;margin-right:8px;padding:0 16px;
  border:0;cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,var(--orange) 0%,#ff5c33 100%);
  color:#fff;border-radius:9px;
  font:inherit;font-weight:700;font-size:13.5px;letter-spacing:-0.005em;
  box-shadow:
    0 4px 12px -2px rgba(255,122,26,.45),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.08);
  transition:transform .18s ease,box-shadow .25s ease,filter .25s ease,opacity .25s ease;
  position:relative;overflow:hidden;
}
/* When the user is typing in the search input, quiet the Browse button
   so it reads as a secondary option and stops competing with the text. */
.search:focus-within .browse-inline{
  opacity:.48;
  filter:saturate(.7);
  box-shadow:0 2px 8px -2px rgba(255,122,26,.2),inset 0 1px 0 rgba(255,255,255,.2);
}
.search:focus-within .browse-inline:hover,
.search:focus-within .browse-inline:focus-visible{
  opacity:1;
  filter:none;
  box-shadow:0 8px 20px -2px rgba(255,122,26,.6),inset 0 1px 0 rgba(255,255,255,.3);
}
/* Dim the divider a touch too so the input feels more separated */
.search:focus-within .divider{opacity:.4}
.search .browse-inline::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.search .browse-inline:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 8px 20px -2px rgba(255,122,26,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.search .browse-inline:hover::after{transform:translateX(120%)}
.search .browse-inline:active{transform:translateY(0)}
.search .browse-inline svg{flex:none}

/* Red × clear button inside the search bar — appears while the user has text */
.search .search-clear{
  display:grid;place-items:center;
  width:28px;height:28px;margin:0 8px 0 0;flex:none;
  background:#ef4444;color:#fff;border:0;border-radius:50%;cursor:pointer;
  box-shadow:0 2px 6px -2px rgba(239,68,68,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.search .search-clear:hover{background:#dc2626;transform:scale(1.08);box-shadow:0 4px 10px -2px rgba(239,68,68,.6)}
.search .search-clear:active{transform:scale(.95)}
.search .search-clear[hidden]{display:none}

/* ════════ POLICY LIST + WIDE CARD ════════ */
.policy-list{margin:10px 0 0;padding:0 0 0 22px;color:var(--ink-2);font-size:14px;line-height:1.7}
.policy-list li{margin-bottom:4px}
.policy-list li::marker{color:var(--blue)}
.policies .policy-wide{grid-column:1/-1}
.policies .policy-card > p + p{margin-top:10px}

/* ════════ EXPERT GUIDE CARD ════════ */
.expert-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:
    radial-gradient(600px 240px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
    radial-gradient(600px 240px at 100% 100%,rgba(255,122,26,.06),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  padding:44px 48px;
  text-decoration:none;color:inherit;
  box-shadow:0 30px 60px -30px rgba(26,61,176,.22),0 0 0 1px rgba(26,61,176,.05),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .25s cubic-bezier(.25,.9,.3,1),box-shadow .25s ease;
  position:relative;overflow:hidden;
}
.expert-card:hover{transform:translateY(-3px);box-shadow:0 40px 80px -30px rgba(26,61,176,.35),0 0 0 1px rgba(26,61,176,.1),inset 0 1px 0 rgba(255,255,255,.95)}
.expert-card-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:var(--blue);
  padding:6px 14px;background:rgba(26,61,176,.08);border:1px solid rgba(26,61,176,.18);
  border-radius:980px;
}
.expert-card-title{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:6px 0 0}
.expert-card-sub{font-size:16px;color:var(--muted);line-height:1.55;margin:0;max-width:620px}
.expert-card-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;padding:13px 24px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;
  font-size:14px;font-weight:700;letter-spacing:-0.005em;
  box-shadow:0 8px 24px -8px rgba(29,78,216,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transition:box-shadow .2s ease;
}
.expert-card:hover .expert-card-cta{box-shadow:0 12px 30px -8px rgba(29,78,216,.6)}
.expert-card-cta .arrow{transition:transform .25s ease}
.expert-card:hover .expert-card-cta .arrow{transform:translateX(4px)}

/* ════════ TASTEFUL ACCENT COLOR PALETTE ════════
   Jewel tones that play well with navy + orange without feeling candy-coated. */
:root{
  --green:#16a34a;     --green-2:#059669;
  --teal:#0891b2;      --teal-2:#0e7490;
  --amber:#d97706;     --amber-2:#b45309;
  --purple:#7c3aed;    --purple-2:#6d28d9;
}

/* Why Go-Parts stat cards — each gets its own meaningful accent */
/* 1st card: 100% Money-Back → GREEN (trust/safety) */
.why-card:nth-child(1) .num{
  background:linear-gradient(135deg,var(--green),#22c55e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.why-card:nth-child(1){
  box-shadow:inset 0 1px 0 rgba(34,197,94,.12),0 0 24px -6px rgba(34,197,94,.18);
}

/* 2nd card: 19 Years of Excellence → AMBER (legacy — pairs with trophy) */
.why-card:nth-child(2) .num{
  background:linear-gradient(135deg,var(--amber),#fbbf24);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.why-card:nth-child(2){
  box-shadow:inset 0 1px 0 rgba(251,191,36,.14),0 0 24px -6px rgba(251,191,36,.2);
}

/* 3rd card: OEM Grade Quality → CYAN/TEAL (precision/engineering) */
.why-card:nth-child(3) .num{
  background:linear-gradient(135deg,var(--teal),#06b6d4);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.why-card:nth-child(3){
  box-shadow:inset 0 1px 0 rgba(6,182,212,.14),0 0 24px -6px rgba(6,182,212,.2);
}

/* Policy card icons — distinct color per policy */
.policies .policy-card:nth-child(1) h4 .ch{background:linear-gradient(135deg,var(--green),var(--green-2));box-shadow:0 4px 12px -2px rgba(22,163,74,.45)}
.policies .policy-card:nth-child(1)::before{background:linear-gradient(180deg,var(--green),var(--green-2));box-shadow:0 0 12px rgba(22,163,74,.6)}

.policies .policy-card:nth-child(2) h4 .ch{background:linear-gradient(135deg,var(--teal),var(--teal-2));box-shadow:0 4px 12px -2px rgba(8,145,178,.45)}
.policies .policy-card:nth-child(2)::before{background:linear-gradient(180deg,var(--teal),var(--teal-2));box-shadow:0 0 12px rgba(8,145,178,.6)}

.policies .policy-card:nth-child(3) h4 .ch{background:linear-gradient(135deg,var(--purple),var(--purple-2));box-shadow:0 4px 12px -2px rgba(124,58,237,.45)}
.policies .policy-card:nth-child(3)::before{background:linear-gradient(180deg,var(--purple),var(--purple-2));box-shadow:0 0 12px rgba(124,58,237,.6)}

.policies .policy-card:nth-child(4) h4 .ch{background:linear-gradient(135deg,var(--orange),#ff5c33);box-shadow:0 4px 12px -2px rgba(255,122,26,.45)}
.policies .policy-card:nth-child(4)::before{background:linear-gradient(180deg,var(--orange),#ff5c33);box-shadow:0 0 12px rgba(255,122,26,.6)}

/* ════════ COMPACT REVIEWS HEADER ════════ */
.reviews{padding-top:72px !important;padding-bottom:72px !important}
.reviews-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:20px !important;
}
.reviews-head h2{margin:0;line-height:1.05}
.score-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:980px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 16px -8px rgba(26,61,176,.25),inset 0 1px 0 rgba(255,255,255,.95);
  font-size:14px;white-space:nowrap;
}
.score-pill .stars{color:var(--yellow);font-size:15px;letter-spacing:.5px}
.score-pill .num{color:var(--ink);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.score-pill .sep{width:4px;height:4px;background:var(--muted);border-radius:50%;opacity:.5}
.score-pill .count{color:var(--muted);font-size:13px;font-weight:500}
.score-pill .count b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ════════ LIQUID-GLASS LIFETIME WARRANTY PANEL ════════ */
.warranty{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 80% at 90% 0%,rgba(255,122,26,.22),transparent 60%),
    radial-gradient(60% 80% at 0% 100%,rgba(61,213,255,.15),transparent 55%),
    linear-gradient(180deg,rgba(26,61,176,.88) 0%,rgba(18,48,127,.96) 100%);
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 24px 48px -18px rgba(26,61,176,.5),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.15) !important;
}
.warranty::before{
  display:block !important;content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(110deg,transparent 20%,rgba(255,255,255,.15) 50%,transparent 80%);
  opacity:.45;
  background-size:100% 100%;
  mix-blend-mode:overlay;
}
/* Hairline gradient rim at top edge for glass-cap highlight */
.warranty::after{
  content:"";position:absolute;top:0;left:12px;right:12px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.warranty .seal{
  background:rgba(255,255,255,.12) !important;
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,224,100,.4) !important;
  color:var(--yellow) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 8px rgba(0,0,0,.2);
}

/* ════════ NEXT-GEN SEARCHABLE COMBOBOX ════════ */
.combo{position:relative;width:100%;font:inherit}
.combo-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(248,250,253,.7));
  backdrop-filter:blur(10px);
  border:1px solid rgba(10,20,36,.1);
  font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  cursor:pointer;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(10,20,36,.04);
  transition:all .2s cubic-bezier(.25,.9,.3,1);
}
.combo-btn:hover:not(:disabled){border-color:rgba(29,78,216,.35);background:linear-gradient(180deg,#fff,rgba(248,250,253,.88))}
.combo.open .combo-btn{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(29,78,216,.15),inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -6px rgba(29,78,216,.3);
  background:#fff;
}
.combo-btn:disabled{cursor:not-allowed;opacity:.55}
.combo-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.combo-value.is-placeholder{color:var(--muted);font-weight:500}
.combo-chev{flex:none;color:var(--muted);transition:transform .25s cubic-bezier(.25,.9,.3,1)}
.combo.open .combo-chev{transform:rotate(180deg);color:var(--blue)}

.combo-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,253,.88));
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  border-radius:14px;
  box-shadow:
    0 30px 60px -18px rgba(10,20,36,.3),
    0 0 0 1px rgba(26,61,176,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
  display:none;overflow:hidden;
}
.combo.open .combo-panel{display:block;animation:comboOpen .24s cubic-bezier(.25,.9,.3,1)}
@keyframes comboOpen{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.combo-search{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid rgba(10,20,36,.06);
  background:linear-gradient(180deg,rgba(26,61,176,.04),transparent);
}
.combo-search svg{color:var(--muted);flex:none}
.combo-search input{
  flex:1;border:0;outline:0;background:transparent;
  font:inherit;font-size:14px;color:var(--ink);
  min-width:0;
}
.combo-search input::placeholder{color:var(--muted)}

.combo-list{
  list-style:none;margin:0;padding:6px;max-height:240px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(10,20,36,.25) transparent;
}
.combo-list::-webkit-scrollbar{width:6px}
.combo-list::-webkit-scrollbar-thumb{background:rgba(10,20,36,.2);border-radius:3px}
.combo-opt{
  padding:9px 12px;border-radius:8px;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:background .12s ease;
}
.combo-opt:hover,.combo-opt.active{background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.04))}
.combo-opt.selected{background:linear-gradient(135deg,rgba(26,61,176,.14),rgba(26,61,176,.08));color:var(--blue);font-weight:700}
.combo-opt.selected::after{content:"✓";color:var(--blue);font-weight:800}
.combo-opt mark{background:rgba(255,196,0,.4);color:inherit;padding:0 1px;border-radius:2px;font-weight:700}

.combo-empty{padding:18px 14px;text-align:center;color:var(--muted);font-size:13px}

@media (max-width:480px){
  .combo-panel{left:-12px;right:-12px}
  .combo-list{max-height:200px}
}

/* ════════ YMM MODAL — solid interior so native <select> dropdowns work ════════
   Glass frosting only on the outer backdrop; everything inside the box is
   solid so the browser's native option popup is readable and renders on top. */
.ymm-modal{
  background:rgba(5,10,25,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.ymm-box{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  /* NO backdrop-filter here — it creates a stacking context that can trap native select popups */
  box-shadow:
    0 50px 120px -30px rgba(10,20,36,.5),
    0 0 0 1px rgba(26,61,176,.06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.ymm-box::before{
  background:
    radial-gradient(360px 160px at 20% 0%,rgba(26,61,176,.1),transparent 60%),
    radial-gradient(360px 160px at 80% 100%,rgba(255,122,26,.08),transparent 60%) !important;
}
.ymm-step{
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 1px 2px rgba(10,20,36,.04);
  transition:all .25s cubic-bezier(.25,.9,.3,1);
}
.ymm-step.active{
  background:#fff !important;
  border-color:rgba(29,78,216,.4) !important;
  box-shadow:0 0 0 3px rgba(29,78,216,.12),0 10px 20px -8px rgba(29,78,216,.18) !important;
}
.ymm-step.done{
  background:#f6fdfa !important;
  border-color:rgba(16,185,129,.35) !important;
}
/* Native <select> inside the step cards — solid, readable, no transparency */
.ymm-select{
  background-color:#fff !important;
  color:var(--ink) !important;
}
.ymm-num{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 4px rgba(10,20,36,.08)}
.ymm-step.active .ymm-num{
  box-shadow:0 0 0 4px rgba(29,78,216,.18),inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -3px rgba(29,78,216,.45) !important;
}

/* ════════ LIVE REVIEWS WIDGET WRAPPER ════════ */
.reviews-embed{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72));
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:18px;
  padding:18px 22px;
  box-shadow:0 30px 60px -30px rgba(26,61,176,.22),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.85);
  overflow:hidden;
}
.reviews-embed::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(340px 160px at 10% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(340px 160px at 95% 100%,rgba(255,122,26,.07),transparent 60%);
}
.embedsocial-reviews{position:relative;z-index:1}

/* ════════ COMPACT FOOTER ════════ */
footer{padding:40px 0 22px !important}
.foot-grid{grid-template-columns:1.2fr 1fr 1fr 1fr !important;gap:40px !important;margin-bottom:22px;align-items:center !important}
.foot-brand .tag{margin:0 0 8px !important;font-size:17px !important}
.foot-brand .email{font-size:15px}
.foot-brand .meta{margin-top:12px !important;font-size:12.5px !important;line-height:1.55 !important}
.foot-social{margin-top:14px !important;gap:10px}
.foot-social a{width:34px;height:34px;transition:background .18s ease,transform .18s ease,border-color .18s ease !important}
.foot-social a:hover{transform:translateY(-2px)}
.foot-social a[data-platform="facebook"]:hover {background:#1877f2;border-color:#1877f2;color:#fff}
.foot-social a[data-platform="tiktok"]:hover   {background:#000;border-color:#000;color:#fff}
.foot-social a[data-platform="youtube"]:hover  {background:#ff0000;border-color:#ff0000;color:#fff}
.foot-social a[data-platform="instagram"]:hover{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);border-color:#cc2366;color:#fff}
.foot-bottom{margin-top:22px !important;padding-top:16px !important;font-size:13.5px}

/* Two link columns styled as lists (matches the live page) */
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin:0 0 8px}
.foot-links a{
  color:rgba(255,255,255,.78);font-size:15.5px;font-weight:500;
  text-decoration:none;transition:color .18s ease;
  letter-spacing:0;text-transform:none;padding:0;opacity:1;
}
.foot-links a:hover{color:var(--yellow);padding-left:0}
.foot-links a.primary{color:#fff;font-weight:700}
.foot-links a.primary:hover{color:var(--yellow)}

/* Trophy block — tighter vertical spacing */
.foot-trophy{gap:4px !important}

/* Inline copyright & made-with lines that replace the old .foot-bottom row */
.brand-copy{
  margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.55);font-weight:500;
  letter-spacing:0;text-transform:none;
}
.trophy-made{
  margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.65);font-weight:500;
}
.trophy-made .heart{color:#ff5c77;filter:saturate(1.2)}

/* ════════ FOOTER TROPHY BADGE ════════ */
.foot-trophy{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.trophy-badge{
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(140deg, #ffd43b 0%, #f5a623 45%, #ff7a1a 100%);
  color:#3d2200;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2),
    0 8px 28px -6px rgba(255,170,40,.55),
    0 0 40px -4px rgba(255,170,40,.35),
    inset 0 2px 2px rgba(255,255,255,.45),
    inset 0 -8px 16px -4px rgba(140,60,0,.35);
  position:relative;margin-bottom:8px;
}
.trophy-badge svg{width:32px;height:32px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.trophy-title{
  font-size:17px;font-weight:800;color:#fbbf24;
  letter-spacing:-0.01em;margin:0;
  text-transform:none;padding:0;border:0;
}
.trophy-sub{
  font-size:14.5px;color:rgba(255,255,255,.78);margin:0;font-weight:500;
}
.trophy-sub span{font-weight:700;color:#fff}

/* ════════ UNIFIED PURCHASE PANEL ════════
   Price and buy controls share the same card so that blank space
   to the right of the price disappears. */
.price-card .price-card-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;
  position:relative;z-index:1;
}
.price-card .price-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.price-card .price-row{display:flex;align-items:flex-end;gap:18px}
.price-card .price-list-strike{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:10px;gap:2px}
.price-card .price-list-strike .was{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
.price-card .price-list-strike .was-price{
  font-size:16px;color:var(--muted);font-weight:700;
  text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(107,119,151,.6);
  font-variant-numeric:tabular-nums;
}
.price-card .price-per-month{margin-top:4px}

.price-card .buy-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.price-card .buy-col-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 2px}
.price-card .qty-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.price-card .buy-col .qty{
  display:inline-flex;align-items:center;background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:10px;height:38px;overflow:hidden;
}
.price-card .buy-col .qty button{width:32px;height:100%;background:transparent;border:0;font:inherit;font-size:16px;cursor:pointer;color:var(--ink);font-weight:600}
.price-card .buy-col .qty button:hover{background:rgba(0,0,0,.04)}
.price-card .buy-col .qty input{width:34px;text-align:center;border:0;outline:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--ink);padding:0;height:100%}
.price-card .buy-col .btn{height:50px;width:100%;padding:0 18px;font-size:14px;letter-spacing:-0.005em}
.price-card .buy-col .btn.primary{justify-content:space-between}
.price-card .buy-col .btn.primary .arrow{display:inline-block;transition:transform .2s ease}
.price-card .buy-col .btn.primary:hover .arrow{transform:translateX(4px)}
/* Mockup-v12-hyperspace Add to Cart — copied verbatim from the mockup's
 * `.btn.primary` + `.price-card .buy-col .btn.primary` layout rules.
 * `!important` is used because legacy pages declare `.btn.primary` earlier
 * in this file with !important, and we need to win the cascade unambiguously
 * without relying on file order. Keeps `.btn-add-to-cart` for JS hooks. */
.price-card .buy-col .btn.primary.btn-add-to-cart{
  /* flex-basis:auto so height:50px actually wins on the main axis in a
   * column flex container (the .product-page-buttons-wrapper). `flex:1`
   * shorthand would set flex-basis:0% and collapse the button to content.
   * `justify-content:center` keeps "Add to Cart →" centered; the arrow
   * still slides right on hover via the `.arrow` transform rule. */
  flex:0 0 auto !important;width:100% !important;min-height:50px !important;height:50px !important;
  padding:0 18px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  font-family:inherit !important;font-size:14px !important;font-weight:700 !important;line-height:normal !important;
  letter-spacing:-0.005em !important;text-transform:none !important;
  border:0 !important;border-radius:8px !important;color:#fff !important;
  background:linear-gradient(135deg,var(--ink) 0%,#1e2a50 100%) !important;
  box-shadow:0 12px 32px -10px rgba(10,20,36,.5),inset 0 1px 0 rgba(255,255,255,.15) !important;
  position:relative !important;overflow:hidden !important;
  transform:none !important;
  transition:box-shadow .2s ease, background .2s ease !important;
}
/* Animated gradient sweep across the button on hover (mockup `.btn.primary::after`) */
.price-card .buy-col .btn.primary.btn-add-to-cart::after{
  content:"" !important;position:absolute !important;inset:0 !important;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%) !important;
  transform:translateX(-100%) !important;transition:transform .6s ease !important;
  pointer-events:none !important;
}
.price-card .buy-col .btn.primary.btn-add-to-cart:hover::after{transform:translateX(100%) !important}
.price-card .buy-col .btn.primary.btn-add-to-cart:hover{
  background:linear-gradient(135deg,var(--blue),var(--blue-2)) !important;
  box-shadow:0 16px 40px -8px rgba(29,78,216,.5) !important;
  transform:none !important;
}
/* Arrow slides right on hover (mockup `.btn.primary .arrow`) */
.price-card .buy-col .btn.primary.btn-add-to-cart .arrow{
  display:inline-block;transition:transform .2s ease;
}
.price-card .buy-col .btn.primary.btn-add-to-cart:hover .arrow{transform:translateX(4px)}
.price-card .buy-col .btn.primary.btn-add-to-cart:disabled{
  background:#9ca3af !important;opacity:.6 !important;cursor:not-allowed !important;
}
.price-card .buy-col .btn.primary.btn-add-to-cart.in-cart{
  background:linear-gradient(135deg,#10b981,#059669) !important;
}
.price-card .buy-col .btn.primary.btn-add-to-cart.in-cart:hover{
  background:linear-gradient(135deg,#059669,#047857) !important;
}
.price-card .buy-col .product-page-buttons-wrapper{
  display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:none;margin-top:0;align-items:stretch;
}
.price-card .buy-col .bolt-product-checkout-button{width:100%}

/* On narrow screens collapse to single column */
@media(max-width:900px){
  .price-card .price-card-grid{grid-template-columns:1fr;gap:22px}
}

/* ════════ HOVER MINI-CART ════════ */
.cart-wrap{position:relative;display:inline-block}
.cart-wrap .cart-btn{position:relative;z-index:2}
/* tiny bounce when item added */
.cart-btn.bump{animation:cartBump .45s cubic-bezier(.3,1.3,.5,1)}
@keyframes cartBump{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-3px) scale(1.06)}
  100%{transform:translateY(0) scale(1)}
}
.cart-btn .count.highlight{background:#10b981 !important;color:#fff !important;animation:countFlash 1.1s ease}
@keyframes countFlash{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

.mini-cart{
  position:absolute;top:calc(100% + 12px);right:0;
  width:380px;max-width:94vw;
  background:rgba(255,255,255,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.8);border-radius:16px;
  box-shadow:
    0 30px 70px -20px rgba(10,20,36,.35),
    0 0 0 1px rgba(26,61,176,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:opacity .2s ease,transform .25s cubic-bezier(.3,1.3,.5,1);
  z-index:70;
  color:var(--ink);
}
.cart-wrap:hover .mini-cart,
.cart-wrap.open .mini-cart{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
/* extend hover bridge so moving between btn and dropdown doesn't close it */
.mini-cart::before{content:"";position:absolute;top:-14px;right:0;left:0;height:14px}

.mini-cart-arrow{
  position:absolute;top:-6px;right:28px;
  width:12px;height:12px;background:inherit;
  border-left:1px solid rgba(255,255,255,.8);
  border-top:1px solid rgba(255,255,255,.8);
  transform:rotate(45deg);
  background:rgba(255,255,255,.96);
}

.mini-cart-empty{padding:36px 28px;text-align:center}
.mini-cart-empty .empty-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--bg-2);color:var(--muted);display:grid;place-items:center}
.mini-cart-empty .empty-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.015em}
.mini-cart-empty .empty-sub{font-size:13px;color:var(--muted);margin-top:4px}

/* @property registers CSS custom properties as <length> so they can be
   smoothly transitioned. Without @property, custom properties are strings
   and changes are instant. Browsers that don't support @property (very old)
   fall back to instant swap — no visual breakage. */
@property --mc-top-fade { syntax: '<length>'; inherits: false; initial-value: 120px; }
@property --mc-bottom-fade { syntax: '<length>'; inherits: false; initial-value: 120px; }

.mini-cart-list{padding:8px;max-height:360px;overflow-y:auto;
  /* Fade only on edges where there's actually more content to scroll to.
     JS in minicart-v7.js toggles .mc-at-top / .mc-at-bottom based on scrollTop;
     each toggle smoothly animates the matching fade stop via @property. */
  --mc-top-fade: 120px;
  --mc-bottom-fade: 120px;
  transition: --mc-top-fade 0.25s ease, --mc-bottom-fade 0.25s ease;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--mc-top-fade),#000 calc(100% - var(--mc-bottom-fade)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--mc-top-fade),#000 calc(100% - var(--mc-bottom-fade)),transparent 100%);
}
.mini-cart-list.mc-at-top    { --mc-top-fade: 0px; }
.mini-cart-list.mc-at-bottom { --mc-bottom-fade: 0px; }
.mini-cart-item{
  display:grid;grid-template-columns:56px 1fr auto;gap:12px;
  align-items:center;padding:12px;border-radius:10px;
  transition:background .15s ease;
}
.mini-cart-item + .mini-cart-item{border-top:1px solid var(--line-soft)}
.mini-cart-item:hover{background:var(--bg-2)}
.mini-cart-item .thumb{width:56px;height:56px;border-radius:10px;background:#fff;background-size:86%;background-repeat:no-repeat;background-position:center;border:1px solid var(--line);flex:none}
.mini-cart-item .info{display:flex;flex-direction:column;gap:2px;min-width:0}
.mini-cart-item .name{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;line-height:1.25;max-height:2.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mini-cart-item .meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:4px}
.mini-cart-item .qty-mini{
  display:inline-flex;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;height:22px;overflow:hidden;
}
.mini-cart-item .qty-mini button{width:22px;height:22px;background:transparent;border:0;font:inherit;font-size:13px;line-height:1;color:var(--ink);cursor:pointer}
.mini-cart-item .qty-mini button:hover{background:var(--line-soft)}
.mini-cart-item .qty-mini .val{padding:0 6px;font:inherit;font-size:12px;font-weight:700;color:var(--ink);min-width:16px;text-align:center}
.mini-cart-item .mini-core-badge{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:4px;padding:2px 8px;border-radius:6px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);
  font-size:10.5px;font-weight:700;color:#15803d;letter-spacing:.01em;
  cursor:help;align-self:flex-start;
  /* Force natural (content) width so the badge doesn't stretch to fill the
     flex column it lives in. */
  width:fit-content;max-width:max-content;
}
.mini-cart-item .mini-core-label{text-transform:uppercase;letter-spacing:.04em}
.mini-cart-item .mini-core-amount{font-variant-numeric:tabular-nums;font-weight:800}
.mini-cart-item .price-col{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mini-cart-item .price{font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mini-cart-item .remove{font:inherit;font-size:11px;color:var(--muted);background:transparent;border:0;cursor:pointer;padding:0;letter-spacing:0}
.mini-cart-item .remove:hover{color:#ef4444;text-decoration:underline}

.mini-cart-footer{padding:14px 18px 16px;border-top:1px solid var(--line-soft);background:var(--bg-2);border-radius:0 0 16px 16px;
  /* container-type lets descendants use cqw (container-relative width) units */
  container-type:inline-size;
}
/* Subtotal label + value + "View Cart & Checkout" button share one row.
   Value font-size scales with container width (cqw) so a 5-figure subtotal
   still fits next to the button. Falls back to 18px on browsers without
   container query support. */
.mini-cart-totals{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;flex-wrap:nowrap;min-width:0}
.mini-cart-totals .totals-label{flex:0 0 auto}
.mini-cart-totals .totals-value{
  flex:1 1 auto;min-width:0;margin-right:auto;padding-left:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:18px;
  font-size:clamp(14px, 5.5cqw, 22px);
}
.mini-cart-totals .mini-btn.primary{flex:0 0 auto;height:38px;padding:0 14px;font-size:13px;white-space:nowrap}
.totals-label{font-size:13px;color:var(--muted);font-weight:600}
.totals-value{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;font-variant-numeric:tabular-nums}
.mini-cart-ship{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:4px 0 12px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:8px;font-size:11.5px;color:var(--ink-2)}
.mini-cart-ship svg{color:#10b981;flex:none}
.mini-cart-ship b{color:#047857;font-weight:700}
.mini-cart-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:10px;font:inherit;font-weight:700;font-size:13.5px;letter-spacing:-0.005em;cursor:pointer;border:0;text-decoration:none}
.mini-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.mini-btn.ghost:hover{background:var(--bg)}
.mini-btn.primary{background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;box-shadow:0 6px 16px -4px rgba(255,122,26,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.mini-btn.primary:hover{filter:brightness(1.05)}

@media(max-width:480px){
  .mini-cart{position:fixed;top:auto;bottom:16px;right:16px;left:16px;width:auto}
  .mini-cart-arrow{display:none}
}

/* "Added to cart" flash toast — appears briefly after adding */
.cart-flash{
  position:fixed;top:88px;right:24px;z-index:95;
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:#fff;border:1px solid rgba(16,185,129,.3);border-radius:12px;
  box-shadow:0 20px 40px -16px rgba(10,20,36,.25);
  opacity:0;transform:translateX(16px);pointer-events:none;
  transition:opacity .25s ease,transform .25s cubic-bezier(.3,1.3,.5,1);
  max-width:min(380px, calc(100vw - 48px));
  left:auto;bottom:auto;
}
.cart-flash.visible{opacity:1;transform:translateX(0)}
.cart-flash .check{width:28px;height:28px;border-radius:50%;background:#10b981;color:#fff;display:grid;place-items:center;flex:none}
.cart-flash .msg{font-size:13px;color:var(--ink);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-flash .msg b{font-weight:800}

/* ════════ YMM VEHICLE MODAL ════════ */
.ymm-modal{
  position:fixed;inset:0;z-index:110;display:none;
  background:rgba(5,10,25,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  /* Anchor the modal high up — maximizes vertical room below for native
     <select> dropdowns (Year/Make/Model) to expand. */
  align-items:flex-start;justify-content:center;padding:24px 20px 20px;
  overflow-y:auto;   /* let the modal itself scroll if content exceeds viewport */
}
.ymm-modal.open{display:flex;animation:ymmFade .25s ease}
@keyframes ymmFade{from{opacity:0}to{opacity:1}}
.ymm-box{
  width:min(520px,100%);position:relative;
  background:linear-gradient(180deg,#fff 0%,#fafbfd 100%);
  border:1px solid rgba(255,255,255,.9);border-radius:22px;
  box-shadow:0 60px 120px -40px rgba(5,10,25,.55),0 0 0 1px rgba(26,61,176,.08);
  /* overflow must stay visible so the native <select> dropdown popup isn't clipped */
  overflow:visible;
  animation:ymmPop .4s cubic-bezier(.3,1.3,.5,1);
}
.ymm-box::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  overflow:hidden;
  background:
    radial-gradient(320px 140px at 20% 0%,rgba(26,61,176,.12),transparent 60%),
    radial-gradient(320px 140px at 80% 100%,rgba(255,122,26,.1),transparent 60%);
}
@keyframes ymmPop{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.ymm-head{
  position:relative;z-index:1;padding:28px 28px 16px;display:flex;align-items:center;justify-content:space-between;
}
.ymm-head h3{
  display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1;margin:0;
}
.ymm-head h3 svg{width:22px;height:22px;color:var(--orange)}
.ymm-close{
  width:34px;height:34px;border-radius:50%;background:transparent;border:0;cursor:pointer;
  color:var(--muted);display:grid;place-items:center;transition:all .15s;
}
.ymm-close:hover{background:var(--bg-2);color:var(--ink)}
.ymm-sub{
  position:relative;z-index:1;padding:0 28px 4px;font-size:13.5px;color:var(--muted);
}
.ymm-body{position:relative;z-index:1;padding:18px 28px 28px;display:flex;flex-direction:column;gap:14px}

.ymm-step{
  display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;
  background:var(--bg);border:1px solid var(--line);
  transition:all .2s ease;
}
.ymm-step.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.1);background:#fff}
.ymm-step.done{background:linear-gradient(135deg,rgba(16,185,129,.05),rgba(16,185,129,.02));border-color:rgba(16,185,129,.3)}
.ymm-step.locked{opacity:.5;pointer-events:none}
.ymm-num{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--bg-2);color:var(--muted);
  font-size:13px;font-weight:800;
  transition:all .25s cubic-bezier(.3,1.3,.5,1);
}
.ymm-step.active .ymm-num{background:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(29,78,216,.15)}
.ymm-step.done .ymm-num{background:#10b981;color:#fff}
.ymm-step.done .ymm-num::before{content:"✓";font-size:14px}
.ymm-step.done .ymm-num-text{display:none}

.ymm-field{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.ymm-field label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.ymm-select{
  width:100%;appearance:none;-webkit-appearance:none;
  border:0;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  padding:2px 28px 2px 0;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7797' stroke-width='2.4' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right center;
}
.ymm-select:disabled{color:var(--muted);cursor:not-allowed}
.ymm-select:focus{outline:none}

.ymm-footer{
  padding:16px 28px 22px;background:var(--bg-2);border-top:1px solid var(--line);
  border-radius:0 0 22px 22px;   /* match ymm-box corner radius */
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:12.5px;color:var(--muted);
}
.ymm-footer .hint{display:flex;align-items:center;gap:8px}
.ymm-footer .hint svg{color:var(--blue);flex:none}
.ymm-reset{
  font:inherit;font-size:12px;font-weight:700;color:var(--muted);background:transparent;border:0;cursor:pointer;
  letter-spacing:0;
}
.ymm-reset:hover{color:var(--ink)}

.ymm-loading{
  position:absolute;inset:0;background:rgba(255,255,255,.88);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;z-index:10;
  border-radius:22px;
}
.ymm-loading.active{display:flex}
.ymm-loading .spinner{
  width:32px;height:32px;border:3px solid rgba(29,78,216,.18);border-top-color:var(--blue);border-radius:50%;
  animation:ymmSpin .7s linear infinite;
}
@keyframes ymmSpin{to{transform:rotate(360deg)}}
.ymm-loading span{font-size:13px;color:var(--ink);font-weight:600}

@media(max-width:520px){
  .ymm-head{padding:20px 20px 12px}
  .ymm-head h3{font-size:18px}
  .ymm-sub,.ymm-body{padding-left:20px;padding-right:20px}
  .ymm-footer{padding:14px 20px 18px;flex-direction:column;align-items:flex-start}
}

/* Command palette overlay (⌘K still opens it from the keyboard) */
.cmd-palette{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(10,20,36,.45);backdrop-filter:blur(12px);
  align-items:flex-start;justify-content:center;padding-top:12vh;
}
.cmd-palette.open{display:flex;animation:cmdFade .2s ease}
@keyframes cmdFade{from{opacity:0}to{opacity:1}}
.cmd-box{
  width:min(560px,90vw);background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.8);border-radius:16px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.4);
  overflow:hidden;animation:cmdPop .3s cubic-bezier(.3,1.4,.5,1);
}
@keyframes cmdPop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.cmd-input{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.cmd-input svg{color:var(--muted)}
.cmd-input input{flex:1;border:0;outline:0;font:inherit;font-size:16px;color:var(--ink);background:transparent}
.cmd-input kbd{font:inherit;font-size:11px;background:var(--bg-2);padding:3px 7px;border-radius:5px;color:var(--muted);font-weight:700}
.cmd-results{padding:8px;max-height:50vh;overflow-y:auto}
.cmd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink)}
.cmd-item:hover,.cmd-item.active{background:var(--bg-2)}
.cmd-item .cmd-icon{width:28px;height:28px;border-radius:6px;background:rgba(29,78,216,.08);color:var(--blue);display:grid;place-items:center;flex:none}
.cmd-item .cmd-tag{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — tablet & mobile
   ════════════════════════════════════════════════════════ */

/* Universal overflow guard.
   NOTE: using `overflow-x: clip` (not hidden) so `position: sticky` descendants
   like the masthead continue to pin to the viewport instead of getting trapped
   in a scroll container. Fallback to hidden for browsers without clip support. */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
.summary,.hero-grid,.tabs-wrap,.price-card,.at-glance,.notes,.price-card-grid,.summary > *,.hero > *,.reviews-head,.fitment-head{min-width:0}
.title{overflow-wrap:break-word;word-break:normal;hyphens:auto}
img{max-width:100%;height:auto}

/* ───────── TABLET (1024px and below) ───────── */
@media (max-width:1024px){
  .wrap{padding:0 20px}
  .masthead .wrap{gap:16px;padding:14px 20px}
  .hero{padding:40px 0 56px}
  .hero-grid{grid-template-columns:1fr 1fr;gap:32px}
  .title{font-size:40px}
  .title .sub{font-size:16px;margin-top:14px}
  .price-card{padding:22px 24px !important}
  .price-main .dol{font-size:56px}
  .price-main .cur,.price-main .cts{font-size:22px}
  .price-card .buy-col .btn{height:46px;font-size:13.5px}
  .at-glance{padding:18px 22px !important}

  .wrenchy-band{padding:36px 28px !important;gap:20px !important;grid-template-columns:auto 1fr !important}
  .wrenchy-band .ask-btn{grid-column:1/-1;justify-self:start;margin-top:6px}
  .wrenchy-band h3{white-space:normal;font-size:28px}

  /* Bigger tap targets */
  .tabs{top:84px}
  .tab{padding:10px 16px;font-size:14px}

  .why h2{font-size:44px}
  .why-cards{grid-template-columns:1fr 1fr;gap:12px}
  .why-card{padding:28px 24px}
  .why-card .num{font-size:48px}

  .reviews h2{font-size:36px}
  .reviews .score .num{font-size:54px}
  .racing h2{font-size:36px}
  .video-grid{grid-template-columns:1fr 1fr;gap:12px}

  .fitment-head h2{font-size:32px}

  footer .foot-grid{grid-template-columns:1.2fr 1fr 1fr !important;gap:28px !important}
  .foot-trophy{grid-column:1/-1 !important;margin-top:8px}
}

/* ───────── SMALL TABLET / LARGE PHONE (768px and below) ───────── */
@media (max-width:768px){
  .utility{display:none}

  /* Flex-wrap masthead: row 1 = logo + cart, row 2 = full-width search */
  .masthead .wrap{
    display:flex !important;flex-wrap:wrap !important;align-items:center !important;
    grid-template-columns:none !important;
    gap:10px !important;padding:10px 16px !important;
    width:100% !important;box-sizing:border-box !important;
  }
  .masthead .wordmark{padding:6px 10px !important;border-radius:10px !important;flex:0 1 auto !important;min-width:0 !important;max-width:60%}
  .masthead .wordmark .logo-img{height:28px !important;max-width:100%;object-fit:contain}
  .masthead .head-right{margin-left:auto !important;flex:0 0 auto !important;display:flex !important}
  .masthead .search{order:3 !important;flex:1 1 100% !important;width:100% !important;height:44px !important}
  /* Allow the search input to shrink below its placeholder's intrinsic width.
     Without this, it forces the whole masthead (and page) into horizontal overflow. */
  .masthead .search input{min-width:0;flex:1 1 auto}
  .search .browse-inline{height:34px;padding:0 12px;font-size:12.5px;margin-right:6px}
  .search .browse-inline span{display:none}          /* show just the icon on small screens */
  .search .browse-inline svg{width:18px;height:18px}
  .search .submit{padding:0 14px;font-size:12px;white-space:nowrap}
  .cart-btn{padding:10px 14px !important;font-size:13px}
  .cart-btn svg{width:18px;height:18px}

  /* Mini-cart fills the screen on phones */
  .mini-cart{width:calc(100vw - 24px);right:-6px;top:calc(100% + 8px)}
  .mini-cart-arrow{right:32px}

  .crumbs .wrap{height:40px;font-size:12px;flex-wrap:wrap;gap:6px}

  /* Hero stacks */
  .hero{padding:24px 0 40px}
  .hero-grid{grid-template-columns:1fr !important;gap:28px}
  .gallery{position:static !important}
  .gallery .frame{aspect-ratio:4/3.4}
  .thumbs{grid-template-columns:repeat(8,1fr);gap:6px}
  .thumb{border-radius:8px}
  .thumb img{max-width:76%;max-height:76%}

  .at-glance-grid{grid-template-columns:1fr !important;gap:8px}
  .glance-item:nth-child(2){border-top:1px solid var(--line-soft) !important;padding-top:10px !important}

  .live-pills{gap:6px;margin-bottom:10px}
  .live-pill{font-size:11px;padding:5px 10px}

  .title{font-size:32px;letter-spacing:-0.03em;line-height:1.08}
  .title .sub{font-size:15px;margin-top:12px;line-height:1.5}
  .meta-row{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 0;margin:18px 0 0}

  /* Price & buy panel single-column on phones */
  .price-card .price-card-grid{grid-template-columns:1fr !important;gap:20px}
  .price-main .dol{font-size:58px}
  .price-main .cur,.price-main .cts{font-size:22px}

  .bullets{grid-template-columns:1fr !important;gap:10px}
  .trust-strip{grid-template-columns:1fr !important}
  .trust-strip > div + div{border-left:0 !important;border-top:1px solid var(--line-soft)}
  .trust-strip .tt,.trust-strip .ss{white-space:normal}
  .sec-ctas{flex-direction:column}
  .sec-ctas .link-btn{width:100%;justify-content:center}

  .warranty{flex-wrap:wrap}
  .warranty .txt .tt{font-size:16px}

  .notes{padding:22px 22px !important}

  /* Wrenchy panel stacks */
  .wrenchy-band{grid-template-columns:1fr !important;text-align:left;padding:28px 22px !important;gap:16px !important}
  .wrenchy-band .ask-btn{justify-self:start}
  .wrenchy-band h3{font-size:26px;white-space:normal}

  /* Tabs: horizontally scrollable if they overflow */
  .tabs{top:0;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px;padding:4px;gap:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:9px 14px;font-size:13px;white-space:nowrap;flex:0 0 auto}
  .tabs::before{top:4px;bottom:4px}
  .tabs::after{top:5px}

  .tab-panel{padding:32px 0 12px}
  .fitment-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}
  .fitment-head h2{font-size:28px;line-height:1.1}
  .fitment-head .filter-btn{align-self:flex-start}

  .fit-filter{flex-wrap:wrap;padding:4px 12px;height:auto;gap:8px}
  .fit-filter input{font-size:14px;min-width:0;flex-basis:calc(100% - 60px)}
  .fit-filter .fit-count{flex-basis:100%;padding-bottom:8px}

  .fitment-maker{grid-template-columns:1fr !important}
  .maker-label{padding:14px 20px !important;flex-direction:row;justify-content:space-between;align-items:center}
  .maker-label::after{display:none !important}
  .fit-row{grid-template-columns:1fr auto auto !important;gap:8px;padding:14px 18px}
  .fit-row .year-range{flex-direction:column;gap:4px;align-items:flex-end;font-size:12px}
  .fit-row .year-range .bar{display:none}
  .fit-row .model b{font-size:16px}

  .fit-detail{padding:8px 12px 12px}
  .fit-detail-head{grid-template-columns:64px 1fr !important;font-size:9.5px;padding:6px 10px}
  .fit-detail-head span:nth-child(n+3){display:none}
  .fit-config{grid-template-columns:64px 1fr !important;padding:10px;font-size:12.5px}
  .fit-config .eng,.fit-config .attrs{display:none}

  .specs-grid{grid-template-columns:1fr !important}
  .spec-row{grid-template-columns:1fr !important;padding:12px 18px;gap:2px}
  .spec-row:nth-child(odd){border-right:0 !important}
  .spec-row .k{font-size:11px}

  .ic-grid{grid-template-columns:1fr !important}
  .policies{grid-template-columns:1fr !important;gap:12px}
  .policy-wide{grid-column:auto !important}
  .policy-card{padding:22px 24px}
  .policy-list{font-size:13.5px}

  .expert-card{padding:28px 24px}
  .expert-card-title{font-size:22px}
  .expert-card-sub{font-size:14.5px}

  .why{padding:56px 0 !important}
  .why .inner{padding:0 24px !important}
  .why h2{font-size:32px !important;line-height:1.08}
  .why .sub{font-size:15px}
  .why-cards{grid-template-columns:1fr !important;gap:10px}
  .why-strip{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 20px !important}

  .reviews{padding-top:48px !important;padding-bottom:48px !important}
  .reviews-head{flex-direction:column;align-items:center !important;text-align:center;gap:10px !important}
  .reviews-head h2{text-align:center}
  .reviews h2{font-size:28px}
  .score-pill{padding:8px 14px;gap:8px}
  .score-pill .count{font-size:12.5px}
  .reviews-embed{padding:10px 10px}

  .racing{padding-top:48px;padding-bottom:48px}
  .racing h2{font-size:28px}
  .video-grid{grid-template-columns:1fr !important;gap:10px}
  .video-card{aspect-ratio:16/9}

  footer{padding:28px 0 18px !important}
  footer .foot-grid{grid-template-columns:1fr !important;gap:20px !important;margin-bottom:16px}
  .foot-brand{text-align:left}
  .foot-social{justify-content:flex-start}
  .foot-links{text-align:left}
  .foot-trophy{align-items:flex-start !important;text-align:left !important;margin-top:0}
  .trophy-badge{margin-bottom:4px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:6px}

  /* Sticky mini buy-bar fits phones */
  .mini-bar .wrap{padding:8px 14px;gap:10px}
  .mini-bar .mb-img{width:36px;height:36px;border-radius:8px}
  .mini-bar .mb-price{font-size:17px;padding:0 10px;height:36px;border:0}
  .mini-bar .mb-btns{gap:6px}
  .mini-bar .mb-btn{height:36px;padding:0 12px;font-size:12px}

  /* Cart flash toast */
  .cart-flash{top:auto;bottom:88px;right:12px;left:12px;padding:12px 16px}
  .cart-flash .msg{font-size:12.5px}
}

/* ───────── PHONE (480px and below) ───────── */
@media (max-width:480px){
  .wrap{padding:0 16px}
  .masthead .wrap{padding:10px 14px}
  .masthead .wordmark .logo-img{height:24px !important}
  .masthead .wordmark{max-width:55% !important}

  .title{font-size:28px}
  .title .sub{font-size:14px}

  .price-main .dol{font-size:48px}
  .price-main .cur,.price-main .cts{font-size:18px}
  .save-pill{font-size:10.5px;padding:5px 10px}

  .thumbs{grid-template-columns:repeat(4,1fr)}
  .thumb:nth-child(n+5){display:none}         /* only show 4 thumbs on tiny screens */

  .fit-row{padding:12px 14px}
  .maker-label{padding:12px 14px !important}
  .maker-label h3{font-size:18px}

  .wrenchy-robot{height:96px}
  .wrenchy-band{padding:22px 18px !important}
  .wrenchy-band h3{font-size:22px;white-space:normal}

  .tab{padding:8px 12px;font-size:12.5px}

  .expert-card{padding:22px 18px}
  .expert-card-title{font-size:19px}

  .why h2{font-size:26px !important}
  .why-card{padding:22px 20px}
  .why-card .num{font-size:42px}

  /* Mini-bar: ultra-compact */
  .mini-bar .mb-img{display:none}
  .mini-bar .mb-price{font-size:15px;padding:0 6px}
  .mini-bar .mb-btn{font-size:11.5px;padding:0 10px}

  /* YMM modal: full-bleed step cards */
  .ymm-step{padding:12px}
  .ymm-num{width:28px;height:28px;font-size:12px}
  .ymm-field label{font-size:10px}
  .ymm-select{font-size:14px}

  /* Reviews embed wrapper */
  .reviews-embed{padding:6px 8px;border-radius:14px}
}

/* ───────── EXTRA-SMALL (360px and below) ───────── */
@media (max-width:360px){
  .search .browse-inline{padding:0 10px}
  .cart-btn{padding:8px 10px}
  .cart-btn span:not(.count){display:none}   /* just the icon + count */
  .price-main .dol{font-size:42px}
  .title{font-size:24px}
}

/* ════════ READABILITY BUMPS — final override layer ════════ */
/* Masthead/utility bumps removed to match the mockup exactly — these were
   pushing search/cart buttons ~1px wider than mockup-home.html. */
/* .utility,.utility a{font-size:14px !important} */
/* .crumbs .wrap{font-size:14px !important} */
/* .search .browse,.search button.submit{font-size:14px !important} */
/* .cart-btn{font-size:14.5px !important} */
/* .cart-btn .count{font-size:12px !important} */
/* .live-pill{font-size:14px !important} */
.price-per-month{font-size:14.5px !important}
.bullets .bullet{font-size:14.5px !important}
.bullets .bullet b{font-size:15px !important}
.trust-strip .tt{font-size:14px !important}
.trust-strip .ss{font-size:13px !important}
.sec-ctas .link-btn{font-size:14px !important}
.save-pill{font-size:12px !important}
.warranty .seal{font-size:11px !important}
.warranty .tt{font-size:18px !important}
.warranty .ss{font-size:15px !important}
.delivery-est .de-head{font-size:14.5px !important}
.delivery-est .de-countdown{font-size:14.5px !important}
.delivery-est .cd-timer{font-size:14px !important}
.notes-multi .nm-body p{font-size:15.5px !important;line-height:1.7 !important}
.notes-multi .nm-meta .nm-stat{font-size:14px !important}
.notes-multi .nm-meta .nm-stat b{font-size:18px !important}
.notes-multi .nm-meta .nm-stat-sub{font-size:14px !important}
.notes-multi .nm-oems code{font-size:13.5px !important}
.why-oem-list li{font-size:14.5px !important;line-height:1.65 !important}
.why-oem-list li b{font-size:14px !important}
.why-oem-banner .gb-stat b{font-size:16px !important}
.why-oem-banner .gb-stat em{font-size:12px !important}
.at-glance-head h4{font-size:15px !important}
.at-glance-head .brand-chip{font-size:12px !important}
.glance-item .k{font-size:12.5px !important}
.glance-item .v{font-size:14px !important}
.spec-row .k,.spec-row .v{font-size:14.5px !important}
.fit-row .model b{font-size:19px !important}
.fit-row .model span{font-size:13.5px !important}
.fit-config{font-size:14px !important}
.fit-detail-head span{font-size:11.5px !important}
.policy-card h4{font-size:18px !important}
.policy-card p,.policy-list li{font-size:14.5px !important;line-height:1.65 !important}
.policy-note{font-size:13.5px !important}
.ic-card .brand{font-size:12px !important}
.ic-card .pn{font-size:15px !important}
.foot-brand .meta{font-size:13px !important;line-height:1.75 !important}
.foot-brand .tag{font-size:17px !important}
.foot-links a{font-size:14.5px !important}
.brand-copy{font-size:13px !important}


/* ===== mockup-garage-article.html ===== */
/* ════════ SHARED CONTENT-PAGE LAYOUT ════════ */
.page-hero{padding:48px 0 32px;position:relative}
.page-hero .kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.06));
  border:1px solid rgba(26,61,176,.18);
  font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin-bottom:18px;
}
.page-hero .kicker .dot{width:7px;height:7px;background:var(--orange);border-radius:50%}
.page-hero h1{
  font-size:56px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;line-height:1.02;margin:0 0 14px;
}
.page-hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.page-hero .lead{font-size:19px;color:var(--muted);margin:0;max-width:720px;line-height:1.55}
.page-body{padding:24px 0 80px}

/* Glass content panel */
.glass-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:36px 40px;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
  margin-bottom:22px;
}
.glass-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px 200px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(460px 200px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.glass-panel > *{position:relative;z-index:1}

.glass-panel h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 16px;
}
.glass-panel h2 em{color:var(--blue);font-style:normal}
.glass-panel h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.015em;margin:24px 0 10px}
.glass-panel h3:first-child{margin-top:0}
.glass-panel p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.glass-panel p:last-child{margin-bottom:0}
.glass-panel ul, .glass-panel ol{font-size:15px;color:var(--ink-2);line-height:1.8;padding-left:22px;margin:0 0 16px}
.glass-panel ul li::marker{color:var(--blue)}
.glass-panel a{color:var(--blue);font-weight:600}
.glass-panel a:hover{text-decoration:underline}
.glass-panel b, .glass-panel strong{color:var(--ink);font-weight:700}

/* Two-col grid inside panels */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.split-2{grid-template-columns:1fr}}

/* Heads-up notice */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(255,122,26,.08));
  border:1px solid rgba(255,122,26,.25);
  margin:18px 0;
}
.notice svg{flex:none;color:var(--orange);margin-top:2px}
.notice strong{color:var(--ink);font-weight:800}

/* Responsive */
@media(max-width:768px){
  .page-hero{padding:28px 0 24px}
  .page-hero h1{font-size:38px}
  .page-hero .lead{font-size:16px}
  .glass-panel{padding:24px 22px;border-radius:16px}
  .glass-panel h2{font-size:22px}
}

/* ════════ SHOP BY MAKE — FILTER BAR ════════ */
.sbm-filterbar{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 34px -22px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04);
  margin-bottom:20px;position:sticky;top:12px;z-index:40;backdrop-filter:blur(20px);
}
.sbm-filterbar .search-icon{width:18px;height:18px;color:var(--muted);flex:none}
.sbm-filterbar input{
  flex:1;min-width:200px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);outline:none;
}
.sbm-filterbar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}
.sbm-count{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ════════ ALPHA NAV ════════ */
.alpha-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.alpha-btn{
  min-width:28px;height:28px;padding:0 7px;border:1px solid rgba(26,61,176,.15);
  border-radius:8px;background:rgba(26,61,176,.04);color:var(--blue);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .16s;
}
.alpha-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ════════ MAKE GRID ════════ */
.makes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.make-tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;
  min-height:92px;padding:16px 18px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background .18s;
  box-shadow:0 3px 8px rgba(10,20,36,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.make-tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 90px at 100% 100%,rgba(255,122,26,.07),transparent 65%);
  opacity:0;transition:opacity .25s;
}
.make-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 14px 32px -10px rgba(26,61,176,.28);background:#fff}
.make-tile:hover::before{opacity:1}
.make-tile .make-name{font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.15}
.make-tile .make-count{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0}
.make-tile .make-arrow{
  position:absolute;right:16px;bottom:14px;color:var(--muted);font-weight:700;font-size:16px;
  transition:all .2s ease;
}
.make-tile:hover .make-arrow{color:var(--orange);transform:translateX(4px)}
.make-tile.hidden{display:none}

/* ════════ DETAIL VIEW ════════ */
.make-detail{
  padding:30px 36px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 52px -22px rgba(26,61,176,.18),0 0 0 1px rgba(26,61,176,.04);
  position:relative;overflow:hidden;
}
.make-detail::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px 220px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(520px 220px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.make-detail > *{position:relative;z-index:1}

.detail-head{margin-bottom:22px}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px 0 10px;border:1px solid rgba(26,61,176,.2);
  border-radius:10px;background:rgba(26,61,176,.05);color:var(--blue);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  margin-bottom:14px;transition:all .18s;
}
.back-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.detail-head h2{
  font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.05;margin:0 0 8px;
}
.detail-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.detail-head p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}
.detail-head p b{color:var(--ink)}

.detail-models{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;
}
.model-link{
  display:block;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  transition:all .16s;
}
.model-link:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(26,61,176,.4)}

@media(max-width:768px){
  .makes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .make-detail{padding:24px 22px;border-radius:16px}
  .detail-head h2{font-size:26px}
  .detail-models{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .sbm-filterbar{padding:12px 14px;gap:10px}
}

/* ════════ AUTH (login/create/forgot) ════════ */
.auth-wrap{padding:48px 0 80px;position:relative}
.auth-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
.auth-card,.auth-side{padding:38px 40px 34px;border-radius:22px;display:flex;flex-direction:column}
.auth-head{margin-bottom:28px}
.auth-head h1{
  font-size:42px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;line-height:1.05;margin:0 0 10px;
}
.auth-head h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-head p{font-size:15.5px;color:var(--muted);margin:0;line-height:1.55;max-width:440px}

.auth-form{display:flex;flex-direction:column;gap:14px}
.af-label{display:flex;flex-direction:column;gap:6px}
.af-l{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.af-l em{color:#dc2626;font-style:normal;margin-right:4px}
.af-label input{
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:15.5px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.af-label input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}

.af-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:2px}
.af-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;font-weight:500}
.af-check input{width:16px;height:16px;accent-color:var(--blue)}
.af-forgot{font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;transition:color .15s}
.af-forgot:hover{color:var(--orange);text-decoration:underline}

.af-submit{
  margin-top:10px;height:54px;padding:0 24px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;
  font:inherit;font-size:15.5px;font-weight:800;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 28px -8px rgba(26,61,176,.45),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.af-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(26,61,176,.55)}

.auth-divider{
  display:flex;align-items:center;gap:14px;margin:22px 0 16px;
  color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.auth-sso{display:flex;flex-direction:column;gap:10px}
.sso-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 20px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:all .15s ease;
}
.sso-btn:hover{border-color:var(--blue);background:rgba(26,61,176,.03);box-shadow:0 6px 14px -4px rgba(26,61,176,.15)}

/* Right-column side panel */
.auth-side{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)),
    radial-gradient(520px 260px at 100% 0%,rgba(26,61,176,.08),transparent 65%),
    radial-gradient(520px 260px at 0% 100%,rgba(255,122,26,.06),transparent 65%);
  backdrop-filter:blur(22px);
}
.auth-side-head .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:980px;
  background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,92,51,.08));
  border:1px solid rgba(255,122,26,.3);
  font-size:11.5px;font-weight:800;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.auth-side h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 10px;
}
.auth-side h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-side p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

.auth-perks{list-style:none;padding:0;margin:24px 0 22px;display:flex;flex-direction:column;gap:12px}
.auth-perks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.auth-perks .check{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.1));
  border:1px solid rgba(16,185,129,.3);color:#059669;font-weight:900;font-size:13px;
  display:grid;place-items:center;
}
.auth-perks li div{display:flex;flex-direction:column;gap:1px}
.auth-perks li b{color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-0.01em}
.auth-perks li span{color:var(--muted);font-size:13.5px}

.auth-side-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--ink),#1e2a50);color:#fff;
  font:inherit;font-size:14.5px;font-weight:800;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(10,20,36,.45);
  transition:transform .2s,box-shadow .2s;
}
.auth-side-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(10,20,36,.55)}

@media(max-width:880px){
  .auth-grid{grid-template-columns:1fr;gap:20px}
  .auth-card,.auth-side{padding:30px 26px 28px}
  .auth-head h1{font-size:34px}
  .auth-side h2{font-size:24px}
}


/* ════════ GARAGE ARTICLE ════════ */
.ka-wrap{padding:24px 0 80px}
.ka-breadcrumb{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ka-breadcrumb a{color:var(--muted);text-decoration:none}.ka-breadcrumb a:hover{color:var(--blue)}
.ka-breadcrumb .sep{color:rgba(148,163,184,.5)}
.ka-breadcrumb .here{color:var(--ink);font-weight:700}

.ka-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.ka-toc{padding:20px 22px;position:sticky;top:90px}
.ka-toc-head{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.ka-toc-list{list-style:none;padding:0;margin:0 0 18px;counter-reset:toc;border-left:2px solid rgba(26,61,176,.1)}
.ka-toc-list li{counter-increment:toc;padding-left:16px;position:relative}
.ka-toc-list li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:-18px;top:9px;font-size:10px;font-weight:800;color:var(--muted);background:#fff;padding:1px 4px}
.ka-toc-list a{display:block;padding:8px 0;font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;line-height:1.4;transition:color .15s}
.ka-toc-list a:hover{color:var(--blue)}
.ka-toc-list a.active{color:var(--blue);font-weight:800}
.ka-toc-shop{margin-top:14px;padding:14px;border-radius:12px;background:linear-gradient(135deg,rgba(255,122,26,.12),rgba(255,92,51,.06));border:1px solid rgba(255,122,26,.28)}
.ka-toc-shop b{display:block;font-size:13.5px;color:var(--ink);font-weight:800;margin-bottom:8px}
.ka-shop-btn{display:block;padding:10px 14px;border-radius:10px;background:var(--orange);color:#fff !important;text-align:center;font-size:13px;font-weight:800;text-decoration:none !important;letter-spacing:.01em}
.ka-shop-btn:hover{background:#ff5c33;color:#fff !important}

.ka-main{min-width:0}

/* Header */
.ka-head{margin-bottom:24px}
.ka-kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:980px;background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,92,51,.06));border:1px solid rgba(255,122,26,.3);font-size:11.5px;font-weight:800;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.ka-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--orange)}
.ka-head h1{font-size:42px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.1;margin:0 0 14px}
.ka-head h1 em{font-style:italic;background:linear-gradient(100deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.1em;margin-right:-.05em}
.ka-sub{font-size:18px;color:var(--muted);line-height:1.55;margin:0 0 16px;max-width:780px}
.ka-meta{display:flex;gap:8px;flex-wrap:wrap}
.km-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:980px;background:rgba(255,255,255,.7);border:1px solid rgba(26,61,176,.12);font-size:12.5px;font-weight:700;color:var(--ink-2)}
.km-pill svg{color:var(--muted)}
.km-pill-warn{background:rgba(251,191,36,.14);border-color:rgba(245,158,11,.3);color:#b45309}

.ka-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.ka-act-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
.ka-act-btn:hover{border-color:var(--blue);color:var(--blue)}

/* Quickref */
.ka-quickref{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}
.qr-card{padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));border:1px solid rgba(26,61,176,.1);display:flex;flex-direction:column;gap:4px}
.qr-l{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.qr-card b{font-size:18px;font-weight:900;color:var(--ink);letter-spacing:-0.015em;line-height:1.2}
.qr-green{color:#059669 !important}
.qr-dots{display:flex;gap:4px;margin-top:4px}
.qr-dots span{width:14px;height:5px;border-radius:3px;background:var(--line)}
.qr-dots span.on{background:linear-gradient(90deg,var(--orange),#ff5c33)}
.qr-card-split{gap:0;justify-content:space-between}
.qr-card-split > div:last-child{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft)}

/* Drive badge */
.ka-drive{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:14px;background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(245,158,11,.06));border:1px solid rgba(245,158,11,.3);margin:18px 0;font-size:14.5px;color:#7c2d12;line-height:1.55}
.ka-drive .dr-emoji{font-size:24px;flex:none}
.ka-drive b{color:var(--ink);font-weight:800;margin-right:4px}

/* Takeaways */
.ka-takeaways{padding:22px 26px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));border:1px solid rgba(26,61,176,.1);margin:22px 0;box-shadow:0 10px 24px -14px rgba(26,61,176,.16)}
.kt-head{font-size:12px;font-weight:900;color:var(--blue);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.ka-takeaways ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.ka-takeaways li{padding-left:26px;position:relative;font-size:15px;color:var(--ink-2);line-height:1.55}
.ka-takeaways li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#3b82f6)}
.ka-takeaways li::after{content:"";position:absolute;left:3px;top:14px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.ka-takeaways b{color:var(--ink);font-weight:800}

.ka-intro{font-size:17px;color:var(--ink-2);line-height:1.7;margin:20px 0;padding:0 4px;border-left:3px solid var(--blue);padding-left:16px}

.ka-body h2{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:36px 0 12px;padding-top:10px;border-top:1px solid var(--line-soft);scroll-margin-top:100px}
.ka-body h2:first-child{border-top:0;padding-top:0;margin-top:0}
.ka-body h3{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-0.015em;margin:22px 0 8px;scroll-margin-top:100px}
.ka-body p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.ka-body p b,.ka-body ul b{color:var(--ink);font-weight:800}
.ka-body ul.ka-checks{list-style:none;padding:0;margin:12px 0 18px;display:flex;flex-direction:column;gap:10px}
.ka-body ul.ka-checks li{padding:12px 14px 12px 42px;border-radius:12px;background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.08);position:relative;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.ka-body ul.ka-checks li::before{content:"✓";position:absolute;left:12px;top:12px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.1));border:1px solid rgba(16,185,129,.3);color:#059669;font-weight:900;font-size:12px;display:grid;place-items:center}

/* Callouts */
.ka-callout{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:14px;margin:16px 0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.ka-callout.warn{background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.3)}
.ka-callout.danger{background:linear-gradient(135deg,rgba(220,38,38,.1),rgba(239,68,68,.04));border:1px solid rgba(220,38,38,.28)}
.ka-callout .co-ico{font-size:22px;flex:none}
.ka-callout b{color:var(--ink);font-weight:800;margin-right:4px}

.ka-protip{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:14px;margin:16px 0;background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(59,130,246,.03));border:1px solid rgba(26,61,176,.22);border-left-width:4px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.ka-protip .pt-ico{font-size:22px;flex:none}
.ka-protip b{color:var(--blue);font-weight:800;margin-right:4px}

/* Spec tables */
.spec-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line-soft);margin:14px 0 18px;background:#fff}
.spec-table{width:100%;border-collapse:collapse;font-size:13.5px}
.spec-table th,.spec-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.spec-table th{background:rgba(26,61,176,.05);font-size:11.5px;font-weight:800;color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.spec-table tr:last-child td{border-bottom:0}
.spec-table td.mono{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--blue);font-weight:700}

/* Shop this part section */
.ka-shop-section{margin:40px 0 20px;padding:28px 30px;border-radius:20px;background:linear-gradient(135deg,rgba(26,61,176,.06),rgba(255,122,26,.04)),linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));border:1px solid rgba(26,61,176,.12);scroll-margin-top:100px}
.ks-head{margin-bottom:18px}
.ks-kick{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:980px;background:var(--orange);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.ks-head h2{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.1;margin:0 0 8px;border-top:0;padding-top:0}
.ks-head h2 em{font-style:italic;background:linear-gradient(100deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ks-head p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.5;max-width:560px}
.ks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media(max-width:880px){.ks-grid{grid-template-columns:1fr}}
.ks-card{padding:14px;border-radius:14px;background:#fff;border:1px solid rgba(26,61,176,.1);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px;transition:all .2s}
.ks-card:hover{border-color:var(--blue);box-shadow:0 16px 32px -12px rgba(26,61,176,.25);transform:translateY(-2px)}
.ks-img{aspect-ratio:1.2/1;background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:10px;display:grid;place-items:center}
.ks-img img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.ks-brand{display:inline-flex;align-items:center;padding:3px 10px;border-radius:980px;background:rgba(26,61,176,.08);border:1px solid rgba(26,61,176,.2);color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;align-self:flex-start}
.ks-card h3{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-0.005em;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ks-meta{font-size:12px;color:var(--muted);margin:0}
.ks-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft)}
.ks-price{font-weight:900;color:var(--ink);letter-spacing:-0.02em;line-height:1}
.ks-price .s{font-size:12px;vertical-align:super}
.ks-price .n{font-size:22px}
.ks-price .c{font-size:11px;vertical-align:super}
.ks-cta{font-size:12.5px;font-weight:800;color:var(--blue);letter-spacing:.01em}
.ks-card:hover .ks-cta{color:var(--orange)}

/* Author card */
.ka-author{margin:28px 0 0;padding:18px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:14px;background:rgba(255,255,255,.7);border:1px solid rgba(26,61,176,.08)}
.ka-author img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.ka-author > div{flex:1;min-width:220px}
.ka-author b{display:block;font-size:14px;color:var(--ink);font-weight:800;letter-spacing:-0.01em;margin-bottom:2px}
.ka-author span{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.ka-feedback{font-size:13px;font-weight:700;color:var(--blue);text-decoration:none;white-space:nowrap}
.ka-feedback:hover{color:var(--orange)}

@media(max-width:960px){
  .ka-layout{grid-template-columns:1fr}
  .ka-toc{position:relative;top:0}
  .ka-head h1{font-size:30px}
  .ka-body h2{font-size:22px}
  .ka-quickref{grid-template-columns:1fr 1fr}
}


/* ===== mockup-my-account.html ===== */
/* ════════ SHARED CONTENT-PAGE LAYOUT ════════ */
.page-hero{padding:48px 0 32px;position:relative}
.page-hero .kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.06));
  border:1px solid rgba(26,61,176,.18);
  font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin-bottom:18px;
}
.page-hero .kicker .dot{width:7px;height:7px;background:var(--orange);border-radius:50%}
.page-hero h1{
  font-size:56px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;line-height:1.02;margin:0 0 14px;
}
.page-hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.page-hero .lead{font-size:19px;color:var(--muted);margin:0;max-width:720px;line-height:1.55}
.page-body{padding:24px 0 80px}

/* Glass content panel */
.glass-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:36px 40px;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
  margin-bottom:22px;
}
.glass-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px 200px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(460px 200px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.glass-panel > *{position:relative;z-index:1}

.glass-panel h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 16px;
}
.glass-panel h2 em{color:var(--blue);font-style:normal}
.glass-panel h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.015em;margin:24px 0 10px}
.glass-panel h3:first-child{margin-top:0}
.glass-panel p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.glass-panel p:last-child{margin-bottom:0}
.glass-panel ul, .glass-panel ol{font-size:15px;color:var(--ink-2);line-height:1.8;padding-left:22px;margin:0 0 16px}
.glass-panel ul li::marker{color:var(--blue)}
.glass-panel a{color:var(--blue);font-weight:600}
.glass-panel a:hover{text-decoration:underline}
.glass-panel b, .glass-panel strong{color:var(--ink);font-weight:700}

/* Two-col grid inside panels */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.split-2{grid-template-columns:1fr}}

/* Heads-up notice */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(255,122,26,.08));
  border:1px solid rgba(255,122,26,.25);
  margin:18px 0;
}
.notice svg{flex:none;color:var(--orange);margin-top:2px}
.notice strong{color:var(--ink);font-weight:800}

/* Responsive */
@media(max-width:768px){
  .page-hero{padding:28px 0 24px}
  .page-hero h1{font-size:38px}
  .page-hero .lead{font-size:16px}
  .glass-panel{padding:24px 22px;border-radius:16px}
  .glass-panel h2{font-size:22px}
}

/* ════════ SHOP BY MAKE — FILTER BAR ════════ */
.sbm-filterbar{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 34px -22px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04);
  margin-bottom:20px;position:sticky;top:12px;z-index:40;backdrop-filter:blur(20px);
}
.sbm-filterbar .search-icon{width:18px;height:18px;color:var(--muted);flex:none}
.sbm-filterbar input{
  flex:1;min-width:200px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);outline:none;
}
.sbm-filterbar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}
.sbm-count{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ════════ ALPHA NAV ════════ */
.alpha-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.alpha-btn{
  min-width:28px;height:28px;padding:0 7px;border:1px solid rgba(26,61,176,.15);
  border-radius:8px;background:rgba(26,61,176,.04);color:var(--blue);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .16s;
}
.alpha-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ════════ MAKE GRID ════════ */
.makes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.make-tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;
  min-height:92px;padding:16px 18px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background .18s;
  box-shadow:0 3px 8px rgba(10,20,36,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.make-tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 90px at 100% 100%,rgba(255,122,26,.07),transparent 65%);
  opacity:0;transition:opacity .25s;
}
.make-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 14px 32px -10px rgba(26,61,176,.28);background:#fff}
.make-tile:hover::before{opacity:1}
.make-tile .make-name{font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.15}
.make-tile .make-count{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0}
.make-tile .make-arrow{
  position:absolute;right:16px;bottom:14px;color:var(--muted);font-weight:700;font-size:16px;
  transition:all .2s ease;
}
.make-tile:hover .make-arrow{color:var(--orange);transform:translateX(4px)}
.make-tile.hidden{display:none}

/* ════════ DETAIL VIEW ════════ */
.make-detail{
  padding:30px 36px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 52px -22px rgba(26,61,176,.18),0 0 0 1px rgba(26,61,176,.04);
  position:relative;overflow:hidden;
}
.make-detail::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px 220px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(520px 220px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.make-detail > *{position:relative;z-index:1}

.detail-head{margin-bottom:22px}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px 0 10px;border:1px solid rgba(26,61,176,.2);
  border-radius:10px;background:rgba(26,61,176,.05);color:var(--blue);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  margin-bottom:14px;transition:all .18s;
}
.back-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.detail-head h2{
  font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.05;margin:0 0 8px;
}
.detail-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.detail-head p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}
.detail-head p b{color:var(--ink)}

.detail-models{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;
}
.model-link{
  display:block;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  transition:all .16s;
}
.model-link:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(26,61,176,.4)}

@media(max-width:768px){
  .makes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .make-detail{padding:24px 22px;border-radius:16px}
  .detail-head h2{font-size:26px}
  .detail-models{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .sbm-filterbar{padding:12px 14px;gap:10px}
}

/* ════════ AUTH (login/create/forgot) ════════ */
.auth-wrap{padding:48px 0 80px;position:relative}
.auth-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
.auth-card,.auth-side{padding:38px 40px 34px;border-radius:22px;display:flex;flex-direction:column}
.auth-head{margin-bottom:28px}
.auth-head h1{
  font-size:42px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;line-height:1.05;margin:0 0 10px;
}
.auth-head h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-head p{font-size:15.5px;color:var(--muted);margin:0;line-height:1.55;max-width:440px}

.auth-form{display:flex;flex-direction:column;gap:14px}
.af-label{display:flex;flex-direction:column;gap:6px}
.af-l{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.af-l em{color:#dc2626;font-style:normal;margin-right:4px}
.af-label input{
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:15.5px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.af-label input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}

.af-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:2px}
.af-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;font-weight:500}
.af-check input{width:16px;height:16px;accent-color:var(--blue)}
.af-forgot{font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;transition:color .15s}
.af-forgot:hover{color:var(--orange);text-decoration:underline}

.af-submit{
  margin-top:10px;height:54px;padding:0 24px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;
  font:inherit;font-size:15.5px;font-weight:800;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 28px -8px rgba(26,61,176,.45),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.af-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(26,61,176,.55)}

.auth-divider{
  display:flex;align-items:center;gap:14px;margin:22px 0 16px;
  color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.auth-sso{display:flex;flex-direction:column;gap:10px}
.sso-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 20px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:all .15s ease;
}
.sso-btn:hover{border-color:var(--blue);background:rgba(26,61,176,.03);box-shadow:0 6px 14px -4px rgba(26,61,176,.15)}

/* Right-column side panel */
.auth-side{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)),
    radial-gradient(520px 260px at 100% 0%,rgba(26,61,176,.08),transparent 65%),
    radial-gradient(520px 260px at 0% 100%,rgba(255,122,26,.06),transparent 65%);
  backdrop-filter:blur(22px);
}
.auth-side-head .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:980px;
  background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,92,51,.08));
  border:1px solid rgba(255,122,26,.3);
  font-size:11.5px;font-weight:800;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.auth-side h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 10px;
}
.auth-side h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-side p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

.auth-perks{list-style:none;padding:0;margin:24px 0 22px;display:flex;flex-direction:column;gap:12px}
.auth-perks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.auth-perks .check{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.1));
  border:1px solid rgba(16,185,129,.3);color:#059669;font-weight:900;font-size:13px;
  display:grid;place-items:center;
}
.auth-perks li div{display:flex;flex-direction:column;gap:1px}
.auth-perks li b{color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-0.01em}
.auth-perks li span{color:var(--muted);font-size:13.5px}

.auth-side-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--ink),#1e2a50);color:#fff;
  font:inherit;font-size:14.5px;font-weight:800;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(10,20,36,.45);
  transition:transform .2s,box-shadow .2s;
}
.auth-side-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(10,20,36,.55)}

@media(max-width:880px){
  .auth-grid{grid-template-columns:1fr;gap:20px}
  .auth-card,.auth-side{padding:30px 26px 28px}
  .auth-head h1{font-size:34px}
  .auth-side h2{font-size:24px}
}


/* ════════ MY-ACCOUNT DASHBOARD ════════ */
.myacc-wrap{padding:36px 0 80px}
.myacc-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding:24px 30px;border-radius:20px;margin-bottom:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78));
  border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(20px);
  box-shadow:0 14px 34px -20px rgba(26,61,176,.16),inset 0 1px 0 rgba(255,255,255,.9);
}
.mah-kick{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:980px;margin-bottom:10px;
  background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(5,150,105,.08));
  border:1px solid rgba(16,185,129,.3);
  font-size:11.5px;font-weight:800;color:#059669;letter-spacing:.08em;text-transform:uppercase;
}
.mah-kick .dot{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.4);animation:livePulse 2s infinite}
.myacc-head h1{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.1;margin:0 0 6px}
.myacc-head h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding-right:.1em;margin-right:-.05em;
}
.myacc-head p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.myacc-head p b{color:var(--ink);font-weight:800}
.mah-signout{
  padding:10px 16px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);font-size:13.5px;font-weight:700;text-decoration:none;
  transition:all .15s;
}
.mah-signout:hover{color:#dc2626;border-color:#dc2626;background:#fef2f2}

.myacc-grid{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:start}
.myacc-nav{padding:14px;position:sticky;top:90px}
.myacc-nav nav{display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;
  color:var(--ink-2);font-size:14px;font-weight:600;text-decoration:none;transition:all .15s;
  letter-spacing:-0.005em;
}
.nav-item:hover{background:rgba(26,61,176,.06);color:var(--ink)}
.nav-item.active{
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(59,130,246,.05));
  color:var(--blue);font-weight:800;border:1px solid rgba(26,61,176,.15);
}
.nav-item .count{
  margin-left:auto;font-size:11px;font-weight:800;padding:2px 7px;border-radius:980px;
  background:rgba(26,61,176,.1);color:var(--blue);letter-spacing:.02em;
}
.nav-item.active .count{background:var(--blue);color:#fff}

.myacc-main{display:flex;flex-direction:column;gap:22px;min-width:0}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{padding:18px 20px;display:flex;flex-direction:column;gap:2px}
.stat .sk{font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.stat b{font-size:28px;font-weight:900;color:var(--ink);letter-spacing:-0.025em;line-height:1}
.stat b.money{background:linear-gradient(100deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .sv-sub{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.3}

.glass-panel{padding:24px 26px}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px}
.panel-head h2{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin:0}
.panel-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.panel-head-link{font-size:13px;font-weight:700;color:var(--blue);text-decoration:none}
.panel-head-link:hover{color:var(--orange)}

.order-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.order-row{
  display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;
  padding:16px 4px;border-bottom:1px solid var(--line-soft);
}
.order-row:last-child{border-bottom:0}
.or-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.oi-ship{background:linear-gradient(135deg,rgba(26,61,176,.12),rgba(59,130,246,.06));color:var(--blue)}
.oi-process{background:linear-gradient(135deg,rgba(251,191,36,.16),rgba(245,158,11,.08));color:#b45309}
.oi-done{background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(5,150,105,.06));color:#059669}
.or-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.or-top b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-0.01em}
.or-date{font-size:12.5px;color:var(--muted);font-weight:600}
.or-items{font-size:14px;color:var(--ink-2);margin:3px 0 6px;line-height:1.4}
.or-meta{display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.or-status{font-weight:800;padding:3px 10px;border-radius:980px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.or-status.shipped{background:rgba(26,61,176,.1);color:var(--blue);border:1px solid rgba(26,61,176,.22)}
.or-status.processing{background:rgba(251,191,36,.14);color:#b45309;border:1px solid rgba(245,158,11,.3)}
.or-status.delivered{background:rgba(16,185,129,.12);color:#059669;border:1px solid rgba(16,185,129,.3)}
.or-eta{color:var(--ink-2);font-weight:500}
.or-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.or-total{font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-0.02em}
.or-total .c{font-size:13px;vertical-align:super}
.or-cta{
  padding:7px 14px;border-radius:8px;background:var(--blue);color:#fff;
  font-size:12.5px;font-weight:800;text-decoration:none;letter-spacing:.01em;
}
.or-cta.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.or-cta:hover{background:var(--ink)}
.or-cta.ghost:hover{background:var(--blue);color:#fff}

.split-row{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}

.garage-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.gv-row{
  display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;
  padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.6);
  border:1px solid rgba(26,61,176,.08);
}
.gv-row.active{border-color:var(--blue);background:linear-gradient(135deg,rgba(26,61,176,.05),rgba(59,130,246,.02))}
.gv-ico{font-size:24px}
.gv-body b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-0.01em}
.gv-body span{font-size:12.5px;color:var(--muted);margin-top:2px;display:block}
.gv-tag{font-size:11px;font-weight:800;padding:4px 10px;border-radius:980px;background:var(--blue);color:#fff;letter-spacing:.06em;text-transform:uppercase}
.gv-link{font-size:13px;font-weight:700;color:var(--blue);text-decoration:none}
.gv-link:hover{color:var(--orange)}

.addr-card{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.08);display:flex;flex-direction:column;gap:3px}
.addr-card b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-0.01em}
.addr-card span{font-size:13.5px;color:var(--ink-2)}

.card-chip{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;
  background:linear-gradient(135deg,#1e3a8a,#1e2a50);color:#fff;
}
.card-chip .brand{font-weight:900;letter-spacing:.08em;font-size:14px;font-family:"JetBrains Mono",monospace}
.card-chip .num{flex:1;font-family:"JetBrains Mono",monospace;font-size:15px;letter-spacing:.08em}
.card-chip .exp{font-size:12px;color:rgba(255,255,255,.7)}

@media(max-width:960px){
  .myacc-grid{grid-template-columns:1fr}
  .myacc-nav{position:relative;top:0}
  .myacc-nav nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .myacc-nav .nav-item{flex:1 1 auto;min-width:min(48%,180px);justify-content:flex-start}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .split-row{grid-template-columns:1fr}
  .order-row{grid-template-columns:36px 1fr;gap:12px}
  .or-side{grid-column:1 / 3;flex-direction:row;justify-content:space-between;align-items:center;padding-top:6px;border-top:1px solid var(--line-soft)}
}
@media(max-width:520px){
  .myacc-nav nav{flex-direction:column}
  .myacc-nav .nav-item{min-width:0;width:100%}
}


/* ===== mockup-track-order.html ===== */
/* ════════ SHARED CONTENT-PAGE LAYOUT ════════ */
.page-hero{padding:48px 0 32px;position:relative}
.page-hero .kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.06));
  border:1px solid rgba(26,61,176,.18);
  font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin-bottom:18px;
}
.page-hero .kicker .dot{width:7px;height:7px;background:var(--orange);border-radius:50%}
.page-hero h1{
  font-size:56px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;line-height:1.02;margin:0 0 14px;
}
.page-hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.page-hero .lead{font-size:19px;color:var(--muted);margin:0;max-width:720px;line-height:1.55}
.page-body{padding:24px 0 80px}

/* Glass content panel */
.glass-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:36px 40px;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
  margin-bottom:22px;
}
.glass-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px 200px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(460px 200px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.glass-panel > *{position:relative;z-index:1}

.glass-panel h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 16px;
}
.glass-panel h2 em{color:var(--blue);font-style:normal}
.glass-panel h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.015em;margin:24px 0 10px}
.glass-panel h3:first-child{margin-top:0}
.glass-panel p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.glass-panel p:last-child{margin-bottom:0}
.glass-panel ul, .glass-panel ol{font-size:15px;color:var(--ink-2);line-height:1.8;padding-left:22px;margin:0 0 16px}
.glass-panel ul li::marker{color:var(--blue)}
.glass-panel a{color:var(--blue);font-weight:600}
.glass-panel a:hover{text-decoration:underline}
.glass-panel b, .glass-panel strong{color:var(--ink);font-weight:700}

/* Two-col grid inside panels */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.split-2{grid-template-columns:1fr}}

/* Heads-up notice */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(255,122,26,.08));
  border:1px solid rgba(255,122,26,.25);
  margin:18px 0;
}
.notice svg{flex:none;color:var(--orange);margin-top:2px}
.notice strong{color:var(--ink);font-weight:800}

/* Responsive */
@media(max-width:768px){
  .page-hero{padding:28px 0 24px}
  .page-hero h1{font-size:38px}
  .page-hero .lead{font-size:16px}
  .glass-panel{padding:24px 22px;border-radius:16px}
  .glass-panel h2{font-size:22px}
}

/* ════════ SHOP BY MAKE — FILTER BAR ════════ */
.sbm-filterbar{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 34px -22px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04);
  margin-bottom:20px;position:sticky;top:12px;z-index:40;backdrop-filter:blur(20px);
}
.sbm-filterbar .search-icon{width:18px;height:18px;color:var(--muted);flex:none}
.sbm-filterbar input{
  flex:1;min-width:200px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);outline:none;
}
.sbm-filterbar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}
.sbm-count{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ════════ ALPHA NAV ════════ */
.alpha-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.alpha-btn{
  min-width:28px;height:28px;padding:0 7px;border:1px solid rgba(26,61,176,.15);
  border-radius:8px;background:rgba(26,61,176,.04);color:var(--blue);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .16s;
}
.alpha-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ════════ MAKE GRID ════════ */
.makes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.make-tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;
  min-height:92px;padding:16px 18px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background .18s;
  box-shadow:0 3px 8px rgba(10,20,36,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.make-tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 90px at 100% 100%,rgba(255,122,26,.07),transparent 65%);
  opacity:0;transition:opacity .25s;
}
.make-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 14px 32px -10px rgba(26,61,176,.28);background:#fff}
.make-tile:hover::before{opacity:1}
.make-tile .make-name{font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.15}
.make-tile .make-count{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0}
.make-tile .make-arrow{
  position:absolute;right:16px;bottom:14px;color:var(--muted);font-weight:700;font-size:16px;
  transition:all .2s ease;
}
.make-tile:hover .make-arrow{color:var(--orange);transform:translateX(4px)}
.make-tile.hidden{display:none}

/* ════════ DETAIL VIEW ════════ */
.make-detail{
  padding:30px 36px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 52px -22px rgba(26,61,176,.18),0 0 0 1px rgba(26,61,176,.04);
  position:relative;overflow:hidden;
}
.make-detail::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px 220px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(520px 220px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.make-detail > *{position:relative;z-index:1}

.detail-head{margin-bottom:22px}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px 0 10px;border:1px solid rgba(26,61,176,.2);
  border-radius:10px;background:rgba(26,61,176,.05);color:var(--blue);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  margin-bottom:14px;transition:all .18s;
}
.back-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.detail-head h2{
  font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.05;margin:0 0 8px;
}
.detail-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.detail-head p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}
.detail-head p b{color:var(--ink)}

.detail-models{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;
}
.model-link{
  display:block;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  transition:all .16s;
}
.model-link:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(26,61,176,.4)}

@media(max-width:768px){
  .makes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .make-detail{padding:24px 22px;border-radius:16px}
  .detail-head h2{font-size:26px}
  .detail-models{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .sbm-filterbar{padding:12px 14px;gap:10px}
}

/* ════════ AUTH (login/create/forgot) ════════ */
.auth-wrap{padding:48px 0 80px;position:relative}
.auth-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
.auth-card,.auth-side{padding:38px 40px 34px;border-radius:22px;display:flex;flex-direction:column}
.auth-head{margin-bottom:28px}
.auth-head h1{
  font-size:42px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;line-height:1.05;margin:0 0 10px;
}
.auth-head h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-head p{font-size:15.5px;color:var(--muted);margin:0;line-height:1.55;max-width:440px}

.auth-form{display:flex;flex-direction:column;gap:14px}
.af-label{display:flex;flex-direction:column;gap:6px}
.af-l{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.af-l em{color:#dc2626;font-style:normal;margin-right:4px}
.af-label input{
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:15.5px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.af-label input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}

.af-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:2px}
.af-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;font-weight:500}
.af-check input{width:16px;height:16px;accent-color:var(--blue)}
.af-forgot{font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;transition:color .15s}
.af-forgot:hover{color:var(--orange);text-decoration:underline}

.af-submit{
  margin-top:10px;height:54px;padding:0 24px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;
  font:inherit;font-size:15.5px;font-weight:800;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 28px -8px rgba(26,61,176,.45),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.af-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(26,61,176,.55)}

.auth-divider{
  display:flex;align-items:center;gap:14px;margin:22px 0 16px;
  color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.auth-sso{display:flex;flex-direction:column;gap:10px}
.sso-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 20px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:all .15s ease;
}
.sso-btn:hover{border-color:var(--blue);background:rgba(26,61,176,.03);box-shadow:0 6px 14px -4px rgba(26,61,176,.15)}

/* Right-column side panel */
.auth-side{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)),
    radial-gradient(520px 260px at 100% 0%,rgba(26,61,176,.08),transparent 65%),
    radial-gradient(520px 260px at 0% 100%,rgba(255,122,26,.06),transparent 65%);
  backdrop-filter:blur(22px);
}
.auth-side-head .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:980px;
  background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,92,51,.08));
  border:1px solid rgba(255,122,26,.3);
  font-size:11.5px;font-weight:800;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.auth-side h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 10px;
}
.auth-side h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-side p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

.auth-perks{list-style:none;padding:0;margin:24px 0 22px;display:flex;flex-direction:column;gap:12px}
.auth-perks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.auth-perks .check{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.1));
  border:1px solid rgba(16,185,129,.3);color:#059669;font-weight:900;font-size:13px;
  display:grid;place-items:center;
}
.auth-perks li div{display:flex;flex-direction:column;gap:1px}
.auth-perks li b{color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-0.01em}
.auth-perks li span{color:var(--muted);font-size:13.5px}

.auth-side-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--ink),#1e2a50);color:#fff;
  font:inherit;font-size:14.5px;font-weight:800;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(10,20,36,.45);
  transition:transform .2s,box-shadow .2s;
}
.auth-side-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(10,20,36,.55)}

@media(max-width:880px){
  .auth-grid{grid-template-columns:1fr;gap:20px}
  .auth-card,.auth-side{padding:30px 26px 28px}
  .auth-head h1{font-size:34px}
  .auth-side h2{font-size:24px}
}


/* ════════ TRACK ORDER ════════ */
.track-wrap{padding:40px 0 80px}
.track-head{text-align:center;max-width:720px;margin:0 auto 30px}
.kicker-orange{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:980px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,92,51,.08));
  border:1px solid rgba(255,122,26,.3);
  font-size:11.5px;font-weight:800;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;
}
.track-head h1{font-size:46px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;line-height:1.05;margin:0 0 10px}
.track-head h1 em{font-style:italic;background:linear-gradient(100deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.12em;margin-right:-.06em}
.track-head p{font-size:17px;color:var(--muted);margin:0;line-height:1.5}

.track-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:22px;align-items:start}
.track-form{padding:30px 32px;display:flex;flex-direction:column;gap:14px}
.af-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.af-grid-2{grid-template-columns:1fr}}
.track-submit{margin-top:6px;align-self:flex-start;padding:0 32px}
.track-help{font-size:13px;color:var(--muted);margin:2px 0 0;line-height:1.5}
.track-help a{color:var(--blue);font-weight:700}

.track-side{padding:22px 24px;display:flex;flex-direction:column;gap:16px}
.ts-tile{display:flex;gap:12px;align-items:flex-start}
.ts-tile svg{flex:none;margin-top:2px;color:var(--blue)}
.ts-tile b{display:block;font-size:14.5px;color:var(--ink);font-weight:800;letter-spacing:-0.01em;margin-bottom:3px}
.ts-tile span{font-size:13px;color:var(--ink-2);line-height:1.5}
.ts-tile a{color:var(--blue);font-weight:700}

/* Track result */
.track-result{margin-top:32px;display:flex;flex-direction:column;gap:18px}
.tr-headcard{
  padding:26px 30px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(26,61,176,.06),rgba(255,122,26,.04)),linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(26,61,176,.14);
}
.tr-kicker{font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.01em;display:block;margin-bottom:6px}
.tr-kicker b{color:var(--ink);font-weight:800}
.tr-headleft h2{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.1;margin:0 0 6px}
.tr-headleft h2 em{font-style:italic;color:var(--orange)}
.tr-headleft p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5;max-width:440px}
.tr-eta{display:flex;flex-direction:column;gap:4px;align-items:flex-end;min-width:240px}
.tr-etalabel{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tr-etadate{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.tr-carrier{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:6px 12px;border-radius:8px;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;font-family:"JetBrains Mono",monospace;letter-spacing:.02em;
}
.tr-carrier:hover{background:var(--blue)}
.tr-h3{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin:0 0 16px}

.tr-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0;position:relative}
.tr-steps::before{
  content:"";position:absolute;left:10px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,rgba(16,185,129,.4) 0%,rgba(16,185,129,.4) var(--fill,56%),var(--line-soft) var(--fill,56%));
  border-radius:2px;
}
.tr-steps li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:flex-start;padding:10px 0;position:relative}
.tr-steps .dot{
  width:22px;height:22px;border-radius:50%;background:#fff;
  border:2px solid var(--line);position:relative;z-index:1;
}
.tr-steps .done .dot{background:#10b981;border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.tr-steps .done .dot::after{content:"";position:absolute;inset:4px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat}
.tr-steps .active .dot{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.18);animation:pulseDot 2s infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 3px rgba(26,61,176,.18)}50%{box-shadow:0 0 0 7px rgba(26,61,176,.08)}}
.tr-step b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-0.01em;margin-bottom:2px}
.tr-steps .active b{color:var(--blue)}
.tr-step span{font-size:13.5px;color:var(--muted);line-height:1.5}

.tr-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.tr-items li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.08)}
.tri-img{width:64px;height:64px;background:#fff;border-radius:10px;border:1px solid var(--line-soft);display:grid;place-items:center;padding:6px}
.tri-img img{max-width:100%;max-height:100%;mix-blend-mode:multiply}
.tri-body b{display:block;font-size:14px;color:var(--ink);font-weight:800;letter-spacing:-0.01em;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tri-body span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.tri-price{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-0.02em}
.tri-price .c{font-size:12px;vertical-align:super}

@media(max-width:960px){
  .track-grid{grid-template-columns:1fr}
  .track-head h1{font-size:34px}
  .tr-headcard{align-items:flex-start}
  .tr-eta{align-items:flex-start;min-width:0}
}


/* ===== mockup-checkout-success.html ===== */
/* ════════ SHARED CONTENT-PAGE LAYOUT ════════ */
.page-hero{padding:48px 0 32px;position:relative}
.page-hero .kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.06));
  border:1px solid rgba(26,61,176,.18);
  font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin-bottom:18px;
}
.page-hero .kicker .dot{width:7px;height:7px;background:var(--orange);border-radius:50%}
.page-hero h1{
  font-size:56px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;line-height:1.02;margin:0 0 14px;
}
.page-hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.page-hero .lead{font-size:19px;color:var(--muted);margin:0;max-width:720px;line-height:1.55}
.page-body{padding:24px 0 80px}

/* Glass content panel */
.glass-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:36px 40px;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
  margin-bottom:22px;
}
.glass-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px 200px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(460px 200px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.glass-panel > *{position:relative;z-index:1}

.glass-panel h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 16px;
}
.glass-panel h2 em{color:var(--blue);font-style:normal}
.glass-panel h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.015em;margin:24px 0 10px}
.glass-panel h3:first-child{margin-top:0}
.glass-panel p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.glass-panel p:last-child{margin-bottom:0}
.glass-panel ul, .glass-panel ol{font-size:15px;color:var(--ink-2);line-height:1.8;padding-left:22px;margin:0 0 16px}
.glass-panel ul li::marker{color:var(--blue)}
.glass-panel a{color:var(--blue);font-weight:600}
.glass-panel a:hover{text-decoration:underline}
.glass-panel b, .glass-panel strong{color:var(--ink);font-weight:700}

/* Two-col grid inside panels */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.split-2{grid-template-columns:1fr}}

/* Heads-up notice */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(255,122,26,.08));
  border:1px solid rgba(255,122,26,.25);
  margin:18px 0;
}
.notice svg{flex:none;color:var(--orange);margin-top:2px}
.notice strong{color:var(--ink);font-weight:800}

/* Responsive */
@media(max-width:768px){
  .page-hero{padding:28px 0 24px}
  .page-hero h1{font-size:38px}
  .page-hero .lead{font-size:16px}
  .glass-panel{padding:24px 22px;border-radius:16px}
  .glass-panel h2{font-size:22px}
}

/* ════════ SHOP BY MAKE — FILTER BAR ════════ */
.sbm-filterbar{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 34px -22px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04);
  margin-bottom:20px;position:sticky;top:12px;z-index:40;backdrop-filter:blur(20px);
}
.sbm-filterbar .search-icon{width:18px;height:18px;color:var(--muted);flex:none}
.sbm-filterbar input{
  flex:1;min-width:200px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);outline:none;
}
.sbm-filterbar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}
.sbm-count{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ════════ ALPHA NAV ════════ */
.alpha-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.alpha-btn{
  min-width:28px;height:28px;padding:0 7px;border:1px solid rgba(26,61,176,.15);
  border-radius:8px;background:rgba(26,61,176,.04);color:var(--blue);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .16s;
}
.alpha-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ════════ MAKE GRID ════════ */
.makes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.make-tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;
  min-height:92px;padding:16px 18px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background .18s;
  box-shadow:0 3px 8px rgba(10,20,36,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.make-tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 90px at 100% 100%,rgba(255,122,26,.07),transparent 65%);
  opacity:0;transition:opacity .25s;
}
.make-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 14px 32px -10px rgba(26,61,176,.28);background:#fff}
.make-tile:hover::before{opacity:1}
.make-tile .make-name{font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.15}
.make-tile .make-count{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0}
.make-tile .make-arrow{
  position:absolute;right:16px;bottom:14px;color:var(--muted);font-weight:700;font-size:16px;
  transition:all .2s ease;
}
.make-tile:hover .make-arrow{color:var(--orange);transform:translateX(4px)}
.make-tile.hidden{display:none}

/* ════════ DETAIL VIEW ════════ */
.make-detail{
  padding:30px 36px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 52px -22px rgba(26,61,176,.18),0 0 0 1px rgba(26,61,176,.04);
  position:relative;overflow:hidden;
}
.make-detail::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px 220px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(520px 220px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.make-detail > *{position:relative;z-index:1}

.detail-head{margin-bottom:22px}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px 0 10px;border:1px solid rgba(26,61,176,.2);
  border-radius:10px;background:rgba(26,61,176,.05);color:var(--blue);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  margin-bottom:14px;transition:all .18s;
}
.back-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.detail-head h2{
  font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.05;margin:0 0 8px;
}
.detail-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.detail-head p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}
.detail-head p b{color:var(--ink)}

.detail-models{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;
}
.model-link{
  display:block;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  transition:all .16s;
}
.model-link:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(26,61,176,.4)}

@media(max-width:768px){
  .makes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .make-detail{padding:24px 22px;border-radius:16px}
  .detail-head h2{font-size:26px}
  .detail-models{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .sbm-filterbar{padding:12px 14px;gap:10px}
}

/* ════════ AUTH (login/create/forgot) ════════ */
.auth-wrap{padding:48px 0 80px;position:relative}
.auth-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
.auth-card,.auth-side{padding:38px 40px 34px;border-radius:22px;display:flex;flex-direction:column}
.auth-head{margin-bottom:28px}
.auth-head h1{
  font-size:42px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;line-height:1.05;margin:0 0 10px;
}
.auth-head h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-head p{font-size:15.5px;color:var(--muted);margin:0;line-height:1.55;max-width:440px}

.auth-form{display:flex;flex-direction:column;gap:14px}
.af-label{display:flex;flex-direction:column;gap:6px}
.af-l{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.af-l em{color:#dc2626;font-style:normal;margin-right:4px}
.af-label input{
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:15.5px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.af-label input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}

.af-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:2px}
.af-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;font-weight:500}
.af-check input{width:16px;height:16px;accent-color:var(--blue)}
.af-forgot{font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;transition:color .15s}
.af-forgot:hover{color:var(--orange);text-decoration:underline}

.af-submit{
  margin-top:10px;height:54px;padding:0 24px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;
  font:inherit;font-size:15.5px;font-weight:800;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 28px -8px rgba(26,61,176,.45),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.af-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(26,61,176,.55)}

.auth-divider{
  display:flex;align-items:center;gap:14px;margin:22px 0 16px;
  color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.auth-sso{display:flex;flex-direction:column;gap:10px}
.sso-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 20px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:all .15s ease;
}
.sso-btn:hover{border-color:var(--blue);background:rgba(26,61,176,.03);box-shadow:0 6px 14px -4px rgba(26,61,176,.15)}

/* Right-column side panel */
.auth-side{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)),
    radial-gradient(520px 260px at 100% 0%,rgba(26,61,176,.08),transparent 65%),
    radial-gradient(520px 260px at 0% 100%,rgba(255,122,26,.06),transparent 65%);
  backdrop-filter:blur(22px);
}
.auth-side-head .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:980px;
  background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,92,51,.08));
  border:1px solid rgba(255,122,26,.3);
  font-size:11.5px;font-weight:800;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.auth-side h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 10px;
}
.auth-side h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-side p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

.auth-perks{list-style:none;padding:0;margin:24px 0 22px;display:flex;flex-direction:column;gap:12px}
.auth-perks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.auth-perks .check{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.1));
  border:1px solid rgba(16,185,129,.3);color:#059669;font-weight:900;font-size:13px;
  display:grid;place-items:center;
}
.auth-perks li div{display:flex;flex-direction:column;gap:1px}
.auth-perks li b{color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-0.01em}
.auth-perks li span{color:var(--muted);font-size:13.5px}

.auth-side-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--ink),#1e2a50);color:#fff;
  font:inherit;font-size:14.5px;font-weight:800;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(10,20,36,.45);
  transition:transform .2s,box-shadow .2s;
}
.auth-side-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(10,20,36,.55)}

@media(max-width:880px){
  .auth-grid{grid-template-columns:1fr;gap:20px}
  .auth-card,.auth-side{padding:30px 26px 28px}
  .auth-head h1{font-size:34px}
  .auth-side h2{font-size:24px}
}


/* ════════ CHECKOUT SUCCESS PAGE ════════ */
.cs-wrap{padding:40px 0 80px}

/* Social follow bar (above hero) */
.cs-social{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:18px 24px;margin-bottom:20px;flex-wrap:wrap}
.cs-social-head{min-width:0;flex:1}
.cs-social-head b{display:block;font-size:16px;color:var(--ink);font-weight:800;letter-spacing:-0.015em;margin-bottom:3px}
.cs-social-head span{display:block;font-size:13px;color:var(--ink-2);line-height:1.45}
.cs-social-links{display:flex;gap:8px;flex-wrap:wrap}
.cs-sl{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  font-size:13px;font-weight:700;text-decoration:none !important;letter-spacing:.01em;
  transition:all .2s cubic-bezier(.2,.8,.2,1);
}
.cs-sl,.cs-sl:hover,.cs-sl:focus,.cs-sl:active,.cs-sl span{text-decoration:none !important}
.cs-sl .cs-si{display:grid;place-items:center;color:var(--muted);transition:color .2s}
.cs-sl:hover{transform:translateY(-2px);color:#fff;border-color:transparent;box-shadow:0 10px 20px -6px rgba(10,20,36,.25)}
.cs-sl:hover .cs-si{color:#fff}
.cs-sl.facebook:hover{background:#1877f2}
.cs-sl.tiktok:hover{background:#000}
.cs-sl.youtube:hover{background:#ff0000}
.cs-sl.instagram:hover{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
@media(max-width:760px){.cs-social{flex-direction:column;align-items:flex-start}.cs-sl-txt{display:none}.cs-sl{padding:10px 12px}}

/* Hero panel */
.cs-hero{display:grid;grid-template-columns:96px 1fr;gap:28px;padding:36px 40px 32px;align-items:flex-start;position:relative;overflow:hidden;border:1px solid rgba(16,185,129,.18)}
.cs-hero::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(520px 260px at 0% 0%,rgba(16,185,129,.12),transparent 60%),radial-gradient(520px 260px at 100% 100%,rgba(26,61,176,.08),transparent 60%)}
.cs-hero > *{position:relative;z-index:1}
.cs-check{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 18px 38px -12px rgba(16,185,129,.55),inset 0 2px 0 rgba(255,255,255,.18);animation:csPop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes csPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.cs-kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:980px;background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(5,150,105,.06));border:1px solid rgba(16,185,129,.32);font-size:11.5px;font-weight:800;color:#059669;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.cs-kicker .dot{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.4);animation:livePulse 2s infinite}
.cs-hero h1{font-size:40px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.08;margin:0 0 10px}
.cs-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--blue),#059669);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.1em;margin-right:-.05em}
.cs-lead{font-size:16px;color:var(--ink-2);margin:0 0 22px;line-height:1.55;max-width:620px}
.cs-lead b{color:var(--ink);font-weight:800}

.cs-orderbar{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px 22px;margin-bottom:22px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.82));border:1px solid rgba(26,61,176,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.cs-orderbar > div{display:flex;flex-direction:column;gap:4px}
.cs-obl{font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.cs-obv{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-0.015em;font-variant-numeric:tabular-nums}
a.cs-obv{color:var(--blue);text-decoration:none}
a.cs-obv:hover{color:var(--orange)}
.cs-eta{background:linear-gradient(100deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.cs-hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cs-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;font-size:14.5px;font-weight:800;text-decoration:none;letter-spacing:.01em;box-shadow:0 12px 26px -8px rgba(255,122,26,.5);transition:transform .2s,box-shadow .2s}
.cs-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(255,122,26,.6)}
.cs-ghost{color:var(--ink-2);font-weight:700;text-decoration:none;font-size:14px;padding:12px 8px}
.cs-ghost:hover{color:var(--blue)}

/* Info tiles */
.cs-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0}
@media(max-width:900px){.cs-info-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cs-info-grid{grid-template-columns:1fr}}
.cs-tile{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));border:1px solid rgba(26,61,176,.08)}
.cs-tile .cs-ti{font-size:28px;flex:none;line-height:1}
.cs-tile b{display:block;font-size:15px;color:var(--ink);font-weight:800;letter-spacing:-0.01em;margin-bottom:3px}
.cs-tile p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0}
.cs-tile a{color:var(--blue);font-weight:700}

/* Split: items (left) + aside (right) */
.cs-split{display:grid;grid-template-columns:1.35fr .65fr;gap:22px;margin:8px 0 28px;align-items:start}
@media(max-width:960px){.cs-split{grid-template-columns:1fr}}

.cs-oh{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px}
.cs-oh h2{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin:0}
.cs-oh h2 em{font-style:normal;background:linear-gradient(100deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cs-oh-link{font-size:13px;font-weight:700;color:var(--blue);text-decoration:none}
.cs-oh-link:hover{color:var(--orange)}

.cs-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.cs-items li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.08)}
.ci-img{width:64px;height:64px;background:#fff;border-radius:10px;border:1px solid var(--line-soft);display:grid;place-items:center;padding:6px}
.ci-img img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.ci-body b{display:block;font-size:14.5px;color:var(--ink);font-weight:800;letter-spacing:-0.005em;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ci-body span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.ci-qp{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ci-qty{font-size:12.5px;color:var(--muted);font-weight:600}
.ci-price{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-0.02em}
.ci-price .c{font-size:12px;vertical-align:super}

/* Order-Confirmed kicker + Print Receipt button row. The button is
   hidden on mobile (≤640) since printing on a phone is rare and the
   button competes for narrow horizontal space. On mobile the kicker
   centers itself in the row since it's the only remaining element. */
.cs-kicker-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;flex-wrap:wrap;
}
@media (max-width:640px){
  .cs-kicker-row{ justify-content:center; }
}
.cs-print-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 22px;border-radius:12px;border:0;
  background:linear-gradient(135deg,#1d4ed8 0%,#1e3a8a 100%);
  color:#fff;
  font:inherit;font-size:14.5px;font-weight:800;letter-spacing:.02em;cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:
    0 10px 22px -8px rgba(26,61,176,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.cs-print-btn svg{stroke-width:2.4}
.cs-print-btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
  box-shadow:
    0 14px 28px -10px rgba(26,61,176,.65),
    inset 0 1px 0 rgba(255,255,255,.24);
}
.cs-print-btn:active{transform:translateY(0)}

/* ════════════════════════════════════════════════════════════════════
   Print stylesheet for the v2 checkout success page.
   The on-screen design uses translucent glass panels, gradient text,
   radial-gradient decorations, drop-shadows, and a heavy navigation
   chrome — none of which translate to paper. We strip everything to
   solid-color, plain-text, single-column for a legible printed
   receipt. Visitors see the on-screen design; what comes out of the
   printer is a clean order summary.
   ════════════════════════════════════════════════════════════════════ */
@media print {
  /* Page margins + a baseline reset for everything inside .cs-wrap. */
  @page { margin: 12mm; }
  html, body{
    background:#fff !important;color:#000 !important;
    font:12pt/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  }
  /* Hide everything outside the receipt: site chrome, social-follow
     card, info tiles, Continue-shopping CTA, footer, sticky bars,
     mini-cart, modals. Whitelist: section.cs-wrap and its descendants. */
  .masthead, header.masthead, footer, .footer,
  .crumbs, nav.crumbs, .mini-cart, .mini-bar, #miniBar,
  .cs-social, .cs-info-grid, .cs-ctas,
  .modal, .ymm-modal, .browse-vehicle-modal,
  body > script, body > div[id^="poptin"], body > div[id*="livechat"],
  iframe[src*="bolt"], iframe[src*="chat"]{
    display:none !important;
  }
  /* Strip all glass-panel chrome — translucent gradients, blurs, and
     gradient text simply don't print. Solid white + black ink. */
  .glass-panel, .cs-hero, .cs-order-items, .cs-ship-panel,
  .cs-core-panel, .cs-totals, .addr-card{
    background:#fff !important;border:1px solid #cfd5e0 !important;
    box-shadow:none !important;backdrop-filter:none !important;
    color:#000 !important;
    page-break-inside:avoid;
  }
  .glass-panel::before, .cs-hero::before, .cs-core-panel::before,
  .cs-order-items::before{ display:none !important; }
  /* Gradient text → solid black so the title and emphasized words
     actually appear on paper (gradient-clipped text often prints
     blank or as dotted-pattern text on b/w printers). */
  h1 em, h2 em, h3 em, .cs-hero h1 em, .cs-oh h2 em,
  .cs-oh-link, .cs-empty-title em{
    background:none !important;-webkit-text-fill-color:#000 !important;
    color:#000 !important;
  }
  /* Tighten typography for paper. */
  .cs-hero h1{ font-size:22pt !important;line-height:1.2 !important;margin:6pt 0 4pt !important; }
  .cs-hero .cs-lead{ font-size:11.5pt !important;line-height:1.4 !important; }
  .cs-orderbar{ display:flex !important;flex-wrap:wrap;gap:18pt 24pt;font-size:10.5pt; }
  .cs-orderbar .cs-obl{ font-size:9pt;color:#444 !important;text-transform:uppercase;letter-spacing:.5pt; }
  .cs-orderbar .cs-obv{ font-size:11pt;font-weight:700;color:#000 !important; }
  /* Items list — keep thumbs but smaller. */
  .cs-items{ list-style:none;padding:0;margin:0; }
  .cs-items li{
    display:grid;grid-template-columns:50px 1fr auto;gap:10pt;
    align-items:center;padding:8pt 0;border-top:1px solid #e2e6ed;
    page-break-inside:avoid;
  }
  .cs-items .ci-img img{ width:50px;height:50px;object-fit:contain; }
  .cs-items b{ font-size:11pt;font-weight:700;color:#000 !important; }
  .cs-items span{ font-size:9.5pt;color:#444 !important; }
  .cs-items .ci-price{ font-size:12pt;font-weight:700;color:#000 !important; }
  /* Totals + tables. */
  .ct-row{ font-size:11pt;color:#000 !important;padding:3pt 0; }
  .ct-row.total{ font-size:12pt;border-top:1px solid #888 !important;margin-top:4pt;padding-top:6pt; }
  .ct-row.total b{ font-size:14pt;color:#000 !important; }
  /* Address. */
  .addr-card b{ font-size:11.5pt;color:#000 !important; }
  .addr-card span{ font-size:10.5pt;color:#222 !important; }
  /* Two-column split → single column for print. */
  .cs-split{ display:block !important; }
  .cs-aside{ margin-top:14pt; }
  /* Buttons + interactive elements. */
  .cs-print-btn, .cs-cta-primary{ display:none !important; }
  /* URLs after links would clutter — suppress browser's default
     "(http://...)" text addition for inline anchors. */
  a, a:visited{ color:#000 !important;text-decoration:underline; }
  a[href]:after{ content:""; }
}
.cs-print-btn svg{flex:none}
@media (max-width:640px){ .cs-print-btn{ display:none !important; } }
@media print{ .cs-print-btn{ display:none !important; } }

.cs-totals{margin-top:18px;padding:16px 20px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.55));border:1px solid rgba(26,61,176,.08)}
/* Core return panels — green-tinted glass theme matching the mockup
   (mockup-checkout-success.html `.cs-core`). Layered green-on-white
   gradient + emerald border, green-tinted heading text, decimal list
   markers in green, and a green-tinted hairline above the fine-print
   note. Both `--cat` (catalytic) and `--gen` (general HL) variants
   share this look so the page reads as one consistent panel family. */
.cs-core-panel{
  background:
    linear-gradient(135deg, rgba(16,185,129,.10), rgba(5,150,105,.04)),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84)) !important;
  border:1px solid rgba(16,185,129,.32) !important;
  box-shadow:
    0 14px 32px -16px rgba(5,150,105,.22),
    0 0 0 1px rgba(16,185,129,.06),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.cs-core-panel::before{ display:none !important; }
.cs-core-head{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.cs-core-emoji{ font-size:30px;flex:none;line-height:1; }
.cs-core-head strong{
  font-size:18px;font-weight:800;color:#065f46;letter-spacing:-0.012em;
}
.cs-core-panel > p{
  font-size:14.5px;color:#047857;line-height:1.55;margin:0 0 14px;
}
.cs-core-panel > p b{ color:#065f46;font-weight:800; }
.cs-core-list{
  background:rgba(255,255,255,.66);border:1px solid rgba(16,185,129,.18);
  border-radius:10px;padding:10px 14px;margin:0 0 14px;
}
.cs-core-list table{ width:100%;border-collapse:collapse; }
.cs-core-list td{
  padding:6px 0;font-size:13.5px;color:#1f2937;
  border-bottom:1px solid rgba(16,185,129,.14);
}
.cs-core-list tr:last-child td{ border-bottom:0; }
.cs-core-list .amt{ text-align:right;color:#047857;font-weight:700;font-variant-numeric:tabular-nums; }
.cs-core-list tr.total td{
  padding-top:10px;border-top:1px solid rgba(16,185,129,.32);
  color:#047857;font-size:14.5px;
}
.cs-core-steps{
  background:rgba(255,255,255,.7);border:1px solid rgba(16,185,129,.18);
  border-radius:12px;padding:14px 18px;
}
.cs-core-steps-head{
  font-size:14px;font-weight:800;color:#047857;margin:0 0 8px;letter-spacing:-0.005em;
}
.cs-core-steps ol{
  list-style:decimal;padding-left:22px;margin:0;
  display:flex;flex-direction:column;gap:7px;
  color:var(--ink-2,#374151);font-size:13.5px;line-height:1.55;
}
.cs-core-steps ol li::marker{ color:#059669;font-weight:800; }
.cs-core-steps ol b{ color:var(--ink,#0d1424);font-weight:700; }
.cs-core-steps ol a{ color:var(--blue,#1d4ed8);font-weight:700; }
.cs-core-fine{
  font-size:12.5px;color:var(--muted,#6b7280);
  margin:12px 0 0;padding-top:10px;
  border-top:1px solid rgba(16,185,129,.22);line-height:1.55;
}
.cs-core-fine b{ color:var(--ink,#0d1424);font-weight:800; }

/* Shipping address rolled into the items panel (below totals). Styled
   to match the standalone aside variant — separator above + h3 label
   + .addr-card. */
.cs-order-items .cs-ship-inline{
  margin-top:18px;padding-top:18px;
  border-top:1px solid rgba(26,61,176,.1);
}
.cs-order-items .cs-ship-inline h3{
  font-size:15px;font-weight:800;color:var(--ink,#0d1424);
  letter-spacing:-0.015em;margin:0 0 10px;
}
.ct-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:14.5px;color:var(--ink-2)}
.ct-row.total{margin-top:4px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:16px;color:var(--ink);font-weight:800}
.ct-row.total b{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.ct-row.total .c{font-size:13px;vertical-align:super}
.ct-pay{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--muted)}
.ct-pl{font-weight:600}
.ct-card{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-family:"JetBrains Mono",monospace;font-weight:700;font-size:13px}
.ct-card b{padding:3px 8px;border-radius:6px;background:linear-gradient(135deg,#1e3a8a,#1e2a50);color:#fff;font-size:11px;letter-spacing:.06em}

/* Aside */
.cs-aside{display:flex;flex-direction:column;gap:18px}
.cs-aside h3{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-0.015em;margin:0 0 12px}
.addr-card{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.08)}
.addr-card b{font-size:14.5px;color:var(--ink);font-weight:800}
.addr-card span{font-size:13.5px;color:var(--ink-2)}

/* Core refund callout */
.cs-core{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(5,150,105,.03)),linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.82));border-color:rgba(16,185,129,.28)}
.cc-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.cc-ico{font-size:30px;flex:none}
.cc-head b{display:block;font-size:15px;color:#065f46;font-weight:800;letter-spacing:-0.01em;margin-bottom:3px}
.cc-head span{font-size:13px;color:#047857;line-height:1.5}
.cc-steps{list-style:decimal;padding-left:22px;margin:0 0 10px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.cc-steps li::marker{color:#059669;font-weight:800}
.cc-steps a{color:var(--blue);font-weight:700}
.cc-note{font-size:12.5px;color:var(--muted);padding-top:10px;border-top:1px solid rgba(16,185,129,.18);margin:0}
.cc-note b{color:var(--ink);font-weight:800}

.cs-xhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.cs-xhead h3{margin:0}
.cs-xhead a{font-size:13px;font-weight:700;color:var(--blue);text-decoration:none}
.cs-xhead a:hover{color:var(--orange)}
.cs-guides{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.cs-guides a{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.06);text-decoration:none;color:var(--ink);transition:all .15s}
.cs-guides a:hover{border-color:var(--blue);background:rgba(26,61,176,.04)}
.gi-ico{font-size:20px}
.cs-guides b{font-size:13.5px;color:var(--ink);font-weight:700;letter-spacing:-0.005em;line-height:1.35;display:block}
.cs-guides span:not(.gi-ico){display:block;font-size:12px;color:var(--muted);margin-top:2px;grid-column:2}

/* Footer pair */
.cs-footer{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.cs-footer{grid-template-columns:1fr}}
.cs-share,.cs-continue{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:22px 24px;flex-wrap:wrap}
.cs-share h3,.cs-continue h3{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin:0 0 4px}
.cs-share p,.cs-continue p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.5}
.cs-share-cta,.cs-continue-cta{flex:none;padding:11px 20px;border-radius:11px;font-size:13.5px;font-weight:800;text-decoration:none;letter-spacing:.01em;transition:all .2s}
.cs-share-cta{background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;box-shadow:0 8px 18px -6px rgba(255,122,26,.5)}
.cs-share-cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(255,122,26,.6)}
.cs-continue-cta{background:#fff;border:1px solid var(--line);color:var(--ink)}
.cs-continue-cta:hover{border-color:var(--blue);color:var(--blue)}

@media(max-width:720px){
  .cs-hero{grid-template-columns:1fr;text-align:center}
  .cs-check{margin:0 auto}
  .cs-orderbar{grid-template-columns:1fr;text-align:left}
  .cs-hero h1{font-size:28px}
  .cs-items li{grid-template-columns:48px 1fr;gap:12px}
  .ci-qp{grid-column:1/3;flex-direction:row;justify-content:space-between;padding-top:6px;border-top:1px solid var(--line-soft)}
}


/* ===== mockup-login.html ===== */
/* ════════ SHARED CONTENT-PAGE LAYOUT ════════ */
.page-hero{padding:48px 0 32px;position:relative}
.page-hero .kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.06));
  border:1px solid rgba(26,61,176,.18);
  font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin-bottom:18px;
}
.page-hero .kicker .dot{width:7px;height:7px;background:var(--orange);border-radius:50%}
.page-hero h1{
  font-size:56px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;line-height:1.02;margin:0 0 14px;
}
.page-hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.page-hero .lead{font-size:19px;color:var(--muted);margin:0;max-width:720px;line-height:1.55}
.page-body{padding:24px 0 80px}

/* Glass content panel */
.glass-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:36px 40px;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
  margin-bottom:22px;
}
.glass-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px 200px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(460px 200px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.glass-panel > *{position:relative;z-index:1}

.glass-panel h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 16px;
}
.glass-panel h2 em{color:var(--blue);font-style:normal}
.glass-panel h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.015em;margin:24px 0 10px}
.glass-panel h3:first-child{margin-top:0}
.glass-panel p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.glass-panel p:last-child{margin-bottom:0}
.glass-panel ul, .glass-panel ol{font-size:15px;color:var(--ink-2);line-height:1.8;padding-left:22px;margin:0 0 16px}
.glass-panel ul li::marker{color:var(--blue)}
.glass-panel a{color:var(--blue);font-weight:600}
.glass-panel a:hover{text-decoration:underline}
.glass-panel b, .glass-panel strong{color:var(--ink);font-weight:700}

/* Two-col grid inside panels */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.split-2{grid-template-columns:1fr}}

/* Heads-up notice */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(255,122,26,.08));
  border:1px solid rgba(255,122,26,.25);
  margin:18px 0;
}
.notice svg{flex:none;color:var(--orange);margin-top:2px}
.notice strong{color:var(--ink);font-weight:800}

/* Responsive */
@media(max-width:768px){
  .page-hero{padding:28px 0 24px}
  .page-hero h1{font-size:38px}
  .page-hero .lead{font-size:16px}
  .glass-panel{padding:24px 22px;border-radius:16px}
  .glass-panel h2{font-size:22px}
}

/* ════════ SHOP BY MAKE — FILTER BAR ════════ */
.sbm-filterbar{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 34px -22px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04);
  margin-bottom:20px;position:sticky;top:12px;z-index:40;backdrop-filter:blur(20px);
}
.sbm-filterbar .search-icon{width:18px;height:18px;color:var(--muted);flex:none}
.sbm-filterbar input{
  flex:1;min-width:200px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);outline:none;
}
.sbm-filterbar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}
.sbm-count{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ════════ ALPHA NAV ════════ */
.alpha-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.alpha-btn{
  min-width:28px;height:28px;padding:0 7px;border:1px solid rgba(26,61,176,.15);
  border-radius:8px;background:rgba(26,61,176,.04);color:var(--blue);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .16s;
}
.alpha-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ════════ MAKE GRID ════════ */
.makes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.make-tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;
  min-height:92px;padding:16px 18px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background .18s;
  box-shadow:0 3px 8px rgba(10,20,36,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.make-tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 90px at 100% 100%,rgba(255,122,26,.07),transparent 65%);
  opacity:0;transition:opacity .25s;
}
.make-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 14px 32px -10px rgba(26,61,176,.28);background:#fff}
.make-tile:hover::before{opacity:1}
.make-tile .make-name{font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.15}
.make-tile .make-count{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0}
.make-tile .make-arrow{
  position:absolute;right:16px;bottom:14px;color:var(--muted);font-weight:700;font-size:16px;
  transition:all .2s ease;
}
.make-tile:hover .make-arrow{color:var(--orange);transform:translateX(4px)}
.make-tile.hidden{display:none}

/* ════════ DETAIL VIEW ════════ */
.make-detail{
  padding:30px 36px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 52px -22px rgba(26,61,176,.18),0 0 0 1px rgba(26,61,176,.04);
  position:relative;overflow:hidden;
}
.make-detail::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px 220px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(520px 220px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.make-detail > *{position:relative;z-index:1}

.detail-head{margin-bottom:22px}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px 0 10px;border:1px solid rgba(26,61,176,.2);
  border-radius:10px;background:rgba(26,61,176,.05);color:var(--blue);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  margin-bottom:14px;transition:all .18s;
}
.back-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.detail-head h2{
  font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.05;margin:0 0 8px;
}
.detail-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.detail-head p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}
.detail-head p b{color:var(--ink)}

.detail-models{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;
}
.model-link{
  display:block;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  transition:all .16s;
}
.model-link:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(26,61,176,.4)}

@media(max-width:768px){
  .makes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .make-detail{padding:24px 22px;border-radius:16px}
  .detail-head h2{font-size:26px}
  .detail-models{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .sbm-filterbar{padding:12px 14px;gap:10px}
}

/* ════════ AUTH (login/create/forgot) ════════ */
.auth-wrap{padding:48px 0 80px;position:relative}
.auth-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
.auth-card,.auth-side{padding:38px 40px 34px;border-radius:22px;display:flex;flex-direction:column}
.auth-head{margin-bottom:28px}
.auth-head h1{
  font-size:42px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;line-height:1.05;margin:0 0 10px;
}
.auth-head h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-head p{font-size:15.5px;color:var(--muted);margin:0;line-height:1.55;max-width:440px}

.auth-form{display:flex;flex-direction:column;gap:14px}
.af-label{display:flex;flex-direction:column;gap:6px}
.af-l{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.af-l em{color:#dc2626;font-style:normal;margin-right:4px}
.af-label input{
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:15.5px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.af-label input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}

.af-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:2px}
.af-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;font-weight:500}
.af-check input{width:16px;height:16px;accent-color:var(--blue)}
.af-forgot{font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;transition:color .15s}
.af-forgot:hover{color:var(--orange);text-decoration:underline}

.af-submit{
  margin-top:10px;height:54px;padding:0 24px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;
  font:inherit;font-size:15.5px;font-weight:800;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 28px -8px rgba(26,61,176,.45),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.af-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(26,61,176,.55)}

.auth-divider{
  display:flex;align-items:center;gap:14px;margin:22px 0 16px;
  color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.auth-sso{display:flex;flex-direction:column;gap:10px}
.sso-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 20px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:all .15s ease;
}
.sso-btn:hover{border-color:var(--blue);background:rgba(26,61,176,.03);box-shadow:0 6px 14px -4px rgba(26,61,176,.15)}

/* Right-column side panel */
.auth-side{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)),
    radial-gradient(520px 260px at 100% 0%,rgba(26,61,176,.08),transparent 65%),
    radial-gradient(520px 260px at 0% 100%,rgba(255,122,26,.06),transparent 65%);
  backdrop-filter:blur(22px);
}
.auth-side-head .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:980px;
  background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,92,51,.08));
  border:1px solid rgba(255,122,26,.3);
  font-size:11.5px;font-weight:800;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.auth-side h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 10px;
}
.auth-side h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-side p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

.auth-perks{list-style:none;padding:0;margin:24px 0 22px;display:flex;flex-direction:column;gap:12px}
.auth-perks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.auth-perks .check{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.1));
  border:1px solid rgba(16,185,129,.3);color:#059669;font-weight:900;font-size:13px;
  display:grid;place-items:center;
}
.auth-perks li div{display:flex;flex-direction:column;gap:1px}
.auth-perks li b{color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-0.01em}
.auth-perks li span{color:var(--muted);font-size:13.5px}

.auth-side-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--ink),#1e2a50);color:#fff;
  font:inherit;font-size:14.5px;font-weight:800;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(10,20,36,.45);
  transition:transform .2s,box-shadow .2s;
}
.auth-side-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(10,20,36,.55)}

@media(max-width:880px){
  .auth-grid{grid-template-columns:1fr;gap:20px}
  .auth-card,.auth-side{padding:30px 26px 28px}
  .auth-head h1{font-size:34px}
  .auth-side h2{font-size:24px}
}


/* ===== mockup-create-account.html ===== */
/* ════════ SHARED CONTENT-PAGE LAYOUT ════════ */
.page-hero{padding:48px 0 32px;position:relative}
.page-hero .kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.06));
  border:1px solid rgba(26,61,176,.18);
  font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin-bottom:18px;
}
.page-hero .kicker .dot{width:7px;height:7px;background:var(--orange);border-radius:50%}
.page-hero h1{
  font-size:56px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;line-height:1.02;margin:0 0 14px;
}
.page-hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.page-hero .lead{font-size:19px;color:var(--muted);margin:0;max-width:720px;line-height:1.55}
.page-body{padding:24px 0 80px}

/* Glass content panel */
.glass-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:36px 40px;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
  margin-bottom:22px;
}
.glass-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px 200px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(460px 200px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.glass-panel > *{position:relative;z-index:1}

.glass-panel h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 16px;
}
.glass-panel h2 em{color:var(--blue);font-style:normal}
.glass-panel h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.015em;margin:24px 0 10px}
.glass-panel h3:first-child{margin-top:0}
.glass-panel p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.glass-panel p:last-child{margin-bottom:0}
.glass-panel ul, .glass-panel ol{font-size:15px;color:var(--ink-2);line-height:1.8;padding-left:22px;margin:0 0 16px}
.glass-panel ul li::marker{color:var(--blue)}
.glass-panel a{color:var(--blue);font-weight:600}
.glass-panel a:hover{text-decoration:underline}
.glass-panel b, .glass-panel strong{color:var(--ink);font-weight:700}

/* Two-col grid inside panels */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.split-2{grid-template-columns:1fr}}

/* Heads-up notice */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(255,122,26,.08));
  border:1px solid rgba(255,122,26,.25);
  margin:18px 0;
}
.notice svg{flex:none;color:var(--orange);margin-top:2px}
.notice strong{color:var(--ink);font-weight:800}

/* Responsive */
@media(max-width:768px){
  .page-hero{padding:28px 0 24px}
  .page-hero h1{font-size:38px}
  .page-hero .lead{font-size:16px}
  .glass-panel{padding:24px 22px;border-radius:16px}
  .glass-panel h2{font-size:22px}
}

/* ════════ SHOP BY MAKE — FILTER BAR ════════ */
.sbm-filterbar{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 34px -22px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04);
  margin-bottom:20px;position:sticky;top:12px;z-index:40;backdrop-filter:blur(20px);
}
.sbm-filterbar .search-icon{width:18px;height:18px;color:var(--muted);flex:none}
.sbm-filterbar input{
  flex:1;min-width:200px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);outline:none;
}
.sbm-filterbar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}
.sbm-count{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ════════ ALPHA NAV ════════ */
.alpha-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.alpha-btn{
  min-width:28px;height:28px;padding:0 7px;border:1px solid rgba(26,61,176,.15);
  border-radius:8px;background:rgba(26,61,176,.04);color:var(--blue);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .16s;
}
.alpha-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ════════ MAKE GRID ════════ */
.makes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.make-tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;
  min-height:92px;padding:16px 18px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background .18s;
  box-shadow:0 3px 8px rgba(10,20,36,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.make-tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 90px at 100% 100%,rgba(255,122,26,.07),transparent 65%);
  opacity:0;transition:opacity .25s;
}
.make-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 14px 32px -10px rgba(26,61,176,.28);background:#fff}
.make-tile:hover::before{opacity:1}
.make-tile .make-name{font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.15}
.make-tile .make-count{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0}
.make-tile .make-arrow{
  position:absolute;right:16px;bottom:14px;color:var(--muted);font-weight:700;font-size:16px;
  transition:all .2s ease;
}
.make-tile:hover .make-arrow{color:var(--orange);transform:translateX(4px)}
.make-tile.hidden{display:none}

/* ════════ DETAIL VIEW ════════ */
.make-detail{
  padding:30px 36px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 52px -22px rgba(26,61,176,.18),0 0 0 1px rgba(26,61,176,.04);
  position:relative;overflow:hidden;
}
.make-detail::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px 220px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(520px 220px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.make-detail > *{position:relative;z-index:1}

.detail-head{margin-bottom:22px}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px 0 10px;border:1px solid rgba(26,61,176,.2);
  border-radius:10px;background:rgba(26,61,176,.05);color:var(--blue);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  margin-bottom:14px;transition:all .18s;
}
.back-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.detail-head h2{
  font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.05;margin:0 0 8px;
}
.detail-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.detail-head p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}
.detail-head p b{color:var(--ink)}

.detail-models{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;
}
.model-link{
  display:block;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  transition:all .16s;
}
.model-link:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(26,61,176,.4)}

@media(max-width:768px){
  .makes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .make-detail{padding:24px 22px;border-radius:16px}
  .detail-head h2{font-size:26px}
  .detail-models{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .sbm-filterbar{padding:12px 14px;gap:10px}
}

/* ════════ AUTH (login/create/forgot) ════════ */
.auth-wrap{padding:48px 0 80px;position:relative}
.auth-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
.auth-card,.auth-side{padding:38px 40px 34px;border-radius:22px;display:flex;flex-direction:column}
.auth-head{margin-bottom:28px}
.auth-head h1{
  font-size:42px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;line-height:1.05;margin:0 0 10px;
}
.auth-head h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-head p{font-size:15.5px;color:var(--muted);margin:0;line-height:1.55;max-width:440px}

.auth-form{display:flex;flex-direction:column;gap:14px}
.af-label{display:flex;flex-direction:column;gap:6px}
.af-l{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.af-l em{color:#dc2626;font-style:normal;margin-right:4px}
.af-label input{
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:15.5px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.af-label input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}

.af-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:2px}
.af-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;font-weight:500}
.af-check input{width:16px;height:16px;accent-color:var(--blue)}
.af-forgot{font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;transition:color .15s}
.af-forgot:hover{color:var(--orange);text-decoration:underline}

.af-submit{
  margin-top:10px;height:54px;padding:0 24px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;
  font:inherit;font-size:15.5px;font-weight:800;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 28px -8px rgba(26,61,176,.45),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.af-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(26,61,176,.55)}

.auth-divider{
  display:flex;align-items:center;gap:14px;margin:22px 0 16px;
  color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.auth-sso{display:flex;flex-direction:column;gap:10px}
.sso-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 20px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:all .15s ease;
}
.sso-btn:hover{border-color:var(--blue);background:rgba(26,61,176,.03);box-shadow:0 6px 14px -4px rgba(26,61,176,.15)}

/* Right-column side panel */
.auth-side{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)),
    radial-gradient(520px 260px at 100% 0%,rgba(26,61,176,.08),transparent 65%),
    radial-gradient(520px 260px at 0% 100%,rgba(255,122,26,.06),transparent 65%);
  backdrop-filter:blur(22px);
}
.auth-side-head .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:980px;
  background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,92,51,.08));
  border:1px solid rgba(255,122,26,.3);
  font-size:11.5px;font-weight:800;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.auth-side h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 10px;
}
.auth-side h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-side p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

.auth-perks{list-style:none;padding:0;margin:24px 0 22px;display:flex;flex-direction:column;gap:12px}
.auth-perks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.auth-perks .check{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.1));
  border:1px solid rgba(16,185,129,.3);color:#059669;font-weight:900;font-size:13px;
  display:grid;place-items:center;
}
.auth-perks li div{display:flex;flex-direction:column;gap:1px}
.auth-perks li b{color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-0.01em}
.auth-perks li span{color:var(--muted);font-size:13.5px}

.auth-side-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--ink),#1e2a50);color:#fff;
  font:inherit;font-size:14.5px;font-weight:800;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(10,20,36,.45);
  transition:transform .2s,box-shadow .2s;
}
.auth-side-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(10,20,36,.55)}

@media(max-width:880px){
  .auth-grid{grid-template-columns:1fr;gap:20px}
  .auth-card,.auth-side{padding:30px 26px 28px}
  .auth-head h1{font-size:34px}
  .auth-side h2{font-size:24px}
}


/* Create-account extras */
.af-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.af-grid-2{grid-template-columns:1fr}}
.af-check-wide{font-size:13.5px;line-height:1.55;color:var(--ink-2);align-items:flex-start;gap:10px;margin-top:2px}
.af-check-wide input{margin-top:3px}
.af-check-wide a{color:var(--blue);font-weight:700;text-decoration:underline}
.pw-meter{display:flex;align-items:center;gap:12px;margin-top:-4px}
.pw-bar{flex:1;height:5px;border-radius:999px;background:rgba(26,61,176,.1);overflow:hidden}
.pw-fill{height:100%;background:linear-gradient(90deg,#fbbf24,#10b981);border-radius:999px;transition:width .3s ease}
.pw-label{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.pw-label b{color:#059669;font-weight:800;margin-right:4px}
.sso-alt{background:transparent !important;border:1px dashed var(--line) !important}

.auth-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.at-tile{
  padding:14px 16px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.5));
  border:1px solid rgba(26,61,176,.1);text-align:center;
}
.at-tile b{display:block;font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-0.02em}
.at-tile span{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:3px;letter-spacing:.01em}


/* ===== mockup-forgot-password.html ===== */
/* ════════ SHARED CONTENT-PAGE LAYOUT ════════ */
.page-hero{padding:48px 0 32px;position:relative}
.page-hero .kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.06));
  border:1px solid rgba(26,61,176,.18);
  font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin-bottom:18px;
}
.page-hero .kicker .dot{width:7px;height:7px;background:var(--orange);border-radius:50%}
.page-hero h1{
  font-size:56px;font-weight:800;color:var(--ink);letter-spacing:-0.04em;line-height:1.02;margin:0 0 14px;
}
.page-hero h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.page-hero .lead{font-size:19px;color:var(--muted);margin:0;max-width:720px;line-height:1.55}
.page-body{padding:24px 0 80px}

/* Glass content panel */
.glass-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:36px 40px;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
  margin-bottom:22px;
}
.glass-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px 200px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(460px 200px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.glass-panel > *{position:relative;z-index:1}

.glass-panel h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 16px;
}
.glass-panel h2 em{color:var(--blue);font-style:normal}
.glass-panel h3{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.015em;margin:24px 0 10px}
.glass-panel h3:first-child{margin-top:0}
.glass-panel p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.glass-panel p:last-child{margin-bottom:0}
.glass-panel ul, .glass-panel ol{font-size:15px;color:var(--ink-2);line-height:1.8;padding-left:22px;margin:0 0 16px}
.glass-panel ul li::marker{color:var(--blue)}
.glass-panel a{color:var(--blue);font-weight:600}
.glass-panel a:hover{text-decoration:underline}
.glass-panel b, .glass-panel strong{color:var(--ink);font-weight:700}

/* Two-col grid inside panels */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.split-2{grid-template-columns:1fr}}

/* Heads-up notice */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(255,122,26,.08));
  border:1px solid rgba(255,122,26,.25);
  margin:18px 0;
}
.notice svg{flex:none;color:var(--orange);margin-top:2px}
.notice strong{color:var(--ink);font-weight:800}

/* Responsive */
@media(max-width:768px){
  .page-hero{padding:28px 0 24px}
  .page-hero h1{font-size:38px}
  .page-hero .lead{font-size:16px}
  .glass-panel{padding:24px 22px;border-radius:16px}
  .glass-panel h2{font-size:22px}
}

/* ════════ SHOP BY MAKE — FILTER BAR ════════ */
.sbm-filterbar{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:16px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 34px -22px rgba(26,61,176,.15),0 0 0 1px rgba(26,61,176,.04);
  margin-bottom:20px;position:sticky;top:12px;z-index:40;backdrop-filter:blur(20px);
}
.sbm-filterbar .search-icon{width:18px;height:18px;color:var(--muted);flex:none}
.sbm-filterbar input{
  flex:1;min-width:200px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);outline:none;
}
.sbm-filterbar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}
.sbm-count{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ════════ ALPHA NAV ════════ */
.alpha-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.alpha-btn{
  min-width:28px;height:28px;padding:0 7px;border:1px solid rgba(26,61,176,.15);
  border-radius:8px;background:rgba(26,61,176,.04);color:var(--blue);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .16s;
}
.alpha-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ════════ MAKE GRID ════════ */
.makes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;
}
.make-tile{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;
  min-height:92px;padding:16px 18px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-align:left;cursor:pointer;font:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s,background .18s;
  box-shadow:0 3px 8px rgba(10,20,36,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.make-tile::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 90px at 100% 100%,rgba(255,122,26,.07),transparent 65%);
  opacity:0;transition:opacity .25s;
}
.make-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 14px 32px -10px rgba(26,61,176,.28);background:#fff}
.make-tile:hover::before{opacity:1}
.make-tile .make-name{font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.15}
.make-tile .make-count{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0}
.make-tile .make-arrow{
  position:absolute;right:16px;bottom:14px;color:var(--muted);font-weight:700;font-size:16px;
  transition:all .2s ease;
}
.make-tile:hover .make-arrow{color:var(--orange);transform:translateX(4px)}
.make-tile.hidden{display:none}

/* ════════ DETAIL VIEW ════════ */
.make-detail{
  padding:30px 36px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 22px 52px -22px rgba(26,61,176,.18),0 0 0 1px rgba(26,61,176,.04);
  position:relative;overflow:hidden;
}
.make-detail::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px 220px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(520px 220px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.make-detail > *{position:relative;z-index:1}

.detail-head{margin-bottom:22px}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px 0 10px;border:1px solid rgba(26,61,176,.2);
  border-radius:10px;background:rgba(26,61,176,.05);color:var(--blue);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  margin-bottom:14px;transition:all .18s;
}
.back-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.detail-head h2{
  font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-0.03em;line-height:1.05;margin:0 0 8px;
}
.detail-head h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:0.14em;margin-right:-0.08em;
}
.detail-head p{font-size:15px;color:var(--muted);margin:0;line-height:1.55}
.detail-head p b{color:var(--ink)}

.detail-models{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;
}
.model-link{
  display:block;padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.6);border:1px solid rgba(26,61,176,.1);
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  transition:all .16s;
}
.model-link:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(26,61,176,.4)}

@media(max-width:768px){
  .makes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .make-detail{padding:24px 22px;border-radius:16px}
  .detail-head h2{font-size:26px}
  .detail-models{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .sbm-filterbar{padding:12px 14px;gap:10px}
}

/* ════════ AUTH (login/create/forgot) ════════ */
.auth-wrap{padding:48px 0 80px;position:relative}
.auth-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
.auth-card,.auth-side{padding:38px 40px 34px;border-radius:22px;display:flex;flex-direction:column}
.auth-head{margin-bottom:28px}
.auth-head h1{
  font-size:42px;font-weight:800;color:var(--ink);letter-spacing:-0.035em;line-height:1.05;margin:0 0 10px;
}
.auth-head h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-head p{font-size:15.5px;color:var(--muted);margin:0;line-height:1.55;max-width:440px}

.auth-form{display:flex;flex-direction:column;gap:14px}
.af-label{display:flex;flex-direction:column;gap:6px}
.af-l{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.af-l em{color:#dc2626;font-style:normal;margin-right:4px}
.af-label input{
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:15.5px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.af-label input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.1)}

.af-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:2px}
.af-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;font-weight:500}
.af-check input{width:16px;height:16px;accent-color:var(--blue)}
.af-forgot{font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;transition:color .15s}
.af-forgot:hover{color:var(--orange);text-decoration:underline}

.af-submit{
  margin-top:10px;height:54px;padding:0 24px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;
  font:inherit;font-size:15.5px;font-weight:800;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 12px 28px -8px rgba(26,61,176,.45),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.af-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(26,61,176,.55)}

.auth-divider{
  display:flex;align-items:center;gap:14px;margin:22px 0 16px;
  color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.auth-sso{display:flex;flex-direction:column;gap:10px}
.sso-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 20px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:all .15s ease;
}
.sso-btn:hover{border-color:var(--blue);background:rgba(26,61,176,.03);box-shadow:0 6px 14px -4px rgba(26,61,176,.15)}

/* Right-column side panel */
.auth-side{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)),
    radial-gradient(520px 260px at 100% 0%,rgba(26,61,176,.08),transparent 65%),
    radial-gradient(520px 260px at 0% 100%,rgba(255,122,26,.06),transparent 65%);
  backdrop-filter:blur(22px);
}
.auth-side-head .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:980px;
  background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,92,51,.08));
  border:1px solid rgba(255,122,26,.3);
  font-size:11.5px;font-weight:800;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.auth-side h2{
  font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:0 0 10px;
}
.auth-side h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--blue),var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.06em;
}
.auth-side p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

.auth-perks{list-style:none;padding:0;margin:24px 0 22px;display:flex;flex-direction:column;gap:12px}
.auth-perks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.auth-perks .check{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.1));
  border:1px solid rgba(16,185,129,.3);color:#059669;font-weight:900;font-size:13px;
  display:grid;place-items:center;
}
.auth-perks li div{display:flex;flex-direction:column;gap:1px}
.auth-perks li b{color:var(--ink);font-weight:800;font-size:15px;letter-spacing:-0.01em}
.auth-perks li span{color:var(--muted);font-size:13.5px}

.auth-side-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--ink),#1e2a50);color:#fff;
  font:inherit;font-size:14.5px;font-weight:800;letter-spacing:.01em;text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(10,20,36,.45);
  transition:transform .2s,box-shadow .2s;
}
.auth-side-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(10,20,36,.55)}

@media(max-width:880px){
  .auth-grid{grid-template-columns:1fr;gap:20px}
  .auth-card,.auth-side{padding:30px 26px 28px}
  .auth-head h1{font-size:34px}
  .auth-side h2{font-size:24px}
}


/* Forgot-password overrides */
.auth-grid-single{grid-template-columns:1fr;max-width:560px;margin:0 auto}
.auth-centered{padding:44px 42px 38px}
.kicker-orange{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:980px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(255,122,26,.14),rgba(255,92,51,.08));
  border:1px solid rgba(255,122,26,.3);
  font-size:11.5px;font-weight:800;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;
}
.reset-sent{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px 18px;border-radius:14px;margin-top:10px;
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(5,150,105,.05));
  border:1px solid rgba(16,185,129,.3);
}
.reset-sent svg{flex:none;margin-top:2px}
.reset-sent b{color:var(--ink);font-weight:800;font-size:15px;display:block;margin-bottom:3px}
.reset-sent span{color:var(--ink-2);font-size:14px;line-height:1.55}
.reset-sent u{color:var(--blue);font-weight:700;text-decoration:underline}
.sso-alt{background:transparent !important;border:1px dashed var(--line) !important}


/* ───────── GLOBAL MOBILE OVERFLOW GUARDS (v5) ───────── */
/* Grid items default to min-width:auto; long text/images push columns past viewport.
   Force min-width:0 + max-width:100% on hero/grid children so they honor their cells. */
.hero-grid > *,
.product-gallery,
.product-gallery-container,
.product-info,
.product-info-panel{min-width:0 !important;max-width:100% !important;box-sizing:border-box !important}
.product-gallery img,
.product-gallery-container img{max-width:100% !important;height:auto !important}
.product-title,
.product-info h1,
.hero h1,
.hl-title,
.ps-title{word-break:break-word;overflow-wrap:anywhere;max-width:100%}
.glass-panel,
.expert-card,
.wrenchy-band,
.price-card,
.summary,
.notes{min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
@media (max-width:640px){
  .hero-grid,.why-cards,.review-grid,.video-grid,.specs-grid,.ic-grid,.policies,.foot-grid,
  .price-card-grid,.at-glance-grid{grid-template-columns:1fr !important}
  .product-gallery,.product-info,.glass-panel,.expert-card,.wrenchy-band{width:100% !important}
  .product-title,.hl-title,.ps-title,.hero h1,h1{font-size:clamp(22px,6vw,30px) !important;line-height:1.15 !important}
  .notice-card,.looking-for{word-break:break-word;overflow-wrap:anywhere}
  html,body{overflow-x:hidden !important;max-width:100vw !important}
}

/* ══════════════════════════════════════════════════════════════════════
   GARAGE HUB (/garage/) — glass / next-gen v2 theme
   Overrides the earlier flat .kb-hero + plain .kb-card styles so the
   hub matches the aesthetic of home, cart, and v12-hyperspace.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Hero: glass panel with aurora accents ─── */
.kb-page{max-width:1280px !important;margin:0 auto !important;padding:0 32px 64px !important}

/* "Garage" gets the blue→orange gradient treatment used on other v2 h1s
   (testimonials, about-hero, etc.). `.kb-hero h1` is dark ink on the pale
   glass card, so the gradient on the <em> word reads cleanly. */
.kb-hero h1 em{
  font-style:normal !important;
  background:linear-gradient(100deg, var(--blue, #1d4ed8) 0%, var(--orange, #f97316) 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  display:inline-block !important;
  padding-right:0.05em !important;margin-right:-0.02em !important;
  vertical-align:baseline !important;
}
.kb-hero{
  position:relative !important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)) !important;
  -webkit-backdrop-filter:blur(20px) !important;backdrop-filter:blur(20px) !important;
  border:1px solid rgba(148,163,184,.2) !important;
  border-radius:24px !important;
  padding:56px 40px 48px !important;
  margin:0 0 40px !important;
  box-shadow:
    0 40px 80px -30px rgba(26,61,176,.15),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  /* overflow:visible so the TomSelect dropdowns can drop below the hero
     without being clipped. The aurora accents are masked by the .kb-hero-glow
     wrapper (::before / ::after on .kb-hero-inner instead). */
  overflow:visible !important;
}
/* .kb-hero-inner must NOT create a stacking context — giving it z-index:1
   traps the .ts-dropdown (z:300) inside and lets the later .kb-grid-section
   (also z:1, positioned later in source order) paint on top of it.
   z-index:auto keeps children's z values visible at body level. */
.kb-hero-inner{position:relative !important;z-index:auto !important;overflow:visible !important}
/* Aurora accents — positioned so they stay WITHIN the hero box (no bleed
   past top/left into the site header). The hero uses overflow:visible only
   so the filter dropdowns can escape downward; these pseudos are self-
   constrained to the hero rectangle via insets >= 0. */
.kb-hero::before{
  content:"" !important;position:absolute !important;
  top:30% !important;bottom:0 !important;right:0 !important;left:auto !important;
  width:55% !important;
  background:radial-gradient(circle at 70% 70%,rgba(255,122,26,.1),transparent 60%) !important;
  pointer-events:none !important;z-index:0 !important;
  border-radius:inherit !important;
}
.kb-hero::after{
  content:"" !important;position:absolute !important;
  top:0 !important;left:0 !important;bottom:30% !important;right:auto !important;
  width:55% !important;
  background:radial-gradient(circle at 30% 30%,rgba(29,78,216,.12),transparent 60%) !important;
  pointer-events:none !important;z-index:0 !important;
  border-radius:inherit !important;
}
.kb-hero-inner{position:relative !important;z-index:auto !important}
.kb-hero-title-row{
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:22px !important;margin-bottom:30px !important;text-align:center !important;
}
.kb-hero-title-row > div{text-align:left}
.kb-hero-wrenchy{
  width:90px;height:90px;flex:none;
  filter:drop-shadow(0 8px 20px rgba(29,78,216,.2));
}
.kb-hero h1{
  font-size:clamp(36px,5vw,56px) !important;font-weight:800 !important;
  letter-spacing:-0.035em !important;line-height:1.02 !important;
  color:var(--ink,#0d1424) !important;margin:0 0 6px 0 !important;
}
.kb-hero p{
  font-size:clamp(15px,1.4vw,18px) !important;color:var(--muted,#6b7797) !important;
  margin:0 !important;line-height:1.5 !important;font-weight:500 !important;
  /* Keep description on one line at desktop; wraps naturally on narrow viewports. */
  white-space:nowrap !important;
}
@media (max-width:880px){
  .kb-hero p{white-space:normal !important}
}

/* ─── Search bar + filters: glass pills ─── */
.kb-search-form{position:relative;z-index:auto;max-width:760px;margin:0 auto}
.kb-search-wrap{
  display:flex !important;align-items:center !important;gap:10px !important;
  background:rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(148,163,184,.3) !important;
  border-radius:14px !important;
  padding:6px 6px 6px 16px !important;
  box-shadow:0 8px 24px -10px rgba(15,23,42,.12) !important;
  transition:border-color .2s,box-shadow .2s !important;
}
.kb-search-wrap:focus-within{
  border-color:rgba(29,78,216,.5) !important;
  box-shadow:0 12px 30px -8px rgba(29,78,216,.2),0 0 0 3px rgba(29,78,216,.12) !important;
}
/* Override the inline part-guide-viewer.php rule that absolutely-positions the svg
   and the search-btn (legacy blue theme). Flex layout handles both now. */
.kb-search-wrap svg{
  position:static !important;transform:none !important;left:auto !important;top:auto !important;
  color:var(--muted) !important;flex:none !important;
  width:18px !important;height:18px !important;
}
.kb-search-wrap .kb-search-btn{
  position:static !important;transform:none !important;right:auto !important;top:auto !important;
}
.kb-search-input{
  flex:1 !important;min-width:0 !important;border:0 !important;outline:0 !important;
  background:transparent !important;
  font-family:inherit !important;font-size:15px !important;font-weight:500 !important;
  color:var(--ink) !important;height:44px !important;padding:0 2px !important;margin-left:4px !important;
}
.kb-search-input::placeholder{color:var(--muted) !important;font-weight:400 !important}
.kb-search-btn{
  height:44px !important;padding:0 22px !important;border:0 !important;
  border-radius:10px !important;cursor:pointer !important;
  background:linear-gradient(135deg,var(--blue,#1d4ed8),#3b82f6) !important;
  color:#fff !important;font-family:inherit !important;
  font-size:14px !important;font-weight:700 !important;letter-spacing:.01em !important;
  box-shadow:0 8px 20px -8px rgba(29,78,216,.5) !important;
  transition:transform .15s,box-shadow .15s !important;
}
.kb-search-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(29,78,216,.6) !important}

.kb-filters{
  display:grid !important;grid-template-columns:repeat(3,1fr) !important;
  gap:10px !important;margin-top:14px !important;
}
@media (max-width:720px){.kb-filters{grid-template-columns:1fr !important}}

/* ─── TomSelect dropdowns — styled to match the Browse-by-Vehicle combo
   (mockup-ymm-combo.css: .combo-btn / .combo-panel / .combo-opt). ─── */

/* Stacking: let dropdowns sit above the guide-card grid */
.kb-filters .ts-wrapper{position:relative !important;z-index:50 !important}
.kb-filters .ts-wrapper.dropdown-active,
.kb-filters .ts-wrapper.focus{z-index:200 !important}

/* The "button" face of the select (mirrors .combo-btn) */
.kb-filters .ts-wrapper > .ts-control,
.kb-filters select{
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;
  padding:10px 14px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(248,250,253,.7)) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(10,20,36,.1) !important;
  min-height:44px !important;height:auto !important;
  font-family:inherit !important;font-size:15px !important;font-weight:600 !important;
  color:var(--ink,#0d1424) !important;
  cursor:pointer !important;text-align:left !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(10,20,36,.04) !important;
  transition:border-color .15s cubic-bezier(.25,.9,.3,1),background .15s ease,box-shadow .15s ease !important;
}
.kb-filters .ts-wrapper > .ts-control:hover{
  border-color:rgba(29,78,216,.35) !important;
  background:linear-gradient(180deg,#fff,rgba(248,250,253,.88)) !important;
}
.kb-filters .ts-wrapper.focus > .ts-control,
.kb-filters .ts-wrapper.dropdown-active > .ts-control{
  border-color:var(--blue,#1d4ed8) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(29,78,216,.15),inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -6px rgba(29,78,216,.3) !important;
}

/* Typed text and selected-item display — dark ink on white */
.kb-filters .ts-wrapper > .ts-control > input,
.kb-filters .ts-wrapper > .ts-control .item{
  color:var(--ink,#0d1424) !important;
  font-weight:600 !important;
  font-size:15px !important;
  background:transparent !important;
}
.kb-filters .ts-wrapper > .ts-control > input::placeholder{
  color:var(--muted,#6b7797) !important;
  font-weight:500 !important;
  opacity:1 !important;
}

/* Dropdown panel — fully opaque white (no transparency) so options read
   clearly on any background. */
/* Match the dropdown whether it lives inside .kb-filters or is portal'd to
   body (via TomSelect's dropdownParent:'body' — used to escape stacking issues). */
.kb-filters .ts-dropdown,
body > .ts-dropdown,
[id$="-ts-dropdown"]{
  z-index:10000 !important;
  background:#ffffff !important;
  border:1px solid rgba(148,163,184,.3) !important;
  border-radius:14px !important;
  margin:0 !important;
  box-shadow:
    0 30px 60px -18px rgba(10,20,36,.3),
    0 0 0 1px rgba(26,61,176,.05),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  overflow:hidden !important;
  color:var(--ink,#0d1424) !important;
  animation:kbDropOpen .22s cubic-bezier(.25,.9,.3,1) !important;
}
@keyframes kbDropOpen{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Options (mirrors .combo-opt) — broadened selectors so styles apply whether
   the dropdown is rendered inside .kb-filters or portal'd to body. */
.kb-filters .ts-dropdown-content,
body > .ts-dropdown .ts-dropdown-content,
[id$="-ts-dropdown"] .ts-dropdown-content{
  /* Conservative default — JS overrides inline (with !important) on every
     dropdown_open, sizing to whatever the viewport allows below the control.
     A modest default avoids the too-tall flash on first-click before JS runs. */
  max-height:260px !important;
  padding:6px !important;overflow-y:auto !important;scrollbar-width:thin;
}
.ts-dropdown-content::-webkit-scrollbar{width:6px}
.ts-dropdown-content::-webkit-scrollbar-thumb{background:rgba(10,20,36,.2);border-radius:3px}

.kb-filters .ts-dropdown .option,
body > .ts-dropdown .option,
[id$="-ts-dropdown"] .option{
  display:block !important;
  padding:9px 12px !important;border-radius:8px !important;cursor:pointer !important;
  font-size:14px !important;font-weight:500 !important;color:var(--ink,#0d1424) !important;
  background:transparent !important;
  position:relative !important;
  transition:background .1s ease !important;
}
.kb-filters .ts-dropdown .option:hover,
.kb-filters .ts-dropdown .option.active,
body > .ts-dropdown .option:hover,
body > .ts-dropdown .option.active,
[id$="-ts-dropdown"] .option:hover,
[id$="-ts-dropdown"] .option.active{
  background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.04)) !important;
  color:var(--ink) !important;
}
.kb-filters .ts-dropdown .option.selected,
body > .ts-dropdown .option.selected,
[id$="-ts-dropdown"] .option.selected{
  background:linear-gradient(135deg,rgba(26,61,176,.14),rgba(26,61,176,.08)) !important;
  color:var(--blue,#1d4ed8) !important;font-weight:700 !important;
  padding-right:32px !important;
}
.kb-filters .ts-dropdown .option.selected::after,
body > .ts-dropdown .option.selected::after,
[id$="-ts-dropdown"] .option.selected::after{
  content:"✓" !important;color:var(--blue,#1d4ed8) !important;font-weight:800 !important;
  position:absolute !important;right:12px !important;top:50% !important;transform:translateY(-50%) !important;
}
.kb-filters .ts-dropdown .no-results,
body > .ts-dropdown .no-results,
[id$="-ts-dropdown"] .no-results{
  padding:14px !important;text-align:center !important;
  color:var(--muted,#6b7797) !important;font-style:normal !important;font-size:13px !important;
}
.kb-filters .ts-dropdown mark,
body > .ts-dropdown mark,
[id$="-ts-dropdown"] mark{background:rgba(255,196,0,.4) !important;color:inherit !important;padding:0 1px;border-radius:2px;font-weight:700}

/* Stacking — keep BOTH .kb-hero and .kb-grid-section at z:auto (no stacking
   contexts). This way the .ts-wrapper.focus z:200 bubbles up past hero to
   compete at .main level, beating anything in the later grid-section. If
   kb-grid-section had a z-index it'd create a context and paint above hero
   (including the dropdown trapped inside hero), which is exactly the bug
   we saw: clicking Make showed the dropdown but guide-card titles/pills
   painted on top of the option list. */
.kb-hero{position:relative !important;z-index:auto !important}
.kb-grid-section{position:relative !important;z-index:auto !important}
.kb-card{z-index:auto !important}
.kb-filter-clear{
  grid-column:1/-1;justify-self:center;
  font-size:13px !important;color:var(--muted) !important;
  text-decoration:none !important;margin-top:4px;
  padding:4px 10px;border-radius:6px;
}
.kb-filter-clear:hover{color:var(--blue) !important;background:rgba(29,78,216,.06)}

/* ─── Results meta: pill kicker ─── */
.kb-results-meta{
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  padding:6px 14px !important;border-radius:999px !important;
  background:rgba(29,78,216,.08) !important;
  border:1px solid rgba(29,78,216,.18) !important;
  color:var(--blue) !important;
  font-size:12.5px !important;font-weight:800 !important;
  letter-spacing:.08em !important;text-transform:uppercase !important;
  margin:0 0 22px 0 !important;
}

/* ─── Grid: responsive 3-up ─── */
.kb-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) !important;
  gap:18px !important;
  margin:0 !important;
}

/* ─── Guide cards: glass panel with hover lift ─── */
.kb-card{
  position:relative !important;
  /* Opaque gradient fill — no backdrop-filter on cards (expensive per-card blur
     was adding GPU cost + a perceptible paint delay on hover). */
  background:linear-gradient(180deg,#ffffff,#fafbfd) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  border-radius:18px !important;
  padding:22px 22px 16px !important;
  display:flex !important;flex-direction:column !important;
  gap:18px !important;
  text-decoration:none !important;color:inherit !important;
  box-shadow:
    0 12px 28px -18px rgba(26,61,176,.14),
    0 0 0 1px rgba(26,61,176,.03),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  /* Fast hover feedback — 140ms, no easing lag. `will-change` primes the
     compositor so the first hover doesn't miss a frame. */
  transition:transform .14s ease-out,
             box-shadow .14s ease-out,
             border-color .14s ease-out !important;
  /* NOTE: NO `will-change:transform` here — it promotes each card to its own
     compositor layer (creates a stacking context), which prevents the filter
     dropdowns above from painting over the cards. The hover transition is
     already fast enough without the pre-promote. */
  overflow:hidden !important;
}
.kb-card::before{
  content:"";position:absolute;inset:auto -20% -60% auto;
  width:55%;height:120%;
  background:radial-gradient(circle at center,rgba(29,78,216,.08),transparent 60%);
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.kb-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(29,78,216,.25) !important;
  box-shadow:
    0 24px 48px -20px rgba(26,61,176,.25),
    0 0 0 1px rgba(26,61,176,.08),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.kb-card:hover::before{opacity:1}

.kb-card-top{flex:1;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.kb-card-type{
  display:inline-flex !important;align-self:flex-start !important;
  padding:5px 12px !important;border-radius:999px !important;
  background:rgba(29,78,216,.08) !important;
  border:1px solid rgba(29,78,216,.18) !important;
  color:var(--blue,#1d4ed8) !important;
  font-size:11px !important;font-weight:800 !important;
  letter-spacing:.08em !important;text-transform:uppercase !important;
}
.kb-card h3{
  font-size:17px !important;font-weight:800 !important;
  letter-spacing:-0.015em !important;line-height:1.3 !important;
  color:var(--ink,#0d1424) !important;
  margin:0 !important;
}
.kb-card-vehicle{
  font-size:13px !important;color:var(--muted,#6b7797) !important;
  line-height:1.45;font-weight:500 !important;
  text-transform:uppercase;letter-spacing:.04em;
}

.kb-card-bottom{
  display:flex !important;align-items:center !important;
  gap:14px !important;flex-wrap:wrap !important;
  padding-top:14px !important;
  border-top:1px solid rgba(148,163,184,.15) !important;
  position:relative;z-index:1;
}
.kb-card-bottom .kb-stat{
  font-size:12.5px !important;color:var(--ink-2,#1e293b) !important;
  font-weight:600 !important;display:inline-flex;align-items:center;gap:6px;
}
.kb-stat-dots{display:inline-flex;gap:3px}
.kb-stat-dot{width:7px;height:7px;border-radius:50%;background:rgba(148,163,184,.3)}
.kb-stat-dot.on{background:#f59e0b}
.kb-stat-dot.warn{background:#f97316}
.kb-stat-dot.hard{background:#dc2626}

/* ─── Pagination ─── */
.kb-pagination{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:36px 0 0;flex-wrap:wrap;
}
.kb-page-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:10px;
  background:rgba(255,255,255,.8);
  color:var(--ink);font-size:13.5px;font-weight:700;
  text-decoration:none !important;
  transition:all .15s;
}
.kb-page-btn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.kb-page-btn.active{
  background:linear-gradient(135deg,var(--blue,#1d4ed8),#3b82f6);
  color:#fff;border-color:transparent;
  box-shadow:0 8px 18px -8px rgba(29,78,216,.5);
}
.kb-page-dots{color:var(--muted);padding:0 4px}

/* ─── Empty state ─── */
.kb-empty{
  text-align:center;padding:60px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  border:1px dashed rgba(148,163,184,.3);
  border-radius:18px;
}
.kb-empty h2{font-size:22px !important;font-weight:800 !important;margin:0 0 8px !important}
.kb-empty p{color:var(--muted) !important;margin:0 0 14px !important}

/* ─── Browse-prompt under pagination ─── */
.kb-browse-prompt{text-align:center;color:var(--muted);font-size:14px}
.kb-browse-prompt a{color:var(--blue);font-weight:700;text-decoration:none}

/* ─── Mobile tweaks ─── */
@media (max-width:640px){
  .kb-page{padding:24px 16px 48px !important}
  .kb-hero{padding:32px 22px 28px !important;border-radius:20px !important}
  .kb-hero-title-row{flex-direction:column !important;gap:14px !important;margin-bottom:22px !important}
  .kb-hero-title-row > div{text-align:center !important}
  .kb-hero-wrenchy{width:72px;height:72px}
  .kb-hero h1{font-size:clamp(28px,7vw,36px) !important}
  .kb-search-wrap{flex-wrap:wrap;padding:6px !important}
  .kb-search-input{width:100%;padding-left:8px !important;order:1}
  .kb-search-btn{width:100%;order:2}
  .kb-grid{grid-template-columns:1fr !important}
}

/* Loading state on contingent TomSelect dropdowns (Model / Part Type while
   the server fetches options for the newly-selected Make). Adds a spinner
   to the control-face right side and a muted placeholder color. */
.kb-filters .ts-control.ts-loading{
  position:relative !important;
  opacity:.85 !important;
  cursor:progress !important;
}
.kb-filters .ts-control.ts-loading > input,
.kb-filters .ts-control.ts-loading .item{
  color:var(--muted,#6b7797) !important;
  font-weight:500 !important;font-style:italic;
}
.kb-filters .ts-control.ts-loading::after{
  content:"";
  position:absolute;right:14px;top:50%;
  width:14px;height:14px;
  margin-top:-7px;
  border:2px solid rgba(29,78,216,.18);
  border-top-color:var(--blue,#1d4ed8);
  border-radius:50%;
  animation:kbSpin .7s linear infinite;
}
@keyframes kbSpin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════════════
   /{make}/{model}/{year}/  (Goparts_Parts year page) — mockup-acura-mdx shell
   ══════════════════════════════════════════════════════════════════════ */

/* Breadcrumb strip above the Make/Model H1 */
.mmp-hero .mmp-crumbs{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;color:var(--muted,#6b7797);
  letter-spacing:.02em;margin:0 0 14px;
}
.mmp-hero .mmp-crumbs a{color:var(--muted,#6b7797);text-decoration:none}
.mmp-hero .mmp-crumbs a:hover{color:var(--blue,#1d4ed8)}
.mmp-hero .mmp-crumbs .sep{color:rgba(148,163,184,.7);font-weight:500;margin:0 2px}
.mmp-hero .mmp-crumbs .here{color:var(--ink,#0d1424);font-weight:700}
.mmp-hero .mmp-h1 .year{
  font-weight:700;color:var(--ink-2,#1e293b);font-size:.82em;
  text-transform:uppercase;letter-spacing:.02em;margin-right:4px;
}

/* Empty state when no parts found for the vehicle */
.parts-empty{
  text-align:center;padding:60px 24px;margin:40px 0;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  border:1px dashed rgba(148,163,184,.3);
  border-radius:18px;
}
.parts-empty h2{font-size:22px !important;font-weight:800 !important;margin:0 0 8px !important;color:var(--ink,#0d1424)}
.parts-empty p{color:var(--muted,#6b7797) !important;margin:0 !important}

/* ================================================================
   ps-mmp override — force mockup visuals over legacy inline CSS
   Added 2026-04-20. Higher specificity + !important to beat
   mmp_template_final.php inline styles (which use !important too).
   ================================================================ */

/* Filter rail: style .filters-section-beautified like mockup .mmp-filterrail */
body .page-body .filters-section-beautified {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82)) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 34px -22px rgba(26,61,176,.15), 0 0 0 1px rgba(26,61,176,.04) !important;
  padding: 18px 22px !important;
  margin: 0 0 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  position: static !important;
  top: auto !important;
  backdrop-filter: blur(18px);
}

/* Filter group: style .filter-group-beautified like mockup .mfr-row */
body .page-body .filter-group-beautified {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  border: 0 !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Filter title: style .filter-title-beautified like mockup .mfr-label */
body .page-body .filter-title-beautified {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--ink, #0d1424) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  flex: none !important;
  min-width: 120px !important;
  padding-top: 6px !important;
  margin: 0 !important;
}

/* If filter title has a numbered badge span, match mockup .mfr-label .num */
body .page-body .filter-title-beautified .filter-num,
body .page-body .filter-title-beautified .num {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--blue, #1a3db0), #3b82f6) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 10px -3px rgba(26,61,176,.4) !important;
}

/* Filter button options: style like mockup .year-btn */
body .page-body .filter-btn-beautified {
  padding: 7px 14px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(26,61,176,.18) !important;
  background: rgba(26,61,176,.05) !important;
  color: var(--blue, #1a3db0) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  margin: 0 !important;
  transition: all .15s !important;
  cursor: pointer !important;
}
body .page-body .filter-btn-beautified:hover {
  background: var(--blue, #1a3db0) !important;
  color: #fff !important;
  border-color: var(--blue, #1a3db0) !important;
}
body .page-body .filter-btn-beautified.active,
body .page-body .filter-btn-beautified.selected {
  background: linear-gradient(135deg, var(--blue, #1a3db0), #3b82f6) !important;
  color: #fff !important;
  border-color: var(--blue, #1a3db0) !important;
  box-shadow: 0 6px 14px -4px rgba(26,61,176,.4) !important;
}

/* Product grid: override inline-style grid + force mockup column layout + 2+ cols on mobile */
body .mmp-grid.standard-results-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  justify-content: stretch !important;
  margin-bottom: 48px;
  padding: 0;
  list-style: none;
}
@media (min-width: 1200px) {
  body .mmp-grid.standard-results-grid {
    /* minmax(0, 1fr) instead of plain 1fr — without the explicit 0 minimum,
       columns expand past their share to fit a card's min-content width
       (long unbreakable product names push the track wider). Repro: long
       PS titles on ps-mmp.php?make=Honda&model=Civic&parttype=Door+Mirror
       (177 cards) grew the 4-col track to ~1430px in a 1168px container. */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 768px) {
  body .mmp-grid.standard-results-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Suppress double card-styling on the li wrapper (mockup card lives on the a.pcard) */
body .mmp-grid .item.product.product-item {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  width: auto !important;
}
body .mmp-grid .item.product.product-item:hover {
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Card base (column on desktop, row on mobile via @media override) */
body .mmp-grid .pcard,
body .mmp-grid .pcard.product-card-beautified,
body .mmp-grid .pcard.algolia-product-card {
  display: flex !important;
  max-width: none !important;
  width: 100% !important;
  flex: 1 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)) !important;
  border: 1px solid rgba(26,61,176,.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 14px -8px rgba(10,20,36,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body .mmp-grid .pcard:hover {
  transform: translateY(-3px) !important;
  border-color: var(--blue, #1a3db0) !important;
  box-shadow: 0 22px 44px -18px rgba(26,61,176,.28), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Image container inside pcard. Fixed 200px height + border-box + padding
   so `max-height:100%` on the child img resolves against the padding-box
   (200px), and object-fit:contain can actually shrink tall portrait mirrors
   to fit. Prior `aspect-ratio:1.1/1` gave an indefinite containing block
   height, so max-height:100% degraded to "auto" and portrait images leaked
   past the bottom. */
body .mmp-grid .pcard .pc-img.product-image-container {
  position: relative !important;
  aspect-ratio: auto !important;
  height: 200px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-bottom: 1px solid rgba(148,163,184,.2) !important;
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}
body .mmp-grid .pcard .pc-img.product-image-container img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
  display: block !important;
}

/* Stock pill */
body .mmp-grid .pcard .pc-img .stock {
  position: absolute !important;
  top: 10px !important; left: 10px !important;
  padding: 4px 10px !important;
  border-radius: 980px !important;
  background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(5,150,105,.95)) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 4px 10px -3px rgba(16,185,129,.45) !important;
}

/* Body: column layout, padding, justify-end */
body .mmp-grid .pcard .pc-body {
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-height: 0 !important;
  flex: 1 !important;
  /* Top-align title / partslink / notes. The .pc-price row keeps its own
     `margin-top:auto` to sink to the bottom of the card, so short-content
     cards end up: title-at-top ... empty space ... price-at-bottom. */
  justify-content: flex-start !important;
  width: auto !important;
}

/* Name: clamp to 3 lines */
body .mmp-grid .pcard .pc-name.product-name-beautified {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink, #0d1424) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  margin: 2px 0 !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* Meta (Partslink #) */
body .mmp-grid .pcard .pc-meta {
  font-size: 12px !important;
  color: var(--muted, #6b7797) !important;
  font-weight: 500 !important;
}
body .mmp-grid .pcard .pc-meta b {
  color: var(--ink, #0d1424) !important;
  font-weight: 700 !important;
}

/* Foot (price row) — CTA is hidden, so price is right-aligned alone. */
body .mmp-grid .pcard .pc-foot {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin-top: 6px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(148,163,184,.2) !important;
}
body .mmp-grid .pcard .pc-foot .pc-price {
  color: var(--ink, #0d1424) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}
body .mmp-grid .pcard .pc-foot .pc-price .sign,
body .mmp-grid .pcard .pc-foot .pc-price .price-sign {
  font-size: 14px !important;
  vertical-align: super !important;
  margin-right: 1px !important;
  font-weight: 700 !important;
}
body .mmp-grid .pcard .pc-foot .pc-price .num,
body .mmp-grid .pcard .pc-foot .pc-price .price-number {
  font-size: 24px !important;
}
body .mmp-grid .pcard .pc-foot .pc-price .cents,
body .mmp-grid .pcard .pc-foot .pc-price .price-cents {
  font-size: 12px !important;
  vertical-align: super !important;
  font-weight: 700 !important;
}
body .mmp-grid .pcard .pc-cta {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--blue, #1a3db0) !important;
}
body .mmp-grid .pcard:hover .pc-cta {
  color: var(--orange, #ff7a1a) !important;
}

@media (max-width: 768px) {
  body .mmp-grid .pcard .pc-name.product-name-beautified { font-size: 15px !important; }
  body .mmp-grid .pcard .pc-foot .pc-price .num,
  body .mmp-grid .pcard .pc-foot .pc-price .price-number { font-size: 20px !important; }
}

/* Mobile: shrink .category-container padding + card min so 2-col grid fits at 390px */
@media (max-width: 768px) {
  body .page-body .category-container,
  body .page-body .category-container-header {
    padding: 8px 12px !important;
  }
  body .mmp-grid.standard-results-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   ps-mmp v27 — mockup parity pass: fix remaining computed-style deltas
   found via puppeteer diff vs mockup-mmp-door-mirror.
   ================================================================ */

/* Fix rendered filter-number class (actual in template is .filter-number,
   mockup uses .num). Apply mockup .mfr-label .num styling. */
body .page-body .filter-title-beautified .filter-number,
body .page-body .filter-title-beautified .num {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--blue, #1d4ed8), #3b82f6) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 10px -3px rgba(29, 78, 216, .4) !important;
}

/* Inner .filter-label in rendered = the text node in mockup's .mfr-label —
   keep it inline as part of the label, not as a block next to the num. */
body .page-body .filter-title-beautified .filter-label {
  display: inline !important;
  font: inherit !important;
  color: inherit !important;
}

/* Card image: no top border-radius (parent .pcard has the radius + overflow:hidden) */
body .mmp-grid .pcard .pc-img.product-image-container {
  border-radius: 0 !important;
  border-color: transparent !important;
  border-bottom: 1px solid #eef1f6 !important;
}

/* Card name: no bottom border and no min-height (legacy border inherited from
   .algolia-product-name / .product-name-beautified) */
body .mmp-grid .pcard .pc-name {
  border-bottom: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Card foot: use mockup-matching border color */
body .mmp-grid .pcard .pc-foot {
  border-top: 1px solid #eef1f6 !important;
  border-color: #eef1f6 !important;
}

/* Card price: match mockup size + remove stray top margin from legacy */
body .mmp-grid .pcard .pc-foot .pc-price {
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
}
body .mmp-grid .pcard .pc-foot .pc-price .num,
body .mmp-grid .pcard .pc-foot .pc-price .price-number {
  font-size: 24px !important;
}

/* Card CTA: ensure it fits on one line */
body .mmp-grid .pcard .pc-foot .pc-cta {
  white-space: nowrap !important;
  flex: none !important;
}

@media (max-width: 768px) {
  /* Filter rail tighter padding on mobile (matches mockup) */
  body .page-body .filters-section-beautified {
    padding: 14px 16px !important;
  }

  /* Filter group (row) becomes column on mobile — label above options */
  body .page-body .filter-group-beautified {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body .page-body .filter-title-beautified {
    min-width: auto !important;
  }

  /* Single-column card grid on mobile */
  body .mmp-grid.standard-results-grid {
    grid-template-columns: 1fr !important;
  }

  /* Card name still small but readable */
  body .mmp-grid .pcard .pc-foot .pc-price .num,
  body .mmp-grid .pcard .pc-foot .pc-price .price-number {
    font-size: 22px !important;
  }
}

/* Inherit body font family on legacy buttons / labels so they don't fall
   back to Arial / default browser button font. Keeps visual parity with
   mockup (body = Figtree → Segoe UI / system sans). */
body .page-body .filter-title-beautified,
body .page-body .filter-title-beautified .filter-label,
body .page-body .filter-btn-beautified,
body .mmp-grid .pcard,
body .mmp-grid .pcard .pc-name,
body .mmp-grid .pcard .pc-meta,
body .mmp-grid .pcard .pc-price,
body .mmp-grid .pcard .pc-cta {
  font-family: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════════
   ps-mmp.php / cscraper/mmp_template_final.php fine-tune
   — pill spacing, 20px-shift fix, In-Stock hide, equal-height cards,
   product-name no-truncation, bigger notes, hidden Partslink#.
   ══════════════════════════════════════════════════════════════════════ */

/* [1] Legacy inline CSS on three containers adds 20px horizontal padding each,
   compounding a rightward shift of content vs. the wrap's own centering.
   (`.category-container`, `.category-container-header`, `.standard-results-wrapper`.)
   Zero out so the grid + filter panel line up with the H1 and crumbs. */
body .page-body .category-container,
body .page-body .category-container-header,
body .page-body .standard-results-wrapper{
  max-width:none !important;
  padding-left:0 !important;padding-right:0 !important;
  margin-left:0 !important;margin-right:0 !important;
}

/* [2] Extra breathing room between the hero (H1 / Change-vehicle) and the
   filter panel — matches the mockup. */
body .page-body > .wrap > .category-container-header{margin-top:8px !important}
body .page-body .filters-section-beautified{margin-top:12px !important}

/* [3] Year/Side/etc. filter rows — label sits INLINE with the pills, pills
   wrap onto additional lines right of the label (mockup layout). */
body .page-body .filter-group-beautified{
  display:flex !important;align-items:flex-start !important;
  flex-wrap:nowrap !important;          /* keep label + options on same row */
  gap:14px !important;
}
body .page-body .filter-title-beautified{
  flex:0 0 auto !important;min-width:140px !important;
  padding-top:6px !important;white-space:nowrap !important;
}
body .page-body .filter-options-beautified{
  flex:1 1 auto !important;min-width:0 !important;
  display:flex !important;flex-wrap:wrap !important;
  gap:8px !important;
}

/* [4] Hide the legacy "✓ In Stock" pill on every product card (v2 design
   doesn't need it — availability is implied). */
body .pc-img .stock,
body .pc-img .stock-badge,
body .pcard .stock,
body .pcard .stock-badge{display:none !important}

/* [5] Product-name — no ellipsis / no line-clamp. Let titles wrap in full. */
body .pc-name,
body .pcard .pc-name,
body .product-name-beautified{
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  display:block !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  -webkit-box-orient:initial !important;
  max-height:none !important;
}

/* [6] Equal-height cards within each row — WITHOUT the excess-whitespace
   side-effect that `grid-auto-rows: 1fr` caused (it made every row the
   height of the TALLEST card on the entire page). Let each row auto-size
   to its own tallest cell via the default `grid-auto-rows: auto` +
   `align-items: stretch`, then stretch the pcard inside each cell.

   The grid's direct children are <li> wrappers, not the <a class="pcard">
   itself — so the LI needs display:flex too, with the pcard filling it.
*/
body .mmp-grid,
body .mmp-grid.standard-results-grid,
body .standard-results-grid{
  align-items:stretch !important;
  grid-auto-rows:auto !important;   /* KEY: was 1fr (caused excess whitespace) */
}
body .mmp-grid > li,
body .standard-results-grid > li{
  display:flex !important;
  align-items:stretch !important;
  height:auto !important;           /* row height = tallest card */
  list-style:none !important;
  margin:0 !important;padding:0 !important;
}
body .mmp-grid .pcard,
body .standard-results-grid .pcard,
body .mmp-grid > li > a.pcard,
body .standard-results-grid > li > a.pcard{
  height:100% !important;width:100% !important;
  display:flex !important;flex-direction:column !important;
  align-self:stretch !important;
}
body .mmp-grid .pcard .pc-body,
body .standard-results-grid .pcard .pc-body{
  flex:1 1 auto !important;
  display:flex !important;flex-direction:column !important;
}
/* Sink the whole footer (price + View part + the hairline above them) to
   the bottom of the card. `.pc-price` is INSIDE `.pc-foot`, so applying
   margin-top:auto to the foot itself is what actually moves the entire row
   (along with its border-top separator) down to the card's bottom. */
body .mmp-grid .pcard .pc-foot,
body .standard-results-grid .pcard .pc-foot{margin-top:auto !important}

/* [7] Product notes/subtitle — a little bigger and slightly more line-height
   so the descriptive text is easier to scan on PS/HL result cards. */
body .pc-body .product-subtitle-beautified,
body .pc-body p.product-subtitle-beautified,
body .product-info-beautified .product-subtitle-beautified,
body .product-info-beautified p.product-subtitle-beautified{
  font-size:15px !important;
  line-height:1.5 !important;
  color:var(--ink-2,#1e293b) !important;
}

/* The bordered rectangle wrapping the note (`.product-content-row`) was
   `flex: 1 1 0%`, which made it inflate to fill every unused pixel in the
   equal-height card — a 3-word note ended up in a 250-px-tall box. Size
   it to its own content; `.pc-price{margin-top:auto}` already handles
   pushing the price row to the card bottom. */
body .pc-body .product-content-row,
body .product-info-beautified .product-content-row,
body .pcard .product-content-row{
  flex:0 0 auto !important;
  align-self:stretch !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
body .pc-body .product-content-row:hover,
body .product-info-beautified .product-content-row:hover,
body .pcard .product-content-row:hover{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

/* [8] "Partslink #: …" row — SHOW on Magento product cards only.
   PS (ps-product-new.php) and HL (hl-product.php) cards suppress it per
   user request ("hide partslink # for all but magento products").
   Strategy: default-hide on PS/HL via href pattern, default-show elsewhere
   with compact muted styling that matches the mockup. */
body .pc-body .pc-meta{
  display:block !important;
  font-size:12.5px !important;
  color:var(--muted,#6b7797) !important;
  font-weight:500 !important;
  margin:4px 0 0 !important;
}
body .pc-body .pc-meta b{
  color:var(--ink,#0d1424) !important;
  font-weight:700 !important;
}
body a.pcard[href*="ps-product-new.php"] .pc-meta,
body a.pcard[href*="hl-product.php"] .pc-meta{
  display:none !important;
}

/* Hide the "View part →" CTA on every result card and move the price to the
   right side of the .pc-foot row (mockup style: price alone, right-aligned). */
body .pcard .pc-foot .pc-cta,
body .pcard .pc-cta{display:none !important}
body .pcard .pc-foot{justify-content:flex-end !important}
body .pcard .pc-foot .pc-price{margin-left:auto !important}

/* "Skip Wrenchy — just show products" — green action button. */
body #skip-to-products-btn,
body button#skip-to-products-btn.btn-v2-ghost{
  background:linear-gradient(135deg,#059669,#10b981) !important;
  color:#fff !important;
  border:0 !important;
  padding:12px 22px !important;
  border-radius:10px !important;
  font-weight:700 !important;
  font-size:14px !important;
  cursor:pointer !important;
  box-shadow:0 8px 20px -8px rgba(16,185,129,.55),inset 0 1px 0 rgba(255,255,255,.2) !important;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease !important;
}
body #skip-to-products-btn:hover{
  background:linear-gradient(135deg,#047857,#059669) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 12px 26px -8px rgba(16,185,129,.6),inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Product result card images: flexbox+padding container so max-width:100% /
   max-height:100% resolve against the content-box (parent minus 16px all
   sides). object-fit:contain then shrinks landscape AND portrait images to
   fit without clipping on any edge. Prior absolute-inset approach leaked
   16px past the right edge because max-width:100% resolved against the
   padding-box, not the content-box. */
body .pcard .pc-img{
  position:relative !important;
  height:200px !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
  box-sizing:border-box !important;
}
body .pcard .pc-img img{
  position:static !important;
  inset:auto !important;
  margin:0 !important;
  width:auto !important;height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* ps-mmp: halve the gap between the Wrenchy banner (or product grid) and the
   "Why Millions Choose Go-Parts" section below. Was 100px (.why{margin-top}),
   now 50px. */
body .why{margin-top:50px !important}

/* Halve the gap between the product grid and the "Why Millions Choose
   Go-Parts" section (~218px down to ~110px). Was composed of 80px
   page-body pad-bot + 48px grid mar-bot + 20px results-wrapper pad-bot +
   20px category-container pad-bot + 50px why mar-top. */
body .page-body{padding-bottom:40px !important}
body .mmp-grid,body .standard-results-grid{margin-bottom:24px !important}
body .standard-results-wrapper{padding-bottom:10px !important}
body .category-container{padding-bottom:10px !important}
body .why{margin-top:25px !important}

/* ══════════════════════════════════════════════════════════════════════
   Panel shadow/border pass — strengthen definition on all v2-ported pages.
   User feedback: panels on the Magento product page felt less distinct
   than on ps-mmp. Bumps existing blue-tinted shadows ~2× and adds a
   visible boundary to flat panels (.tab-panel, .summary) that previously
   blended into the page background.
   Scope: catalog-product-view + hl-product + ps-mmp + garage pages.
   ══════════════════════════════════════════════════════════════════════ */

/* Tab-panel content intentionally has NO panel wrapping on v2 product
   pages — matches mockup-v12-hyperspace where Fitment / Specs / Policies /
   Expert Guide content flows directly on the page separated only by the
   liquid-glass tab bar above. Earlier revisions wrapped this in a shadowed
   card; the wrap diverged from the mockup and has been removed. */

/* Summary (product title/price sidebar on the Magento product page):
   flat layout — no background, border, shadow, or radius. The price-card
   inside already carries its own strong shadow; the inner components
   (warranty, trust-strip, meta-row, etc.) each handle their own chrome.
   Earlier revisions wrapped the whole column in a soft glass panel, but
   the stacked "panel-inside-panel" read as visual clutter. */
body .hero-grid .summary{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}

/* Glass panel + notes: bump existing shadows ~1.8× and add a faint ring so
   they pop off the page background on every v2 page, not just the ones
   where the content happens to sit on a darker scroll area. */
body .glass-panel,
body .notes{
  box-shadow:
    0 28px 70px -24px rgba(26,61,176,.26),
    0 10px 24px -12px rgba(26,61,176,.12),
    0 0 0 1px rgba(26,61,176,.06),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  border-color:rgba(255,255,255,.7) !important;
}

/* Price card — already shadowed but the user wants it more defined across
   pages. Also covers hl-product / ps-mmp rendering of the same class. */
body .price-card{
  box-shadow:
    0 36px 80px -30px rgba(26,61,176,.32),
    0 12px 30px -14px rgba(26,61,176,.14),
    0 0 0 1px rgba(26,61,176,.06),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* Product cards (mmp-grid pcards on ps-mmp + standard results on Magento):
   deepen the lift so individual cards feel separated from the page. */
body .mmp-grid .pcard,
body .standard-results-grid .pcard,
body .pcard{
  box-shadow:
    0 18px 40px -18px rgba(10,20,36,.22),
    0 4px 10px -4px rgba(10,20,36,.08),
    0 0 0 1px rgba(26,61,176,.06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body .mmp-grid .pcard:hover,
body .standard-results-grid .pcard:hover,
body .pcard:hover{
  box-shadow:
    0 26px 52px -18px rgba(26,61,176,.35),
    0 10px 24px -10px rgba(26,61,176,.18),
    0 0 0 1px rgba(26,61,176,.1),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Green hues on the product-page trust-strip (100% Money-Back / 120-Day
   Returns / Insurance-Grade). Reinforces the "trusted · backed · safe"
   reading with the same green that the Wrenchy skip-button + Lifetime
   Warranty pill use, instead of the prior neutral blue/gray. Applies to
   /1013-*.html (Mag product), hl-product, ps-product-new, and any other
   v2-themed page that renders .trust-strip. */
body .trust-strip{
  background:linear-gradient(180deg,rgba(16,185,129,.07),rgba(16,185,129,.03)) !important;
  border:1px solid rgba(16,185,129,.22) !important;
}
body .trust-strip > div + div{
  border-left:1px solid rgba(16,185,129,.18) !important;
}
body .trust-strip .ico{
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.08)) !important;
  color:#059669 !important;
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.28), 0 4px 10px -4px rgba(16,185,129,.35) !important;
}
body .trust-strip .tt{color:#065f46 !important}
body .trust-strip .ss{color:#047857 !important;opacity:.85}

/* ══════════════════════════════════════════════════════════════════════
   v2 product-page tabs — mockup-v12-hyperspace theming for www wiring.
   The partial at v2/.../view/fitment-tabs.phtml ships the exact classes
   the default theme uses (.product-tabs, .tab-button, .tab-content,
   .fitment-accordion, .make-section, .make-header, .model-section,
   .model-header, .fitment-details-table), so the CSS below layers the
   liquid-glass pill tab bar + clean card accordion on top without
   touching the HTML/JS wiring. Matches www functionally + mockup-v12
   visually.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Tab bar — flatten legacy .tab-buttons into a liquid-glass pill row
      with a sliding indicator driven by the existing .tab-button.active
      state (no new JS needed — the sliding animation is CSS-only, sized
      against a fallback if --pill-left/--pill-width aren't set). */
body .product-tabs > .tab-buttons{
  display:inline-flex !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  padding:6px !important;
  /* Bumped the white-gradient layer to 0.88 → 0.74 (was 0.55 → 0.32).
     At the lower opacity values, pages without much content behind the
     sticky tab bar (ps-product-new sits on pure body bg on first view)
     rendered the bar as visibly "see-through" rather than glass-frosted.
     The higher opacity keeps the frosted-glass look even when backdrop-
     filter has nothing to blur. */
  /* Mockup uses .55/.32 — but on opstest ps-product-new + hl-product
     the sticky bar had nothing to blur behind it on most scroll
     positions, so the translucent gradient read as "see-through"
     letting content clearly show through. Bumped to .92/.82 so the
     bar is essentially solid-white-frosted (still glass-texture via
     backdrop-filter + subtle gradient + border highlights) but the
     content behind it is never visible through. */
  background:
    linear-gradient(110deg,transparent 0%,rgba(26,61,176,.05) 20%,transparent 40%,rgba(255,122,26,.04) 70%,transparent 100%),
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.32) 100%) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  border-radius:980px !important;
  border-bottom:1px solid rgba(255,255,255,.75) !important;
  box-shadow:
    0 12px 30px -14px rgba(26,61,176,.22),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(26,61,176,.06) !important;
  backdrop-filter:blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(180%) !important;
  will-change:transform !important;
  margin:0 0 24px !important;
  position:relative !important;
  overflow:hidden !important;
  justify-content:flex-start !important;
}
/* Sliding liquid-glass pill — glass-on-glass tint, inner lightning, and
   smooth cubic-bezier transition between --pill-left positions. Exact
   port of the mockup-v12 .tabs::before rule. */
body .product-tabs > .tab-buttons::before{
  content:"";position:absolute;
  top:6px;bottom:6px;
  left:var(--pill-left,6px);
  width:var(--pill-width,0);
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg,rgba(26,61,176,.92) 0%,rgba(18,48,127,.96) 100%);
  border-radius:980px;
  box-shadow:
    0 6px 18px -6px rgba(26,61,176,.6),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(10,20,60,.25),
    inset 0 0 0 1px rgba(255,255,255,.22);
  transition:left .42s cubic-bezier(.5,.05,.15,1),width .42s cubic-bezier(.5,.05,.15,1);
  z-index:0;pointer-events:none;
}
/* Hairline trailing highlight on the pill's top edge for extra "glass" feel */
body .product-tabs > .tab-buttons::after{
  content:"";position:absolute;
  top:7px;height:2px;
  left:calc(var(--pill-left,6px) + 14px);
  width:calc(var(--pill-width,0) - 28px);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  border-radius:2px;
  transition:left .42s cubic-bezier(.5,.05,.15,1),width .42s cubic-bezier(.5,.05,.15,1);
  z-index:1;pointer-events:none;
}
body .product-tabs > .tab-buttons > .tab-button{
  padding:11px 22px !important;
  border:0 !important;
  background:transparent !important;
  color:var(--muted,#64748b) !important;
  font-weight:600 !important;
  font-size:15px !important;
  /* Mockup-v12-hl uses Figtree with a tall default line-height, which
     Arial (inherited on opstest) doesn't reach with line-height:normal.
     Pin 1.55 explicitly so the tab bar matches the mockup's 59px height
     across any font. */
  line-height:1.55 !important;
  letter-spacing:-0.005em !important;
  border-radius:980px !important;
  cursor:pointer !important;
  position:relative !important;
  z-index:2 !important;
  transition:color .3s ease, text-shadow .3s ease !important;
  box-shadow:none !important;
}
body .product-tabs > .tab-buttons > .tab-button:hover{
  color:var(--ink,#0d1424) !important;
}
body .product-tabs > .tab-buttons > .tab-button.active{
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.25) !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* 2. Tab content — panels flow directly on the page, no wrapping card
      (same behaviour as mockup-v12). Keep modest top-padding so the
      accordion doesn't kiss the tab bar. */
body .product-tabs > .tab-content{
  padding:20px 0 8px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  animation:v2TabPanelIn .55s cubic-bezier(.25,.9,.3,1) both !important;
}
body .product-tabs > .tab-content:not(.active){display:none !important}
body .product-tabs > .tab-content.active{display:block !important}
@keyframes v2TabPanelIn{
  0%{opacity:0;transform:translateY(14px);filter:blur(2px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* 3. Fitment section header — elevated "Vehicle Fitment Guide" type. */
body .tab-content#fitment > h2{
  font-size:42px !important;
  font-weight:800 !important;
  letter-spacing:-0.035em !important;
  color:var(--ink,#0d1424) !important;
  margin:0 0 8px !important;
}

/* 4. Fitment accordion — soft card with blue-hued shadow. Individual
      make-sections and model-sections get a subtle border + hover lift,
      matching the mockup's fitment-maker + fit-slot structure. */
body #fitmentAccordion.fitment-accordion{
  background:#fff !important;
  border:1px solid var(--line-soft,rgba(148,163,184,.2)) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 16px 40px -20px rgba(26,61,176,.18), 0 0 0 1px rgba(26,61,176,.04) !important;
  margin:12px 0 18px !important;
}
body #fitmentAccordion .make-section + .make-section{
  border-top:1px solid var(--line-soft,rgba(148,163,184,.2)) !important;
}
body #fitmentAccordion .make-header{
  display:flex !important;
  align-items:baseline !important;
  gap:12px !important;
  padding:14px 28px !important;
  background:var(--bg-2,#f7f9fc) !important;
  border-bottom:1px solid var(--line-soft,rgba(148,163,184,.2)) !important;
  color:var(--ink,#0d1424) !important;
  cursor:pointer !important;
  transition:background .15s !important;
}
body #fitmentAccordion .make-header.not-collapsible{cursor:default !important}
body #fitmentAccordion .make-header:not(.not-collapsible):hover{
  background:#f0f3f8 !important;
}
/* Inject the mockup "MANUFACTURER" kicker above the make name via
   ::before — the partial HTML doesn't render a kicker element, so we
   synthesize it in CSS. */
body #fitmentAccordion .make-header::before{
  content:"Manufacturer" !important;
  font-size:11px !important;
  font-weight:700 !important;
  color:var(--muted,#64748b) !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase !important;
}
body #fitmentAccordion .make-header .make-name{
  font-size:22px !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  color:var(--ink,#0d1424) !important;
  line-height:1 !important;
}
body #fitmentAccordion .fitment-badge{
  font-size:12.5px !important;
  font-weight:500 !important;
  color:var(--muted,#64748b) !important;
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  margin-left:auto !important;
  white-space:nowrap !important;
}
body #fitmentAccordion .make-hint{
  margin-left:auto !important;
  font-size:12px !important;
  color:var(--muted,#94a3b8) !important;
  font-weight:500 !important;
}
/* Make-header toggle-icon: + collapsed → − expanded, with a subtle
   180° rotation on the circle so the plus "tips" into the minus.
   Matches the model-level chip style — user prefers +/− over arrows. */
body #fitmentAccordion .make-header .toggle-icon{
  box-shadow:inset 0 0 0 1px rgba(26,61,176,.08), 0 2px 4px rgba(10,20,36,.04) !important;
  transition:all .28s cubic-bezier(.3,1.3,.5,1) !important;
  font-size:18px !important;
  font-weight:600 !important;
  color:var(--ink,#0d1424) !important;
  background:var(--bg-2,#f3f5f9) !important;
}
body #fitmentAccordion .make-header .toggle-icon::before{
  content:"+" !important;
  color:var(--ink,#0d1424) !important;
  display:inline-block !important;
  transition:transform .28s cubic-bezier(.3,1.3,.5,1) !important;
  margin:0 !important;
  line-height:1 !important;
}
body #fitmentAccordion .make-header:not(.not-collapsible):hover .toggle-icon{
  background:var(--blue,#1a3db0) !important;color:#fff !important;
  box-shadow:0 4px 12px -3px rgba(29,78,216,.45) !important;
}
body #fitmentAccordion .make-header:not(.not-collapsible):hover .toggle-icon::before{
  color:#fff !important;
}
body #fitmentAccordion .make-header.expanded .toggle-icon{
  background:var(--blue,#1a3db0) !important;color:#fff !important;
  box-shadow:0 6px 16px -4px rgba(29,78,216,.55) !important;
  transform:rotate(180deg) !important;
}
body #fitmentAccordion .make-header.expanded .toggle-icon::before{
  content:"\2212" !important;      /* U+2212 MINUS SIGN — true minus, not hyphen */
  color:#fff !important;
}

/* Collapse/show transitions are controlled by toggleMake() setting
   inline max-height on .make-content. Reset padding on the inner
   wrapper so rows sit cleanly. */
body #fitmentAccordion .make-content{
  background:#fff !important;
  overflow:hidden !important;
  transition:max-height .3s ease !important;
}
body #fitmentAccordion .make-content-inner{
  padding:10px 16px 14px !important;
}

/* Model row = .fit-slot equivalent. Mockup-v12-hl has flat rows
   separated by a hairline border-bottom — no border-radius, no
   margin, no sub-card background. Only the EXPANDED state pops
   out as an orange card (handled further down). */
body #fitmentAccordion .model-section{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--line-soft,#eef1f6) !important;
  border-radius:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}
body #fitmentAccordion .model-header{
  display:grid !important;
  grid-template-columns:minmax(180px,1.2fr) auto 1fr auto !important;
  align-items:center !important;
  gap:18px !important;
  padding:14px 22px !important;
  background:linear-gradient(180deg,#fff,#fafbfd) !important;
  cursor:pointer !important;
  transition:background .15s !important;
}
body #fitmentAccordion .model-header:hover{
  background:linear-gradient(180deg,#f9fafc,#f1f4f9) !important;
}
body #fitmentAccordion .model-header .model-name{
  font-size:19px !important;
  font-weight:700 !important;
  color:var(--ink,#0d1424) !important;
  letter-spacing:-0.01em !important;
}
/* Year range — mockup-v12 uses a two-year layout with a small horizontal
   bar between them ("2010 — 2013"). The partial renders it as one text
   span (e.g. "2010-2013"); we split on the hyphen via ::before/::after
   pseudo-elements and hide the raw text. If the range is a single year
   the hyphen split is a no-op and the visual falls back to that one year. */
body #fitmentAccordion .model-header .year-range{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--ink,#0d1424) !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  white-space:nowrap !important;
  position:relative !important;
}
body #fitmentAccordion .model-header .year-range .bar{
  width:14px !important;height:2px !important;
  background:var(--muted,#64748b) !important;
  border-radius:1px !important;
  flex:none !important;
  position:relative !important;
}
body #fitmentAccordion .model-header .year-range .bar::before{
  content:"" !important;
  position:absolute !important;inset:0 !important;
  background:currentColor !important;border-radius:1px !important;opacity:.9 !important;
}
body #fitmentAccordion .model-header .model-hint{
  font-size:12px !important;
  color:var(--muted,#94a3b8) !important;
  font-weight:500 !important;
  justify-self:start !important;
}
body #fitmentAccordion .model-header .toggle-icon{
  width:34px !important;height:34px !important;
  border-radius:50% !important;
  background:var(--bg-2,#f3f5f9) !important;
  color:var(--ink,#0d1424) !important;
  display:grid !important;place-items:center !important;
  font-size:16px !important;
  font-weight:700 !important;
  transition:background .15s, color .15s, transform .15s !important;
}
body #fitmentAccordion .model-header .toggle-icon::before{
  content:"+" !important;display:inline-block !important;transition:transform .2s !important;
}
body #fitmentAccordion .model-header:hover .toggle-icon{
  background:var(--ink,#0d1424) !important;color:#fff !important;
}
body #fitmentAccordion .model-header.expanded .toggle-icon::before{
  content:"×" !important;
}

/* Model content — shown via toggleModel() adding .show and setting
   max-height inline. Internal table is a clean fitment-details-table. */
body #fitmentAccordion .model-content{
  overflow:hidden !important;
  transition:max-height .3s ease !important;
  border-top:1px solid rgba(26,61,176,.06) !important;
  background:#fff !important;
}
body #fitmentAccordion .mobile-scroll-hint{display:none !important}
body #fitmentAccordion .fitment-scroll-container{position:relative !important}
body #fitmentAccordion .fitment-table-wrapper{overflow-x:auto !important}
body #fitmentAccordion .scroll-fade{display:none !important}
body #fitmentAccordion .fitment-details-table{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:14px !important;
}
body #fitmentAccordion .fitment-details-table th{
  background:#f7f9fc !important;
  padding:10px 14px !important;
  text-align:left !important;
  font-weight:700 !important;
  color:#475569 !important;
  font-size:11px !important;
  text-transform:uppercase !important;
  letter-spacing:0.08em !important;
  border-bottom:1px solid rgba(26,61,176,.08) !important;
}
body #fitmentAccordion .fitment-details-table td{
  padding:11px 14px !important;
  border-bottom:1px solid rgba(148,163,184,.12) !important;
  color:var(--ink,#0d1424) !important;
  vertical-align:top !important;
}
body #fitmentAccordion .fitment-details-table tr:last-child td{
  border-bottom:0 !important;
}
/* (stale per-cell hover bg removed — row-level rgba(26,61,176,.05)
   shows through the transparent cells, matching mockup-v12-hl.) */
body #fitmentAccordion .fitment-details-table .years-cell{
  font-weight:600 !important;color:var(--blue,#1a3db0) !important;
}

/* Policies + Misc panels — same clean page flow, readable type scale. */
body .tab-content#shipping h2,
body .tab-content#misc h2{
  font-size:32px !important;
  font-weight:800 !important;
  letter-spacing:-0.03em !important;
  margin:0 0 16px !important;
  color:var(--ink,#0d1424) !important;
}
body .tab-content#shipping h3,
body .tab-content#misc h3{
  font-size:18px !important;
  font-weight:700 !important;
  margin-top:24px !important;
  color:var(--ink,#0d1424) !important;
}
body .tab-content#shipping ul,
body .tab-content#misc ul{
  line-height:1.8 !important;
  color:var(--ink-2,#3b4458) !important;
  padding-left:22px !important;
}
body .tab-content#shipping p,
body .tab-content#misc p{
  color:var(--ink-2,#3b4458) !important;
  line-height:1.7 !important;
}
body .tab-content#misc p strong{color:var(--ink,#0d1424) !important}

/* Strip the legacy "Why Millions Choose" panel that's inlined inside
   the default theme's tabs wrapper — v2 has its own `.why` section
   immediately after the tabs block so this one would render twice. */
body .why-goparts-panel{display:none !important}

/* Hide the "Also bought" block inside the tabs partial if it renders —
   v2 surfaces related products elsewhere via standard Magento layout. */
body .product-tabs ~ div[style*="also bought"],
body .product-tabs > .reviews-section{
  display:none !important;
}

/* Mobile polish */
@media (max-width:768px){
  body .product-tabs > .tab-buttons{
    overflow-x:auto !important;
    justify-content:flex-start !important;
    border-radius:980px !important;
    scrollbar-width:none !important;
  }
  body .product-tabs > .tab-buttons::-webkit-scrollbar{display:none}
  body .product-tabs > .tab-buttons > .tab-button{
    padding:9px 16px !important;font-size:14px !important;flex-shrink:0 !important;
  }
  body .tab-content#fitment > h2{font-size:30px !important}
  body #fitmentAccordion .model-header{
    grid-template-columns:1fr auto auto !important;
    gap:10px !important;padding:12px 16px !important;
  }
  body #fitmentAccordion .model-header .model-hint{display:none !important}
}

/* ══════════════════════════════════════════════════════════════════════
   Mag product-page tabs — mockup-v12-hl pass. Adds the three pieces that
   were missing relative to https://www.go-parts.com/mockup-v12-hl.html#:
   1. Sticky tab bar (top:90px) that rides under the sticky masthead
      while scrolling through long fitment tables.
   2. Gradient-text <em> accent on section h2s ("Fitment", "Information").
   3. Glass-panel look on the fitment-accordion + specs + policies + misc
      cards (soft white gradient + blur + blue-tinted shadow), matching
      mockup-v12-hl's .fitment-table / .specs-grid / .policy-card rules.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Sticky tab bar */
body .product-tabs{
  position:relative !important;
}
body .product-tabs > .tab-buttons{
  position:sticky !important;
  top:90px !important;
  z-index:5 !important;
  align-self:flex-start !important;
}

/* 2. Gradient-em accent (blue → orange) on tab-panel h2s */
body .product-tabs .tab-content h2.fitment-h2,
body .product-tabs .tab-content h2.misc-h2,
body .product-tabs .tab-content h2.shipping-h2,
body .product-tabs .tab-content h2.specs-h2{
  font-size:44px !important;
  font-weight:800 !important;
  letter-spacing:-0.035em !important;
  color:var(--ink,#0d1424) !important;
  margin:0 0 14px !important;
  line-height:1.05 !important;
  text-align:left !important;
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
body .product-tabs .tab-content h2.fitment-h2 em,
body .product-tabs .tab-content h2.misc-h2 em,
body .product-tabs .tab-content h2.shipping-h2 em,
body .product-tabs .tab-content h2.specs-h2 em{
  font-style:normal !important;
  background:linear-gradient(135deg,var(--blue,#1a3db0),var(--orange,#ff7a1a)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}
@media (max-width:768px){
  body .product-tabs .tab-content h2.fitment-h2,
  body .product-tabs .tab-content h2.misc-h2,
  body .product-tabs .tab-content h2.shipping-h2,
  body .product-tabs .tab-content h2.specs-h2{
    font-size:30px !important;
  }
}

/* 3. Glass-panel look on the fitment-accordion — replaces the flat white
      card with the mockup-v12-hl translucent white gradient + blur +
      blue-tinted drop shadow. */
body #fitmentAccordion.fitment-accordion{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.75)) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  border-radius:16px !important;
  /* Mockup-v12-hl uses only a soft drop-shadow + a translucent white
     border, no ring shadow. That keeps the maker-head border inside
     reading as part of the glass panel instead of a double-frame. */
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15) !important;
  overflow:hidden !important;
  margin:12px 0 20px !important;
}
/* Maker head: translucent slab above the model rows */
body #fitmentAccordion .make-header{
  background:rgba(247,249,252,.65) !important;
  backdrop-filter:blur(8px) !important;
  border-bottom:1px solid rgba(148,163,184,.18) !important;
}
body #fitmentAccordion .make-content{
  background:transparent !important;
}
/* Model rows sit directly inside the glass accordion, no extra card */
body #fitmentAccordion .model-section{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(26,61,176,.06) !important;
  border-radius:0 !important;
  margin:0 !important;
}
body #fitmentAccordion .model-section:last-child{
  border-bottom:0 !important;
}
body #fitmentAccordion .model-header{
  background:transparent !important;
}
body #fitmentAccordion .model-header:hover{
  background:rgba(247,249,252,.5) !important;
}
/* The make-content-inner no longer needs its own padding since rows span
   edge-to-edge of the glass container */
body #fitmentAccordion .make-content-inner{
  padding:0 !important;
}
/* Details table: transparent so the glass shows through */
body #fitmentAccordion .model-content{
  background:rgba(247,249,252,.4) !important;
  border-top:1px solid rgba(26,61,176,.06) !important;
}
body #fitmentAccordion .fitment-details-table{
  background:transparent !important;
}
body #fitmentAccordion .fitment-details-table th{
  background:rgba(255,255,255,.5) !important;
}
/* (stale per-cell hover bg removed — row-level rgba(26,61,176,.05)
   shows through the transparent cells, matching mockup-v12-hl.) */

/* Policies + Misc tab cards — same glass treatment as fitment-table */
body .product-tabs .tab-content#shipping,
body .product-tabs .tab-content#misc{
  padding-top:10px !important;
}
body .product-tabs .tab-content#shipping > ul,
body .product-tabs .tab-content#misc > ul,
body .product-tabs .tab-content#shipping > p,
body .product-tabs .tab-content#misc > p,
body .product-tabs .tab-content#shipping > h3,
body .product-tabs .tab-content#misc > h3{
  background:transparent !important;
}
/* Wrap the policies + misc text blocks in a glass card via a subtle
   side-border + padding rather than a heavy panel */
body .product-tabs .tab-content#shipping,
body .product-tabs .tab-content#misc{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.7)) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  border-radius:20px !important;
  box-shadow:
    0 20px 50px -20px rgba(26,61,176,.15),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  padding:32px 36px !important;
}
@media (max-width:768px){
  body .product-tabs .tab-content#shipping,
  body .product-tabs .tab-content#misc{
    padding:22px 20px !important;
    border-radius:16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Mockup-v12-hl fitment-table polish — exact visual match. Legacy
   partial renders .make-section/.model-section/.fitment-details-table
   (HTML table); this block re-skins them to mirror the mockup's
   fit-slot/fit-row/fit-detail grid design without touching the markup:
   sliding left accent bar (blue hover, orange open), + → × spin on
   the expand chip, card-pop-out on the whole slot when open, and a
   5-column CSS-grid detail row with chip styling on attributes.
   ══════════════════════════════════════════════════════════════════════ */

/* fit-row replacement — slide-in left accent bar + tinted bg */
body #fitmentAccordion .model-header{
  border-left:4px solid transparent !important;
  transition:background .2s ease, border-left-color .25s cubic-bezier(.3,0,.3,1) !important;
}
body #fitmentAccordion .model-header:hover{
  background:linear-gradient(90deg,rgba(26,61,176,.05),transparent 70%) !important;
  border-left-color:var(--blue,#1a3db0) !important;
}
body #fitmentAccordion .model-header.expanded{
  background:linear-gradient(90deg,rgba(255,122,26,.06),transparent 75%) !important;
  border-left-color:var(--orange,#ff7a1a) !important;
}

/* Expand chip — + rotates 45° to × on open, colour goes grey→blue→orange */
body #fitmentAccordion .model-header .toggle-icon{
  box-shadow:inset 0 0 0 1px rgba(26,61,176,.08), 0 2px 4px rgba(10,20,36,.04) !important;
  transition:all .28s cubic-bezier(.3,1.3,.5,1) !important;
  font-size:18px !important;font-weight:600 !important;
}
body #fitmentAccordion .model-header:hover .toggle-icon{
  background:var(--blue,#1a3db0) !important;color:#fff !important;
  box-shadow:0 4px 12px -3px rgba(29,78,216,.45) !important;
}
body #fitmentAccordion .model-header.expanded .toggle-icon{
  background:var(--orange,#ff7a1a) !important;color:#fff !important;
  box-shadow:0 6px 16px -4px rgba(255,122,26,.55) !important;
  transform:rotate(45deg) !important;
}
/* When rotated, the ::before "+" becomes "×" visually; we also swap
   content back to "+" so the rotation does the work. Prior override
   kept the content at "×" which looked like × rotated 45° → misaligned. */
body #fitmentAccordion .model-header .toggle-icon::before{
  content:"+" !important;
}
body #fitmentAccordion .model-header.expanded .toggle-icon::before{
  content:"+" !important;          /* rotated 45° by parent → renders as × */
}

/* Card pop-out: when the whole .model-section has an expanded header,
   lift it into a floating orange-tinted card. Uses :has() (widely
   supported now); the fallback block below keeps older browsers sane. */
body #fitmentAccordion .model-section:has(.model-header.expanded),
body #fitmentAccordion .model-section.has-expanded{
  margin:10px 6px !important;
  border:2px solid rgba(255,122,26,.55) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#fffaf4 0%,#fff7ed 100%) !important;
  box-shadow:0 10px 28px -10px rgba(255,122,26,.3), 0 0 0 1px rgba(255,122,26,.08) !important;
  overflow:hidden !important;
}
body #fitmentAccordion .model-section:has(.model-header.expanded) .model-header,
body #fitmentAccordion .model-section.has-expanded .model-header{
  background:transparent !important;
  border-left:0 !important;
}
body #fitmentAccordion .model-section:has(.model-header.expanded) .model-content,
body #fitmentAccordion .model-section.has-expanded .model-content{
  background:transparent !important;
  border-top-color:rgba(255,122,26,.18) !important;
}

/* ────────────────────────────────────────────────────────────
   Legacy <table> → mockup .fit-detail grid. `display:contents` on
   table/thead/tbody makes those wrapper boxes disappear for layout,
   so <tr> / <th> / <td> become direct children of the grid host.
   Each <tr> then becomes a .fit-config-style 5-column grid row,
   matching the mockup's minmax() column sizing pixel-for-pixel.
   ──────────────────────────────────────────────────────────── */
body #fitmentAccordion .model-content{
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(248,250,253,.95)) !important;
  /* Zero vertical padding at rest so the collapsed .model-content
     occupies only its 1px border-top height (mockup-v12-hl's
     `.fit-detail { padding:0 28px }` resting state). Vertical
     padding is added back in the expanded rule further down. */
  padding:0 12px !important;
}
body #fitmentAccordion .fitment-scroll-container,
body #fitmentAccordion .fitment-table-wrapper{
  overflow:visible !important;
  min-width:0 !important;
}
body #fitmentAccordion .fitment-details-table,
body #fitmentAccordion .fitment-details-table thead,
body #fitmentAccordion .fitment-details-table tbody{
  display:contents !important;
  min-width:0 !important;
}
body #fitmentAccordion .fitment-details-table tr{
  display:grid !important;
  grid-template-columns:
    minmax(130px,1.2fr) minmax(90px,.9fr) minmax(110px,1fr)
    minmax(150px,1.4fr) minmax(150px,1.3fr) !important;
  gap:14px !important;
  align-items:center !important;
  padding:10px 16px !important;
  border:0 !important;
  border-radius:8px !important;
  transition:background .15s ease !important;
  font-size:13.5px !important;
}
body #fitmentAccordion .fitment-details-table thead tr{
  padding:8px 16px !important;
  margin-bottom:4px !important;
  border-bottom:1px solid rgba(148,163,184,.2) !important;
  border-radius:0 !important;
}
/* Row hover — matches mockup-v12-hl .fit-config:hover exactly: soft
   blue wash on the row, text + chip colours unchanged. No inset bar,
   no recoloring — hover is purely a background cue. */
body #fitmentAccordion .fitment-details-table tbody tr:hover{
  background:rgba(26,61,176,.05) !important;
}
body #fitmentAccordion .fitment-details-table th{
  background:transparent !important;
  padding:0 !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:0.1em !important;
  text-transform:uppercase !important;
  color:var(--muted,#64748b) !important;
  border-bottom:0 !important;
  white-space:normal !important;
  text-align:left !important;
}
body #fitmentAccordion .fitment-details-table td{
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  font-size:13.5px !important;
  line-height:1.4 !important;
}

/* Mockup column classes → rendered table cell order:
   1: Submodel (.sub — bold ink)
   2: Body Style (.body — muted, capitalized)
   3: Years (.yr — bold tabular)
   4: Engine (.eng — muted)
   5: Attributes (.attrs — chip group) */
body #fitmentAccordion .fitment-details-table td:nth-child(1){
  font-weight:700 !important;color:var(--ink,#0d1424) !important;
}
body #fitmentAccordion .fitment-details-table td:nth-child(2){
  font-weight:500 !important;color:var(--ink-2,#3b4458) !important;text-transform:capitalize !important;
}
body #fitmentAccordion .fitment-details-table td:nth-child(3){
  font-weight:700 !important;color:var(--blue,#1a3db0) !important;
  font-variant-numeric:tabular-nums !important;letter-spacing:-0.01em !important;
}
body #fitmentAccordion .fitment-details-table td:nth-child(4){
  font-weight:500 !important;color:var(--ink-2,#3b4458) !important;
}
/* Attributes cell — blue pill-chip look. Multiple space-separated
   attributes are rendered as a single cell; we keep them as one chip
   (matches the "Automatic AWD" single-pill look from the v2 screenshot). */
body #fitmentAccordion .fitment-details-table td:nth-child(5){
  display:flex !important;flex-wrap:wrap !important;gap:6px !important;
}
body #fitmentAccordion .fitment-details-table td:nth-child(5)::first-line{
  background:rgba(29,78,216,.08) !important;
}
/* Actually, style the whole cell content as a chip using a wrapper-span
   injected below via JS. As a CSS-only fallback we tint the whole cell
   background so the content reads as a highlighted attribute block. */
body #fitmentAccordion .fitment-details-table td:nth-child(5){
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:0.04em !important;
  color:var(--blue,#1a3db0) !important;
}

/* Hide the mobile-scroll-hint + scroll-fade legacy chrome — no longer
   needed since the grid layout wraps on small viewports. */
body #fitmentAccordion .mobile-scroll-hint,
body #fitmentAccordion .scroll-fade{display:none !important}

/* Submodel th has nested .submodel-desktop/.submodel-mobile spans — show
   the desktop label everywhere since the grid layout always fits. */
body #fitmentAccordion .fitment-details-table th .submodel-desktop{
  display:inline !important;
}
body #fitmentAccordion .fitment-details-table th .submodel-mobile{
  display:none !important;
}

@media (max-width:720px){
  body #fitmentAccordion .fitment-details-table tr{
    grid-template-columns:80px 1fr 1fr !important;
  }
  body #fitmentAccordion .fitment-details-table th:nth-child(n+4),
  body #fitmentAccordion .fitment-details-table td:nth-child(n+4){
    display:none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Fitment detail row polish — pixel-match mockup-v12-hl .fit-config:
   1. Split ATTRIBUTES cell into chips (JS injects <span class="chip">
      per token, .chip.drive for drive-type tokens like AWD/FWD/RWD).
   2. Hide "(click to expand)" / "(click to hide)" model-hint on
      desktop — it's noisy on a mouse pointer; keep on mobile where
      the tap affordance is useful.
   3. Preserve the orange mouseover underline on .model-name (user
      explicitly asked to keep it).
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Attribute chips — reset the nth-child cell + style injected spans */
body #fitmentAccordion .fitment-details-table td:nth-child(5){
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  letter-spacing:normal !important;
  color:inherit !important;
}
body #fitmentAccordion .fitment-details-table td:nth-child(5) .chip{
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:0.04em !important;
  padding:3px 8px !important;
  border-radius:980px !important;
  background:rgba(29,78,216,.08) !important;
  color:var(--blue,#1d4ed8) !important;
  border:1px solid rgba(29,78,216,.15) !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
  line-height:1.25 !important;
}
body #fitmentAccordion .fitment-details-table td:nth-child(5) .chip.drive{
  background:rgba(255,122,26,.08) !important;
  color:var(--orange,#ff7a1a) !important;
  border-color:rgba(255,122,26,.18) !important;
}

/* 2. Hide "(click to expand)" / "(click to hide)" hint on desktop */
@media (min-width:769px){
  body #fitmentAccordion .model-header .model-hint,
  body #fitmentAccordion .make-header .make-hint{
    display:none !important;
  }
}

/* 3. Orange underline hover on model-name (kept per user request) */
body #fitmentAccordion .model-header .model-name{
  transition:text-decoration-color .18s ease, color .18s ease !important;
  text-decoration:underline !important;
  text-decoration-color:transparent !important;
  text-underline-offset:4px !important;
  text-decoration-thickness:2px !important;
}
body #fitmentAccordion .model-header:hover .model-name{
  text-decoration-color:var(--orange,#ff7a1a) !important;
}

/* When the model-section is expanded (orange card pop-out), flatten the
   inner .model-content so the detail grid sits directly inside the orange
   card — no extra white sub-panel. Mockup-v12-hl has the detail as a
   direct child of the orange slot; the legacy partial wraps it in an
   extra .model-content div with its own bg, so we zero it out here. */
body #fitmentAccordion .model-section:has(.model-header.expanded) .model-content,
body #fitmentAccordion .model-section.has-expanded .model-content{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid rgba(255,122,26,.18) !important;
  border-radius:0 !important;
  /* Mockup-v12-hl `.fit-row.open + .fit-detail { padding:14px 28px 22px }`
     — keep the extra bottom breathing room so the config row doesn't
     kiss the orange card edge. */
  padding:14px 12px 22px !important;
  box-shadow:none !important;
}
/* Flatten the fitment-scroll-container / fitment-table-wrapper too — those
   add more nested padding/backgrounds in the legacy HTML that fight the
   pop-out card background. */
body #fitmentAccordion .model-section:has(.model-header.expanded) .fitment-scroll-container,
body #fitmentAccordion .model-section:has(.model-header.expanded) .fitment-table-wrapper,
body #fitmentAccordion .model-section.has-expanded .fitment-scroll-container,
body #fitmentAccordion .model-section.has-expanded .fitment-table-wrapper{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  margin:0 !important;
  min-width:0 !important;
}
/* Column-header row inside the expanded slot — mockup has it as small
   uppercase letters on the cream bg, borderless + bordered-bottom-hair. */
body #fitmentAccordion .model-section:has(.model-header.expanded) .fitment-details-table thead tr,
body #fitmentAccordion .model-section.has-expanded .fitment-details-table thead tr{
  border-bottom:1px solid rgba(255,122,26,.18) !important;
}

/* ── Tab-bar font + fitment-accordion trailing whitespace ──
   1. Pin Figtree on .tab-button (legacy page sets Arial on <button>).
   2. Zero out accordion margin-bottom + shrink the escape-margin
      below the last model-section so the fitment card hugs its
      content when only one model is rendered (as on this MDX-only
      Acura part). The mockup-v12-hl layout has many models per
      make so the trailing padding isn't visible there — on a
      single-model part the 10px model-section bottom margin + the
      accordion's own 20px margin-bottom stack into visible dead
      whitespace before the "Important:" notice. */
body .product-tabs > .tab-buttons > .tab-button{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
body #fitmentAccordion.fitment-accordion{
  margin-bottom:0 !important;
}
/* overflow:hidden on .make-content is REQUIRED for legacy toggleMake()
   max-height transitions + to clip collapsed (0-height) sections in
   multi-make lists. Previous overflow:visible attempt broke the Dodge
   maker row on hl-product. */
body #fitmentAccordion .make-content{
  overflow:hidden !important;
}
/* Default model-sections sit flat inside the accordion (no margin,
   hairline border-bottom only). Margin is added *only* when the
   section is expanded, producing the orange-pop-out card effect —
   see .has-expanded / :has(.model-header.expanded) rules. */
body #fitmentAccordion .model-section:has(.model-header.expanded),
body #fitmentAccordion .model-section.has-expanded{
  margin:10px 6px !important;
}

/* Final whitespace pass — single-make / single-model case has dead
   space below the last expanded model-row because three margins
   stack (model-content bottom padding + model-section bottom
   margin + accordion inner padding). Tighten all three so the
   accordion closes right under the last row, matching the mockup's
   multi-model case where the next maker-section fills the space. */
/* (older margin-bottom overrides collapsed into the single
   .has-expanded rule above — default flat rows need no margin.) */
/* Kill any trailing gap between the last make-content and the
   accordion bottom edge. */
body #fitmentAccordion .make-section:last-child{
  border-bottom:0 !important;
}
body #fitmentAccordion .make-section:last-child .make-content{
  padding-bottom:0 !important;
}

/* ── Maker-head pixel-parity with mockup-v12-hl .maker-head ──
   Legacy .fitment-badge pill → mockup .maker-head-count muted text.
   Kicker uses ::before on .make-header, already positioned. Also
   tightens the vertical padding back to mockup's 14px x 28px. */
body #fitmentAccordion .make-header{
  padding:14px 28px !important;
  background:var(--bg-2,#f5f7fa) !important;
  backdrop-filter:none !important;
  /* Legacy CSS sets a blue-tinted 4-sided border + 10px radius on
     .make-header — we want a flat strip with ONLY a bottom hairline
     (matches mockup-v12-hl .maker-head). Explicitly zero the other
     three sides + radius so the legacy rule doesn't leak. */
  border:0 !important;
  border-bottom:1px solid var(--line-soft,#eef1f6) !important;
  border-radius:0 !important;
  gap:12px !important;
}
body #fitmentAccordion .make-header .fitment-badge{
  font-size:12.5px !important;
  font-weight:500 !important;
  color:var(--muted,#64748b) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin-left:auto !important;
  white-space:nowrap !important;
}
body #fitmentAccordion .make-header .make-name{
  font-size:22px !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  line-height:1 !important;
  color:var(--ink,#0d1424) !important;
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
/* The ::before kicker ("Manufacturer") needs Figtree too + size exact */
body #fitmentAccordion .make-header::before{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  margin-right:4px !important;
}

/* (Previously forced margin-bottom:0 on the last expanded row to kill
   trailing whitespace, but that made the orange card kiss the accordion
   bottom edge. Restored the default 10px pop-out margin so there's
   breathing room between the card and the glass panel edge, matching
   the mockup-v12-hl visual rhythm when rows expand.) */

/* ps-product-new tab polish — parent wrapper on that page inherits
   text-align:center from a higher container, which centers the
   inline-flex tab bar. Legacy also adds a 3px ::after blue underline
   on .tab-button.active. Both conflict with the mockup-v12-hl look
   (left-aligned pill bar, no underline). Stomp them both explicitly. */
body .product-tabs{
  text-align:left !important;
}
body .product-tabs > .tab-buttons{
  justify-content:flex-start !important;
  border-bottom:0 !important;       /* kill legacy 2px grey baseline */
  margin-left:0 !important;
  margin-right:auto !important;
}
body .product-tabs > .tab-buttons > .tab-button::after,
body .product-tabs > .tab-buttons > .tab-button::before{
  display:none !important;         /* legacy blue underline bar */
  content:none !important;
}
body .product-tabs > .tab-buttons > .tab-button{
  margin-bottom:0 !important;      /* legacy -2px offset for baseline overlap */
}

/* Sticky tab bar: lift 18px below the sticky masthead so there's visible
   breathing room between the two (matches the ~visual gap the mockup-v12-hl
   achieves through its mini-product-bar height). Applies to Mag product,
   hl-product, and ps-product-new via the shared .product-tabs .tab-buttons
   selector. */
body .product-tabs > .tab-buttons{
  top:108px !important;
}

/* Kill the stacking context mockup-theme-v6 puts on `.hero .wrap` (z-index:1).
   On ps-product-new the sticky .tab-buttons ancestor chain includes
   section.hero > .wrap, and that stacking context prevents backdrop-filter
   from reaching scrolling content outside the context — so the bar reads as
   transparent/see-through on PS while hl-product (no .hero .wrap ancestor)
   renders the full glass blur. Reset it so backdrop-filter sees the viewport
   as its backdrop root, matching hl-product's rendering. */
body section.hero > .wrap{
  z-index:auto !important;
  position:static !important;
}

/* ── Late-block stomp: line-1667 bridge rules were overriding the
   mockup-v12-hl look. Explicit overrides here so the Mag + hl-product
   + ps-product-new tab bars render identically:
   - .tab-buttons { border-bottom: 0 } (kill 1px grey baseline)
   - .tab-button.active { border-bottom-color: transparent } (kill blue
     underline from the legacy rule at .product-tabs .tab-button.active)
   - .tab-content { transparent bg, no white-box border/shadow/radius,
     no horizontal padding } — earlier rule wrapped every panel in a
     white sub-card which diverged from the mockup. */
body .product-tabs .tab-buttons{
  border-bottom:0 !important;
}
body .product-tabs .tab-button.active{
  border-bottom-color:transparent !important;
}
body .product-tabs .tab-content{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:20px 0 8px !important;
  box-shadow:none !important;
}

/* ── Body content width parity ──
   Mag product page: .wrap.tabs-wrap = 1280 outer, 56 side padding,
   content = 1168. hl-product + ps-product-new wrap that same tabs block
   inside extra legacy containers (.main / .beautified-product) with
   32px horizontal padding — shrinking the tab content to 1104.
   Zero out that side padding on product pages so the three templates
   share the same 1168px fitment-table + tab-bar inner width. */
body .main{
  padding-left:0 !important;
  padding-right:0 !important;
}
body .beautified-product{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ════════ EXPERT GUIDE TAB — GLASS-NATIVE HIGHLIGHT ════════
 * Replaces the legacy amber + blue cheesy pulse on the Expert Guide tab
 * with a brand-gradient label + a small breathing sparkle dot before it.
 * No loud background colors — stays coherent with the liquid-glass pill bar. */
body .product-tabs > .tab-buttons > .tab-button.tab-highlight{
  position:relative !important;
  padding-left:20px !important;   /* room for the sparkle dot */
}
body .product-tabs > .tab-buttons > .tab-button.tab-highlight .tab-icon{
  /* Match the pre-refactor sizing + spacing: inherits tab font-size, 3px
   * right margin, plus the literal space in markup — same gap as before. */
  margin-right:3px;
}
body .product-tabs > .tab-buttons > .tab-button.tab-highlight .tab-label{
  background:linear-gradient(100deg,var(--blue) 0%,var(--orange) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-weight:800;letter-spacing:-0.01em;
}
body .product-tabs > .tab-buttons > .tab-button.tab-highlight::before{
  content:"";
  position:absolute;left:8px;top:50%;
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ff9a5a,var(--orange) 60%,#c2410c);
  box-shadow:
    0 0 0 2px rgba(255,122,26,.18),
    0 0 12px 2px rgba(255,122,26,.55);
  transform:translateY(-50%);
  animation:expertSparkle 3.2s ease-in-out infinite;
}
@keyframes expertSparkle{
  0%,100%{opacity:.78;box-shadow:0 0 0 2px rgba(255,122,26,.14),0 0 8px 1px rgba(255,122,26,.4)}
  50%    {opacity:1;  box-shadow:0 0 0 3px rgba(255,122,26,.22),0 0 16px 3px rgba(255,122,26,.7)}
}
/* When active, match the other tabs' plain white label (the sliding pill
 * already carries the brand color). Keep the sparkle dot + emoji visible but
 * soften the dot so it doesn't fight the white label on the pill. */
body .product-tabs > .tab-buttons > .tab-button.tab-highlight.active .tab-label{
  background:none !important;
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:#fff !important;color:#fff !important;
}
body .product-tabs > .tab-buttons > .tab-button.tab-highlight.active .tab-icon{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
body .product-tabs > .tab-buttons > .tab-button.tab-highlight.active::before{
  background:radial-gradient(circle at 30% 30%,#fff,#ffd9b3 60%,#ff9a5a);
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 10px 2px rgba(255,255,255,.5);
}

/* Respect users who prefer reduced motion — drop the sparkle animation,
 * keep the static gradient label + dot so it still differentiates. */
@media (prefers-reduced-motion: reduce){
  body .product-tabs > .tab-buttons > .tab-button.tab-highlight::before{
    animation:none;
  }
}

/* Bolt "Buy Now" button — reverted to the v64 state per user request:
 * wrapper-level flash + edge-to-edge shimmer, Bolt wrapper acts as a
 * clipping container so the sweep isn't broken up by Bolt's internals. */
.price-card .buy-col .bolt-product-checkout-button{
  /* Height matches `.btn-add-to-cart` so the button pair aligns on
     every page. Magento's BoltPay extension renders the inner markup
     differently than hl-product — it strips the `.bolt-checkout-button`
     wrapper and leaves a `clear:both` div that would otherwise push the
     wrapper to ~62px. `overflow:hidden` clips the stray clear div
     without affecting the interactive Bolt button element. */
  width:100% !important;flex:0 0 auto !important;height:50px !important;min-height:50px !important;max-height:50px !important;
  background:transparent !important;box-shadow:none !important;
  position:relative !important;
  border-radius:8px !important;
  overflow:hidden !important;
  isolation:isolate;
  --bolt-primary-action-color: transparent !important;
  --bolt-primary-action-box-shadow-color: transparent !important;
  --bolt-button-hover-color: transparent !important;
}
.price-card .buy-col .bolt-product-checkout-button .bolt-checkout-button,
.price-card .buy-col .bolt-product-checkout-button [data-tid="bolt-checkout-button"]{
  width:100% !important;height:50px !important;min-height:50px !important;padding:0 18px !important;
  margin:0 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  background:linear-gradient(135deg,var(--orange),#ff5c33) !important;
  color:#fff !important;
  border:0 !important;border-radius:8px !important;
  font-family:inherit !important;font-size:14px !important;font-weight:700 !important;
  letter-spacing:-0.005em !important;text-transform:none !important;
  box-shadow:0 12px 32px -10px rgba(255,122,26,.55),inset 0 1px 0 rgba(255,255,255,.2) !important;
  position:relative !important;overflow:hidden !important;
  transform:none !important;
  transition:all .15s !important;
}
.price-card .buy-col .bolt-product-checkout-button [data-tid="bolt-checkout-button"]:hover{
  transform:none !important;
  box-shadow:0 16px 40px -6px rgba(255,122,26,.6) !important;
}
/* Flash — quick full-width bright pulse on mouseover. */
.price-card .buy-col .bolt-product-checkout-button::before{
  content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.45);
  opacity:0;pointer-events:none;
  z-index:5;border-radius:inherit;
}
.price-card .buy-col .bolt-product-checkout-button:hover::before{
  animation:boltBuyFlash .5s ease-out forwards;
}
@keyframes boltBuyFlash{
  0%  {opacity:.6}
  60% {opacity:.08}
  100%{opacity:0}
}
/* Diagonal shimmer sweep — full edge-to-edge (0% → 100% gradient) so the
 * bright band catches the sides as it passes. Sits on the wrapper so
 * Bolt's internal elements can't break up the sweep. */
.price-card .buy-col .bolt-product-checkout-button::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.38) 50%,transparent 100%);
  transform:translateX(-100%);
  transition:transform .35s ease;
  pointer-events:none;
  z-index:6;border-radius:inherit;
}
.price-card .buy-col .bolt-product-checkout-button:hover::after{
  transform:translateX(100%);
}
/* Hide the Bolt logo image; keep only the injected "⚡ Buy Now" label. */
.price-card .buy-col .bolt-product-checkout-button [data-tid="bolt-checkout-button"] img{
  display:none !important;
}

/* Bolt button text rewrite — the raw Bolt button reads "Continue to Payment";
 * we want "⚡ Buy Now" on every product page (hl-product has this inline,
 * ports here so Magento product + ps-product-new get it too). Works on any
 * `.bolt-product-checkout-button` ancestor site-wide. */
.bolt-product-checkout-button [data-tid="bolt-checkout-button-text"]{
  visibility:hidden !important;position:relative !important;
}
.bolt-product-checkout-button [data-tid="bolt-checkout-button-text"]::after{
  content:"⚡ Buy Now" !important;
  visibility:visible !important;
  position:absolute !important;
  left:50% !important;top:50% !important;
  transform:translate(-50%,-50%) !important;
  font-size:16px !important;font-weight:700 !important;
  white-space:nowrap !important;width:max-content !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  line-height:1 !important;
}

/* ════════ STOCK URGENCY PILL ════════
 * Shown above the price in the hl-product / ps-product-new price-card when
 * the last 1 or 2 units of a used-OEM item are still in stock (or when the
 * item is unavailable). Glass-pill design that fits the v2 theme instead of
 * the legacy loud badge. 3+ units renders nothing — Add to Cart already
 * signals availability. */
.stock-urgency{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;margin:0 0 10px;
  border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  border:1px solid;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.stock-urgency .stock-urgency-dot{
  width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;
  animation:stockUrgencyPulse 1.6s ease-in-out infinite;
}
.stock-urgency--critical{
  background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(239,68,68,.05));
  border-color:rgba(239,68,68,.32);color:#b91c1c;
}
.stock-urgency--critical .stock-urgency-dot{
  background:#ef4444;
  box-shadow:0 0 0 0 rgba(239,68,68,.6);
  animation-name:stockUrgencyPulseCritical;
}
.stock-urgency--low{
  background:linear-gradient(135deg,rgba(234,88,12,.14),rgba(234,88,12,.05));
  border-color:rgba(234,88,12,.32);color:#9a3412;
}
.stock-urgency--low .stock-urgency-dot{
  background:#ea580c;
  box-shadow:0 0 0 0 rgba(234,88,12,.55);
  animation-name:stockUrgencyPulseLow;
}
.stock-urgency--oos{
  background:linear-gradient(135deg,rgba(220,38,38,.15),rgba(220,38,38,.06));
  border-color:rgba(220,38,38,.35);color:#b91c1c;
  cursor:default;pointer-events:none;user-select:none;
}
.stock-urgency--oos .stock-urgency-dot{
  background:#dc2626;animation:none;
}
@keyframes stockUrgencyPulseCritical{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.55)}
  50%    {transform:scale(1.2);box-shadow:0 0 0 6px rgba(239,68,68,0)}
}
@keyframes stockUrgencyPulseLow{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(234,88,12,.5)}
  50%    {transform:scale(1.2);box-shadow:0 0 0 6px rgba(234,88,12,0)}
}
@media (prefers-reduced-motion: reduce){
  .stock-urgency .stock-urgency-dot{animation:none}
}

/* Tighten the gap between the breadcrumb bar and the hero content on the
 * product templates. The base rule was `.hero{padding:48px 0 96px}` from
 * the mockup, but on opstest that reads as too much whitespace between
 * crumbs and the gallery/summary. 20px pulls it in to match the visual
 * cadence of mockup-v12-hl. */
body .main > section.hero,
body section.hero{
  padding-top:10px !important;
  padding-bottom:20px !important;
}
@media(max-width:960px){
  body .main > section.hero,
  body section.hero{ padding-top:16px !important; }
}
@media(max-width:560px){
  body .main > section.hero,
  body section.hero{ padding-top:12px !important; }
}

/* Hide "was added/removed from your shopping cart" flash messages on
   the cart page — they're redundant since the user is already looking
   at the cart contents. */
body.checkout-cart-index .messages,
body.checkout-cart-index .global-messages,
body.checkout-cart-index ul.messages{
  display:none !important;
}

/* Stock urgency pill now lives in the buy-col above the Add to Cart button.
 * `align-self: center` lets the pill shrink to its content width and center
 * itself in the column — previous `align-self: stretch` was making the pill
 * span the full column width, which left extra blank space to the right of
 * the dot + text (they were flex-start, not centered inside the stretched
 * pill). */
.price-card .buy-col .stock-urgency{
  margin:0 0 10px;align-self:center;
}

/* Price-card footer row — sits below the two-column price-card-grid and
 * spans the full width of the card. Houses the Affirm "as low as $X/mo"
 * badge and the conditional FREE SHIPPING badge so they read as a single
 * unified line at the bottom of the purchase panel instead of being tucked
 * inside one of the columns. */
.price-card .price-card-footer{
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;text-align:center;
  margin-top:8px;padding-top:14px;
  border-top:1px solid rgba(29,78,216,.08);
}
.price-card .price-card-footer .price-per-month{
  margin:0;flex:0 1 auto;min-width:0;text-align:center;
}
.price-card .price-card-footer .free-shipping-badge{
  flex:0 0 auto;
}
.price-card .price-card-footer .free-shipping-badge > span{
  display:inline-flex;align-items:center;gap:6px;
  background:#059669;color:#fff;
  padding:7px 14px;border-radius:999px;
  font-weight:700;font-size:12.5px;letter-spacing:.02em;
  box-shadow:0 4px 10px -4px rgba(5,150,105,0.5);
}

/* Affirm "as low as $X/mo" — readable 2-line layout. Let the Affirm text
 * wrap naturally so "See if you qualify" sits on its own line at normal
 * desktop widths, and style the anchor so it's obviously a link. */
.price-card .price-card-footer .price-per-month{
  min-width:0;
}
.price-card .price-card-footer .price-per-month .affirm_badge,
.price-card .price-card-footer .price-per-month .affirm_badge *{
  white-space:normal !important;
  font-size:14px !important;
  line-height:1.45 !important;
  letter-spacing:-0.005em !important;
}
/* "See if you qualify" — brand-blue + underline + trailing arrow so it
 * reads as an interactive CTA rather than body text. Affirm places the
 * "qualify" link as the LAST <a> in the widget, so :last-of-type targets
 * it reliably without picking up the "Affirm" brand link earlier in the
 * sentence. */
.price-card .price-card-footer .price-per-month .affirm_badge a,
.price-card .price-card-footer .price-per-month .affirm_badge a:visited{
  color:var(--blue) !important;
  font-weight:700 !important;
  cursor:pointer !important;
}
.price-card .price-card-footer .price-per-month .affirm_badge a:last-of-type,
.price-card .price-card-footer .price-per-month .affirm_badge a:last-of-type:visited{
  /* Force "See if you qualify" onto its own 2nd line regardless of how
   * much room is left on the preceding line. Brand-blue color alone now
   * carries the "this is a link" affordance (no underline, no bold). */
  display:block !important;
  margin-top:4px !important;
  font-weight:500 !important;
  text-decoration:none !important;
}
.price-card .price-card-footer .price-per-month .affirm_badge a:hover{
  color:var(--blue-2) !important;
}
.price-card .price-card-footer .price-per-month .affirm_badge a:last-of-type:hover{
  text-decoration:underline !important;
  text-decoration-thickness:1.5px !important;
  text-underline-offset:3px !important;
}
.price-card .price-card-footer .price-per-month .affirm_badge svg,
.price-card .price-card-footer .price-per-month .affirm_badge img,
.price-card .price-card-footer .price-per-month .affirm_badge .__affirm-logo{
  max-height:16px;width:auto;vertical-align:-2px;
}

/* Button label — user wanted larger Add to Cart / Buy Now copy. Bumps
 * both to 16px with slightly tighter letter-spacing so the button reads
 * at a glance without inflating height. Wins over the mockup's 14px
 * `.price-card .buy-col .btn` typography already set earlier. */
.price-card .buy-col .btn.primary.btn-add-to-cart,
.price-card .buy-col .bolt-product-checkout-button [data-tid="bolt-checkout-button"]{
  font-size:16px !important;
  letter-spacing:-0.01em !important;
  font-weight:800 !important;
}

/* Tighten the gap between the Wrenchy panel and the tab strip on hl-product
 * / ps-product-new. Default mockup `.product-tabs { margin-top: 40px }`
 * plus the Wrenchy wrapper's own margin stacked to ~200px once the mockup's
 * `.tabs-wrap { margin-top: 80px }` applied; target ~100px total. */
body .product-tabs{
  margin-top:20px !important;
  padding-top:0 !important;
}

/* Homepage hero — drop italics from "Go-Parts." and "Go-To Place" (keep
 * the blue→orange gradient clip). Keeps a small padding-right inline-block
 * compensation so the last glyph ("s" in Go-Parts) doesn't get clipped on
 * its right side — letter-spacing:-0.045em tightens the box enough that
 * background-clip:text crops the stroke overshoot without it. */
.home-hero-title em,
.usp-head h2 em{
  font-style:normal !important;
  display:inline-block !important;
  padding-right:0.05em !important;
  margin-right:-0.02em !important;
  vertical-align:baseline !important;
}

/* Homepage spacing trims:
 *   - Knock 50px off the gap between the USP cards (ends with "Go-Parts
 *     Garage") and the "What buyers are saying" heading below. Original
 *     was .usp-section bottom 56 + .home-reviews top 48 = 104px; trim to
 *     31 + 23 = 54px ⇒ -50px.
 *   - Halve the gap between "What buyers are saying" and "Racing Partner
 *     Videos" (reviews bottom 64 → 32, racing top 88 → 44 ⇒ ~76px total
 *     from 152px). */
body .usp-section{
  padding-bottom:31px !important;
}
body .home-reviews{
  padding-top:23px !important;
  padding-bottom:32px !important;
}
body .racing{
  padding-top:44px !important;
  padding-bottom:64px !important;
}
/* Mobile: ensure the racing videos still breathe above the footer.
   Without this, the last video card butts straight into the footer. */
@media (max-width:768px){
  body .racing{
    padding-top:32px !important;
    padding-bottom:44px !important;
  }
}

/* hl-product.php + ps-product-new.php h1 — dial down from the mockup's
 * 48-52px so long Hollander/PS titles don't overwhelm the summary column.
 * Scoped via `.product-info` so the Magento product page (which uses
 * `.summary`, has shorter titles) keeps the full 52px mockup size. */
body .product-info .title{
  /* Split the difference between the mockup's 52px and the earlier 34px
   * shrink — 43px reads as substantial for the product name without
   * eating column height the way 52px did on long Hollander titles. */
  font-size:43px !important;
  line-height:1.08 !important;
  letter-spacing:-0.03em !important;
}
@media(max-width:720px){
  body .product-info .title{font-size:30px !important}
}

/* Hero top spacing restored — user prefers the original mockup breathing
 * room above the hero (.home-hero { padding: 40px 0 56px }). Earlier
 * `padding-top:0 + margin-top:-10px` trim has been removed. */

/* ════════ CART PAGE REFINEMENTS (/checkout/cart) ════════ */

/* "Customers also bought" — drop italics from the gradient em per user.
 * Blue→orange clip stays, font sits upright. */
.cab-section h2 em{
  font-style:normal !important;
  padding-right:0 !important;
  margin-right:0 !important;
  display:inline !important;
}

/* Enlarge cart line-item thumbnails so they read at a glance (matches
 * the bigger thumb sizing used on live www.go-parts.com/checkout/cart).
 * Was 76×76 at 84% bg-size; bump to 120×120 at contain so the image fills. */
body .cart-item{
  grid-template-columns:120px 1fr auto !important;
  gap:20px !important;
  padding:16px 18px !important;
}
body .cart-item .thumb{
  width:120px !important;height:120px !important;
  background-size:contain !important;
  border-radius:12px !important;
}
@media(max-width:768px){
  body .cart-item{grid-template-columns:96px 1fr auto !important;gap:14px !important;padding:14px !important}
  body .cart-item .thumb{width:96px !important;height:96px !important}
}

/* Checkout button — Bolt widget treatment.
 *
 * Why this is structured as two selector-groups:
 * Bolt's replace.phtml HIDES our original `.checkout-btn` (display:none)
 * and INSERTS a new <div class="bolt-checkout-button ..."> sibling in its
 * place. That wrapper div then hosts Bolt's inner click-target (a span
 * or button carrying [data-tid="bolt-checkout-button"]). When we paint
 * orange on BOTH the outer wrapper div AND the inner element, they render
 * as stacked orange surfaces — the "button on top of another button" the
 * user saw.
 *
 * Fix: the outer `.bolt-checkout-button` wrapper stays TRANSPARENT —
 * structural only. Orange + shape + shadow + label styling live on the
 * pre-transform `.checkout-btn` (shown briefly before Bolt runs) and on
 * the inner `[data-tid="bolt-checkout-button"]` element Bolt renders
 * after replacement. Result: exactly one orange surface at any time.
 *
 * Lighter orange (Tailwind orange-500 → orange-600) per user. */

/* Center the checkout button column so the CTA sits on the middle axis. */
.summary-panel{text-align:center}

/* Outer Bolt wrapper — transparent structural container only. */
.summary-panel .bolt-checkout-button{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  width:100% !important;
  display:block !important;
  margin:0 auto !important;
  --bolt-primary-action-color: transparent !important;
  --bolt-primary-action-text-color: #ffffff !important;
  --bolt-primary-action-box-shadow-color: transparent !important;
  --bolt-button-hover-color: transparent !important;
  --bolt-button-text-color: #ffffff !important;
  --bolt-primary-action-hover-color: transparent !important;
}

/* Pre-Bolt (original button, before replace.phtml hides it) + post-Bolt
 * (the inner click-target Bolt renders inside its wrapper div). Both get
 * the full orange visual so the button looks identical across the swap. */
.summary-panel button.checkout-btn,
.summary-panel .bolt-checkout-button [data-tid="bolt-checkout-button"]{
  display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;
  /* Narrower than the column so there's equal space left + right. Previous
   * `width: 100%` was making the button hit both edges of the column. */
  width:auto !important;max-width:calc(100% - 48px) !important;min-width:260px !important;
  height:58px !important;min-height:58px !important;
  margin:0 auto !important;padding:0 32px !important;
  border:0 !important;border-radius:14px !important;
  color:#fff !important;
  font-family:inherit !important;font-size:17px !important;font-weight:800 !important;
  letter-spacing:-0.005em !important;text-transform:none !important;
  background:linear-gradient(135deg,#f97316 0%,#ea580c 100%) !important;
  box-shadow:0 16px 32px -10px rgba(234,88,12,.55),inset 0 1px 0 rgba(255,255,255,.25) !important;
  position:relative !important;overflow:hidden !important;
  transition:all .2s ease !important;
  cursor:pointer !important;
}
.summary-panel button.checkout-btn:hover,
.summary-panel .bolt-checkout-button [data-tid="bolt-checkout-button"]:hover{
  background:linear-gradient(135deg,#fb923c 0%,#f97316 100%) !important;
  box-shadow:0 22px 44px -10px rgba(234,88,12,.65),inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform:translateY(-2px) !important;
}
/* Hide Bolt's "Supported cards" row (separate payment-method strip below
 * already conveys that). */
.summary-panel .bolt-checkout-button img[alt*="Supported cards"],
.summary-panel .bolt-checkout-button img[alt*="supported cards"]{display:none !important}
/* Bolt's text span — stays white + weight so it reads on orange. */
.summary-panel .bolt-checkout-button [data-tid="bolt-checkout-button-text"]{
  color:#ffffff !important;font-weight:800 !important;letter-spacing:-0.005em !important;
}

/* User preference: keep OUR styled `.checkout-btn` visible (its gradient /
 * shadow / shape read nicer than Bolt's widget) and HIDE the Bolt widget
 * Bolt's replace.phtml inserts. The button's JS click handler proxies to
 * Bolt's hidden widget (if present) so the Bolt popup still fires for
 * checkout. If Bolt isn't active, the button falls back to /checkout/onepage. */
.summary-panel button.checkout-btn[data-was-replaced="true"]{
  display:flex !important;         /* override Bolt's inline display:none */
}
.summary-panel .bolt-checkout-button{
  display:none !important;
}

/* "Updating cart…" pill shown briefly while a qty change or remove click
 * triggers the form POST (the page reloads after). Non-blocking visual
 * feedback so the user knows their action registered. */
/* `[hidden]` always wins so the indicator genuinely disappears between
 * user actions — earlier the `display:inline-flex` rule was outranking
 * the user-agent [hidden] { display:none } at equal specificity and the
 * spinner animated nonstop. */
.cart-update-indicator[hidden]{display:none !important}
.cart-update-indicator:not([hidden]){
  display:inline-flex;align-items:center;gap:8px;
  margin:12px 16px 4px auto;padding:8px 14px;border-radius:999px;
  background:rgba(26,61,176,.08);border:1px solid rgba(26,61,176,.18);
  color:var(--blue);font-size:12.5px;font-weight:700;letter-spacing:.01em;
}
.cart-update-indicator .spinner{
  width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(26,61,176,.25);border-top-color:var(--blue);
  animation:cartSpin .7s linear infinite;
}
@keyframes cartSpin{to{transform:rotate(360deg)}}
.cart-items form > .cart-update-indicator:not([hidden]){
  float:right;margin:8px 18px 12px;
}

/* Qty pill for Hollander (used-unique-inventory) items — constantly
 * greyed-out and non-interactive. Matches live www.go-parts.com/checkout
 * /cart `.qty-fixed`: gray-100 bg, gray-200 border, gray-700 text. Help
 * cursor on hover reveals a custom tooltip explaining the fixed qty.
 *
 * The legacy `.cart-item .qty-box` rule (0,0,2,0) was beating my
 * `.qty-box--locked` (0,0,1,0) and painting the pill white with a 1px
 * light border. Scope with `.cart-item .qty-box.qty-box--locked`
 * (0,0,3,0) + `!important` on the key properties so this wins cleanly. */
.cart-items{overflow:visible !important}   /* unclip the tooltip bubble */
.cart-item .qty-box.qty-box--locked,
.qty-box.qty-box--locked{
  position:relative !important;
  display:inline-flex !important;align-items:center !important;gap:8px !important;
  height:34px !important;padding:6px 14px !important;
  border-radius:8px !important;
  background:#f3f4f6 !important;border:2px solid #e5e7eb !important;
  color:#374151 !important;font-size:14px !important;font-weight:600 !important;
  letter-spacing:-0.005em !important;
  cursor:help !important;user-select:none;
  overflow:visible !important;   /* don't clip our own ::after tooltip */
}
.cart-item .qty-box.qty-box--locked .qty-label,
.qty-box.qty-box--locked .qty-label{
  font-size:12px;color:#6b7280;font-weight:600;letter-spacing:.02em;
}
.cart-item .qty-box.qty-box--locked .qty-val,
.qty-box.qty-box--locked .qty-val{
  font-size:15px;font-weight:700;color:#374151;
}

/* Hover tooltip — custom popup explaining why qty is fixed. Bubble via
 * ::after, triangle pointer via ::before. 250ms delay on hover in so
 * accidental mouse-overs don't flash the tooltip. */
.qty-box--locked::after{
  content:"Used OEM parts are unique inventory — each item in stock is one physical unit, so qty is fixed at 1.";
  position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(4px);
  width:260px;padding:10px 14px;border-radius:10px;
  background:#0d1424;color:#fff;
  font-size:12.5px;font-weight:500;line-height:1.45;letter-spacing:-0.005em;
  text-align:center;white-space:normal;
  box-shadow:0 12px 28px -10px rgba(10,20,36,.55);
  opacity:0;pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  transition-delay:0s;
  z-index:20;
}
.qty-box--locked::before{
  content:"";position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%) translateY(4px);
  border:6px solid transparent;border-top-color:#0d1424;
  opacity:0;pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  transition-delay:0s;
  z-index:21;
}
.qty-box--locked:hover::after,
.qty-box--locked:focus-within::after,
.qty-box--locked:hover::before,
.qty-box--locked:focus-within::before{
  opacity:1;transform:translateX(-50%) translateY(0);
  transition-delay:.25s;
}

/* Set-based CTA on cart rows — appears beside the locked Qty pill for HL
 * items whose part type is in /hollander-interchange/config/set_based_parts.json
 * (wheels, hubs, axles, struts, coil springs, covers). Clicking jumps to
 * the product page's "Other Matching Units" panel so the user can discover
 * pair / full-set options via the set-based modal there. */
.set-based-cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:10px;padding:6px 12px;border-radius:999px;
  background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(59,130,246,.04));
  border:1px solid rgba(26,61,176,.18);
  color:var(--blue);font-size:12.5px;font-weight:700;letter-spacing:-0.005em;
  text-decoration:none;line-height:1;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.set-based-cta:hover{
  background:linear-gradient(135deg,rgba(26,61,176,.14),rgba(59,130,246,.08));
  border-color:rgba(26,61,176,.3);
  color:var(--blue-2);
  transform:translateY(-1px);
}
.set-based-cta svg{flex:none;color:var(--blue)}
.set-based-cta-arrow{display:inline-block;transition:transform .15s ease}
.set-based-cta:hover .set-based-cta-arrow{transform:translateX(3px)}
@media(max-width:640px){
  .set-based-cta{display:inline-flex;margin:6px 0 0;width:fit-content}
}

/* Static-page hero h1s — mockup `.title` treatment (blue→orange gradient
   on the emphasized <em>) applied uniformly across the simple flat PHP
   pages so they match the v2 look. */
.testimonials-hero .title,
.about-hero .title,
.help-hero .title,
.policy-hero .title,
.shipping-hero .title,
.shop-hero .title,
.contact-hero .title,
.media-hero .title{
  font-size:clamp(36px, 4.5vw, 52px) !important;
  font-weight:800 !important;
  letter-spacing:-0.04em !important;
  line-height:1.02 !important;
  color:var(--ink, #0d1424) !important;
  margin:0 0 12px !important;
  text-shadow:none !important;
}
.testimonials-hero .title em,
.about-hero .title em,
.help-hero .title em,
.policy-hero .title em,
.shipping-hero .title em,
.shop-hero .title em,
.contact-hero .title em,
.media-hero .title em{
  font-style:normal !important;
  background:linear-gradient(100deg,var(--blue) 0%,var(--orange) 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  /* inline-block + padding-right gives `background-clip:text` breathing
   * room so the final glyph's right stroke (e.g. "s" in "Go-Parts")
   * isn't cropped by the tight `letter-spacing:-0.04em` box. */
  display:inline-block !important;
  padding-right:0.05em !important;
  margin-right:-0.02em !important;
  vertical-align:baseline !important;
}
/* Separator glyph for multi-title heads like "Privacy Policy | Terms
   of Use" — uses a darker slate so the pipe is visible on the pale
   hero card (was slate-400 #94a3b8 → bright-on-bright). */
.policy-hero .title .title-sep,
.testimonials-hero .title .title-sep{
  color:#475569 !important;
  font-weight:400 !important;margin:0 0.15em !important;
  opacity:.6 !important;
}
/* privacy_terms.php jump-links were `color:#fbbf24` (amber) against the
   dark-blue inline hero — now that the bridge repaints the hero pale,
   the amber reads as bright-on-bright. Swap to brand blue. */
.policy-hero .jump-links a{
  color:var(--blue, #1d4ed8) !important;
}
.policy-hero .jump-links a:hover{
  color:var(--orange, #f97316) !important;text-decoration:underline !important;
}
/* Visible pipe between the two jump-links ("Privacy Policy" / "Terms of
   Use") — the original template relied on whitespace-only separation,
   which read as no separator on the pale card. Inserted via a pseudo
   on the second link's leading edge. */
.policy-hero .jump-links a + a::before{
  content:"|";
  color:#475569;
  opacity:.45;
  font-weight:400;
  margin-right:16px;margin-left:-16px;
  pointer-events:none;
}
/* Contrast fix: subtitle + intro paragraph were rendering light-on-light
 * against the pale hero background. Force readable dark tones across all
 * static-page hero variants — except .about-hero p which is intentionally
 * pill-styled for about_wrenchy.php (rule earlier in this file). */
.testimonials-hero h2,
.help-hero h2,
.policy-hero h2,
.shipping-hero h2,
.shop-hero h2,
.contact-hero h2,
.media-hero h2{
  color:#0d1424 !important;font-weight:700 !important;letter-spacing:-0.015em !important;text-shadow:none !important;
}
.testimonials-hero p,
.help-hero p,
.policy-hero p,
.shipping-hero p,
.shop-hero p,
.contact-hero p,
.media-hero p{
  color:#334155 !important;font-size:16px !important;line-height:1.7 !important;max-width:900px !important;text-shadow:none !important;
}

/* Homepage .hero-proof — keep the original neutral glass card. Only the
 * pf-dot markers are restyled as thin orange vertical dividers (mirroring
 * the divider style from .why-oem-banner but in brand orange, not green). */
.hero-proof .pf-dot{
  width:1px !important;height:24px !important;border-radius:0 !important;
  background:linear-gradient(180deg,transparent,rgba(249,115,22,.5),transparent) !important;
  opacity:1 !important;
}

/* ======================================================================
   3-row mobile header
   ------------------------------------------------------------------
   Desktop is untouched: the form's `.search-form` class acts like the
   old inline `style="display:contents"` — input + submit flow up into
   `.search` as direct flex children, rendering the unified search pill.

   Mobile layout (≤768px) rearranges into 3 stacked rows:
     Row 1  .utility         → My Account · About Us · Help Desk
     Row 2  logo  +  search-form (input + submit)
     Row 3  Browse by Vehicle  +  Cart

   Mechanism: `.search` becomes `display:contents` on mobile so its
   children (browse-inline, divider, search-form) become direct flex
   siblings of `.masthead .wrap` and can be re-ordered via `order`.
   ====================================================================== */

/* Desktop: form stays transparent so current layout is unchanged. */
.search .search-form{display:contents}

/* Search magnifying-glass icon — inline affordance that the input IS a
   search field. On desktop the form has display:contents, so the icon
   becomes a direct flex child of `.search` (sits just left of the input,
   right of the divider). On mobile the form is a real flex container and
   the icon is the leftmost child of the search pill. */
.search .search-ico{
  flex:none;width:18px;height:18px;
  margin-left:10px;margin-right:-2px;
  color:rgba(255,255,255,.65);
  transition:color .2s ease;
}
.search:focus-within .search-ico{color:var(--ink, #0d1424)}
.search .search-form:focus-within .search-ico{color:var(--ink, #0d1424)}

/* Inline utility links are a mobile-only duplicate — hidden on desktop,
   where the top `.utility` bar still carries these links.             */
.masthead-util{display:none}

/* Trust chip — mobile row-3 filler between Browse and Cart. Desktop has
   its own `.flag-chip` component so the mobile chip stays hidden there. */
.masthead-trust{display:none}

@media (max-width:768px){
  /* On mobile, the inline copy takes over and the outer utility bar is
     hidden — so the three links share row 1 with the logo, right-aligned. */
  .utility{display:none !important}
  .masthead .masthead-util{
    display:flex !important;align-items:center !important;justify-content:flex-end !important;
    order:1 !important;flex:1 1 auto !important;margin-left:auto !important;
    /* Wider responsive gap now that the first link is "Account" (not
       "My Account") — ~13px on narrow phones up to ~22px on larger
       phones for more breathing room between the three links. */
    gap:clamp(12px, 4vw, 22px) !important;min-width:0 !important;
  }
  .masthead .masthead-util a{
    color:rgba(255,255,255,.88) !important;
    /* Scale link size with viewport width: ~11.5px at 340, ~14.5px at 430,
       capped at 15px. Keeps tap targets comfortable on larger phones. */
    font-size:clamp(11.5px, 3.4vw, 15px) !important;
    font-weight:500 !important;
    white-space:nowrap !important;margin:0 !important;
  }
  .masthead .masthead-util a:hover{color:#fff !important}

  /* Masthead is already flex-wrap on mobile (mockup-theme-v6.css line 1937).
     Override per-child order to route elements to the correct row.      */
  .masthead .wrap{gap:8px !important;padding:10px 14px !important}
  .masthead .wordmark{
    order:1 !important;flex:0 0 auto !important;max-width:38% !important;
    padding:5px 9px !important;
  }
  .masthead .wordmark .logo-img{height:22px !important}

  /* Dissolve .search so browse-inline + search-form become row-level
     flex siblings of .masthead .wrap (can be re-ordered independently). */
  .masthead .search{
    display:contents !important;
    order:unset !important;flex:unset !important;width:auto !important;height:auto !important;
  }

  /* Row 2: the search pill — input + clear + submit. */
  .masthead .search .search-form{
    display:flex !important;align-items:center !important;
    order:2 !important;flex:1 1 100% !important;width:100% !important;
    height:44px !important;overflow:hidden !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:10px !important;
    padding:0 0 0 6px !important;
  }
  .masthead .search .search-form:focus-within{
    background:rgba(255,255,255,.95) !important;border-color:#fff !important;
  }
  .masthead .search .search-form input{
    flex:1 1 auto !important;min-width:0 !important;
    height:100% !important;padding:0 12px !important;
    background:transparent !important;border:0 !important;outline:none !important;
    color:#fff !important;
    /* 16px is the iOS Safari zoom-on-focus threshold — anything smaller
       triggers the unwanted auto-zoom when the input gets focus. */
    font-size:16px !important;
  }
  .masthead .search .search-form:focus-within input{color:var(--ink) !important}
  .masthead .search .search-form .submit{
    flex:0 0 auto !important;height:100% !important;
    padding:0 14px !important;font-size:12.5px !important;
    white-space:nowrap !important;
  }

  /* Row 3: browse-inline (natural width, left) + cart (right). */
  .masthead .search .browse-inline{
    order:3 !important;flex:0 0 auto !important;
    height:42px !important;padding:0 16px !important;margin:0 !important;
    font-size:13px !important;white-space:nowrap !important;
  }
  .masthead .search .browse-inline span{display:inline !important}
  .masthead .search .browse-inline svg{width:18px;height:18px}
  .masthead .search .divider{display:none !important}

  /* Row 3 middle: trust chip fills the gap between Browse and Cart.
     Sized responsively like the util links. */
  .masthead .masthead-trust{
    display:flex !important;flex-wrap:wrap !important;
    align-items:center !important;justify-content:center !important;
    align-content:center !important;
    order:4 !important;flex:1 1 0 !important;min-width:0 !important;
    gap:1px 5px !important;padding:0 6px !important;
    color:rgba(255,255,255,.88) !important;
    line-height:1.05 !important;white-space:nowrap !important;overflow:hidden !important;
  }
  /* Legacy single-line fragments (star/rating/label) from earlier versions —
     hidden so stale cached templates don't break the 3-line stack below. */
  .masthead .masthead-trust .trust-star,
  .masthead .masthead-trust .trust-rating,
  .masthead .masthead-trust .trust-label{display:none !important}

  /* Responsive 1-line / 3-line stack: "Trusted by" / "1 Million+" /
     "Drivers ⭐". Each span sits inline via `flex:0 0 auto`; when the
     viewport is wide enough they fit on one row, otherwise the parent's
     `flex-wrap:wrap` breaks them to their own lines. Middle line (the
     number) carries the eye; top/bottom read as muted supporting text. */
  .masthead .masthead-trust .trust-top,
  .masthead .masthead-trust .trust-mid,
  .masthead .masthead-trust .trust-bot{
    flex:0 0 auto !important;text-align:center !important;
    line-height:1.05 !important;
  }
  .masthead .masthead-trust .trust-top,
  .masthead .masthead-trust .trust-bot{
    color:rgba(255,255,255,.85) !important;font-weight:500 !important;
    font-size:clamp(10.5px, 2.7vw, 12.5px) !important;
  }
  .masthead .masthead-trust .trust-mid{
    color:#fff !important;font-weight:700 !important;
    font-size:clamp(11.5px, 3vw, 13.5px) !important;
    letter-spacing:-0.01em !important;
  }

  /* No auto margin on cart — trust chip's flex-grow already pushes it right.
     When the chip is hidden (very narrow viewports below), margin-left:auto
     kicks back in so cart still sits on the right. */
  .masthead .head-right{
    order:5 !important;flex:0 0 auto !important;margin-left:0 !important;
  }
  .masthead .head-right .cart-btn{
    height:42px !important;padding:0 18px !important;font-size:13px !important;
  }
}

/* Very narrow phones (≤380px): the browse + cart buttons already fill
   row 3, so the trust chip has no usable space — hide it. Cart gets
   its `margin-left:auto` back so it still hugs the right edge. */
@media (max-width:380px){
  .masthead .masthead-trust{display:none !important}
  .masthead .head-right{margin-left:auto !important}
}

/* Mobile: stack the two phrases of the "Own a shop? / Apply for Pro pricing"
   badge onto separate lines so the button reads like a 2-line card instead
   of a long single pill that either wraps awkwardly or overflows. */
@media (max-width:768px){
  .b2b-btn .b2b-copy{
    display:inline-flex !important;flex-direction:column !important;
    align-items:center !important;text-align:center !important;
    line-height:1.2 !important;gap:2px !important;
  }
  .b2b-btn .b2b-copy b{
    display:block !important;margin-left:0 !important;
  }
}

/* Home-hero copy: center-align the tagline / promise / proof chips / b2b
   badge on BOTH mobile and desktop. Tagline's `max-width:560px` is
   auto-margined so it sits in the middle; hero-proof is already
   inline-flex (becomes centered via parent text-align:center). */
body .home-hero-copy{
  text-align:center !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;
}
body .home-hero-copy .tagline{
  margin-left:auto !important;margin-right:auto !important;
  /* Balance wrapped lines so single words like "most." don't orphan onto
   * their own line — the browser distributes line breaks more evenly. */
  text-wrap:balance !important;
}
body .home-hero-copy .tagline b{text-wrap:balance !important;display:inline}

/* Proof chip text (4M+, 1M+, Since 2007) center-aligned inside each chip. */
body .hero-proof .pf-chip{align-items:center !important;text-align:center !important}
/* Center the chips horizontally inside the card — otherwise when chip 3
   wraps onto its own row, it sits flex-start (left-aligned) by default. */
body .hero-proof{justify-content:center !important}

/* Mobile: drop the 2nd orange divider between chip 2 (1M+) and chip 3
   (Since 2007). Desktop still shows both. (All children share the <span>
   tag, so we target by direct-child position instead of :last-of-type.) */
@media (max-width:768px){
  body .hero-proof > :nth-child(4){display:none !important}

  /* Readable tagline on mobile — scales with viewport, caps at 18px so
     it stays below the welcome h1 in visual weight. The first sentence
     wraps to 2 lines on narrow phones, but `text-wrap:balance` (set on
     the base rule above) keeps the line lengths even. */
  body .home-hero-copy .tagline{
    font-size:clamp(15px, 4.2vw, 18px) !important;
    max-width:none !important;
    line-height:1.5 !important;
  }
}

/* Tighten the gap between "Your journey is our promise." and the
   `.hero-proof` stat strip by 10px (34 → 24). Applies to all viewports. */
body .home-hero-copy .promise{margin-bottom:24px !important}

/* Desktop utility-bar font: mockup-v12-hl's final-override layer bumps
   these from 13 → 14px for slightly more weight/stretch. Height, padding,
   and per-link margins already match the mockup (40px / 0 32px / 24px). */
.utility,.utility a{font-size:14px !important}

/* Desktop-only trust chip inside the left side of the utility bar. The
   `.utility` bar is `display:none` on mobile, so this auto-hides there;
   the 3-line `.masthead-trust` chip takes over on mobile inside row 3. */
.utility .utility-trust{
  color:rgba(255,255,255,.88);
  font-size:14px;font-weight:500;
  display:inline-flex;align-items:center;gap:6px;
  letter-spacing:-0.005em;
}
.utility .utility-trust .utility-trust-star{
  font-size:13px;line-height:1;filter:drop-shadow(0 0 4px rgba(251,191,36,.35));
}

/* Mini-cart hover-to-open: suppress on touch-only devices. iOS Safari
   fires a simulated :hover on tap, which caused the dropdown to flash
   open for an instant before the Cart button's href navigated. Gating
   behind `@media (hover:hover)` means only real mice/trackpads trigger
   it — touch taps just navigate. `.cart-wrap.open` (set programmatically
   by openMiniBriefly after add-to-cart) still works regardless. */
.cart-wrap:hover .mini-cart{opacity:0 !important;transform:translateY(-4px) scale(.98) !important;pointer-events:none !important}
@media (hover:hover){
  .cart-wrap:hover .mini-cart{opacity:1 !important;transform:translateY(0) scale(1) !important;pointer-events:auto !important}
}
.cart-wrap.open .mini-cart{opacity:1 !important;transform:translateY(0) scale(1) !important;pointer-events:auto !important}

/* =============================================================
   Vertex-AI search results — glass panel rendered below masthead.
   Matches the v2 visual language (pale glass card, rounded, soft
   blue shadow) while keeping the ported live-site JS untouched.
   ============================================================= */
/* Search results modal — fixed below the sticky masthead so it stays
   visible regardless of scroll position. A semi-transparent backdrop
   dims the page behind it. */
.vertex-search-panel{
  position:fixed;left:0;right:0;z-index:45;
  top:var(--search-panel-top, 82px);
  max-width:1280px;margin:0 auto;
  padding:20px 24px;
  max-height:calc(100vh - var(--search-panel-top, 82px) - 20px);overflow-y:auto;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.92));
  border:1px solid rgba(29, 78, 216, 0.18);
  border-radius:0 0 16px 16px;
  box-shadow:0 18px 38px -22px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.vertex-search-backdrop{
  position:fixed;inset:0;z-index:44;
  background:rgba(10,20,36,.35);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.vertex-search-panel[hidden]{display:none !important}
.vertex-search-panel::-webkit-scrollbar{width:10px}
.vertex-search-panel::-webkit-scrollbar-thumb{background:rgba(29,78,216,.25);border-radius:5px}
.vertex-search-panel::-webkit-scrollbar-thumb:hover{background:rgba(29,78,216,.4)}

.vertex-search-panel .orbiting-loader{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;position:relative;margin-right:12px;vertical-align:middle;
}
.vertex-search-panel .orbiting-loader .dot{
  position:absolute;width:8px;height:8px;border-radius:50%;
  animation:vx-orbit 1.5s linear infinite;
}
.vertex-search-panel .orbiting-loader .dot:nth-child(1){background:var(--orange, #f97316);animation-delay:0s}
.vertex-search-panel .orbiting-loader .dot:nth-child(2){background:var(--blue, #1d4ed8);animation-delay:-.5s}
.vertex-search-panel .orbiting-loader .dot:nth-child(3){background:#10b981;animation-delay:-1s}
@keyframes vx-orbit{
  0%  { transform:rotate(0deg) translateX(14px) rotate(0deg);opacity:1 }
  50% { opacity:.5 }
  100%{ transform:rotate(360deg) translateX(14px) rotate(-360deg);opacity:1 }
}
.vertex-search-panel .search-status-message{
  display:inline-block;font-weight:600;color:var(--muted, #475569);
  min-width:180px;text-align:left;animation:vx-fade 2s ease-in-out infinite;
}
@keyframes vx-fade{0%,100%{opacity:1}50%{opacity:.65}}

/* Result cards */
.vertex-search-panel .vertex-search-result{
  background:#fff;border:1px solid rgba(29, 78, 216, 0.12);border-radius:10px;
  padding:14px 16px;margin-bottom:0;
  text-decoration:none !important;color:var(--ink, #0d1424);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  display:flex;align-items:center;justify-content:flex-start;
}
.vertex-search-panel .vertex-search-result:hover{
  border-color:var(--blue, #1d4ed8);
  box-shadow:0 10px 22px -16px rgba(29,78,216,.35);
  transform:translateY(-1px);
}
.vertex-search-panel .vertex-result-title{
  font-size:15px;font-weight:700;color:var(--ink, #0d1424);margin:0;
  text-align:left;letter-spacing:-0.005em;
}
.vertex-search-panel .vertex-result-count{
  font-size:13px;color:var(--muted, #475569);margin-top:2px;text-align:left;
}
.vertex-search-panel .vertex-result-year-badge{
  display:inline-block;background:var(--blue, #1d4ed8);color:#fff;
  padding:2px 8px;border-radius:4px;font-size:12px;font-weight:700;margin-right:8px;
}

/* Loading border accent on the search input wrapper */
.search-form.searching{
  box-shadow:0 0 0 3px rgba(29,78,216,.18) !important;
  border-color:rgba(29,78,216,.45) !important;
}

/* Mobile tweaks — results grid already falls to 1 col via inline JS rule */
@media (max-width:768px){
  .vertex-search-panel{margin:8px 12px 16px;padding:16px 14px;border-radius:14px}
}

/* Tighten the static-page hero card's inner padding on narrow phones —
   the 48/40 desktop padding pinches the content when combined with the
   16px viewport-side gap set above on `max-width`. */
@media (max-width:640px){
  .about-hero,
  .help-hero,
  .shipping-hero,
  .policy-hero,
  .testimonials-hero,
  .shop-hero,
  .contact-hero,
  .media-hero,
  .post-hero{
    padding:32px 20px !important;
    border-radius:18px !important;
  }
}

/* `.only-desktop` / `.only-mobile` — small content-switch helpers used
   by about_us.php hero subtitle (and other places where wording needs
   to differ between viewports). */
.only-mobile{display:none}
@media (max-width:640px){
  .only-desktop{display:none}
  .only-mobile{display:inline}
}

/* Drop italics from the auth-page gradient words ("back" / "Go-Parts
   account" / "password" etc.) so the h1/h2 reads upright while still
   keeping the blue→orange gradient clip. The `.auth-head h1 em` /
   `.auth-side h2 em` rules appear in several lifted mockup copies
   earlier in this file with `font-style:italic` — this override lives
   last so it wins the cascade everywhere. */
.auth-head h1 em,
.auth-side h2 em{font-style:normal !important}

/* ══════════════════════════════════════════════════════════════════════
   PRICE-CARD RESPONSIVE PATCH (v142)
   Restructures the price-card so the price sits on its own full-width
   row across the top, with Add-to-Cart + Buy-Now side-by-side underneath.
   This gives the price the entire card width and eliminates digit-wrap
   problems for 5-digit prices (live pages today include $36,895 on
   Magento and $28,348.95 on HL).

   Also addresses three earlier issues:
     • Legacy `.product-price` inside `.price-card` was inheriting glassy
       card styling from the old `.price-box` rules, creating a visible
       card-in-card on PS and squeezing the price column.
     • The decorative `.price-card::after` orange strip painted against
       the card's right edge and visually read as the Buy-Now button
       getting clipped. Dropped.
     • `.price-main` allowed flex wrapping, so even 3-digit prices would
       break across 3 lines when the column was narrow.
   ══════════════════════════════════════════════════════════════════════ */

/* Neutralize legacy `.product-price` wrapper inside the modern price-card.
   Lets the real `.price-card` be the only visible "card" in this area. */
.price-card .product-price{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}

/* Stack price above the buy controls — the price-card-grid becomes a
   single column so .price-col spans the full card width. Buttons live
   in the sibling .buy-col underneath. */
.price-card .price-card-grid{
  grid-template-columns:1fr !important;
  gap:20px !important;
  align-items:stretch !important;
}
.price-card .price-col{
  align-items:center;
  text-align:center;
}
.price-card .price-col .product-price,
.price-card .price-col .price-row{
  display:flex;
  justify-content:center;
  width:100%;
}
.price-card .price-main{
  display:inline-flex;
  white-space:nowrap;
  flex-wrap:nowrap;
  min-width:0;
}
/* With the full card width available (~420px on desktop, ~330px on
   mobile) a fixed 76px dollar size accommodates $999,999 without wrap. */
.price-card .price-main .dol{ font-size:76px; letter-spacing:-0.045em; }
.price-card .price-main .cur{ font-size:26px; }
.price-card .price-main .cts{ font-size:26px; margin-top:8px; }

/* Buttons: side-by-side on desktop, stacked on narrow viewports.
   The `.product-page-buttons-wrapper` was flex-column — override to grid. */
.price-card .buy-col{ width:100%; }
.price-card .buy-col .product-page-buttons-wrapper{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:100%;
  align-items:stretch;
}
.price-card .buy-col .bolt-product-checkout-button{ width:100%; }
/* Stack buttons on narrow screens — single-column phones don't have
   room for two full-width CTAs side-by-side. */
@media (max-width:640px){
  .price-card .buy-col .product-page-buttons-wrapper{
    grid-template-columns:1fr;
  }
}
/* Scale the dollar chunk on mid/narrow viewports so $12,999.99 still
   fits comfortably once the card itself gets narrower. */
@media (max-width:900px){
  .price-card .price-main .dol{ font-size:64px; }
}
@media (max-width:480px){
  .price-card .price-main .dol{ font-size:56px; }
  .price-card .price-main .cur,
  .price-card .price-main .cts{ font-size:22px; }
}

/* Stock-urgency pill now sits at the top of the card (direct child of
   `.price-card`), above the price row. The base `.stock-urgency`
   declares `display:inline-flex`, so auto margins don't center it — use
   a thin flex wrapper via the pseudo-parent approach: add text-align
   on the card's own flow-level, and push the pill down 14px. */
.price-card > .stock-urgency{
  display:flex !important;
  width:max-content;
  max-width:100%;
  margin:0 auto 14px !important;
  position:relative;
  z-index:1;
}

/* Drop the right-edge accent strip that reads as a clip artifact. */
.price-card::after{ display:none !important; }

/* ──────────────────────────────────────────────────────────────────────
   Stock-urgency pill — inline-with-price when there's room, wraps above
   when there isn't.
   On hl-product.php the pill ("Only 1 left in stock" / "Only 2 left in
   stock" / "Out of Stock") sits as a direct child of `.price-col`, ahead
   of `.product-price`. Flipping `.price-col` to `flex-direction:row`
   with `flex-wrap:wrap` lets the pill sit on the same baseline as the
   price when the column width supports it, and drop to its own row
   above the price when it doesn't (e.g. narrow viewports, 5-digit
   prices). Scoped via `:has()` so pages without a pill in the column
   (PS in-stock, Magento in-stock) keep the existing column layout.
   ────────────────────────────────────────────────────────────────────── */
.price-card .price-col:has(> .stock-urgency){
  flex-direction:row !important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  row-gap:10px;
  column-gap:20px;
}
/* `.product-price` / `.price-row` had `width:100% !important` from the
   single-column layout rule earlier; let them shrink to content when
   we're in row mode so the pill can sit beside them. */
.price-card .price-col:has(> .stock-urgency) .product-price,
.price-card .price-col:has(> .stock-urgency) .price-row{
  width:auto !important;
}
/* Reman / core-refund layout has a tall price breakdown (Price today +
   core refund + Your net cost + prepaid-core chip) — stack the urgency
   pill ABOVE the breakdown instead of letterboxing it to the left. */
.price-card .price-col:has(.core-tooltip){
  flex-direction:column !important;
  align-items:center;
}
.price-card .price-col:has(.core-tooltip) .product-price,
.price-card .price-col:has(.core-tooltip) .price-row{
  width:100% !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PS PRODUCT PAGE — flatten the inner "panel" look
   ──────────────────────────────────────────────────────────────────────
   The PS template wraps the gallery+info area in `.product-container`
   (already stripped to flat layout earlier) and each content block on
   the right column ships with its own card chrome (glassy .price-card,
   .warranty, .trust-strip, meta-row, features-list). Result: visual
   noise where every section reads as a stacked panel.

   Scope:  `.beautified-product` is the PS-only outermost wrapper, so
   these overrides only touch ps-product-new.php — Magento (.summary)
   and hl-product.php (also uses `.summary`) keep their panel treatment.
   ══════════════════════════════════════════════════════════════════════ */

/* PS, HL, and Magento catalog now share the same Affirm footer
   spacing — baseline rule on `.price-card .price-card-footer` was
   updated to match PS's `margin-top:8px` + no divider line. */

/* Match HL's h1→price gap (28px). PS base rule has `margin:0 0 14px`;
   bumping to 16px gives parity with hl-product.php. */
.beautified-product h1.title{
  margin-bottom:16px !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Features list — styled as a compact badge grid (single panel block).
   Combined with the meta-row above (SKU / Partslink / OEM), the specs
   area reads as a single cohesive "specs" section.
   ────────────────────────────────────────────────────────────────────── */
.beautified-product .features-list{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 10px;
}
.beautified-product .features-list li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px !important;
  margin:0;
  border:1px solid rgba(16,185,129,.22) !important;
  background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.02)) !important;
  border-radius:10px;
  font-size:13.5px;
  font-weight:600;
  color:#065f46;
  line-height:1.3;
  border-bottom:1px solid rgba(16,185,129,.22) !important; /* beats legacy */
}
.beautified-product .features-list li:last-child{
  border-bottom:1px solid rgba(16,185,129,.22) !important;
}
.beautified-product .features-list li::before{
  content:"\2713" !important;
  width:18px !important;
  height:18px !important;
  min-width:18px;
  border-radius:50%;
  background:#10b981;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  flex:none;
}
/* Single-col stack when the summary column is narrow (mobile + small tablets) */
@media (max-width:640px){
  .beautified-product .features-list{ grid-template-columns:1fr; }
}

/* Sticky mini-bar "Out of Stock" variant — muted red pill replaces the
   green In Stock chip when the product is OOS. Paired with the JS change
   in hl-product.php / cscraper/product-new.php / catalog/product/view.phtml
   that hides the Add to Cart / Buy Now buttons in the same state. */
.mini-bar .mb-stock.mb-stock--oos{
  color:#dc2626;
  background:rgba(220,38,38,.1);
  border-color:rgba(220,38,38,.28);
}
.mini-bar .mb-stock.mb-stock--oos::before{
  background:#dc2626;animation:none;
}

/* Normalize the vertical gap between the sticky breadcrumb bar and the
   first product image across all 3 product-page templates. HL already
   gets ~46px via its `.main` wrapper's margin+padding; PS and Magento
   render `section.hero` as a direct sibling of `.crumbs`, so they came
   in tighter (30px / 10px). Setting the `.hero` padding-top to 46px
   (only when it's a direct sibling of `.crumbs`) and zeroing the
   PS-only `.beautified-product`'s own top padding lands both at the
   same 46px gap as HL. */
nav.crumbs + section.hero{padding-top:46px !important}
.beautified-product{padding-top:0 !important}

/* Normalize product-page column widths across HL / PS / Magento — match
   mockup-v12-hl.html: `1.3fr / 1fr` with 56px gap, giving the gallery
   column more width so the main image renders near-actual-size instead
   of cramped. Scoped to `min-width:769px` so the mockup's mobile
   single-column rule (`.hero-grid { grid-template-columns:1fr !important }`
   at `max-width:768px`) is preserved. */
@media (min-width:769px){
  .main > section.hero > .wrap > .hero-grid,
  body.catalog-product-view section.hero > .wrap > .hero-grid,
  .beautified-product .product-container.hero-grid{
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) !important;
    gap:56px !important;
  }
}
/* Card hugs the image's natural aspect — no forced square frame (the
   mockup uses 1/1 which letterboxes 4:3 PNGs top+bottom, producing
   more whitespace than the raw CDN image). Image fills the card
   width; card height collapses to the image. */
@media (min-width:769px){
  .product-gallery .main-image,
  .beautified-product .main-image,
  body.catalog-product-view .gallery .frame{
    aspect-ratio:auto !important;
  }
  .product-gallery .main-image img,
  .beautified-product .main-image img,
  body.catalog-product-view .gallery .frame img{
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
  }
}

/* Product-page main image height is viewport-aware — on short viewports
   (e.g. 663px laptop displays) the fixed ~600px max-height pushed the
   thumbnail strip below the fold. `min(600px, calc(100vh - 520px))`
   caps at 600 on tall screens and shrinks to keep the thumbnail strip
   visible on shorter ones. `object-fit:contain` + `width:auto` so the
   image preserves its aspect ratio even as max-height shrinks — HL's
   default `width:100%; height:auto` rule was distorting the image
   when only height got constrained. */
.beautified-product .main-image img,
.product-gallery .main-image img,
section.hero .main-image img,
body.catalog-product-view .gallery .frame img{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:600px !important;
  object-fit:contain !important;
  margin:0 auto !important;display:block !important;
}
/* Magento `.gallery .frame` has a 1:1 aspect-ratio that keeps the
   square container regardless of the image inside — override so the
   frame collapses around the image, preserving its natural aspect.
   Also force a solid white fill: the base theme uses a translucent
   white gradient over the body's orange radial-gradient, plus a
   diagonal blue→orange `::before` overlay, which together read as
   a warm gray instead of the clean white HL and PS use. */
body.catalog-product-view .gallery .frame{
  aspect-ratio:auto !important;
  background:#fff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid rgba(148,163,184,.25) !important;
  border-radius:18px !important;
  box-shadow:
    0 12px 28px -14px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
  padding:6px !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  isolation:isolate !important;
  overflow:hidden !important;
}
body.catalog-product-view .gallery .frame::before,
body.catalog-product-view .gallery .frame::after{
  display:none !important;
  background:none !important;
}
body.catalog-product-view .gallery .frame img{
  filter:none !important;
}

/* Thumbnail row normalization across HL + PS — same cell size,
   center-aligned so rows with fewer thumbs don't read as left-justified.
   PS uses `.thumbnail-images` (grid with `.thumbnail` card wrappers).
   HL uses `.thumbnail-gallery` (flex with raw `<img>` elements + inline
   60×60px attrs). Force both to a centered 81px cell so the thumb
   strips look identical across product-page flavors. */
.beautified-product .thumbnail-images{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:10px !important;
  grid-template-columns:none !important;
}
.beautified-product .thumbnail-images .thumbnail{
  width:81px !important;
  height:81px !important;
  flex:0 0 81px !important;
}
.thumbnail-gallery{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:10px !important;
}
.thumbnail-gallery > img{
  width:81px !important;
  height:81px !important;
  border-width:2px !important;
  border-radius:6px !important;
  padding:8px !important;
  background:#fff !important;
  object-fit:contain !important;
  box-sizing:border-box !important;
}

/* ================================================================
   "Looking for a different <part type>?" related-items panel.
   Glass-card next-gen treatment with an emerald-green accent so the
   panel stands out on the product page. HL only — supports BCM /
   Video Camera / Audio System / Air Bag.
   ================================================================ */
.related-items-card{
  position:relative;margin:18px 0;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(240,253,244,.92), rgba(255,255,255,.82)),
    linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.02));
  border:1px solid rgba(16,185,129,.38);
  border-radius:16px;
  box-shadow:
    0 14px 34px -18px rgba(16,185,129,.28),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.related-items-card:hover{
  border-color:rgba(16,185,129,.55);
  box-shadow:
    0 20px 44px -18px rgba(16,185,129,.4),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.related-items-card::after{
  /* Soft emerald aurora accent tucked behind the header. */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(360px 140px at 12% 0%, rgba(16,185,129,.18), transparent 65%);
  border-radius:inherit;
}
.related-items-toggle{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:14px;
  width:100%;padding:16px 18px;
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:inherit;
}
.related-items-ico{
  flex:none;display:inline-grid;place-items:center;
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg, rgba(16,185,129,.22), rgba(5,150,105,.1));
  border:1px solid rgba(16,185,129,.4);
  font-size:20px;line-height:1;color:#065f46;
  box-shadow:0 4px 12px -4px rgba(16,185,129,.4);
}
.related-items-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.25}
.related-items-title{
  font-size:15.5px;font-weight:800;color:var(--ink,#0d1424);letter-spacing:-0.005em;
}
.related-items-sub{
  font-size:13px;color:var(--muted,#64748b);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.related-items-chev{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(16,185,129,.14);color:#047857;
  transition:transform .3s ease, background .15s ease;
}
.related-items-card.is-open .related-items-chev{
  transform:rotate(180deg);background:rgba(16,185,129,.26);
}
.related-items-toggle:hover .related-items-chev{background:rgba(16,185,129,.26)}
.related-items-content{
  position:relative;z-index:1;
  max-height:0;overflow:hidden;
  transition:max-height .35s cubic-bezier(.2,.8,.2,1);
  border-top:1px solid rgba(148,163,184,.22);
}
.related-items-grid{
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;padding:14px 18px 18px;
}
.related-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 14px;border-radius:10px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(16,185,129,.25);
  font-size:13.5px;font-weight:600;color:var(--ink,#0d1424);
  text-decoration:none;
  transition:transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.related-link:hover{
  border-color:#10b981;
  background:#fff;
  box-shadow:0 6px 14px -6px rgba(16,185,129,.38);
  transform:translateY(-1px);
}
.related-link--all{
  background:linear-gradient(135deg, #10b981, #059669);
  border-color:#047857;
  color:#fff;font-weight:800;letter-spacing:-0.005em;
  box-shadow:0 6px 14px -6px rgba(16,185,129,.5), inset 0 1px 0 rgba(255,255,255,.22);
}
.related-link--all:hover{
  background:linear-gradient(135deg, #059669, #047857);
  border-color:#065f46;color:#fff;
  box-shadow:0 10px 22px -6px rgba(16,185,129,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
@media(max-width:640px){
  .related-items-toggle{padding:14px 14px;gap:12px}
  .related-items-ico{width:36px;height:36px;font-size:18px;border-radius:10px}
  .related-items-title{font-size:14.5px}
  .related-items-sub{font-size:12.5px;white-space:normal;line-height:1.4}
  .related-items-grid{grid-template-columns:1fr;gap:6px;padding:12px 14px 14px}
  .related-link{padding:12px 14px;font-size:13.5px}
}

/* Primary product-image panel: 3D perspective tilt on mousemove —
   matches the mockup-v12-hyperspace `data-tilt` behavior. The JS
   (`primary-image-tilt-v1.js`) wires the rotateX/rotateY transforms.
   This CSS only establishes the transition easing + 3D stacking
   context. Gated behind `(hover:hover)` so touch devices don't
   trigger a stuck transform when the user taps. The existing panel
   shadow is preserved — no hover shadow change (matches mockup). */
@media (hover:hover){
  .main-image,
  body.catalog-product-view .gallery .frame{
    transition:transform .25s cubic-bezier(.25,.9,.3,1) !important;
    transform-style:preserve-3d;
    will-change:transform;
  }
}

/* PS thumbnail hover had a blue border + lift — strip the blue outline
   on hover (the `.thumbnail.active` selected-state keeps its blue
   treatment). Keep the lift; swap the border to a soft neutral gray
   so hover reads as movement, not selection. */
.beautified-product .thumbnail:hover:not(.active){
  border-color:rgba(148,163,184,.6) !important;
  box-shadow:0 4px 12px rgba(15,23,42,.1) !important;
}

/* Mobile homepage hero: swap the NASCAR image with the stats proof
   strip. On desktop `.home-hero-copy` holds tagline + promise +
   hero-proof + b2b-btn as a flex/grid column next to `.home-hero-media`
   (NASCAR). On mobile we need the NASCAR image to appear between the
   promise and the proof/b2b-btn. `display:contents` flattens
   `.home-hero-copy` so its children become direct flex items of
   `.home-hero-grid`, letting us interleave `.home-hero-media` via
   `order`. Also halves the vertical breathing room above the Welcome
   pill so the pill sits closer to the masthead. */
@media (max-width:768px){
  .home-hero       { padding-top:20px !important; }
  .home-hero-stage { padding-top:28px !important; }

  .home-hero-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }
  .home-hero-grid > .home-hero-copy{
    display:contents !important;
  }
  .home-hero-grid > .home-hero-copy > .tagline { order:1 !important; }
  .home-hero-grid > .home-hero-copy > .promise { order:2 !important; }
  .home-hero-grid > .home-hero-media           { order:3 !important; margin:0 !important; }
  .home-hero-grid > .home-hero-copy > .hero-proof { order:4 !important; }
  .home-hero-grid > .home-hero-copy > .b2b-btn    { order:5 !important; }
}

/* Wrenchy USP card: strip the rounded-rectangle icon-wrap so Wrenchy
   floats free and renders bigger/more prominent than the other cards'
   icons. The wrap keeps its reserved space for consistent card
   alignment, but the background, border, and fixed 88px size are
   removed so the image can breathe. */
.usp-card.wrenchy .icon-wrap{
  width:auto !important;height:auto !important;
  background:none !important;border:0 !important;
  border-radius:0 !important;box-shadow:none !important;
}
.usp-card.wrenchy .icon-wrap img{
  width:auto !important;height:130px !important;max-width:100% !important;
}

/* ════════════════════════════════════════════════════════════════════
   Mini-cart refinements
   ────────────────────────────────────────────────────────────────────
   1. Dynamic JS hovertip on the per-item Core Refund line — matches the
      www minicart's `.core-tooltip` / `.core-tooltip-text` pattern.
      High z-index so the popover escapes the mini-cart dropdown's
      stacking context and isn't clipped.
   2. Viewport-aware scroll height — on tall viewports the list can
      grow well beyond 360px, cutting the scroll cliff for users
      with many items. Kept `min-height`-ish by floor of 320px.
   ════════════════════════════════════════════════════════════════════ */
.mini-cart-item .core-tooltip.mini-core-tooltip{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:4px;padding:2px 8px;border-radius:6px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);
  font-size:11px;font-weight:700;color:#059669;
  position:relative;cursor:help;
  letter-spacing:0;
  /* Force natural (content) width — its parent grid column is `auto`-sized
     but other rules can stretch it. Pin to content size explicitly. */
  width:fit-content;max-width:max-content;align-self:flex-start;
}
.mini-cart-item .core-tooltip.mini-core-tooltip .mini-core-label{
  text-transform:uppercase;letter-spacing:.04em;
}
.mini-cart-item .core-tooltip.mini-core-tooltip .mini-core-amount{
  font-variant-numeric:tabular-nums;font-weight:800;
}
.mini-cart-item .core-tooltip.mini-core-tooltip .mini-core-info{
  display:inline-flex;align-items:center;opacity:.8;
}
.mini-cart-item .core-tooltip.mini-core-tooltip .core-tooltip-text{
  position:absolute;bottom:calc(100% + 8px);
  /* Center tooltip on the badge so the left edge doesn't extend past the
     .mini-cart-list scroll container (which clips horizontally because of
     overflow-y:auto forcing overflow-x:auto). 220px fits within the 380px
     panel even when the badge is near the left edge. */
  left:50%;right:auto;transform:translateX(-50%);
  width:220px;max-width:calc(100vw - 32px);
  padding:12px 14px;border-radius:8px;
  background:#1f2937;color:#fff;
  font-size:12.5px;font-weight:500;line-height:1.5;letter-spacing:0;
  text-transform:none;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;
  pointer-events:none;z-index:99999;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.4);
}
.mini-cart-item .core-tooltip.mini-core-tooltip .core-tooltip-text::after{
  content:"";position:absolute;top:100%;
  /* Move arrow under the tooltip's center to match the centered position above */
  left:50%;right:auto;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#1f2937;
}
.mini-cart-item .core-tooltip.mini-core-tooltip:hover .core-tooltip-text,
.mini-cart-item .core-tooltip.mini-core-tooltip:focus-within .core-tooltip-text{
  opacity:1;visibility:visible;
}

/* Let the mini-cart dropdown and item-list grow with viewport height.
   On tall screens (1000px+) the list can show ~8 items before scroll,
   reducing the "one-at-a-time" scrolling pain on large carts. */
.mini-cart-list{
  max-height:min(calc(100vh - 240px), 720px) !important;
}

/* Drop the thin gray divider lines around `.meta-row` inside cart
   items — the qty selector / remove link / core-refund pill already
   have their own outlines, so the divider reads as noise. Keep
   `qty + Remove` on one row; force "Need Another?" to break to its
   own line via `flex-basis:100%`. */
.cart-item .meta-row{
  border-top:0 !important;
  border-bottom:0 !important;
  gap:10px !important;
  row-gap:6px !important;
}
.cart-item .qty-box{ height:30px !important; }
.cart-item .qty-box button{ width:22px !important; }
/* Input fits 2 digits ("99") — enough for any realistic cart qty. */
.cart-item .qty-box input{ width:26px !important; font-size:13px !important; padding:0 !important; }
.cart-item .qty-box .qty-val{ min-width:22px !important; padding:0 4px !important; }
/* Hide the browser's native number spinner — we have custom +/− buttons. */
.cart-item .qty-box input[type="number"]{ -moz-appearance:textfield !important; appearance:textfield !important; }
.cart-item .qty-box input[type="number"]::-webkit-outer-spin-button,
.cart-item .qty-box input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none !important;appearance:none !important;margin:0 !important;
}
.cart-item .remove-btn{ font-size:12px !important; white-space:nowrap; }
.cart-item .remove-btn svg{ width:12px; height:12px; }
/* `.set-based-cta` is a sibling of `.title` inside `.info` — renders
   on its own line right under the title (desktop), left-aligned. On
   mobile it's placed into the "need" grid area by the stacked rule
   below. */
.cart-item .info > .set-based-cta{
  display:inline-flex;align-self:flex-start;margin-top:2px;
}
.cart-item .set-based-cta{
  white-space:nowrap;
}

/* Unify the Wrenchy chatbot font across HL / PS / Magento product pages.
   PS's `.beautified-product` wrapper hard-sets `font-family: -apple-system,
   ...` which cascades into the chatbot, overriding the Figtree we use on
   HL. Force Figtree here so the bubbles match across all three pages. */
#goparts-chatbot,
#goparts-chatbot-container,
#goparts-chatbot *,
#goparts-chatbot-container *{
  font-family:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
/* Wrenchy side-rail buttons (Restart / Email / Print / Close) — bump
   the size for readability. Originals were 140×26px with 12px text; new
   target is 170×34px with 14px text + roomier icon cell. Overrides the
   inline styles emitted across hl-product.php / cscraper/product-new.php
   / Magento view.phtml / mmp category_filter.js. */
#goparts-chatbot-container .wrenchy-button{
  width:170px !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}
#goparts-chatbot-container .wrenchy-button span{
  white-space:nowrap !important;
}
#goparts-chatbot-container .wrenchy-button > span:first-child{
  /* Icon cell */
  padding:7px 11px !important;
  font-size:18px !important;
}
#goparts-chatbot-container .wrenchy-button > span:last-child{
  /* Label cell */
  padding:7px 14px !important;
}

/* Match PS's h1 + buttons font on Magento catalog product pages.
   PS's `.beautified-product` wrapper hard-sets the system font stack
   (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
   Arial) which renders wider than the body's Figtree-first stack.
   Mag inherited the narrower Figtree look by default, creating a
   visual mismatch for the same template pattern. Force the PS stack
   on the product title + buy buttons + price-card so they match. */
body.catalog-product-view h1.title,
body.catalog-product-view .price-card,
body.catalog-product-view .price-card .btn-add-to-cart,
body.catalog-product-view .price-card .bolt-product-checkout-button,
body.catalog-product-view .price-card [data-tid="bolt-checkout-button"]{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
}

/* Bolt Buy Now + Add to Cart buttons on Magento catalog pages — bump
   to 60px tall + 17px font to match live www's heavier button weight
   (visual parity with www.go-parts.com's Bolt button rendering). */
body.catalog-product-view .bolt-product-checkout-button{
  flex:1 !important;
  min-height:60px;
  height:60px;
}
body.catalog-product-view .bolt-product-checkout-button .bolt-checkout-button,
body.catalog-product-view .bolt-product-checkout-button [data-tid="bolt-checkout-button"],
body.catalog-product-view .bolt-product-checkout-button div{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}
/* Kept at default 50px height to match PS's Add to Cart. No override
   needed here — the base `.price-card .buy-col .btn.primary.btn-add-to-cart`
   rule already sets 50px. */

/* Condition pill — small uppercase tag (NEW / USED / REMAN). Lives
   inline after the h1 title on Magento catalog pages so there's zero
   extra vertical cost — wraps naturally with the title on narrow
   viewports. Green for NEW (catalog aftermarket), amber for used
   OEM, blue for reman. */
.condition-pill{
  display:inline-block;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border-radius:980px;
  line-height:1.2;
}
/* When inline after the h1, make the pill louder so it reads as a
   bold trailing tag and not a subtle annotation. Solid color fill
   (vs tinted bg), larger font, stronger contrast, a small top nudge
   so it sits middle-height of the title line. */
.title-condition-pill{
  vertical-align:middle;
  position:relative;top:-3px;
  margin-left:10px;margin-top:5px;
  font-size:15px;padding:5px 14px;
  letter-spacing:.1em;font-weight:900;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.2);
}
.title-condition-pill.condition-pill--new{
  background:linear-gradient(135deg,#10b981,#059669) !important;
  color:#fff !important;
  border:1px solid #047857 !important;
}
.title-condition-pill.condition-pill--used{
  background:linear-gradient(135deg,#f59e0b,#d97706) !important;
  color:#fff !important;
  border:1px solid #b45309 !important;
}
.title-condition-pill.condition-pill--reman{
  background:linear-gradient(135deg,#3b82f6,#1d4ed8) !important;
  color:#fff !important;
  border:1px solid #1e40af !important;
}
.condition-pill--new{
  background:rgba(22,163,74,.12);color:#059669;
  border:1px solid rgba(22,163,74,.32);
}
.condition-pill--used{
  background:rgba(245,158,11,.12);color:#b45309;
  border:1px solid rgba(245,158,11,.32);
}
.condition-pill--reman{
  background:rgba(59,130,246,.12);color:#1d4ed8;
  border:1px solid rgba(59,130,246,.32);
}

/* Pill stays inline-appended after the h1 on all viewports
   (per request — no mobile drop-to-block treatment). */

/* ps-mmp "pick your vehicle" empty state — shown when a URL carries
   just a part-type (no make/model). Upgraded from the stock emoji +
   plain text into a glass card with a car icon, bolded CTA button,
   and the gradient-em treatment from the h1. */
.mmp-empty-state{
  padding:36px 20px;
}
.mmp-empty-card{
  max-width:560px;margin:0 auto;text-align:center;
  padding:40px 32px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,252,.8));
  border:1px solid rgba(148,163,184,.28);
  box-shadow:
    0 20px 50px -20px rgba(26,61,176,.15),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.mmp-empty-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px 200px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(460px 200px at 100% 100%,rgba(255,122,26,.06),transparent 60%);
}
.mmp-empty-card > *{ position:relative; z-index:1; }
.mmp-empty-icon{
  width:84px;height:84px;margin:0 auto 18px;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(26,61,176,.12),rgba(255,122,26,.1));
  color:var(--blue,#1d4ed8);
  display:grid;place-items:center;
  box-shadow:0 8px 18px -8px rgba(26,61,176,.35);
}
.mmp-empty-title{
  font-size:26px;font-weight:800;color:var(--ink,#0d1424);
  letter-spacing:-0.018em;line-height:1.2;margin:0 0 10px;
}
.mmp-empty-title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--blue,#1d4ed8),var(--orange,#ff7a1a));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.mmp-empty-sub{
  font-size:15px;color:var(--muted,#64748b);margin:0 0 22px;line-height:1.55;
}
.mmp-empty-sub b{ color:var(--ink,#0d1424); font-weight:800; }
.mmp-empty-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:12px;border:0;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:700;letter-spacing:.01em;
  color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#1e3a8a);
  box-shadow:0 10px 22px -8px rgba(26,61,176,.45),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.mmp-empty-cta:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  box-shadow:0 14px 28px -10px rgba(26,61,176,.55),inset 0 1px 0 rgba(255,255,255,.24);
}
.mmp-empty-warning{
  display:flex;gap:10px;align-items:flex-start;text-align:left;
  margin-bottom:18px;padding:12px 14px;border-radius:10px;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.32);
  color:#92400e;font-size:13.5px;line-height:1.45;
}
.mmp-empty-warning-ico{ flex:none; color:#b45309; margin-top:1px; }
.mmp-empty-warning strong{ display:block; font-weight:800; margin-bottom:2px; }
@media (max-width:640px){
  .mmp-empty-state{ padding:24px 12px; }
  .mmp-empty-card{ padding:28px 20px; border-radius:16px; }
  .mmp-empty-icon{ width:68px;height:68px; }
  .mmp-empty-title{ font-size:21px; }
}

/* PS h1 → price-card gap — match HL's 28px. PS `.product-info` is a
   flex column with `gap:12` and a conditionally-empty `<div>` sibling
   between the h1 and price-card, inflating the gap to ~68px. Zero out
   the h1's 16px margin-bottom, then shrink `.price-card`'s top margin
   so the two flex-gap slots (12 + 12) + pc.mt (4) = 28px, matching HL. */
.beautified-product .product-info > h1.title{
  margin-bottom:0 !important;
}
.beautified-product .product-info > .price-card{
  margin-top:4px !important;
}

/* Mobile (≤640px): 3-column grid so qty / Remove / price all share
   one horizontal row under the thumb+title header. "Need Another?"
   breaks to its own full-width line below. Uses `display:contents`
   on `.info` + `.meta-row` to hoist their children into the
   cart-item grid for `grid-area` placement. Scoped to
   `body .cart-item` to outspecify the tablet rule. */
@media (max-width:640px){
  body .cart-item{
    grid-template-columns:auto auto 1fr !important;
    grid-template-areas:
      "thumb title  title"
      "thumb need   need"
      "qty   remove price" !important;
    column-gap:10px !important;
    row-gap:6px !important;
    padding:14px !important;
    align-items:center !important;
  }
  body .cart-item .thumb{
    grid-area:thumb !important;
    width:72px !important;height:72px !important;
    align-self:start;
  }
  body .cart-item .info{ display:contents !important; }
  body .cart-item .info .title{
    grid-area:title !important;
    font-size:14.5px !important;line-height:1.3 !important;
    align-self:start;
  }
  body .cart-item .meta-row{ display:contents !important; }
  body .cart-item .qty-box{
    grid-area:qty !important;
    justify-self:start;align-self:center;
  }
  body .cart-item .remove-btn{
    grid-area:remove !important;
    justify-self:center;align-self:center;
  }
  body .cart-item .set-based-cta{
    grid-area:need !important;
    justify-self:start;
    font-size:11.5px !important;
  }
  body .cart-item .meta-break{ display:none !important; }

  /* Price column: core-refund ABOVE line-price, right-aligned. */
  body .cart-item .price-col{
    grid-area:price !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:2px !important;
    min-width:0 !important;
  }
  body .cart-item .cart-core-tooltip{
    margin:0 0 4px !important;align-self:flex-end !important;
  }
  body .cart-item .line-price{ font-size:19px !important; }
}

/* Full cart page per-item core-refund pill — same dynamic hovertip as
   the mini-cart. Lives in the price-col so it sits under the line
   price; high z-index lets the popover escape the cart-item grid. */
.cart-item .core-tooltip.cart-core-tooltip{
  display:inline-flex;align-items:center;gap:4px;
  margin:0 0 6px;padding:3px 10px;border-radius:8px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);
  font-size:12.5px;font-weight:700;color:#059669;
  position:relative;cursor:help;
  letter-spacing:0;
  align-self:flex-end;
}
.cart-item .core-tooltip.cart-core-tooltip .cart-core-label{
  text-transform:uppercase;letter-spacing:.04em;font-size:11.5px;
}
.cart-item .core-tooltip.cart-core-tooltip .cart-core-amount{
  font-variant-numeric:tabular-nums;font-weight:800;
}
.cart-item .core-tooltip.cart-core-tooltip .cart-core-info{
  display:inline-flex;align-items:center;opacity:.8;
}
.cart-item .core-tooltip.cart-core-tooltip .core-tooltip-text{
  position:absolute;bottom:calc(100% + 8px);right:0;
  width:280px;padding:12px 14px;border-radius:8px;
  background:#1f2937;color:#fff;
  font-size:12.5px;font-weight:500;line-height:1.5;letter-spacing:0;
  text-transform:none;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;
  pointer-events:none;z-index:99999;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.4);
}
.cart-item .core-tooltip.cart-core-tooltip .core-tooltip-text::after{
  content:"";position:absolute;top:100%;right:14px;
  border:6px solid transparent;border-top-color:#1f2937;
}
.cart-item .core-tooltip.cart-core-tooltip:hover .core-tooltip-text,
.cart-item .core-tooltip.cart-core-tooltip:focus-within .core-tooltip-text{
  opacity:1;visibility:visible;
}

/* Mobile: center the price card, delivery estimate, and product notes
   as a narrow centered block in the middle of the viewport. */
@media (max-width: 768px) {
  .price-card {
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .price-card .price-row {
    justify-content: center !important;
  }
  .price-card .price-list-strike {
    align-items: center !important;
  }
  .price-card .price-per-month,
  .price-card .price-card-footer {
    text-align: center !important;
  }
  .delivery-estimate-section,
  #delivery-estimate-placeholder {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 380px !important;
    align-self: center !important;
    width: 100% !important;
  }
  html body .price-card {
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    width: 100% !important;
  }
  /* Product Notes — full width like the warranty panels */
  .notes,
  .at-glance,
  .product-notes-section {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Spacing above the chatbot container on all viewports (desktop + mobile).
   Prevents the chatbot from butting up against the panel above it. */
#product-page-chatbot-container {
  margin-top: 24px !important;
}

/* Force light mode — prevent browser/OS dark mode from inverting colors */
:root { color-scheme: light only !important; }