:root {
    --bs-primary-bg-subtle: white;
    --bs-accordion-btn-focus-box-shadow: none !important;
    --input-height: 46px;
}

a {
    text-decoration: none !important;
}

.hidden {
    display: none;
}

.kyo-body {
    background-color: #1D232A;
}

.kyo-skip-link:focus-visible {
    position: fixed;
    top: 0.5em;
    left: 0.5em;
    z-index: 10000;
    padding: 0.75em 1em;
    background-color: #FCBF06;
    color: #1D232A;
    font-weight: 700;
    border-radius: 4px;
    outline: 2px solid #1D232A;
    outline-offset: 2px;
}

/* ------------------- LANGUAGE SUGGESTION BANNER ------------------- */

.kyo-lang-offer[hidden] {
    display: none;
}

.kyo-lang-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75em 1em;
    padding: 0.75em 1em;
    background-color: #FCBF06;
    color: #1D232A;
    text-align: center;
}

.kyo-lang-offer-msg {
    margin: 0;
    font-weight: 600;
}

.kyo-lang-offer-actions {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.kyo-lang-offer-switch {
    padding: 0.4em 0.9em;
    border: 2px solid #1D232A;
    border-radius: 4px;
    background-color: #1D232A;
    color: #FCBF06;
    font-weight: 700;
    cursor: pointer;
}

.kyo-lang-offer-switch:hover {
    background-color: transparent;
    color: #1D232A;
}

.kyo-lang-offer-dismiss {
    padding: 0.2em 0.5em;
    border: 2px solid transparent;
    background: transparent;
    color: #1D232A;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.kyo-lang-offer-switch:focus-visible,
.kyo-lang-offer-dismiss:focus-visible {
    outline: 2px solid #1D232A;
    outline-offset: 2px;
}

/* ------------------- LOADING SPINNER ------------------- */

.kyo-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s ease;
}

.kyo-loader.active {
    opacity: 1;
    pointer-events: all;
}

.kyo-loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #FCBF06;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ------------------- LOGO BANNER ------------------- */

.banner-logos {
    display: flex;
    height: 104px;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 2em;
    align-self: stretch;
    background-color: #1D232A;
    user-select: none;
}

.banner-pennzoil-logo {
    width: 98px;
    height: 56px;
}

.banner-shell-rotella-logo {
    width: 167px;
    height: 46px;
}


/* ------------------- HOME ------------------- */

.kyo-home-container {
    display: flex;
    background-image: url("../images/kyo_desktop_background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 104px 0;
    flex-direction: column;
    align-items: center;
    gap: 67px;
    user-select: none;
}

.kyo-ymm-card {
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 55px 39px;
    width: 627px;
    padding: 3em 1em;
    align-items: center;
    align-content: center;
    background-color: white;
    border-radius: 20px;
    max-width: 95vw;
}

.ymm-logos {
    display: flex;
    align-items: center;
    gap: 20px;
    user-select: none;
}

.ymm-pennzoil-logo {
    width: 146px;
    height: 84px;
}

.ymm-shell-rotella-logo {
    width: 259px;
    height: 72px;
}

.ymm-form {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 0.8em;
}

.ymm-select {
    width: 154px;
    padding: 10px;
}

.ymm-selects-title :first-child {
    font-family: Futura;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
}

.ymm-selects-container {
    display: flex;
    flex-flow: wrap;
    gap: 0.5em;
}

.ymm-input {
    width: 300px;
    padding: 10px;
}

.ymm-input-title :first-child {
    font-family: Futura;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
}

.ymm-input-title :nth-child(2) {
    font-family: Arial;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.ymm-input,
.ymm-select,
.orange-btn,
.orange-icon-btn {
    max-width: 90vw;
    height: var(--input-height);
}

.orange-btn {
    width: 300px;
}

.orange-icon-btn {
    aspect-ratio: 1 / 1;
}

.orange-icon-btn,
.orange-icon-btn:disabled,
.orange-btn,
.orange-btn:disabled {
    border-radius: 5px !important;
    background-color: #FCBF06;
    border: None;
    padding: 10px;
}

.orange-icon-btn:hover, .orange-btn:hover {
    background-color: #fadda7;
}

.orange-icon-btn:disabled, .orange-btn:disabled {
    background-color: #ffedb2;
    color: #6c757d;
    fill: #6c757d;
    cursor: not-allowed;
}

.orange-btn:focus, .orange-icon-btn:focus {
    background-color: #FCBF06;
    box-shadow: 0 0 0 .25em rgb(255 177 0 / 25%);
}

/* ------------------- RESULTS ------------------- */

.kyo-results-go-back {
    color: white;
    fill: white;
    cursor: pointer;
    user-select: none;
    /* Reset native button chrome; keep the small sizing the <small> gave */
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.875em;
}

.kyo-results-go-back:focus-visible {
    outline: 2px solid #FCBF06;
    outline-offset: 2px;
}

.kyo-results-banner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/kyo_banner.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    fill: white;
    height: 232px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    padding: 2em;
}

.kyo-results-message {
    font-family: Futura;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
}

.kyo-results-container {
    flex-flow: column;
}

.kyo-results-container,
.kyo-results-container-desktop,
.kyo-results-container-mobile {
    display: flex;
    align-items: center;
    gap: 30px;
    align-self: stretch;
    justify-content: center;
    padding: 2em 0;
    background-color: white;
}

.kyo-results-container-desktop,
.kyo-results-container-mobile {
    flex-flow: wrap;
}

.kyo-results-container-mobile {
    display: none;
    width: 100vw;
}

.kyo-result-card {
    display: flex;
    width: 300px;
    min-height: 360px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-shrink: 0;
    padding: 1em 0.5em;
    border-radius: 10px;
    border: 1px solid white;
    transition: border-color 0.4s ease-in,
    box-shadow 0.4s ease-in;
}

.kyo-result-card:hover, .kyo-result-card:focus-visible {
    border: 1px solid #D1D1D1;
    background: #FFF;
    box-shadow: -1px 0px 10.4px 3px rgba(0, 0, 0, 0.10);
}

.kyo-result-card:focus-visible {
    outline: 2px solid #FCBF06;
    outline-offset: 2px;
}

.kyo-result-title {
    font-family: Futura;
    color: #000;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

.kyo-result-accordian {
    width: 90vw;
}


.accordion-button:focus {
    box-shadow: none;
    color: #212529 !important;
}

.accordion-button:focus-visible {
    outline: 2px solid #FCBF06;
    outline-offset: 2px;
}

.form-control:focus, .form-select:focus {
    border-color: #dee2e6 !important;
    box-shadow: 0 0 0 .25em rgb(255 177 0 / 25%);
}

.kyo-result-ul {
    font-family: Arial;
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.copy-item {
    cursor: pointer;
    color: black;
    text-decoration: underline;
    transition: color 0.2s;
    /* Reset native button chrome so it reads as inline list text */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-align: inherit;
    /* Chrome forces form controls to inline-block regardless of `display`, and
       an inline-block baseline-aligns on its LAST line -- which dropped the list
       marker to the bottom of any name that wrapped. Aligning to the top puts
       the bullet back on the first line, matching the anchors these sit
       alongside on the co-branded results page. */
    vertical-align: top;
}

.copy-item:hover {
    text-decoration: underline !important;
    color: rgb(0 0 0 / 0.66);
}

.copy-item:focus-visible {
    outline: 2px solid #FCBF06;
    outline-offset: 2px;
    color: black;
    font-weight: bold;
}

.copy-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.copy-notification.show {
    opacity: 1;
}

/* ------------------- NO RESULTS ------------------- */

.kyo-no-results-message {
    font-family: Futura;
    color: white;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
}

.kyo-no-results-section {
    display: grid;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/kyo_banner.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 65vh;
    padding: 1em;
    justify-content: center;
}

.ymm-no-results-form {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 0.5em;
    height: var(--input-height);
}

/* ----------------------- FOOTER ---------------------- */

.kyo-lang-dropdown {
    fill: white;
    padding: 8px 8px;
    border: none;
    border-radius: 50%;
}

.kyo-lang-dropdown::after {
    display: none !important;
}

.kyo-lang-dropdown .lang-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.kyo-footer-a:hover {
    color: white !important;
    fill: white !important;
}

.kyo-footer-a {
    color: #d7d7d7;
    fill: #d7d7d7;
    text-decoration: underline !important;
}

.kyo-footer-container {
    background-color: #1D232A;
    color: #d7d7d7;
    padding: 1.75em;
    user-select: none;
}

.kyo-footer-table > tbody > tr > td {
    padding-top: 1em;
    padding-right: 2em;
}

.kyo-footer-table-header {
    color: white;
    padding-top: 2em;
    white-space: nowrap;
}

.kyo-footer-tables-row, .kyo-footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
}

.kyo-footer-bottom-links {
    white-space: nowrap;
    align-items: center;
}

.kyo-disclaimer {
    text-align: center;
}

/* --------------- HERO IMAGES CAROUSEL ---------------- */

.hero-image-carousel {
    max-width: 100vw;
    display: grid;
    grid-template-columns: auto 1fr auto;
}

.carousel-btn {
    border: none;
    background-color: rgb(0, 0, 0, 0);
}

.hero-images-row-container {
    position: relative;
    overflow: auto;
}

.hero-images-row {
    display: flex;
    gap: 3em;
    overflow-x: auto;
    padding: 10px;
    scrollbar-width: none;
    height: 170px;
}

.hero-images-row-container ::-webkit-scrollbar,
.hero-images-row::-webkit-scrollbar {
    display: none;
}

.hero-images-row, .hero-images-row-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.hero-images-row-container::before,
.hero-images-row-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 100) 0%,
            transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

.hero-images-row-container::before {
    left: -2px;
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 100) 0%,
            transparent 100%
    );
}

.hero-images-row-container::after {
    right: -2px;
    background: linear-gradient(
            to left,
            rgba(255, 255, 255, 100) 0%,
            transparent 100%
    );
}

/* ------------------- SMALL SCREENS ------------------- */

@media (max-width: 600px) {
    .banner-pennzoil-logo {
        width: 77px;
        height: 44px;
    }

    .banner-shell-rotella-logo {
        width: 130px;
        height: 36px;
    }

    .kyo-home-container {
        background-image: url("../images/kyo_mobile_background.jpg");
        gap: 32px;
    }

    .kyo-ymm-card {
        width: 357px;
        gap: 26px;
    }

    .ymm-logos {
        gap: 0.75em;
    }

    .ymm-pennzoil-logo {
        width: 94px;
        height: 54px;
    }

    .ymm-shell-rotella-logo {
        width: 177px;
        height: 49px;
    }

    .ymm-selects-title :first-child {
        font-size: 23px;
    }

    .ymm-selects-container {
        flex-flow: column;
    }

    .ymm-select {
        width: 300px;
    }

    .ymm-input-title :first-child {
        font-size: 18px;
    }

    .ymm-input-title :nth-child(2) {
        font-size: 16px;
    }

    .kyo-results-container-mobile {
        display: flex;
        flex-flow: column;
        gap: 16px;
    }

    .kyo-results-container-desktop {
        display: none;
    }

    .kyo-results-message {
        font-size: 20px;
    }


    .kyo-no-results-message {
        font-size: 20px;
    }

    .ymm-no-results-form {
        flex-flow: column;
    }

    .kyo-footer-tables-row {
        flex-flow: column;
    }
}

@media (max-width: 450px) {
    .ymm-logos, .banner-logos {
        flex-flow: column;
        justify-content: center;
    }

    .banner-logos {
        height: 150px;
        gap: 1em;
    }

    .kyo-legal {
        white-space: normal;
    }
}

/* ------------------- CO-BRANDED (HOME DEPOT) ------------------- */

/* The Home Depot mark sits alongside the Pennzoil and Rotella logos on the
   retail-branded hosts only; every other rule on this page is shared. */
.banner-hd-logo {
    width: 56px;
    height: 56px;
}

.ymm-hd-logo {
    width: 84px;
    height: 84px;
}

/* Product names become outbound links to Home Depot when a mapping exists.
   Styled to match .copy-item so a card reads consistently whether or not every
   one of its oils is stocked. */
.kyo-result-link {
    cursor: pointer;
    color: black;
    text-decoration: underline !important;
    transition: color 0.2s;
    font: inherit;
}

.kyo-result-link:hover {
    color: rgb(0 0 0 / 0.66);
}

.kyo-result-link:focus-visible {
    outline: 2px solid #FCBF06;
    outline-offset: 2px;
    color: black;
    font-weight: bold;
}

/* Anchor styled as the shared orange button. .orange-btn supplies the colour
   and 46px height; these rules do the centring a <button> gets for free. */
.kyo-shop-all-btn,
.kyo-shop-all-btn:hover,
.kyo-shop-all-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 220px;
    max-width: 100%;
    color: #1D232A;
    font-weight: 700;
    text-decoration: none !important;
}

.kyo-result-card .kyo-shop-all-btn {
    margin-top: auto;
}

/* Push the button to the foot of the card rather than centring the whole
   stack, so cards with differing numbers of oils still line their buttons up. */
.kyo-result-card:has(.kyo-shop-all-btn) {
    justify-content: flex-start;
    gap: 20px;
}

.accordion-body .kyo-shop-all-btn {
    margin-top: 1em;
    width: 100%;
}

/* The retail cards are a browsable product grid rather than the reference list
   the Shell site shows, so their edges stay drawn instead of appearing on
   hover. Scoped to .brand-homedepot so the Shell results page is untouched. */
.brand-homedepot .kyo-result-card {
    border-color: #D1D1D1;
    background: #FFF;
    padding: 2em 1.5em;
}

/* Only products that actually link to Home Depot are underlined. The unmapped
   ones stay copy-to-clipboard buttons and never take an underline -- not at
   rest and not on hover -- so the underline means exactly one thing on this
   page: "this goes to a product page". Hover still shifts the colour, and
   :focus-visible keeps the yellow outline and bold weight from the base rule,
   so both states stay perceivable without borrowing the link affordance.
   The !important is needed only to beat the base .copy-item:hover rule, which
   is itself !important. */
.brand-homedepot .copy-item,
.brand-homedepot .copy-item:hover,
.brand-homedepot .copy-item:focus-visible {
    text-decoration: none !important;
}

@media (max-width: 450px) {
    .banner-hd-logo,
    .ymm-hd-logo {
        width: 64px;
        height: 64px;
    }
}

/* ------------------- REDUCED MOTION ------------------- */

/* L6 (WCAG 2.3.3): honor a reduced-motion preference by neutralising decorative
   animations and transitions for users who have requested it. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* The loader spinner is essential progress feedback, not decorative motion —
       keep it rotating so the page doesn't look frozen while a search runs. */
    .kyo-loader-spinner {
        animation: spin 1s linear infinite !important;
    }
}