/* ==========================================================================
   Modern polish.

   Layout, spacing, fonts and the yellow/green/black palette are untouched.
   What changes is surface treatment: rounded corners, real depth, a sticky
   header, and interaction feedback.

   Everything lives in this one file. Remove the <link> in includes/header.php
   and the site returns to exactly how it looked before.
   ========================================================================== */

:root {
    --ease:   cubic-bezier(0.2, 0, 0.2, 1);
    --speed:  0.22s;
    --lift:   -6px;

    /* corner scale */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-pill: 999px;

    /* layered shadows read softer than one hard drop */
    --shadow-0: 0 1px 2px rgba(7, 35, 26, 0.05);
    --shadow-1: 0 1px 2px rgba(7, 35, 26, 0.06),
                0 3px 8px rgba(7, 35, 26, 0.07);
    --shadow-2: 0 2px 4px rgba(7, 35, 26, 0.08),
                0 12px 28px rgba(7, 35, 26, 0.14);
    --shadow-3: 0 4px 8px rgba(7, 35, 26, 0.10),
                0 20px 48px rgba(7, 35, 26, 0.18);
    --shadow-cta: 0 3px 8px rgba(31, 138, 76, 0.28),
                  0 14px 32px rgba(31, 138, 76, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    :root { --speed: 0.01s; --lift: 0px; }
    html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }
::selection { background: var(--yellow); color: var(--ink); }
:root { accent-color: var(--green); }


/* --------------------------------------------------------------------------
   Sticky header - the nav follows you down the page
   -------------------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 120;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06),
                0 6px 20px rgba(7, 35, 26, 0.28);
}

/* the breadcrumb bar tucks right under it */
.breadcrumbs-row { position: relative; z-index: 1; }


/* --------------------------------------------------------------------------
   Keyboard focus
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
.header :is(a, button, input):focus-visible,
#htop :is(a, button, span):focus-visible,
footer :is(a, button, input):focus-visible { outline-color: #fff; }


/* --------------------------------------------------------------------------
   Homepage tiles - rounded, raised, with a gradient face
   -------------------------------------------------------------------------- */

.brand-hero-card {
    border-radius: var(--r-md);
    border-bottom-width: 4px;
    background-image: linear-gradient(160deg,
        rgba(255, 255, 255, 0.07),
        rgba(255, 255, 255, 0) 55%);
    box-shadow: var(--shadow-1);
    transition: translate var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                background-color var(--speed) var(--ease),
                border-bottom-color var(--speed) var(--ease);
}
.brand-hero-card:hover {
    translate: 0 var(--lift);
    box-shadow: var(--shadow-3);
    border-bottom-color: #fff;
}
.brand-hero-card:active { translate: 0 -1px; box-shadow: var(--shadow-1); }

#hp-top-brands .brand-hero-name { max-width: 100%; white-space: normal; text-overflow: clip; }


/* --------------------------------------------------------------------------
   Category tiles - white cards that sit above the page
   -------------------------------------------------------------------------- */

.subcat .navList-action {
    display: block;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-1);
    border-color: transparent;
    transition: translate var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
}
.subcat .navList-action:hover {
    translate: 0 var(--lift);
    box-shadow: var(--shadow-3);
}
.subcat .navList-action:active { translate: 0 -1px; box-shadow: var(--shadow-1); }

.subimgwrap {
    overflow: hidden;
    background: linear-gradient(180deg, #fff, #f3f6f3);
    border-bottom: 1px solid rgba(7, 35, 26, 0.07);
}
.subimgwrap img { transition: scale 0.45s var(--ease); }
.subcat .navList-action:hover .subimgwrap img { scale: 1.08; }
@media (prefers-reduced-motion: reduce) {
    .subcat .navList-action:hover .subimgwrap img { scale: 1; }
}

.subcat__foot { transition: background var(--speed) var(--ease); }
.subcat .navList-action:hover .subcat__foot {
    background: color-mix(in oklab, var(--yellow) 12%, #fff);
}
.subcat__count {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--green) 12%, #fff);
    color: var(--green-dark);
    font-weight: 700;
    font-size: 12px;
}
.subcat__chevron { transition: translate var(--speed) var(--ease); }
.subcat .navList-action:hover .subcat__chevron { translate: 5px 0; }


/* --------------------------------------------------------------------------
   Section headings get a short accent rule
   -------------------------------------------------------------------------- */

.bt-section-head h2 { position: relative; padding-bottom: 8px; }
.bt-section-head h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 46px; height: 4px;
    border-radius: var(--r-pill);
    background: var(--yellow);
}


/* --------------------------------------------------------------------------
   Banded headers and panels - soften the hard rectangles
   -------------------------------------------------------------------------- */

.category-header,
.product-header,
.land-hero,
#parts-finder,
#pv-topbox,
.pv-btmbox,
#ymalwrap1,
#refImg,
.ref-info,
.toolbar,
#categoryDescription {
    border-radius: var(--r-lg);
    overflow: hidden;
}

#pv-topbox, .pv-btmbox, #ymalwrap1 { box-shadow: var(--shadow-1); }

.ref-info { box-shadow: var(--shadow-0); }


/* --------------------------------------------------------------------------
   Parts table - rounded shell, roomier rows, soft separators
   -------------------------------------------------------------------------- */

#slidetableouter {
    border-radius: var(--r-lg);
    overflow: auto;
    box-shadow: var(--shadow-1);
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: var(--green) color-mix(in oklab, var(--green) 12%, #fff);
    overscroll-behavior-x: contain;
}

#slidetable td { padding-top: 18px; padding-bottom: 18px; }
#slidetable tbody tr.productrow {
    height: auto;
    border-bottom: 1px solid rgba(7, 35, 26, 0.08);
    transition: background var(--speed) var(--ease);
}
#slidetable tbody tr.productrow:nth-child(even) { background: transparent; }
#slidetable tbody tr.productrow:last-child { border-bottom: 0; }
#slidetable tbody tr.productrow:hover {
    background: color-mix(in oklab, var(--yellow) 16%, #fff);
}

.cell-fits { width: 360px; }
.cell-desc { width: 470px; }
.cell-part { width: 110px; }

.cell-img img {
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--r-sm);
    background: #fff;
    padding: 4px;
    box-shadow: var(--shadow-0);
    transition: scale var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
}
.cell-img a:hover img { scale: 1.1; box-shadow: var(--shadow-1); }

#slidetable .cell-desc a { color: var(--ink); font-weight: 600; }
#slidetable .cell-desc a:hover { border-bottom: 2px solid var(--yellow); }


/* --------------------------------------------------------------------------
   Buttons - rounded, gradient face, real press feedback
   -------------------------------------------------------------------------- */

.viewinfo,
.rv-write,
#mm-nav-btn,
.pv-help__btns a {
    border-radius: var(--r-sm);
    transition: translate var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                filter var(--speed) var(--ease);
}

.viewinfo {
    background-image: linear-gradient(180deg,
        color-mix(in oklab, var(--green) 86%, #fff),
        var(--green));
    color: #fff;
    box-shadow: var(--shadow-0);
}
.viewinfo:hover { translate: 0 -2px; box-shadow: var(--shadow-1); filter: brightness(1.04); }
.viewinfo:active { translate: 0 0; box-shadow: none; }

.pv-help__btns a { box-shadow: var(--shadow-0); }
.pv-help__btns a:hover { translate: 0 -2px; box-shadow: var(--shadow-1); }


/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */

.productView-image img {
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--r-md);
}
.productView-thumbnail {
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: translate var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}
.productView-thumbnail img { aspect-ratio: 1; object-fit: contain; }
.productView-thumbnail:hover { translate: 0 -3px; box-shadow: var(--shadow-1); }
.productView-thumbnail.is-active { box-shadow: 0 0 0 2px var(--yellow); }

/* stock pill */
.pv-stock {
    border-radius: var(--r-pill);
    padding-inline: 12px;
}

/* OEM numbers as pills */
.pv-oem li {
    border-radius: var(--r-pill);
    padding: 5px 12px;
    box-shadow: var(--shadow-0);
    transition: background var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                translate var(--speed) var(--ease);
}
.pv-oem li:hover {
    background: color-mix(in oklab, var(--yellow) 24%, #fff);
    border-color: var(--yellow);
    translate: 0 -2px;
}

/* the one real call to action on the page */
.pv-whatsapp {
    border-radius: var(--r-md);
    background-image: linear-gradient(180deg,
        color-mix(in oklab, #25d366 92%, #fff),
        #1eb85a);
    box-shadow: var(--shadow-cta);
    transition: translate var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                filter var(--speed) var(--ease);
}
.pv-whatsapp:hover { translate: 0 var(--lift); filter: brightness(1.05); }
.pv-whatsapp:active { translate: 0 -1px; box-shadow: var(--shadow-1); }

.pv-warning { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
#pv-help { border-radius: var(--r-md); }

.mm-fitment-nudge { border-radius: var(--r-sm); }

.ymal-card {
    border-radius: var(--r-md);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-1);
    transition: translate var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
}
.ymal-card:hover { translate: 0 var(--lift); box-shadow: var(--shadow-3); }
.ymal-card img { aspect-ratio: 1; object-fit: contain; }


/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */

#myInput,
.form-input-fits-model,
#header-search input,
#newsletter input[type="email"],
.pf-field select,
#parts-finder select {
    border-radius: var(--r-sm);
    transition: box-shadow var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}
#myInput:focus,
.form-input-fits-model:focus,
.pf-field select:focus {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--yellow) 45%, transparent);
    border-color: var(--yellow);
}

.toolbar-filter { border-radius: var(--r-sm); }


/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

#bt-breadcrumbs .breadcrumb.is-active .breadcrumb-label {
    display: inline-block;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
@media (max-width: 860px) {
    #bt-breadcrumbs .breadcrumb.is-active .breadcrumb-label { max-width: 210px; }
}

#bt-breadcrumbs .breadcrumb:not(.is-active) .breadcrumb-label {
    background-image: linear-gradient(var(--yellow), var(--yellow));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size var(--speed) var(--ease);
}
#bt-breadcrumbs .breadcrumb:not(.is-active) .breadcrumb-label:hover {
    background-size: 100% 2px;
}


/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3,
.category-header__title,
.bt-home-hero__title,
#producttitle { text-wrap: balance; }

.pv-list li,
#pv-descriptionbox p,
.pv-shipping p,
.ref-info span { text-wrap: pretty; }

.cell-desc, .cell-fits, .pv-oem li { overflow-wrap: break-word; }


/* --------------------------------------------------------------------------
   Narrow screens: the table becomes cards, so round those instead
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .cell-fits, .cell-desc, .cell-part { width: auto; }

    #slidetableouter { box-shadow: none; background: transparent; border-radius: 0; }
    #slidetable tbody tr.productrow {
        border-radius: var(--r-md);
        border-bottom: 0;
        box-shadow: var(--shadow-1);
        background: #fff;
    }
    #slidetable tbody tr.productrow:hover { background: #fff; }

    .header { position: static; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   Filter toolbar: let it breathe above the table instead of fusing with the
   header row (both are --green-deep, so they read as one block otherwise).
   -------------------------------------------------------------------------- */

.toolbar {
    margin-bottom: 14px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
}

.ref-info { margin-bottom: 14px; }


/* --------------------------------------------------------------------------
   WhatsApp mark: the real glyph instead of the hand-drawn CSS shape
   -------------------------------------------------------------------------- */

.pv-whatsapp__icon {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d366'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.pv-whatsapp__icon::before,
.pv-whatsapp__icon::after { content: none; }

/* the same mark, small, on the "Not sure if this fits?" nudge */
.mm-nudge-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231f8a4c'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 15.5a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm1.4-5.6c-.6.4-.9.7-.9 1.35v.25h-1.8v-.4c0-1.2.5-1.85 1.35-2.4.7-.45 1-.75 1-1.3 0-.6-.48-1-1.18-1-.72 0-1.22.44-1.32 1.15l-1.78-.2C8.95 7.9 10.2 7 12 7c1.85 0 3.1 1 3.1 2.5 0 1.05-.55 1.75-1.7 2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mm-nudge-icon::before,
.mm-nudge-icon::after { content: none; }

/* ORC part numbers are wider than the old bare numbers - keep them on one line */
.cell-part { width: 140px; }
.cell-part a { white-space: nowrap; }
.ymal-card__part { white-space: nowrap; }

/* the active thumbnail needs to read as chosen, and the whole strip as clickable */
.productView-thumbnail { cursor: pointer; }
.productView-thumbnail-link { display: block; }
.productView-thumbnail.is-active { box-shadow: 0 0 0 2px var(--yellow); }
.productView-thumbnail:not(.is-active):hover { box-shadow: 0 0 0 2px color-mix(in oklab, var(--green) 45%, #fff); }
.productView-image--default { transition: opacity .18s var(--ease); }

/* hero with no video or poster: brand colours instead of a broken image */
.hp-hero-plain {
    background:
        radial-gradient(90% 120% at 18% 0%, rgba(255,190,0,.12), transparent 60%),
        linear-gradient(160deg, var(--green-deep), #0f1b14 55%, var(--green-deep));
}