/* ============================================
   SUPERPRO 2025 BRAND REFRESH

   This file overrides the existing site styles
   with the new SuperPro branding. To revert,
   simply remove the <link> to this file in
   includes/header.cfm.

   Brand Fonts:
     Body:      Poppins
     Headings:  Poppins (Magistral available but not currently used)
   Brand Colors:
     Primary Blue:  #004990
     Dark Navy:     #003366
     Yellow:        #FFCB05
     Dark Yellow:   #CCA100
   ============================================ */

/* --- Accessibility: skip link + main landmark --------------------------
   The products mega-menu (#fullNav) is hidden with height:0, not
   display:none, so its ~90 controls stay in the tab order while it is
   closed. Until there is time to make that panel properly inert, this skip
   link is what stops every keyboard and screen-reader user having to tab
   past all of them on every page. WCAG 2.4.1, Level A.

   Off-screen rather than display:none or visibility:hidden - both of those
   remove an element from the tab order, which would defeat the entire point.
   It becomes visible only on :focus.

   z-index must beat #top-utility-bar (1001) and the .overlay menu (999), or
   the link renders underneath them when focused and the user sees nothing.  */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 1002;
}
.skip-link:focus {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    padding: 12px 20px;
    background: #003366;
    color: #FFCB05;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: underline;
    outline: 3px solid #FFCB05;
    outline-offset: -3px;
}

/* boilerplate.css sets display:block on the HTML5 elements for old browsers
   but predates <main>, so it is not in that list. Modern browsers default it
   to block anyway; this is belt and braces for the ones that do not.        */
main { display: block; }

/* Visually hidden but still announced.
   fluid.css already has .screenreader, but it hides with font-size:0 plus a
   -9999px text-indent - and font-size:0 is skipped outright by some screen
   readers, which is the one thing the class exists to prevent. This is the
   standard clip-rect technique; .screenreader is left alone so nothing that
   currently uses it changes.                                               */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Homepage intro ----------------------------------------------------
   The homepage's one h1. The four section headings that used to be h1s
   ("Latest Video", "Latest News", ...) are .home-section-heading h2s and
   inherit the old h1 look so the page reads as it did.                   */
.homepage-intro {
    margin: 30px auto 40px;
    max-width: 760px;
}
.homepage-intro h1 {
    margin-bottom: 12px;
}
.homepage-intro p {
    color: #444;
}

/* h1 in fluid.css steps 160% -> 260% -> 300% across two breakpoints; mirror
   those so demoting these to h2 changes the tag and nothing else. */
.home-section-heading {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 3px solid #FFCB05;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 160%;
}
@media only screen and (min-width: 481px) {
    .home-section-heading { font-size: 260%; }
}
@media only screen and (min-width: 1090px) {
    .home-section-heading { font-size: 300%; }
}

/* --- "See all <make> <model> parts" link on the make page --------------
   The only internal route to the 845 model landing pages, so it should
   read as a real call to action rather than body copy.                   */
.model-landing-link {
    margin: 18px 0 24px;
}
.model-landing-link a {
    display: inline-block;
    padding: 9px 16px;
    background: #004990;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
}
.model-landing-link a:hover,
.model-landing-link a:focus {
    background: #003366;
    color: #FFCB05;
}

/* --- Product page H1 ---------------------------------------------------
   The h1 was the bare part number with the description as a following h2.
   It is now one heading: "SPF0001K <span>Front Control Arm Bush Kit</span>".

   The span keeps the description visually subordinate - roughly where the
   old h2 sat - so the page looks near enough unchanged while the document
   actually says what it sells. Sizes mirror the .partdetails h2 steps in
   fluid.css (120% at base, 160% from 1090px) as a proportion of the h1.  */
.partdetails h1 .part-h1-description {
    display: block;
    margin-top: 6px;
    font-size: 60%;
    font-weight: 400;
    text-transform: none;
    line-height: 1.25;
}

/* --- OEM cross-reference (oem.cfm) ------------------------------------- */
.oem-intro {
    max-width: 68ch;
    margin-bottom: 26px;
}
.oem-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 8px;
}
.oem-search label {
    flex: 1 0 100%;
    font-weight: 500;
    margin-bottom: 2px;
}
.oem-search input {
    flex: 1 1 260px;
    max-width: 340px;
    padding: 10px 12px;
    border: 1px solid #b9c4d2;
    border-radius: 4px;
    font-size: 1rem;
}
.oem-search-note {
    color: #5a6675;
    font-size: 0.9rem;
    margin-bottom: 30px;
}
/* --- OEM number chips -------------------------------------------------
   Styled as CODE CHIPS, following the treatment the brand already uses for
   the promo code (.promo-ribbon-code / .sale-code-chip): navy and yellow,
   Poppins, bold, letter-spaced. An OEM part number is exactly that kind of
   thing - an alphanumeric code to be read character by character - so it
   should look like one rather than like body-copy link text.

   Resting state is navy on pale blue with a navy rule; hover and focus flip
   to the brand yellow with navy text, which is the same inversion the promo
   chip uses. Letter-spacing matters here: "8N0407181B" is much easier to
   check against a part in your hand when the characters are not touching. */
.oem-search-note .mono {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #003366;
}
.oem-index {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}
.oem-index a {
    display: block;
    padding: 9px 12px;
    background: #eef3f9;
    border: 1px solid #c3d2e3;
    border-left: 3px solid #004990;
    border-radius: 3px;
    color: #003366;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    word-break: break-all;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.oem-index a:hover,
.oem-index a:focus {
    background: #FFCB05;
    border-color: #CCA100;
    border-left-color: #003366;
    color: #003366;
}
.oem-index a:focus-visible {
    outline: 3px solid #004990;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .oem-index a { transition: none; }
}
.oem-parts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 26px 0;
}
.oem-part-card {
    border: 1px solid #dbe2ea;
    border-radius: 6px;
    padding: 18px 20px;
}
.oem-part-photo {
    display: block;
    margin: -18px -20px 14px;
    padding: 12px;
    background: #fff;
    border-bottom: 1px solid #eef2f7;
    border-radius: 6px 6px 0 0;
    text-align: center;
}
/* No focus ring left behind after the modal closes.
   Clicking an anchor focuses it, so when magnific-popup returns focus the
   browser's default ring (a dotted outline) was being painted around the
   photo and staying there. :focus-visible would normally be the right tool,
   but this link is tabindex="-1" and aria-hidden - it exists only as a large
   click target for the heading link beside it, and is not keyboard reachable
   - so there is no keyboard case to preserve and suppressing the ring removes
   nothing. The heading link and the button keep their own focus styles. */
.oem-part-photo:focus {
    outline: none;
}
/* height:auto is REQUIRED here, not optional. boilerplate.min.css sets
   img{max-width:100%!important} with no height:auto anywhere in the site, so
   as soon as max-width narrows the element a specified height stays pinned
   and the photo stretches vertically. The srcset carries intrinsic widths, so
   without this the cards render visibly squashed. */
.oem-part-photo img {
    height: auto;
    max-height: 190px;
    width: auto;
    object-fit: contain;
}
.oem-part-card h2 {
    margin: 0 0 8px;
    font-size: 1.3rem;
}
.oem-part-desc {
    color: #444;
    margin-bottom: 12px;
}
.oem-part-price {
    font-weight: 600;
    font-size: 1.25rem;
    color: #004990;
}
.oem-part-price-ask {
    font-size: 1rem;
}
.oem-part-vat {
    color: #5a6675;
    font-size: 0.85rem;
}
.oem-part-buy {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}
.oem-caveat {
    max-width: 68ch;
    color: #444;
    border-left: 3px solid #FFCB05;
    padding-left: 16px;
}

/* "Replaces OEM part numbers" block on the product page */
.oem-replaces {
    margin: 26px 0;
}
.oem-replaces ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Same code-chip treatment as .oem-index, scaled down for inline use on the
   product page. Kept identical in colour so an OEM number looks like the same
   kind of object wherever it appears on the site. */
.oem-replaces li a {
    display: inline-block;
    padding: 6px 11px;
    background: #eef3f9;
    border: 1px solid #c3d2e3;
    border-left: 3px solid #004990;
    border-radius: 3px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: #003366;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.oem-replaces li a:hover,
.oem-replaces li a:focus {
    background: #FFCB05;
    border-color: #CCA100;
    border-left-color: #003366;
    color: #003366;
}
.oem-replaces li a:focus-visible {
    outline: 3px solid #004990;
    outline-offset: 2px;
}
.oem-replaces h4 {
    margin-bottom: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .oem-replaces li a { transition: none; }
}

/* --- FAQ accordions ----------------------------------------------------
   Rebuilt 2026-08-09. Previously every question was #163b79 - the same
   colour as the category <h2> above it AND the same as every link on the
   site - with no icon and no open/closed state. Nothing told you a
   question was a control rather than a heading or a link.

   Now: near-black question text (clearly not a link), a chevron that
   rotates to show state, and a tinted open row. All state is keyed off
   aria-expanded so the visual and the announced state cannot diverge.

   Overrides fluid.css .question (inline-block, #163b79, margins) and
   .answer-container (height:0 / overflow:hidden), which existed to
   support the old jQuery height animation.                              */
.faq_container {
    border-bottom: 1px solid #dbe2ea;
}
.faq_container:first-of-type {
    border-top: 1px solid #dbe2ea;
}
.question-heading {
    margin: 0;
    font-size: 100%;
    font-weight: 400;
}
/* The button is the control; the h3 around it is only for the outline. */
.faq_container .question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 16px 4px;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.35;
    color: #1b2430;          /* NOT the link blue, and not the h2 navy */
    text-transform: none;
}
.faq_container .question:hover,
.faq_container .question:focus-visible {
    color: #004990;
}
.faq_container .question:focus-visible {
    outline: 3px solid #FFCB05;
    outline-offset: -3px;
}
.question-text {
    flex: 1 1 auto;
}
.question-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef2f7;
    transition: transform 0.18s ease, background-color 0.18s ease;
}
.question-icon svg {
    width: 20px;
    height: 20px;
    fill: #004990;
}
.faq_container .question:hover .question-icon,
.faq_container .question:focus-visible .question-icon {
    background: #FFCB05;
}
/* Open state - driven entirely by aria-expanded. */
.faq_container .question[aria-expanded="true"] {
    color: #004990;
}
.faq_container .question[aria-expanded="true"] .question-icon {
    transform: rotate(180deg);
}
/* Collapsed state is the native hidden attribute, set by the same JS
   statement that sets aria-expanded (see includes/footer.cfm). !important
   because boilerplate.css blanket-sets display:block on HTML5 elements and
   would otherwise out-rank the browser's own [hidden] rule. */
.faq_container .answer-container[hidden] {
    display: none !important;
}
.faq_container .answer-container {
    /* fluid.css collapses this with height:0 for the old animation. */
    height: auto;
    overflow: visible;
    padding: 0 4px 8px;
}
.faq_container .answer {
    margin: 0;
    padding-bottom: 20px;
    max-width: 70ch;
}
@media (prefers-reduced-motion: reduce) {
    .question-icon { transition: none; }
}

/* --- Policy pages (delivery / returns / warranty) ---------------------- */
.policy-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 620px;
    margin: 0 0 24px;
}
.policy-table th,
.policy-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid #dbe2ea;
}
.policy-table thead th {
    background: #003366;
    color: #fff;
    border-bottom: 0;
}
.policy-table tbody tr:last-child td {
    border-bottom: 1px solid #dbe2ea;
}
.policy-quote {
    margin: 0 0 24px;
    padding: 14px 20px;
    border-left: 4px solid #FFCB05;
    background: #f4f6f9;
}
.policy-quote p {
    margin: 0;
    font-style: italic;
}

/* --- Products landing page (products.cfm with no vehicleid) ------------
   Was a soft-404 error page until 2026-08-09, and it is the target of the
   "Products" nav item on every page of the site.                         */
.products-landing {
    padding: 20px 0 40px;
}
.products-landing h1 {
    margin-bottom: 10px;
}
.products-landing-intro {
    max-width: 62ch;
    margin-bottom: 34px;
}
.products-landing-block {
    margin-bottom: 40px;
}
.products-landing-block h2 {
    border-bottom: 3px solid #FFCB05;
    padding-bottom: 8px;
    margin-bottom: 18px;
}
.products-landing-ranges,
.products-landing-makes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.products-landing-ranges li a,
.products-landing-makes li a {
    display: block;
    padding: 9px 14px;
    background: #f4f6f9;
    border: 1px solid #dbe2ea;
    border-radius: 4px;
    color: #004990;
    text-decoration: none;
    font-weight: 500;
}
.products-landing-ranges li a:hover,
.products-landing-ranges li a:focus,
.products-landing-makes li a:hover,
.products-landing-makes li a:focus {
    background: #004990;
    border-color: #004990;
    color: #fff;
}
.products-landing-makes li a {
    font-size: 0.92rem;
    padding: 7px 12px;
}
.products-landing-ranges + .products-landing-ranges {
    margin-top: 10px;
}

/* --- Poppins (body + heading font) --- */
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-SemiBoldItalic.otf') format('opentype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

/* --- Magistral (available for future use) --- */
@font-face { font-family: 'Magistral'; src: url('../fonts/magistral/Magistral Book.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Magistral'; src: url('../fonts/magistral/Magistral Book Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Magistral'; src: url('../fonts/magistral/Magistral Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Magistral'; src: url('../fonts/magistral/Magistral Medium Italic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Magistral'; src: url('../fonts/magistral/Magistral Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Magistral'; src: url('../fonts/magistral/Magistral Bold Italic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }


/* ============================================
   FONTS - override all font-family references
   ============================================ */

body,
.column-block,
.info-notice,
p {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6,
#mainNav ul li,
.quote-position h4,
.quote-position h5,
#copyright-container {
    font-family: 'Poppins', sans-serif;
}

.footer-column-section,
.footer-column-section h3 {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

/* Spread footer columns across full width using flexbox */
#footer-container .fixedwidth {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.footer-column-section {
    flex: 1 1 0;
    width: auto;
    min-width: 200px;
    margin: 0;
    float: none;
}
.footer-column-section ul li {
    margin-bottom: 6px;
}
.footer-column-section:first-child {
    margin-top: 0;
}
.footer-column-section:last-child {
    margin-bottom: 0;
}
#footer-divider {
    width: 100%;
    margin: 20px 0;
    flex-basis: 100%;
}
#copyright-container {
    width: auto;
    margin: 0;
    float: none;
}
#footer-social-container {
    width: auto;
    margin: 0;
    float: none;
    margin-left: auto;
    margin-right: 60px;
    display: flex;
    gap: 12px;
    align-items: center;
}
#footer-social-container .social-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
    float: none;
    margin: 0;
}
#footer-social-container .social-icon:hover {
    opacity: 1;
}
#footer-social-container .social-icon svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}


/* ============================================
   COLORS - override old palette
   Old gold #f1c621 -> New yellow #FFCB05
   Old navy #163b79 -> New blue #004990
   Old dark #131025 -> New navy #003366
   ============================================ */

/* --- Header --- */

#header {
    /* Yellow border-top is replaced by the #top-utility-bar above the page.
       Keep border-width 0 so we don't get a residual line from fluid.css. */
    border-top: 0 none !important;
    padding-top: 12px;
}
/* When the shop is disabled the top utility bar isn't rendered, so the
   page loses the yellow accent at the very top. Restore the legacy
   yellow border on #header in that mode so the brand line still reads. */
body.shop-disabled #header {
    border-top: 10px solid #FFCB05 !important;
}

/* --- Logo --- */

#superpro-logo {
    margin-top: 8px;
    /* Logo is now an <img> (was inline SVG). <img> doesn't auto-fill its
       container the way a viewBox-only SVG does, so size it explicitly. */
    width: 100%;
    height: auto;
    display: block;
}

@media only screen and (min-width: 1090px) {
    #header {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        padding-top: 1.5%;
    }
    #logo {
        float: none;
        flex-shrink: 0;
    }
    #mainNav {
        float: none;
        margin-left: auto;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    #superpro-logo {
        margin-top: 0;
    }
}

@media only screen and (max-width: 1089px) {
    #logo {
        width: 30%;
    }
    #superpro-logo {
        /* Vertically align with centre of 46px menu button at top:14px */
        margin-top: 18px;
        margin-left: 5%;
    }
}

@media only screen and (max-width: 600px) {
    #logo {
        width: 45%;
    }
}

/* --- Menu button --- */

.menu-link {
    background-color: #004990;
    top: 14px;
}
#mainNav.light .menu-link,
#mainNav.open .menu-link,
#mainNav.light.open .menu-link {
    background-color: #FFCB05;
}
#mainNav.open .menu-link {
    position: fixed;
    top: 14px;
    right: 5%;
}
#menu-circle {
    background-color: #004990;
}

/* --- Menu lines --- */

#mainNav.light .menu-line {
    background-color: #004990;
}
#mainNav.open .menu-line,
#mainNav.light.open .menu-line {
    background-color: #004990;
}

/* --- Nav links --- */

#mainNav ul li a,
#mainNav ul li a:visited {
    color: #004990;
}
#mainNav ul li a:hover,
#mainNav ul li a:active,
#mainNav ul li a.selected {
    background-color: #FFCB05;
}

#mainNav.light ul li a,
#mainNav.light ul li a:visited {
    color: #FFF;
}
#mainNav.light.open ul li a,
#mainNav.light.open ul li a:visited {
    color: #004990;
}
#mainNav.light ul li a:hover,
#mainNav.light ul li a:active,
#mainNav.light ul li a.selected {
    background-color: #FFCB05;
    color: #003366;
}

/* --- Full screen overlay menu --- */

.overlay {
    /* Old decorative yellow stripe at the top of the viewport. Replaced by
       #top-utility-bar — kill the border so it doesn't sit on top of the bar. */
    border-top: 0 none !important;
}

/* --- Banner --- */

#banner {
    border-bottom-color: #004990;
    position: relative;
    float: none !important;
    margin-bottom: -40px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    padding-bottom: 50px;
}

#banner > .clr {
    display: none !important;
}

#bannerContent,
#banner #bannerContent,
#banner > #bannerContent {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: center;
    width: 90%;
    max-width: 1232px;
    align-self: center !important;
    position: relative;
    z-index: 2;
}

.clarify {
    position: absolute !important;
    pointer-events: none;
    height: calc(100% + 40px) !important;
}

/* Banner vignette overlay for text readability */
.clarify {
    background:
        linear-gradient(to bottom, rgba(0,15,40,0.85) 0%, rgba(0,15,40,0.5) 8%, rgba(0,15,40,0.25) 20%, transparent 35%),
        radial-gradient(ellipse 65% 40% at 50% 45%, rgba(0,15,40,0.7) 0%, transparent 100%),
        radial-gradient(ellipse at 0% 0%, rgba(0,0,0,0.55) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 0%, rgba(0,0,0,0.55) 0%, transparent 40%);
}

/* --- Quote strip --- */

.quote-container {
    margin-top: -40px;
    position: relative;
    z-index: 3;
}

.st0 {
    fill: #FFCB05;
}
.quote-bg {
    background-color: #FFCB05;
}
.quote-position h4 {
    color: #003366;
}
.quote-position h5 {
    color: #003366;
}

/* --- Headings --- */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    line-height: 1.25;
    font-weight: 600;
}

h1 {
    font-size: clamp(1.4rem, 2.5vw + 0.5rem, 2.4rem);
    border-bottom: 3px solid #FFCB05;
    padding-bottom: 6px;
    margin-bottom: 20px;
}

h2 {
    font-size: clamp(1.2rem, 2vw + 0.4rem, 2rem);
    margin-bottom: 15px;
}

h3 {
    font-size: clamp(1.05rem, 1.5vw + 0.3rem, 1.5rem);
    margin-bottom: 12px;
}

h4 {
    font-size: clamp(1rem, 1.2vw + 0.3rem, 1.3rem);
    margin-bottom: 10px;
}

h5 {
    font-size: clamp(0.9rem, 1vw + 0.2rem, 1.1rem);
    margin-bottom: 8px;
}

h6 {
    font-size: clamp(0.85rem, 0.8vw + 0.2rem, 1rem);
    margin-bottom: 8px;
}

/* --- Breadcrumb --- */

.breadcrumb {
    text-align: left;
}
/* DO NOT FLOAT THE BREADCRUMB.
   These carry .fluid from fluid.css, which is float:left + width:100%. The
   element straight after the breadcrumb on the part page is .part-page-grid,
   a display:grid container - and a grid container establishes an independent
   formatting context, so it does NOT flow under a float, it is placed BESIDE
   it. With a 100%-wide float above it, the grid was squeezed into the sliver
   of space left over (~50px) and its contents ran off the right of the page.

   It only showed up once the breadcrumb started rendering on every product
   page; before that it was behind the fitmentspecific check and most pages
   never hit it. Same reasoning as the .part-page-main override further down
   this file, which strips .fluid's float for the same reason.

   float:none keeps the visual result identical - a 100%-wide block - without
   the float's side effects on anything that follows. */
.breadcrumb.fluid,
nav.breadcrumb {
    float: none;
    clear: both;
    width: 100%;
}
.breadcrumb ul li {
    float: none;
    display: inline;
}
/* The "« Back to <vehicle>" control now sits UNDER the breadcrumb trail
   rather than being the only thing there, so it does not need a second
   20px gap above it. */
.breadcrumb--backlink {
    margin-top: 6px;
}
/* The current page is a <span>, not a link. Give it the same weight as the
   trail but make it clearly not clickable. */
.breadcrumb ul li [aria-current="page"] {
    color: #003366;
    font-weight: 600;
    text-transform: uppercase;
}
.breadcrumb ul li a,
.breadcrumb ul li a:visited {
    color: #555;
}
.breadcrumb ul li a:active,
.breadcrumb ul li a:hover {
    color: #FFCB05;
}

/* --- Article Image Gallery (rich content articles) --- */

.article-gallery {
    margin: 30px 0 10px;
    clear: both;
}
.article-gallery h3 {
    margin-bottom: 15px;
}
.article-gallery__grid {
    column-count: 2;
    column-gap: 10px;
}
.article-gallery__grid figure {
    margin: 0 0 10px;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    break-inside: avoid;
    background-color: #f3f3ee;
}
.article-gallery__grid figure a {
    display: block;
}
.article-gallery__grid figure img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}
.article-gallery__grid figure:hover img {
    transform: scale(1.03);
}
.article-gallery__grid figcaption {
    padding: 6px 8px;
    font-size: 0.85em;
    color: #666;
    background: #f8f8f8;
}
@media only screen and (max-width: 480px) {
    .article-gallery__grid {
        column-count: 1;
    }
}
@media only screen and (min-width: 1090px) {
    .article-gallery__grid {
        column-count: 4;
    }
}

/* --- News Listing Page (hero + card grid) --- */

.news-page {
    margin-bottom: 40px;
}

/* Twin hero (top 2 articles side-by-side on desktop, stacked on mobile) */
.news-hero-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 0 0 40px;
}
.news-hero-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.news-hero-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    transform: translateY(-3px);
    text-decoration: none;
    color: #333;
}
.news-hero-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f3ee;
}
.news-hero-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.news-hero-card:hover .news-hero-card__image img {
    transform: scale(1.04);
}
.news-hero-card__content {
    padding: 24px 26px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-hero-card__content h2 {
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    line-height: 1.25;
    margin: 0 0 12px;
    color: #003366;
}
.news-hero-card__content p {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    margin: 0 0 16px;
}
.news-hero-card__cta {
    display: inline-block;
    font-weight: 600;
    color: #004990;
    font-size: 0.95rem;
    margin-top: auto;
}
.news-hero-card:hover .news-hero-card__cta {
    color: #003366;
}

/* Section titles */
.news-section-title {
    font-size: 1.4rem;
    margin: 30px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1c621;
}

/* Card grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin: 0 0 40px;
}
.news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.news-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transform: translateY(-3px);
    text-decoration: none;
    color: #333;
}
.news-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f3f3ee;
}
.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.news-card:hover .news-card__image img {
    transform: scale(1.05);
}
.news-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #003366;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border-radius: 3px;
    text-transform: uppercase;
}
.news-hero .news-card__badge {
    position: static;
    align-self: flex-start;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.news-card__content {
    padding: 18px 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-card__content h3 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0 0 8px;
    color: #003366;
}
.news-card__sub {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

/* Article types list */
.news-types-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.news-types-list li {
    margin: 0;
}
.news-types-list li a {
    display: inline-block;
    padding: 8px 14px;
    background: #f3f3ee;
    color: #003366;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.news-types-list li a:hover {
    background: #003366;
    color: #fff;
}

@media (max-width: 760px) {
    .news-hero-pair {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .news-hero-card__content {
        padding: 18px 20px 22px;
    }
    .news-hero-card__content h2 {
        font-size: 1.25rem;
    }
}

/* --- Sticky fitment filter (products.cfm) ---
   Hidden until products.cfm's script sets data-ready, so with JS off the page is
   exactly as it was and no dead chips are shown. Nothing on this site is
   position:fixed at the top (#top-utility-bar is position:relative), so the bar
   can stick at 0 without an offset dance. */

.fitment-filter { display: none; }
.fitment-filter[data-ready] {
    display: block;
    position: sticky;
    top: 0;
    /* Above #header (position:absolute, z-index:500) in case the two ever meet,
       but below the menu overlay (999) and the utility bar (1001) so an open
       mega-menu still covers it. */
    z-index: 600;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    margin: 0 0 20px;
    padding: 10px 0;
}
.fitment-filter__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.fitment-filter__label {
    font-weight: 700;
    color: #003366;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin-right: 4px;
}
.fitment-filter__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 7px 14px;
    border: 1px solid #004990;
    border-radius: 999px;
    background: #fff;
    color: #004990;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.fitment-filter__chip:hover { background: #eef3f9; }
.fitment-filter__chip.is-selected {
    background: #004990;
    color: #fff;
}
.fitment-filter__count {
    font-size: 0.8em;
    opacity: 0.75;
}
/* Keyboard focus must stay obvious - these are the page's primary control. */
.fitment-filter__chip:focus-visible {
    outline: 2px solid #FFCB05;
    outline-offset: 2px;
}

@media (max-width: 700px) {
    /* One row that scrolls sideways rather than a block of chips eating the
       screen above the products. */
    .fitment-filter__inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .fitment-filter__label { display: none; }
    .fitment-filter__chip { flex: 0 0 auto; }
}

/* --- Related Parts Cards (news article product links) --- */

.related-parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin: 20px 0;
}
.related-part-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.related-part-card:hover,
.related-part-card:active {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
    text-decoration: none;
    color: #333;
}
.related-part-card__image {
    background: #fff;
    text-align: center;
    padding: 0;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.related-part-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.related-part-card__info {
    padding: 14px 16px;
    border-top: 1px solid #f0f0f0;
}
.related-part-card__number {
    display: block;
    font-weight: 700;
    font-size: 1em;
    color: #004990;
    margin-bottom: 6px;
}
.related-part-card__title {
    display: block;
    font-size: 0.9em;
    color: #666;
    line-height: 1.4;
}

/* Price + stock line on a product card. Sits at the foot of the card, above the
   border, and wraps to two rows on a narrow card rather than squashing. */
.related-part-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 10px;
}
.related-part-card__price {
    font-weight: 700;
    font-size: 1.05em;
    color: #333;
}
.related-part-card__price-was {
    font-weight: 400;
    color: #888;
    margin-right: 2px;
}
.related-part-card__price--ask {
    font-weight: 400;
    font-size: 0.9em;
    color: #666;
}
.related-part-card__vat {
    font-size: 0.8em;
    color: #888;
}
/* Stock reads as a badge, same two states the purchase panel uses. Pushed to its
   own row on narrow cards by flex-basis so it never collides with the price. */
.related-part-card__stock {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
}
.related-part-card__stock--in {
    background: #e6f4ea;
    color: #1c6b34;
}
.related-part-card__stock--order {
    background: #fdf1dd;
    color: #8a5a00;
}

/* Kit components with no public page of their own - the non-Zeder hardware in a
   BOM (washers, bolts, bulk bushes), which part.number.cfm answers 410 Gone for.
   Same card so the grid stays even, minus every affordance that says "click me":
   no lift on hover, and the part number in body colour rather than link blue. */
.related-part-card--static {
    cursor: default;
}
.related-part-card--static:hover,
.related-part-card--static:active {
    box-shadow: none;
    transform: none;
}
.related-part-card--static .related-part-card__number {
    color: #333;
}

/* --- Links --- */

a {
    color: #004990;
}
a:hover {
    color: #003366;
}

/* --- Footer --- */

#footer-container {
    background-color: #003366;
    background-image: none !important;
    border-top: 5px solid #004990;
    color: rgba(255,255,255,0.85);
    padding: 50px 0 40px;
}
#footer-container a,
#footer-container a:visited {
    color: rgba(255,255,255,0.75);
}
#footer-container a:hover,
#footer-container a:active {
    color: #FFCB05;
}

.footer-column-section h3 {
    color: #FFCB05;
    margin-bottom: 10px;
}

#footer-divider {
    background-color: rgba(255,255,255,0.15);
}

#copyright-container {
    color: rgba(255,255,255,0.5);
}

/* --- Product range links in overlay menu --- */

#product-range-links a {
    color: #004990;
}
#product-range-links a:hover {
    color: #003366;
    background-color: #FFCB05;
}

/* --- Footer responsive spacing --- */

@media only screen and (max-width: 1089px) {
    .footer-column-section ul li {
        margin-bottom: 6px;
    }
    .footer-column-section ul li a {
        padding: 4px 0;
    }
    #footer-social-container {
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (max-width: 600px) {
    .footer-column-section ul li {
        margin-bottom: 8px;
    }
    .footer-column-section ul li a {
        padding: 6px 0;
    }
    #footer-container .fixedwidth {
        width: 80%;
    }
    .footer-column-section {
        flex: 1 1 100%;
        min-width: 100%;
    }
    #footer-social-container {
        margin-left: 0;
    }
}

/* --- Buttons --- */

a.button, a.button:visited {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-block;
    padding: 10px 28px;
    background-color: #004990;
    color: #fff;
    border: 2px solid #004990;
    border-radius: 3px;
    text-align: center;
    transition: all 0.2s ease;
    line-height: normal;
}
a.button:hover, a.button:active {
    background-color: #FFCB05;
    border-color: #FFCB05;
    color: #003366;
}

#locator input[type=submit],
input[type=submit],
button[type=submit] {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 28px;
    background-color: #004990;
    color: #fff;
    border: 2px solid #004990;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}
#locator input[type=submit]:hover,
input[type=submit]:hover,
button[type=submit]:hover {
    background-color: #FFCB05;
    border-color: #FFCB05;
    color: #003366;
}

/* --- Back to top button --- */

#back-to-top a {
    background-color: #004990;
}
#back-to-top a:hover,
#back-to-top a:active {
    background-color: #FFCB05;
}

/* --- Product containers --- */

.productcontainer {
    border-top: none;
}
.productcontainer:last-child {
    border-bottom: none;
}

/* --- "NEW" badges --- */

.new {
    color: #004990;
}

/* --- Major point numbers (Why SuperPro page) --- */

.majorpointnumber {
    color: #004990;
}

/* ============================================
   HEADER SEARCH BAR
   ============================================ */

/* --- Search container in nav --- */

#header-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

#header-search-form {
    display: flex;
    align-items: center;
    position: relative;
}

#header-search-form input[type="text"] {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    padding: 7px 36px 7px 12px;
    border: 2px solid #ddd;
    border-radius: 3px;
    outline: none;
    width: 240px;
    transition: border-color 0.2s ease, width 0.2s ease;
    background: #fff;
    color: #333;
}
#header-search-form input[type="text"]:focus {
    border-color: #004990;
}
#header-search-form input[type="text"]::placeholder {
    color: #999;
    font-size: 0.8rem;
}

#header-search-form button[type="submit"] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header-search-form button[type="submit"] svg {
    width: 24px;
    height: 24px;
    fill: #004990;
    transition: fill 0.15s ease;
}
#header-search-form button[type="submit"]:hover svg {
    fill: #003366;
}
@media only screen and (max-width: 1089px) {
    #header-search-form button[type="submit"] {
        right: calc(5% + 10px);
        top: calc(50% + 6px);
    }
    #header-search-form button[type="submit"] svg {
        width: 30px;
        height: 30px;
    }
}

/* --- Mobile search toggle --- */

#header-search-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    align-items: center;
    justify-content: center;
}
#header-search-toggle svg {
    width: 30px;
    height: 30px;
    fill: #004990;
}
#mainNav.light #header-search-toggle svg {
    fill: #fff;
}

/* --- Desktop: search bar always visible --- */

@media only screen and (min-width: 1090px) {
    #header-search-toggle {
        display: none !important;
    }
    #header-search-form {
        display: flex !important;
    }
    #mainNav ul {
        display: flex;
        align-items: center;
        margin: 0;
        float: none;
        order: 2;
        padding-top: 0;
    }
    #header-search {
        flex-shrink: 0;
        order: 1;
        margin-right: 18px;
    }
}

/* --- Mobile/Tablet: toggle icon, expandable bar --- */

@media only screen and (max-width: 1089px) {
    #header-search {
        position: absolute;
        right: calc(5% + 60px);
        top: 18px;
        margin-left: 0;
        z-index: 9998;
    }
    #header-search-toggle {
        display: flex;
    }
    #header-search-form {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background: #004990;
        padding: 26px 5% 14px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        align-items: center;
    }
    #header-search.search-open #header-search-form {
        display: flex;
    }
    #header-search-form input[type="text"] {
        width: 100%;
        font-size: 1rem;
        padding: 10px 50px 10px 14px;
    }
}

@media only screen and (max-width: 600px) {
    #header-search {
        right: calc(5% + 55px);
    }
}

/* --- Autocomplete dropdown --- */

#header-search-results {
    display: none;
    position: fixed;
    min-width: 320px;
    background: #fff;
    border: 1px solid #ddd;
    border-top: 3px solid #004990;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 10001;
    max-height: 70vh;
    overflow-y: auto;
    text-align: left;
}

@media only screen and (max-width: 1089px) {
    #header-search-results {
        position: fixed;
        top: 58px !important;
        left: 0 !important;
        right: 0;
        min-width: 0;
        width: 100% !important;
        max-height: calc(100vh - 58px);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

.search-cat-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #004990;
    padding: 8px 14px;
    background: #f5f7fa;
    border-bottom: 2px solid #FFCB05;
    margin: 0;
}

a.search-result-item,
a.search-result-item:visited {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #333;
    transition: background-color 0.12s ease;
}
a.search-result-item:hover,
a.search-result-item:active,
a.search-result-item.active {
    background-color: #FFF8DC;
    color: #003366;
}
.search-result-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 2px;
    margin-left: 14px;
}
.search-result-item .sr-text {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
}
.search-result-item .sr-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-item .sr-desc {
    font-size: 0.78rem;
    color: #777;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-item .sr-type {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    background: #004990;
    padding: 2px 6px;
    border-radius: 2px;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.search-no-results {
    padding: 20px 14px;
    text-align: center;
    color: #999;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
}

.search-view-all {
    display: block;
    padding: 10px 14px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    color: #004990;
    text-decoration: none;
    border-top: 1px solid #eee;
    background: #f9f9f9;
    transition: background-color 0.15s ease;
}
.search-view-all:hover {
    background-color: #FFCB05;
    color: #003366;
}

/* ============================================
   SEARCH RESULTS PAGE (search.cfm)
   ============================================ */

.search-results-page h1 {
    border-bottom: 3px solid #FFCB05;
    padding-bottom: 6px;
}

.search-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-results-category {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #004990;
    padding: 12px 0 6px;
    border-bottom: 2px solid #FFCB05;
    margin: 25px 0 0;
}
.search-results-category:first-child {
    margin-top: 0;
}

.search-results-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}
.search-results-list li a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #333;
    flex: 1;
}
.search-results-list li a:hover {
    color: #004990;
}
.search-results-list li img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
    background: #f5f5f5;
    padding: 4px;
}
.search-results-list .sr-page-text {
    flex: 1;
}
.search-results-list .sr-page-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    display: block;
    color: #003366;
}
.search-results-list .sr-page-desc {
    font-size: 0.85rem;
    color: #777;
    display: block;
    margin-top: 2px;
}
.search-results-list .sr-page-type {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    background: #004990;
    padding: 3px 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ============================================================
   Part gallery (part.number.cfm + ajax/part.number.cfm)
   Main image on top, horizontal thumbnail strip below.
   ============================================================ */
.part-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.part-gallery__main {
    width: 100%;
    min-width: 0;
}
.part-gallery__main .item img {
    width: 100%;
    height: auto;
    display: block;
}
.part-gallery__thumbs {
    display: flex;
    flex-direction: row;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0 0 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.part-gallery__thumbs li {
    flex: 0 0 80px;
    margin: 0;
    padding: 0;
}
.part-gallery__thumb {
    display: block;
    width: 100%;
    padding: 0;
    background: #fff;
    border: 2px solid #e3e3e3;
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, opacity 0.15s ease;
    opacity: 0.75;
}
.part-gallery__thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.part-gallery__thumb:hover,
.part-gallery__thumb:focus {
    opacity: 1;
    border-color: #004990;
    outline: none;
}
.part-gallery__thumb.is-active {
    opacity: 1;
    border-color: #004990;
    box-shadow: 0 0 0 1px #004990 inset;
}

@media (max-width: 480px) {
    .part-gallery__thumbs li {
        flex: 0 0 64px;
    }
}

/* ============================================
   PART.NUMBER.CFM (and ajax/part.number.cfm)
   Sticky right-hand purchase panel on desktop,
   near-top on mobile. Identical look on both
   pages — just two different grid containers.
   ============================================ */
.part-page-grid,
.part-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 32px;
    align-items: start;
    margin-bottom: 24px;
}
.part-page-main,
.part-modal-main {
    /* the existing partnumbercontainer keeps its own padding/styles —
       this just makes it the left column of the grid.
       Override .fluid's float:left + width:100% from fluid.css — those
       break grid track sizing, making the column blow past the grid
       container and force horizontal scroll. */
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
}
/* Same problem in reverse: when we collapse to single column on mobile
   the panel needs to NOT float left (Magnific Popup body has width hacks
   that interact badly with floats). */
.part-modal-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.part-page-purchase,
.part-modal-purchase {
    position: sticky;
    top: 90px;
    background: #f9fafb;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    padding: 22px 24px 24px;
    text-align: center;
}
.part-page-purchase-title,
.part-modal-purchase-title {
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid #e6e8eb;
    font-size: 1.05rem;
    color: #003366;
    font-weight: 600;
    /* override the global h3 yellow underline / display:inline-block from fluid.css */
    display: block;
}
/* Each section inside the panel has its own breathing room. The
   :last-child rule keeps the panel from over-padding at the bottom. */
.part-page-purchase > *,
.part-modal-purchase > * {
    margin-bottom: 16px;
}
.part-page-purchase > *:last-child,
.part-modal-purchase > *:last-child {
    margin-bottom: 0;
}
.part-page-purchase .product-price,
.part-modal-purchase .product-price {
    /* Override the global yellow underline that h3 inherits from fluid.css. */
    border-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
}
.part-page-purchase .stock-badge,
.part-modal-purchase .stock-badge {
    /* Pad the badge a bit more so it has presence between the price and the button. */
    padding: 8px 14px;
}
.part-page-purchase-qtyreq,
.part-modal-purchase-qtyreq {
    font-size: 0.9rem;
    color: #555;
}

/* Mobile: collapse to single column, panel near the top via grid order. */
@media (max-width: 900px) {
    .part-page-grid,
    .part-modal-grid {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .part-page-main,
    .part-modal-main { order: 2; }
    .part-page-purchase,
    .part-modal-purchase {
        position: static;
        order: 1;
    }
}

/* ============================================
   PRODUCT PRICE + STOCK BADGES
   Used on products.cfm (per-vehicle parts list).
   Data comes from dbo.get_products_by_vehicle.
   ============================================ */
.product-price {
    color: #004990;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 18px 0 4px;
}
.product-price-vat {
    color: #555;
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 4px;
}
.product-price-ask {
    color: #555;
    font-style: italic;
    font-weight: 500;
}
.stock-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.95rem;
    margin: 4px 0 8px;
}
.stock-badge-instock {
    background: #e7f4e1;
    color: #2f7a1e;
}
.stock-badge-order {
    background: #fff4d6;
    color: #8a6500;
}

/* ============================================
   ADD-TO-BASKET QUANTITY STEPPER + BUTTON
   Used on products.cfm.
   ============================================ */
.atb-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.atb-controls {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
}
/* Centered only in the part-number "Add to Basket" panel (page sidebar and
   ajax modal); product cards on products.cfm stay left-aligned. */
.part-page-purchase .atb-controls,
#modal-atb-wrap .atb-controls {
    justify-content: center;
}
.atb-in-basket-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #e7f4e1;
    color: #2f7a1e;
    border: 1px solid #c6e4b8;
    border-radius: 6px;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.15s ease;
    align-self: flex-start;
}
.atb-in-basket-banner:hover,
.atb-in-basket-banner:focus {
    background: #d8ecce;
    outline: none;
}
.atb-in-basket-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #2f7a1e;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.75rem;
}
.atb-in-basket-text strong {
    color: #1f5712;
    margin-left: 2px;
}
.atb-in-basket-link {
    margin-left: auto;
    color: #1f5712;
    text-decoration: underline;
    font-size: 0.85rem;
}
.atb-wrap.atb-in-basket .atb-add {
    background: #5a7e9c; /* slightly muted to signal "additional add" */
}
.atb-wrap.atb-in-basket .atb-add:hover:not(:disabled) {
    background: #003366;
}
.atb-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.atb-qty-btn {
    width: 36px;
    border: 0;
    background: #f4f4f4;
    color: #003366;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.atb-qty-btn:hover:not(:disabled) {
    background: #e6e6e6;
}
.atb-qty-btn:disabled {
    color: #aaa;
    cursor: not-allowed;
}
.atb-qty-input {
    width: 56px;
    border: 0;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #003366;
    background: #fff;
    -moz-appearance: textfield;
    appearance: textfield;
}
.atb-qty-input::-webkit-outer-spin-button,
.atb-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.atb-add {
    background: #004990;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.atb-add:hover:not(:disabled) {
    background: #003366;
}
.atb-add:active:not(:disabled) {
    transform: translateY(1px);
}
.atb-add:disabled {
    background: #6b7e95;
    cursor: not-allowed;
}
.atb-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================
   BASKET DRAWER (slide-in from right)
   ============================================ */
.basket-drawer-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}
.basket-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.basket-drawer-root.is-open .basket-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}
.basket-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: #fff;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}
.basket-drawer-root.is-open .basket-drawer {
    transform: translateX(0);
}
.basket-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #ececec;
    background: #003366;
    color: #fff;
}
.basket-drawer-head h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #fff;
    font-weight: 600;
}
.basket-drawer-count {
    color: #FFCB05;
    font-weight: 500;
    margin-left: 6px;
}
.basket-drawer-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.basket-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
}
.basket-drawer-empty {
    color: #777;
    text-align: center;
    margin: 40px 0;
    font-style: italic;
}
.basket-drawer-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}
.basket-drawer-line {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}
.basket-drawer-line-thumb {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 64px;
    height: 64px;
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
}
.basket-drawer-line-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.basket-drawer-line-info {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.basket-drawer-line-title {
    font-weight: 600;
    color: #003366;
    line-height: 1.3;
}
.basket-drawer-line-meta {
    font-size: 0.8rem;
    color: #777;
    margin-top: 2px;
}
.basket-drawer-line-fits {
    font-size: 0.78rem;
    color: #333;
    background: #f5f8fb;
    border-left: 2px solid #004990;
    padding: 4px 8px;
    margin-top: 6px;
    border-radius: 0 3px 3px 0;
    line-height: 1.3;
}
.basket-drawer-line-fits span {
    font-weight: 600;
    color: #004990;
}
.basket-drawer-line-qty {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.basket-drawer-line-qty .atb-qty-btn {
    width: 28px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    font-size: 0.9rem;
}
.basket-drawer-qty-value {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    color: #003366;
}
.basket-drawer-line-total {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    font-weight: 700;
    color: #004990;
    text-align: right;
    align-self: start;
}
.basket-drawer-line-remove {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background: transparent;
    border: 0;
    color: #a33;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    align-self: end;
    text-align: right;
}
.basket-drawer-line-remove:hover {
    text-decoration: underline;
}
.basket-drawer-foot {
    padding: 16px 20px;
    border-top: 1px solid #ececec;
    background: #f9fafb;
}
.basket-drawer-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    font-size: 1.05rem;
}
.basket-drawer-total strong {
    font-size: 1.25rem;
    color: #004990;
}
.basket-drawer-cta,
.basket-drawer-cta:visited,
.basket-drawer-cta:link {
    display: block;
    width: 100%;
    text-align: center;
    background: #004990;
    color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s ease;
}
.basket-drawer-cta:hover,
.basket-drawer-cta:focus,
.basket-drawer-cta:active {
    background: #003366;
    color: #fff;
}

/* ============================================
   TOP UTILITY BAR (yellow strip above the main header)
   Houses the sign-in link + basket icon. Replaces the
   old purely-decorative yellow top border on #header.
   ============================================ */
#top-utility-bar {
    background: #FFCB05;
    color: #003366;
    font-size: 0.85rem;
    line-height: 1.2;
    /* #header is position:absolute with z-index:500, and the menu .overlay sits
       at z-index:999. The utility bar must stack above both so its content stays
       visible and clickable over the header's fade gradient. */
    position: relative;
    z-index: 1001;
}
/* When the products mega-menu is open (body class set in includes/footer.cfm)
   hide the utility bar so its z-index:1001 doesn't sit on top of the .closebtn
   and the menu's top content. */
body.products-menu-open #top-utility-bar { display: none; }

/* ============================================
   MOBILE MAIN MENU — OPEN STATE
   .open is toggled on #header + #mainNav by the
   .menu-link handler in includes/footer.cfm.
   ============================================ */

/* The utility bar (z-index:1001) deliberately stays above the open menu:
   the logo and close button keep their positions below it, so the bar
   reads as a normal part of the open-menu header. (An earlier z-index
   lift on #header.open covered it, which left stray text peeking out.) */

/* Brand-blue menu sheet (fluid.css paints both of these white). The extra
   ul padding-top clears the bar + logo, which stay visible over the menu. */
#header.open { background-color: #004990; }
#header.open #mainNav ul {
    background-color: #004990;
    padding-top: 110px;
}

/* Keep the logo on top of the open menu, in its normal position. The blue
   logo would vanish on the blue sheet, so swap to the yellow (dark-bg)
   variant rendered alongside it in includes/header.cfm. */
#superpro-logo-menuopen {
    display: none;
    width: 100%;
    height: auto;
    margin-top: 18px;
    margin-left: 5%;
}
#header.open #logo { position: relative; z-index: 1004; }
#header.open #superpro-logo { display: none; }
#header.open #superpro-logo-menuopen { display: inline-block; }

/* While a full-screen menu is open, footer.cfm freezes the page with
   html.noscroll (position:fixed) — but fluid.css keeps overflow-y:scroll
   on it for the desktop scrollbar gutter, so on touch devices the frozen
   page can still be dragged: the in-flow logo + utility bar slide up
   while the fixed menu sheet stays put. Block it on mobile only. */
@media only screen and (max-width: 1089px) {
    html.noscroll { overflow-y: hidden; }
}

/* White links, SuperPro yellow on hover/touch; current page also yellow.
   Double-ID selectors so these beat the #mainNav.light/.open variants. */
#header.open #mainNav ul li a,
#header.open #mainNav ul li a:visited {
    color: #fff;
}
#header.open #mainNav ul li a:hover,
#header.open #mainNav ul li a:active,
#header.open #mainNav ul li a.selected {
    background-color: transparent;
    color: #FFCB05;
}

/* ============================================
   LAST-VEHICLE CTA (in the products mega-menu)
   Pre-populated from cookie.spevehicleid; sits
   above the "PRODUCT RANGES:" heading so it's
   the first thing a returning customer sees.
   ============================================ */
.last-vehicle-cta {
    margin: 0 auto 24px;
    padding: 16px 20px;
    background: #003366;
    border-radius: 8px;
    color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    text-align: left;
}
.last-vehicle-cta-label {
    color: #FFCB05;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    flex-basis: 100%;
}
.last-vehicle-cta-link,
.last-vehicle-cta-link:link,
.last-vehicle-cta-link:visited {
    flex: 1 1 auto;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    transition: color 0.15s ease;
}
.last-vehicle-cta-link:hover,
.last-vehicle-cta-link:focus,
.last-vehicle-cta-link:active {
    color: #FFCB05;
}
.last-vehicle-cta-name {
    flex: 0 1 auto;
}
.last-vehicle-cta-years {
    color: #b3c2d6;
    font-size: 0.95rem;
    font-weight: 400;
}
/* Years inherit the link's hover/focus colour so they don't disappear into
   grey when the rest of the link goes yellow. */
.last-vehicle-cta-link:hover .last-vehicle-cta-years,
.last-vehicle-cta-link:focus .last-vehicle-cta-years,
.last-vehicle-cta-link:active .last-vehicle-cta-years {
    color: inherit;
}
.last-vehicle-cta-arrow {
    margin-left: auto;
    font-size: 1.6rem;
    line-height: 1;
}
.last-vehicle-cta-clear,
.last-vehicle-cta-clear:link,
.last-vehicle-cta-clear:visited {
    color: #b3c2d6;
    font-size: 0.78rem;
    text-decoration: underline;
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
}
.last-vehicle-cta-clear:hover {
    color: #fff;
}

@media (max-width: 600px) {
    .last-vehicle-cta { padding: 14px 16px; }
    .last-vehicle-cta-link { font-size: 1.1rem; flex-direction: column; gap: 4px; align-items: flex-start; }
    .last-vehicle-cta-arrow { display: none; }
}
.top-utility-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.top-utility-message {
    font-weight: 500;
    color: #003366;
}
/* The message is now a link to delivery.cfm. Inherit the bar's colour rather
   than taking the site link blue, which reads badly on the yellow bar. */
.top-utility-message a,
.top-utility-message a:visited {
    color: #003366;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.top-utility-message a:hover,
.top-utility-message a:focus {
    color: #004990;
}

#header-actions {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}
.header-action-link,
.header-action-link:link,
.header-action-link:visited {
    color: #003366;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}
.header-action-link:hover,
.header-action-link:focus,
.header-action-link:active {
    color: #004990;
}
.header-action-link svg {
    width: 24px;
    height: 24px;
}
.basket-icon-btn {
    background: transparent;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    color: #003366;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* Punchy hover: invert to a navy pill with yellow content so it's
   obviously interactive against the yellow utility-bar background. */
.basket-icon-btn:hover,
.basket-icon-btn:focus {
    background: #003366;
    color: #FFCB05;
    outline: none;
}
.basket-icon-btn:hover .basket-icon-badge,
.basket-icon-btn:focus .basket-icon-badge {
    background: #FFCB05;
    color: #003366;
}
.basket-icon-svg {
    width: 24px;
    height: 24px;
}
.basket-icon-badge {
    background: #003366;
    color: #FFCB05;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 600px) {
    .top-utility-inner {
        padding: 6px 14px;
        gap: 8px;
    }
    .top-utility-message {
        font-size: 0.75rem;
    }
    #header-actions {
        gap: 12px;
    }
    .header-action-link span {
        display: none;
    }
}

/* ============================================
   SIGNED-IN PROFILE DROPDOWN (top utility bar)
   ============================================ */
.header-action-profile {
    position: relative;
}
.header-action-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1100;
}
.header-action-profile:hover .header-action-dropdown,
.header-action-profile:focus-within .header-action-dropdown,
.header-action-profile.show .header-action-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.header-action-dropdown a,
.header-action-dropdown a:link,
.header-action-dropdown a:visited {
    display: block;
    padding: 8px 16px;
    color: #003366;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    background: transparent;
}
.header-action-dropdown a:hover,
.header-action-dropdown a:focus {
    background: #f5f8fb;
    color: #004990;
}

/* ============================================
   AUTH PAGES (signin / register / forgot / reset)
   ============================================ */
.auth-page {
    margin: 32px auto 64px;
    max-width: 540px;
}
.auth-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    padding: 32px 36px;
}
.auth-card-wide {
    max-width: 600px;
    margin: 0 auto;
}
.auth-card h1 {
    margin: 0 0 16px;
    color: #003366;
}
.auth-intro {
    color: #555;
    margin: 0 0 20px;
}
.auth-submit {
    display: block;
    width: 100%;
    margin-top: 8px;
}
.auth-links {
    margin-top: 18px;
    text-align: center;
    font-size: 0.92rem;
    color: #555;
}
.auth-links a {
    color: #004990;
    text-decoration: none;
}
.auth-links a:hover { text-decoration: underline; }
.auth-links-sep { margin: 0 8px; color: #ccc; }

/* ============================================
   ACCOUNT PAGES (account, account.orders, account.order, account.details)
   ============================================ */
.account-page {
    margin: 24px 0 60px;
}
.account-page-head {
    margin-bottom: 24px;
}
.account-page-head h1 {
    margin: 0 0 4px;
    color: #003366;
}
.account-page-email {
    margin: 0;
    color: #777;
    font-size: 0.95rem;
}
.account-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 800px) {
    .account-page-grid { grid-template-columns: 1fr; }
}
.account-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    padding: 22px 24px 24px;
}
.account-card h2 {
    margin: 0 0 14px;
    color: #003366;
    font-size: 1.1rem;
    border-bottom: 1px solid #e6e8eb;
    padding-bottom: 10px;
    display: block;
}
.account-card h3 {
    margin: 16px 0 6px;
    color: #003366;
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 0;
    padding-bottom: 0;
    display: block;
}
.account-card-empty {
    color: #777;
    font-style: italic;
    margin-bottom: 16px;
}
.account-card-link {
    margin: 14px 0 0;
    text-align: right;
    font-size: 0.9rem;
}
.account-card-link a {
    color: #004990;
    text-decoration: none;
}
.account-card-link a:hover { text-decoration: underline; }

.account-details {
    margin: 0;
    padding: 0;
}
.account-details > div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.account-details > div:last-child { border-bottom: 0; }
.account-details dt {
    color: #777;
    font-size: 0.85rem;
    margin: 0;
}
.account-details dd {
    color: #003366;
    margin: 0;
    font-weight: 500;
    text-align: right;
}
.account-address {
    color: #333;
    line-height: 1.5;
    font-style: normal;
    margin: 0 0 8px;
}

.account-orders-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.account-orders-row {
    border-bottom: 1px solid #f0f0f0;
}
.account-orders-row:last-child { border-bottom: 0; }
.account-orders-link {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
    padding: 10px 0;
    align-items: center;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}
.account-orders-link:hover {
    background: #f5f8fb;
}
.account-orders-number { font-weight: 600; color: #003366; }
.account-orders-date   { color: #777; font-size: 0.9rem; }
.account-orders-total  { color: #003366; font-weight: 600; }

.account-orders-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #e7f4e1;
    color: #2f7a1e;
}
/* Order-detail headline status (account.order.cfm) — same colour vocabulary. */
.account-order-status-grey  { background: #eef0f3; color: #555; }
.account-order-status-blue  { background: #eaf1fb; color: #2a5599; }
.account-order-status-teal  { background: #e0f5f3; color: #0b6e63; }
.account-order-status-amber { background: #fff8e1; color: #8a6500; }
.account-order-status-green { background: #e7f4e1; color: #2f7a1e; }
.account-order-status-red   { background: #fdecea; color: #a33; }
.account-order-status-blurb { margin: 6px 0 0; color: #555; }
.account-order-payment      { margin: 4px 0 0; font-size: 0.85rem; color: #777; }

/* Status pills are coloured by the Colour column in dbo.Order_Status_Codes,
   so a status added to that table gets a look without a CSS change here.
   (The legacy status-name classes below are kept for any cached markup.) */
.account-orders-status-grey  { background: #eef0f3; color: #555; }
.account-orders-status-blue  { background: #eaf1fb; color: #2a5599; }
.account-orders-status-teal  { background: #e0f5f3; color: #0b6e63; }
.account-orders-status-amber { background: #fff8e1; color: #8a6500; }
.account-orders-status-green { background: #e7f4e1; color: #2f7a1e; }
.account-orders-status-red   { background: #fdecea; color: #a33; }

.account-orders-status-pending_payment {
    background: #fff8e1;
    color: #8a6500;
}
.account-orders-status-cancelled,
.account-orders-status-refunded {
    background: #fdecea;
    color: #a33;
}
.account-orders-status-requested {
    background: #eaf1fb;
    color: #2a5599;
}

.account-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}
.account-orders-table th,
.account-orders-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
}
.account-orders-table th {
    background: #f9fafb;
    color: #555;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.account-orders-total-col { text-align: right; }

.account-divider {
    border: 0;
    border-top: 1px solid #e6e8eb;
    margin: 32px 0;
}

.account-signout {
    margin-top: 32px;
    font-size: 0.9rem;
}
.account-signout a {
    color: #777;
    text-decoration: none;
}
.account-signout a:hover {
    color: #004990;
    text-decoration: underline;
}

.account-order-date {
    color: #777;
    font-size: 0.95rem;
    margin: -8px 0 16px;
}

.checkout-confirm-create-account {
    background: #f5f8fb;
    border-left: 3px solid #004990;
    border-radius: 0 6px 6px 0;
    padding: 18px 22px;
    margin-top: 32px;
}
.checkout-confirm-create-account h2 {
    margin: 0 0 8px;
    color: #003366;
}
.checkout-confirm-create-account p { margin: 0 0 12px; }
.checkout-confirm-create-account p:last-child { margin-bottom: 0; }

/* ============================================
   FULL BASKET PAGE (basket.cfm)
   ============================================ */
.basket-page {
    margin: 24px 0 60px;
}
.basket-page-loading {
    text-align: center;
    padding: 80px 0;
    color: #666;
    font-style: italic;
}
.basket-page-empty {
    text-align: center;
    padding: 80px 20px;
}
.basket-page-empty h1 {
    color: #003366;
    margin-bottom: 12px;
}
.basket-page-empty p {
    color: #666;
    margin-bottom: 28px;
}
.basket-page-cta-primary,
.basket-page-cta-primary:visited,
.basket-page-cta-primary:link {
    display: inline-block;
    background: #004990;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
}
.basket-page-cta-primary:hover,
.basket-page-cta-primary:focus,
.basket-page-cta-primary:active {
    background: #003366;
    color: #fff;
}

.basket-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}
.basket-page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}
.basket-page-head h1 {
    color: #003366;
    margin: 0;
}
.basket-page-count {
    color: #666;
    font-size: 0.95rem;
}

.basket-page-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}
.basket-page-line {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto auto;
    column-gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #FFCB05;
    align-items: start;
}
.basket-page-line:last-child {
    border-bottom: 0;
}
.basket-page-line-thumb {
    width: 120px;
    height: 120px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.basket-page-line-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.basket-page-line-main { min-width: 0; }
.basket-page-line-title {
    margin: 0 0 4px;
    color: #003366;
    font-size: 1.1rem;
    line-height: 1.3;
}
.basket-page-line-sku {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.basket-page-line-fits {
    background: #f5f8fb;
    border-left: 3px solid #004990;
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
    font-size: 0.9rem;
    color: #333;
    margin-top: 6px;
    display: inline-block;
}
.basket-page-line-fits-label {
    font-weight: 600;
    color: #004990;
    margin-right: 4px;
}

.basket-page-line-qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}
.basket-page-line-qty-label {
    font-size: 0.75rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.basket-page-line-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 4px;
    min-width: 130px;
}
.basket-page-line-unit {
    color: #666;
    font-size: 0.85rem;
}
.basket-page-line-unit span { color: #999; }
.basket-page-line-total {
    color: #003366;
    font-weight: 700;
    font-size: 1.2rem;
}
.basket-page-line-remove {
    background: transparent;
    border: 0;
    color: #a33;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 4px;
}
.basket-page-line-remove:hover { text-decoration: underline; }

.basket-page-continue {
    margin-top: 20px;
}
.basket-page-continue a {
    color: #004990;
    text-decoration: none;
    font-weight: 500;
}
.basket-page-continue a:hover { text-decoration: underline; }

.basket-page-summary {
    background: #f9fafb;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    padding: 24px;
    position: sticky;
    top: 90px;
}
.basket-page-summary h3 {
    color: #003366;
    margin: 0 0 16px;
    font-size: 1.15rem;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e8eb;
}
.basket-page-summary-list {
    margin: 0 0 20px;
    padding: 0;
}
.basket-page-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: #444;
}
.basket-page-summary-row dt,
.basket-page-summary-row dd {
    margin: 0;
    border: 0;
    padding-bottom: 0;
}
.basket-page-summary-row dd { font-weight: 500; }
.basket-page-summary-row-total {
    border-top: 1px solid #FFCB05;
    margin-top: 8px;
    padding-top: 14px;
    font-size: 1.1rem;
    color: #003366;
}
.basket-page-summary-row-total dt,
.basket-page-summary-row-total dd { font-weight: 700; }

.basket-page-summary .basket-page-cta-primary {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 8px;
}
.basket-page-summary-note {
    font-size: 0.8rem;
    color: #888;
    margin: 12px 0 0;
    line-height: 1.5;
}

/* Free-delivery "spend £X more" nudge + free-delivery value (basket + checkout summary) */
.basket-page-free-delivery-nudge {
    background: #eef7e9;
    border-left: 4px solid #2e7d32;
    color: #2e6b2a;
    padding: 8px 10px;
    margin: 10px 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}
.basket-page-delivery-free { color: #2e7d32; font-weight: 700; }
.basket-page-delivery-pending { color: #b26a00; font-style: italic; font-weight: 400; }
.basket-page-delivery-pending a { color: inherit; text-decoration: underline; cursor: pointer; }
.basket-page-delivery-pending a:hover { text-decoration: none; }

/* --- discount code: entry + applied state (basket + checkout summary) --- */
.basket-page-summary-row-discount { color: #2e7d32; }
.basket-page-summary-row-discount dd { font-weight: 600; }
/* "of which VAT" is informational (contained in the total), not a summing line */
.basket-page-summary-row-vat dt,
.basket-page-summary-row-vat dd { color: #777; font-size: 0.85rem; font-weight: 400; }
.basket-page-summary-row-note { display: block; }
.basket-page-summary-row-note dd { font-size: 0.8rem; color: #777; font-weight: 400; line-height: 1.35; margin: 2px 0 0; }
.basket-discount-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #e6f4ea;
    color: #2e7d32;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
}
.basket-discount-box { margin: 0 0 16px; }
.basket-discount-form { display: flex; gap: 8px; }
.basket-discount-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95rem;
}
.basket-discount-input:focus { outline: none; border-color: #003366; }
.basket-discount-apply {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 0;
    border-radius: 4px;
    background: #003366;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.basket-discount-apply:disabled { opacity: .5; cursor: default; }
.basket-discount-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #cde9d5;
    background: #f1f9f3;
    border-radius: 4px;
}
.basket-discount-applied-text { font-size: 0.88rem; color: #2e7d32; }
.basket-discount-remove {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: #888;
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}
.basket-discount-remove:hover { color: #c0392b; }
.basket-discount-error { color: #c0392b; font-size: 0.82rem; margin: 8px 0 0; }
.basket-drawer-discount span,
.basket-drawer-discount strong { color: #2e7d32; }

@media (max-width: 900px) {
    .basket-page-grid {
        grid-template-columns: 1fr;
    }
    .basket-page-summary {
        position: static;
    }
}
@media (max-width: 600px) {
    .basket-page-line {
        grid-template-columns: 90px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 14px;
        column-gap: 14px;
    }
    .basket-page-line-thumb {
        width: 90px;
        height: 90px;
    }
    .basket-page-line-qty,
    .basket-page-line-prices {
        grid-column: 1 / 3;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

/* ============================================
   CHECKOUT PAGE (checkout.cfm)
   ============================================ */
.checkout-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
    margin: 24px 0 60px;
}
.checkout-page-form-col h1 {
    color: #003366;
    margin-bottom: 24px;
}
.checkout-fieldset {
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    padding: 20px 24px 24px;
    margin-bottom: 20px;
    background: #fff;
    display: block;
}
/* Defensive: forms.min.css (when loaded by includeForms=1) sets legend
   width:95% which combined with the legend's special positioning makes
   the next input wrap up alongside it. We force block + auto width
   here so the layout survives even if a future change re-enables
   forms.css on this page. */
.checkout-fieldset legend {
    color: #003366;
    font-weight: 600;
    padding: 0 10px;
    font-size: 1.05rem;
    display: block;
    width: auto;
    float: none;
}
.checkout-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.checkout-field {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
}
.checkout-field label {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    font-size: 0.92rem;
}
.checkout-field .req { color: #a33; }
.checkout-field input,
.checkout-field select,
.checkout-field textarea {
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: #222;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus {
    outline: none;
    border-color: #004990;
    box-shadow: 0 0 0 3px rgba(0, 73, 144, 0.12);
}
.checkout-field small {
    color: #777;
    font-size: 0.78rem;
    margin-top: 4px;
}
.checkout-field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.checkout-field-checkbox input { width: 18px; height: 18px; }

.checkout-payment-placeholder {
    background: #f5f8fb;
    border-left: 3px solid #004990;
    padding: 14px 18px;
    border-radius: 0 6px 6px 0;
    color: #333;
}
.checkout-payment-placeholder p { margin: 0 0 6px; }
.checkout-payment-placeholder p:last-child { margin-bottom: 0; }

.checkout-payment-intro {
    margin: 0 0 12px;
    color: #333;
}
.paypal-button-container {
    margin: 16px 0;
    min-height: 48px;
}

/* Card payment (Stripe) — the second payment road, sitting under the PayPal
   buttons. The "or" divider matters: without it the two options read as a
   sequence of steps rather than a choice. */
.checkout-pay-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: #767676;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.checkout-pay-divider::before,
.checkout-pay-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #dcdcdc;
}
.stripe-card-container {
    margin: 0 0 8px;
}
/* Styled as a PRIMARY action, not an afterthought. When PayPal is degraded
   this is the only way a buyer can pay, and a default-styled button sitting
   under a gold PayPal one is genuinely easy to miss (Octane, 06 Aug 2026).
   Dark solid reads as primary next to PayPal's gold without clashing. */
.stripe-card-button {
    width: 100%;
    min-height: 52px;          /* >= the PayPal button's tap target */
    font-size: 17px;
    font-weight: 600;
    background: #222;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.stripe-card-button:hover,
.stripe-card-button:focus {
    background: #000;
    color: #fff;
}
.stripe-card-button svg {
    flex: 0 0 auto;
}
.stripe-card-button[disabled] {
    opacity: 0.65;
    cursor: progress;
}
.stripe-card-note {
    margin-top: 10px;
}
.checkout-payment-note {
    margin: 12px 0 0;
    color: #777;
    font-size: 0.85rem;
    line-height: 1.5;
}

.checkout-error {
    background: #fde8e8;
    border: 1px solid #f5b7b7;
    color: #8a1f1f;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.checkout-submit {
    width: 100%;
    text-align: center;
    padding: 14px 24px;
    font-size: 1.05rem;
}
.checkout-submit:disabled {
    background: #6b7e95;
    cursor: not-allowed;
}

/* When the basket-page-mount appears in the checkout sidebar we strip
   the items list and just show the summary. Vue 2 replaces the mount
   element with the rendered template root, so any class set on the
   mount placeholder is lost — we anchor instead on the parent aside
   (.checkout-page-summary-col) which is part of the surrounding CFML
   and isn't touched by Vue. */
.checkout-page-summary-col .basket-page-items { display: none; }
.checkout-page-summary-col .basket-page-grid {
    display: block;
    grid-template-columns: none;
}
.checkout-page-summary-col .basket-page-summary {
    position: sticky;
    top: 90px;
    margin: 0;
}
/* The "Proceed to checkout" CTA inside the sidebar summary is redundant
   on the checkout page itself — the form has its own submit button. */
.checkout-page-summary-col .basket-page-summary .basket-page-cta-primary,
.checkout-page-summary-col .basket-page-summary-note { display: none; }
/* Drop the page-level top margin/padding since the summary panel here
   is sized by its sidebar column, not the full basket grid. */
.checkout-page-summary-col .basket-page { margin: 0; }

@media (max-width: 900px) {
    .checkout-page { grid-template-columns: 1fr; }
    .checkout-page-summary-col .basket-page-summary { position: static; }
}
@media (max-width: 600px) {
    .checkout-row { grid-template-columns: 1fr; }
    .checkout-fieldset { padding: 16px; }
}

/* ============================================
   CHECKOUT CONFIRMATION (checkout.confirm.cfm)
   ============================================ */
.checkout-confirm {
    max-width: 720px;
    margin: 32px auto 64px;
    text-align: center;
}
.checkout-confirm-tick {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: #e7f4e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout-confirm h1 {
    color: #003366;
    margin: 0 0 8px;
}
.checkout-confirm-lead {
    font-size: 1.1rem;
    color: #333;
    margin: 0 0 4px;
}
.checkout-confirm-email {
    color: #666;
    margin: 0 0 24px;
}
.checkout-confirm-status {
    background: #fff8e1;       /* default: pending payment (amber) */
    border: 1px solid #f0d56a;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 24px 0;
    text-align: left;
}
.checkout-confirm-status p {
    margin: 6px 0 0;
    color: #555;
    font-size: 0.92rem;
}
.checkout-confirm-status-paid {
    background: #e7f4e1;
    border-color: #c6e4b8;
}
.checkout-confirm-status-paid strong {
    color: #2f7a1e;
}
.checkout-confirm-status-cancelled,
.checkout-confirm-status-refunded {
    background: #fdecea;
    border-color: #f5c2bd;
}
.checkout-confirm-status-cancelled strong,
.checkout-confirm-status-refunded strong {
    color: #a33;
}
.checkout-confirm-status-requested {
    background: #eaf1fb;
    border-color: #c4d6f0;
}
.checkout-confirm-status-requested strong {
    color: #2a5599;
}

/* Customer "request cancellation" control on the order detail page */
.account-cancel-section .account-cancel-reason {
    width: 100%;
    max-width: 480px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
}
.account-cancel-msg {
    margin: 10px 0 0;
    font-size: 0.92rem;
    color: #555;
}
.account-cancel-msg-ok    { color: #2f7a1e; font-weight: 600; }
.account-cancel-msg-error { color: #a33;    font-weight: 600; }

/* Overseas quote → order page (quote.order.cfm) */
.quote-order-locked-note { font-size: 0.85rem; color: #777; margin: 10px 0 0; }
.quote-order-options     { display: flex; flex-direction: column; gap: 10px; }
.quote-order-option      { display: flex; align-items: center; gap: 12px; border: 1px solid #ddd; border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.quote-order-option:hover { border-color: #aac; }
.quote-order-option:has(input:checked) { border-color: #003366; box-shadow: 0 0 0 1px #003366 inset; background: #f7f9fc; }
.quote-order-option input { margin: 0; flex: 0 0 auto; }
.quote-order-option-main  { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.quote-order-option-carrier { font-weight: 600; color: #003366; }
.quote-order-option-est   { font-size: 0.9rem; color: #555; }
.quote-order-option-note  { font-size: 0.82rem; color: #888; }
.quote-order-option-cost  { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-order-novat        { font-size: 0.85rem; color: #2f7a1e; margin: 8px 0 0; }
.quote-order-disclaimer   { background: #fff8e1; border: 1px solid #f0d878; border-left: 4px solid #e0a800; border-radius: 6px; padding: 16px 18px; margin: 18px 0; font-size: 0.9rem; line-height: 1.55; color: #5a4a00; }

.checkout-confirm-section {
    text-align: left;
    margin: 32px 0;
    padding: 20px 24px;
    background: #f9fafb;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
}
.checkout-confirm-section h2 {
    color: #003366;
    font-size: 1.1rem;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e8eb;
}
.checkout-confirm-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}
.checkout-confirm-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #FFCB05;
    align-items: center;
}
.checkout-confirm-line:last-child { border-bottom: 0; }
.checkout-confirm-line-title {
    color: #003366;
    font-weight: 600;
}
.checkout-confirm-line-sku {
    color: #777;
    font-size: 0.85rem;
}
.checkout-confirm-line-fits {
    background: #f5f8fb;
    border-left: 3px solid #004990;
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    color: #333;
    margin-top: 6px;
    display: inline-block;
}
.checkout-confirm-line-fits span { font-weight: 600; color: #004990; }
.checkout-confirm-line-qty { color: #555; }
.checkout-confirm-line-total {
    font-weight: 700;
    color: #003366;
    text-align: right;
    min-width: 80px;
}
.checkout-confirm-totals {
    margin: 16px 0 0;
    padding: 0;
}
.checkout-confirm-totals > div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
}
.checkout-confirm-totals dt,
.checkout-confirm-totals dd { margin: 0; border: 0; }
.checkout-confirm-total {
    border-top: 1px solid #FFCB05;
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    color: #003366;
    font-size: 1.1rem;
}
.checkout-confirm-address {
    font-style: normal;
    line-height: 1.55;
    color: #333;
}
/* Despatch-estimate callout — shared by checkout.confirm.cfm and account.order.cfm
   so the order despatch promise renders identically across both. */
.checkout-confirm-despatch {
    background: #f3f7fc;
    border-left: 4px solid #003366;
    padding: 10px 12px;
    margin: 12px 0 0;
    line-height: 1.5;
}
.checkout-confirm-despatch-note {
    color: #777;
    font-size: 0.9em;
}
.checkout-confirm-notfound {
    max-width: 540px;
    margin: 60px auto;
    text-align: center;
}
.checkout-confirm-notfound h1 { color: #003366; }

/* ============================================
   MOBILE HEADER ACTIONS (sign-in + basket)
   Desktop keeps the yellow utility bar with the
   sign-in/profile + basket. On mobile/tablet the
   bar drops its icons (keeps just the delivery
   message) and these controls move up beside the
   search + menu icons, sized to match the search
   icon. Markup: #mobile-header-actions in
   includes/header.cfm, inside <nav id="mainNav">.
   ============================================ */

/* Hidden on desktop — the utility bar (#header-actions) handles it there. */
#mobile-header-actions { display: none; }

@media only screen and (max-width: 1089px) {
    /* Drop the icons from the yellow bar and centre the delivery message. */
    #top-utility-bar #header-actions { display: none; }
    .top-utility-inner { justify-content: center; }

    /* Icon cluster sits to the LEFT of the search toggle (right:calc(5%+60px))
       and the menu button (right:5%), giving the order: account · basket ·
       search · menu. top:14px lines the cluster up with the 46px menu button. */
    #mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        position: absolute;
        top: 14px;
        right: calc(5% + 104px);
        z-index: 9998;
    }
    /* Hide the cluster while the hamburger menu or the search bar is open so it
       doesn't float over the full-screen menu / search overlay. */
    #mainNav.open #mobile-header-actions { display: none; }
    #header-search.search-open ~ #mobile-header-actions { display: none; }

    /* All three small icons (account, basket, search toggle) share a 46px-tall
       flex-centred box matching the menu button, so their centres line up on
       the same horizontal line rather than the search icon sitting low and the
       account/basket riding high. */
    .mobile-header-action,
    #mobile-header-actions .basket-icon-btn,
    #header-search-toggle {
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    /* Pull the search toggle up to the same top line as the cluster + menu. */
    #header-search { top: 14px; }

    /* Account / sign-in icon — flat, 30px, to match the search toggle. */
    .mobile-header-action {
        color: #004990;
    }
    .mobile-header-action svg { width: 30px; height: 30px; }

    /* Basket icon (Vue <basket-icon>) — strip the navy-pill styling it uses in
       the utility bar and render it flat like the other header icons. */
    #mobile-header-actions .basket-icon-btn {
        position: relative;
        background: transparent;
        color: #004990;
    }
    #mobile-header-actions .basket-icon-btn:hover,
    #mobile-header-actions .basket-icon-btn:focus {
        background: transparent;
        color: #003366;
        outline: none;
    }
    #mobile-header-actions .basket-icon-svg { width: 30px; height: 30px; }
    /* Count badge as a small bubble on the top-right corner of the 30px icon
       (which is vertically centred in the 46px box, so it starts ~8px down). */
    #mobile-header-actions .basket-icon-badge {
        position: absolute;
        top: 4px;
        right: -8px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 0.65rem;
    }

    /* Light nav variant (dark header / banner pages): white icons, like the
       search toggle, and a yellow badge so the count stays legible. */
    #mainNav.light #mobile-header-actions .mobile-header-action,
    #mainNav.light #mobile-header-actions .basket-icon-btn { color: #fff; }
    #mainNav.light #mobile-header-actions .basket-icon-badge {
        background: #FFCB05;
        color: #003366;
    }
}

@media only screen and (max-width: 600px) {
    /* Make room on narrow phones now there are four icons in the top row. */
    #logo { width: 38%; }
    #mobile-header-actions { right: calc(5% + 100px); }
}

/* ============================================
   LAST-VEHICLE CTA — placement per breakpoint
   Desktop: shown in the products mega-menu
   (.last-vehicle-cta--megamenu). Mobile: shown
   at the top of the hamburger menu instead
   (.last-vehicle-cta--mobilemenu, an <li> in
   #menuList). Both render the same markup built
   once in includes/header.cfm.
   ============================================ */

/* Mobile-menu copy is hidden by default (on desktop #menuList is the inline
   nav bar, where this CTA must not appear). Scoped to "#mainNav ul li" so it
   outranks the generic desktop rule "#mainNav ul li { display: inline-block }"
   (fluid.css), which would otherwise force this <li> visible on large screens. */
#mainNav ul li.last-vehicle-cta--mobilemenu { display: none; }

@media only screen and (max-width: 1089px) {
    .last-vehicle-cta--megamenu { display: none; }

    /* The CTA is an <li> in #menuList, so the menu's generic link styling
       (#mainNav ul li a — high specificity) would otherwise flatten the CTA's
       own anchors. Re-assert the CTA link styling at higher specificity. */
    #mainNav ul li.last-vehicle-cta--mobilemenu {
        /* Re-assert visibility at this specificity to override the desktop
           hide rule above (#mainNav ul li.last-vehicle-cta--mobilemenu). */
        display: block;
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        /* Push clear of the X (menu) button floating at top:14px right:5%. */
        margin-top: 24px;
    }
    #mainNav ul li.last-vehicle-cta--mobilemenu a.last-vehicle-cta-link,
    #mainNav ul li.last-vehicle-cta--mobilemenu a.last-vehicle-cta-link:visited {
        display: inline-flex;
        align-items: baseline;
        gap: 12px;
        padding: 0;
        background: none;
        color: #fff;
        font-size: 1.1rem;
    }
    #mainNav ul li.last-vehicle-cta--mobilemenu a.last-vehicle-cta-link:hover {
        background: none;
        color: #FFCB05;
    }
    #mainNav ul li.last-vehicle-cta--mobilemenu a.last-vehicle-cta-clear,
    #mainNav ul li.last-vehicle-cta--mobilemenu a.last-vehicle-cta-clear:visited {
        display: inline;
        padding: 0;
        background: none;
        color: #b3c2d6;
        font-size: 0.78rem;
    }
    #mainNav ul li.last-vehicle-cta--mobilemenu a.last-vehicle-cta-clear:hover {
        background: none;
        color: #fff;
    }
}

/* ============================================
   PRODUCT INFORMATION + ATTRIBUTES — read more
   On products.cfm each product has ONE toggle.

   Desktop (>=1090): the description collapses to
   2 lines with a "Read more" toggle; every
   attribute (specs + buy box) stays visible.

   Mobile (<=1089): the spec details (.pa-detail:
   OEM, kit includes, fitment difficulty, fitting
   time) collapse together with the description
   behind that one toggle, while the buy box
   (.pa-buy: quantity, price, stock, add-to-basket)
   stays pinned and visible at the bottom.

   The toggle flips .is-expanded on .productcontainer.
   The inline script adds .has-overflow (description
   > 2 lines) and .has-details (specs present).
   ============================================ */

/* Clamp the description to 2 lines while collapsed AND overflowing. */
.productcontainer.has-overflow:not(.is-expanded) .productdescription-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.productdescription-toggle {
    display: none; /* shown by the breakpoint rules below only when needed */
    background: none;
    border: 0;
    padding: 0;
    margin-top: 6px;
    font: inherit;
    font-weight: 600;
    color: #004990;
    cursor: pointer;
    text-decoration: underline;
}
.productdescription-toggle:hover { color: #003366; }

/* DESKTOP (>=1090): only the description expands, so the toggle sits under the
   description (.pd-toggle-desc). The attributes-block toggle is never used. */
@media only screen and (min-width: 1090px) {
    .productcontainer.has-overflow .pd-toggle-desc { display: inline-block; }
    .pd-toggle-attr { display: none !important; }
}

/* MOBILE/TABLET (<=1089): the spec details collapse with the description, so the
   toggle belongs at the END of the expanding content — after the details and
   before the buy box. That's the .pd-toggle-attr copy, ordered between them. */
@media only screen and (max-width: 1089px) {
    /* Split the attributes into spec details (top) and the always-visible buy
       box (bottom). Flex order regroups them without changing desktop markup. */
    .productattributes {
        display: flex;
        flex-direction: column;
    }
    .pa-detail       { order: 1; }
    .pd-toggle-attr  { order: 2; align-self: flex-start; }
    .pa-buy          { order: 3; }
    .productattributes .clr { order: 4; }

    /* Spec details collapse with the description until the product is expanded. */
    .productcontainer:not(.is-expanded) .pa-detail { display: none; }

    /* The description-block toggle is unused on mobile; show the attributes one
       whenever there's anything to reveal (long description OR spec details). */
    .pd-toggle-desc { display: none !important; }
    .productcontainer.has-overflow .pd-toggle-attr,
    .productcontainer.has-details  .pd-toggle-attr { display: inline-block; }

    /* Breathing room below the buy box so the add-to-basket section isn't
       crammed against the next product. */
    .productattributes { margin-bottom: 28px; }

    /* Extra separation above each fitment-location heading EXCEPT the first.
       The "~" sibling combinator only matches a .fitment-location that follows
       an earlier one, so the first heading is left untouched. */
    .fitment-location ~ .fitment-location { margin-top: 40px; }

    /* NOTE: the .fitment-location h2 styling is NOT here - it lives at the top
       level further down this file. It was originally written at this spot,
       which is inside @media (max-width:1089px), so it never applied on
       desktop, and the min-width media queries nested inside it were invalid
       CSS and did nothing at all. */

}


/* ============================================
   SITEWIDE PROMO (July 2026 sale, code SP20)
   Ribbon rendered by includes/header.cfm and the
   was/now price display on the product pages,
   both only while the promo is active
   (application.cfc, sitewidePromo).
   ============================================ */

/* --- Announcement ribbon --- */

#promo-ribbon {
    display: block;
    background: #003366;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 9px 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    /* Same stacking treatment as #top-utility-bar: keep it above the
       absolutely-positioned #header that overlaps following content. */
    position: relative;
    z-index: 1001;
    transition: background 0.2s ease;
}
#promo-ribbon:hover,
#promo-ribbon:focus {
    background: #004990;
    color: #fff;
}
.promo-ribbon-main {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #FFCB05;
}
.promo-ribbon-code {
    background: #FFCB05;
    color: #003366;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 0 8px;
    border-radius: 3px;
    white-space: nowrap;
}
.promo-ribbon-ends {
    display: inline-block;
    margin-left: 10px;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
}
@media only screen and (max-width: 600px) {
    #promo-ribbon {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
    /* Two tidy lines on small phones: headline, then the code
       instruction below it. The separator and end date go. */
    .promo-ribbon-sep  { display: none; }
    .promo-ribbon-detail { display: block; }
    .promo-ribbon-ends { display: none; }
}

/* While the products mega-menu is open the utility bar normally hides
   (body.products-menu-open rule above) so it can't cover the menu's X.
   With the promo ribbon present, openNav (footer.cfm) starts the menu
   below the ribbon instead - keep the bar visible so the strip above
   the menu stays stable rather than jumping up by the bar's height. */
body.products-menu-open.has-promo-ribbon #top-utility-bar {
    display: block;
}

/* --- Was/now product pricing --- */

.product-price-was {
    color: #767676;
    font-weight: 500;
    font-size: 1.1rem;
    text-decoration: line-through;
    margin-right: 8px;
}
.product-price-promo-note {
    color: #003366;
    font-size: 0.9rem;
    margin: 0 0 10px;
}
.product-price-promo-note .promo-ribbon-code {
    font-size: 0.85rem;
}

/* ============================================================
   FONT AWESOME 5/6 CLASS ALIASES

   We self-host Font Awesome 4.6.2, which only styles ".fa". The
   hosted FA kit used to supply the newer family classes, but it
   started 403ing when the account passed its free allowance, so
   it has been removed from header.cfm.

   4.6.2 ships a single weight, so every newer family name simply
   maps onto the same font. The glyph classes (.fa-check,
   .fa-times, .fa-angle-left, ...) are already defined by
   font-awesome.css and are unchanged by this.

   In use today: "fa-solid fa-check" on the front control arm kit
   pages, and "far fa-angle-left / fa-angle-right / fa-times"
   inside js/vue/lightbox.min.js - which is minified vendor code
   we should not be hand-editing, and the main reason this is a
   CSS alias rather than a find-and-replace.
   ============================================================ */
.fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-duotone {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   IMAGE ASPECT RATIO GUARD

   products.cfm now sets width/height ATTRIBUTES on the product
   thumbnails so the browser can reserve the right box and stop
   the layout shifting as they lazy-load (the desktop CLS issue
   Search Console was reporting).

   Those attributes also set a SPECIFIED height though, and the
   only global rule on images is "max-width:100%" - there is no
   "height:auto" anywhere. So once the 400px-wide thumbnail is
   narrowed to the ~296px column, the height stayed pinned at
   its full 286px and the image stretched vertically.

   height:auto restores the ratio while keeping the reserved
   box, which is the whole point of the attributes.

   Scoped to .productphotocrop deliberately: a blanket
   img[width][height] rule would out-specify the object-fit
   crops in .news-card__image / .related-part-card__image and
   break those instead.
   ============================================================ */
.productphotocrop img {
    height: auto;
}

/* --- Fitment section headings (products.cfm?vehicleid=) ----------------
   "Front", "Rear", "Front and Rear", "Other". These were <h1> until
   2026-08-09 - four per page, none of them naming the vehicle. They are
   <h2> now, which is what they always were semantically.

   Re-creates the old h1 presentation so the page looks unchanged: the
   yellow underline, uppercase and inline-block all come from the h1 rules
   in fluid.css, which an h2 does not inherit.

   TOP LEVEL, deliberately. These first went in next to the
   .fitment-location ~ .fitment-location rule, which sits inside
   @media (max-width:1089px) - so they applied only on mobile, and the
   min-width queries nested inside that block were invalid CSS and were
   dropped entirely. The headings rendered as plain black text on desktop. */
.fitment-location h2 {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 3px solid #FFCB05;
    text-transform: uppercase;
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
    font-size: 160%;
}
/* h1 in fluid.css steps 160% -> 260% -> 300% across these two breakpoints;
   mirrored here so the change of tag is not also a change of size. */
@media only screen and (min-width: 481px) {
    .fitment-location h2 { font-size: 260%; }
}
@media only screen and (min-width: 1090px) {
    .fitment-location h2 { font-size: 300%; }
}

/* --- Vehicle page heading (products.cfm?vehicleid=) --------------------
   The real h1 that replaced the four fitment h1s.                        */
.vehicle-page-heading {
    text-align: center;
    margin: 0 0 30px;
}
.vehicle-page-years {
    margin-top: 8px;
    color: #555;
    font-weight: 500;
}