/* Product card, variant 01 "Showroom" (trial, 2026-10-21) - loaded after oil-listing.css by
   inc/oil-listing.php and inc/oil-product.php; ?card=classic switches it off for comparison.
   The blue product photo becomes the card: a navy panel fades out of the photo and carries the
   name, specs, packs and a price + round cart button. Markup (parts/oil-card.php) and scripts are
   unchanged. Scope: grid cards, the bestseller rail and "See also" at every width (the phone block
   below undoes the classic photo-beside-text row); the desktop list view keeps the classic card. */

    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc {
        --sr-panel: #001630;
        --sr-soft: #9fb0cc;
        --sr-line: rgba(255, 255, 255, .22);
        border: 0;
        background: var(--sr-panel);
        color: #fff;
        isolation: isolate; /* the photo sits under the panel (z-index -1) */
        box-shadow: 0 1px 2px rgba(0, 22, 48, .1);
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc:hover {
        box-shadow: 0 10px 24px -10px rgba(0, 22, 48, .28);
        transform: translateY(-3px);
    }

    /* photo: the panel fades out of its lower part */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__media::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 40%;
        background: linear-gradient(180deg, rgba(0, 22, 48, 0) 0%, rgba(0, 22, 48, .72) 55%, var(--sr-panel) 100%);
        pointer-events: none;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc:hover .gy-oc__media img { transform: scale(1.06); }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__media { z-index: -1; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__visc {
        left: auto;
        right: 14px;
        top: 14px;
        bottom: auto;
        z-index: 1;
        box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
    }
    /* bestseller / sale / fits sit just above the name, as in the demo */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__badges {
        top: auto;
        bottom: 74px;
        left: 18px;
        transition: bottom .3s var(--ease);
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__badge--best { background: var(--yellow); color: var(--navy); }

    /* panel */
    /* panel: overlaps the photo bottom; position stays static so the group chip can
       anchor to the card's top corner */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__body {
        margin-top: -64px;
        padding: 26px 18px 18px;
        background: linear-gradient(180deg, rgba(0, 22, 48, 0) 0, rgba(0, 22, 48, .86) 38px, var(--sr-panel) 100%);
        transition: margin-top .3s var(--ease);
    }
    /* group chip in the top left corner of the photo (the viscosity badge is top right) */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__kicker {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 1;
        max-width: calc(100% - 104px);
        margin: 0;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .16);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: #fff;
        font-size: 10.5px;
        letter-spacing: .1em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* the chip shows the group only ("Goodyear" is the whole catalogue) */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__kicker .gy-oc__brand { display: none; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__title a { color: #fff; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__title a:hover { color: #fff; text-decoration-color: var(--yellow); }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__specs { color: var(--sr-soft); font-size: 12.5px; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__more { color: #fff; }

    /* packs: outline chips */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__pack {
        height: 32px;
        border-color: var(--sr-line);
        border-radius: 999px;
        background: transparent;
        color: #fff;
        transition: border-color .15s, background .15s, color .15s;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__pack:hover { border-color: #fff; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__pack[aria-checked="true"] {
        border-color: #fff;
        background: #fff;
        color: var(--navy);
        box-shadow: none;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__pack-v { font-size: 13px; }

    /* availability: a three-segment stock gauge + the word (user's pick, option 03 of the
       availability page, 2026-10-21). The segments are one pseudo-element and its box-shadows:
       available = 3 lit, limited = 1 lit + 2 dim, on request = 3 outlined. No price per litre. */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__meta { justify-content: flex-start; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__unit { display: none; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__omni { color: var(--sr-soft); }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__avail {
        --seg-dim: rgba(255, 255, 255, .18);
        gap: 9px;
        font: 600 12.5px/1.2 'Roboto', sans-serif;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__avail::before {
        flex: 0 0 14px;
        width: 14px;
        height: 6px;
        margin-right: 34px; /* room for the two shadow copies */
        border-radius: 3px;
        background: currentColor;
        box-shadow: 17px 0 0 currentColor, 34px 0 0 currentColor;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__avail--available { color: #4fd39b; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__avail--limited { color: #f5b14c; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__avail--limited::before { box-shadow: 17px 0 0 var(--seg-dim), 34px 0 0 var(--seg-dim); }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__avail--on_request { color: #8fb4ff; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__avail--on_request::before {
        background: transparent;
        box-shadow: inset 0 0 0 1px currentColor,
            17px 0 0 0 var(--sr-panel), 17px 0 0 1px currentColor,
            34px 0 0 0 var(--sr-panel), 34px 0 0 1px currentColor;
    }

    /* buy row: big yellow price on the left, round cart button on the right */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add {
        gap: 12px;
        min-height: 50px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--yellow);
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add:hover { background: transparent; color: var(--yellow-h); }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add-t {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add-p {
        order: 1;
        margin: 0 auto 0 0;
        font: 900 24px/1 'Roboto', sans-serif;
        letter-spacing: -.01em;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add svg {
        order: 2;
        box-sizing: border-box;
        width: 48px;
        height: 48px;
        padding: 13px;
        border-radius: 50%;
        background: var(--yellow);
        color: var(--navy);
        transition: background .15s, transform .2s var(--ease);
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add:hover svg { background: var(--yellow-h); transform: scale(1.07); }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add:focus-visible { outline: 0; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add:focus-visible svg { box-shadow: 0 0 0 3px #fff; }
    /* adding to cart: the price stays, the cart icon fades and the ring spins inside the
       yellow circle (the classic card hides the whole button content and centres the ring) */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add.gy-adding > :not(.gy-btn-spinner) { visibility: visible; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add.gy-adding svg { color: transparent; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add.gy-adding .gy-btn-spinner {
        inset: 50% 14px auto auto;
        margin: -10px 0 0;
        color: var(--navy);
    }
    /* out of stock: show the words instead of the cart */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add:disabled:not(.gy-adding) { background: transparent; color: var(--sr-soft); }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add:disabled:not(.gy-adding) .gy-oc__add-t {
        position: static;
        order: 3;
        width: auto;
        height: auto;
        clip: auto;
        font: 700 12.5px/1 'Roboto', sans-serif;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add:disabled:not(.gy-adding) svg { display: none; }
    /* price on request: yellow outline pill with the words */
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add--ghost {
        justify-content: space-between;
        min-height: 46px;
        padding: 0 18px;
        border: 1.5px solid var(--yellow);
        border-radius: 999px;
        color: var(--yellow);
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add--ghost:hover { background: var(--yellow); color: var(--navy); }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add--ghost .gy-oc__add-t {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
        font: 800 13px/1 'Roboto', sans-serif;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add--ghost svg {
        order: 2;
        width: 18px;
        height: 18px;
        padding: 0;
        background: none;
        color: currentColor;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__add--ghost:hover svg { background: none; transform: translateX(3px); }

/* phones: the classic listing lays the card out as a row (112px photo beside the text, see
   oil-listing.css ≤575px); the showroom card is the same tall tile as on desktop, one per row,
   litre chips always open (no hover). Selectors repeat the classic ones so they win by order. */
@media (max-width: 575px) {
    .gy-ol__grid:not(.is-list) > .gy-oc {
        display: flex;
        flex-direction: column;
        padding: 0;
        border-radius: 18px;
    }
    .gy-ol__grid:not(.is-list) > .gy-oc:hover { box-shadow: 0 1px 2px rgba(0, 22, 48, .1); }
    .gy-ol__grid:not(.is-list) > .gy-oc .gy-oc__media { width: auto; height: auto; align-self: stretch; aspect-ratio: 1 / 1; border-radius: 0; }
    .gy-ol__grid:not(.is-list) > .gy-oc .gy-oc__body { display: flex; }
    .gy-ol__grid:not(.is-list) > .gy-oc .gy-oc__kicker { margin: 0; }
    .gy-ol__grid:not(.is-list) > .gy-oc .gy-oc__visc { left: auto; right: 14px; top: 14px; bottom: auto; padding: 7px 11px; border-radius: 9px; font-size: 15px; }
    .gy-ol__grid:not(.is-list) > .gy-oc .gy-oc__badges { top: auto; left: 18px; bottom: 74px; }
    .gy-ol__grid:not(.is-list) > .gy-oc .gy-oc__badge { padding: 6px 10px; font-size: 11px; }
    .gy-ol__grid:not(.is-list) > .gy-oc .gy-oc__title { font-size: 19px; }
    .gy-ol__grid:not(.is-list) > .gy-oc .gy-oc__specs { margin: 0 0 16px; font-size: 12.5px; }
    .gy-ol__grid:not(.is-list) > .gy-oc .gy-oc__packs { margin: auto 0 12px; }
    /* rail cards stay compact (no specs/packs) but take the same dark look */
    .gy-ol__rail-track > .gy-oc--rail .gy-oc__body { padding: 0 14px 14px; }
}

/* mouse devices (as in the demo): the litre chips stay folded; on hover they open inside the
   panel and the panel grows upwards over the photo by the same height, so the card and the
   grid row never change height. Touch screens keep them open. */
@media (hover: hover) {
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__packs {
        flex-wrap: nowrap;
        max-height: 0;
        margin: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .3s var(--ease), margin .3s var(--ease), opacity .25s;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc:hover .gy-oc__packs,
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc:focus-within .gy-oc__packs {
        max-height: 32px;
        margin: 2px 0 12px;
        opacity: 1;
    }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc:hover .gy-oc__body,
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc:focus-within .gy-oc__body { margin-top: -110px; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc:hover .gy-oc__badges,
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc:focus-within .gy-oc__badges { bottom: 120px; }
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__meta { margin-top: auto; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__packs,
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__body,
    :where(.gy-ol__grid:not(.is-list), .gy-ol__rail-track) > .gy-oc .gy-oc__badges { transition: none; }
}