/* =============================================================
    Product grid flex upgrade
    Used by grid-flex.cfm only

    Layout is deliberately kept visually close to the established
    Uttings product grid, while flex/grid handles sizing and
    alignment rather than legacy JavaScript.
==============================================================*/

.product-grid-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    row-gap: 6px;
    column-gap: 8px;
}


/* =============================================================
    Normal grid
    Mobile / tablet: 2 products per row
==============================================================*/

.product-grid.product-grid-flex > .product-details.product-card:not(.quick-view) {
    float: none !important;
    clear: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;

    flex: 0 0 calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;

    display: flex;
}


/*
 * Very small screens only:
 * switch to one product per row.
 */
@media (max-width: 360px) {
    .product-grid.product-grid-flex > .product-details.product-card:not(.quick-view) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}


/* =============================================================
    Desktop / tablet
    3 products per row
==============================================================*/

@media (min-width: 768px) {
    .product-grid-flex {
        row-gap: 0;
        column-gap: 12px;
    }

    .product-grid.product-grid-flex > .product-details.product-card:not(.quick-view) {
        flex: 0 0 calc(33.333333% - 8px) !important;
        max-width: calc(33.333333% - 8px) !important;
    }

    /*
     * Encourage the traditional taller product-card shape on
     * desktop without constraining the natural content flow.
     *
     * This is only a minimum: long titles, taglines or other
     * content can still make the card taller when required.
     */
    .product-grid.product-grid-flex > .product-details.product-card:not(.quick-view) > .product-card-inner {
        min-height: 320px;
    }
}


/* =============================================================
    Product card

    Keep the established Uttings visual treatment:
    one simple border around the complete product.

    Internally the card follows:

    Title / tagline / colours
    flexible space
    Image
    Description (quick view only)
    Pricing
==============================================================*/

.product-grid-flex > .product-card > .product-card-inner {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto auto;
    grid-template-areas:
        "title"
        "spacer"
        "image"
        "description"
        "pricing";

    background: #fff !important;
    border: 1px solid #DDD !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 5px 4px 3px 4px !important;
}


/* =============================================================
    Product title / tagline / colour choices

    These are grouped in the same way as the established grid so
    existing site typography can continue to do most of the work.
==============================================================*/

.product-grid-flex .product-card-title {
    grid-area: title;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


.product-grid-flex .product-card-title h3 {
    min-height: 0 !important;
    height: auto !important;
}


.product-grid-flex .product-card-title h3 a {
    font-size: 12px;
}


/* =============================================================
    Interactive elements

    Make genuine interactions visually obvious regardless of any
    cursor styling inherited from the legacy stylesheets.
==============================================================*/

.product-grid-flex a,
.product-grid-flex button,
.product-grid-flex [role="link"] {
    cursor: pointer;
}


/* =============================================================
    Image

    No internal image box or grey panel.

    The image stage remains because it gives us reliable image and
    overlay positioning, but it has no visible box of its own.

    Images are not enlarged beyond 300px.
==============================================================*/

.product-grid.product-grid-flex > .product-details.product-card .image-box.product-card-image {
    grid-area: image;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


.product-grid-flex .product-card-image .product-card-image-stage {
    position: relative;
    display: block;

    width: 100%;
    max-width: 300px;

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;
    background: transparent;
}


.product-grid.product-grid-flex > .product-details.product-card .image-box.product-card-image .image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
}


.product-grid.product-grid-flex > .product-details.product-card .image-box.product-card-image .image > img {
    display: block;

    width: auto !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: 300px !important;
    min-height: 0 !important;

    margin: 0 auto;
}


/* =============================================================
    Image overlays

    Save / New retain the site's established image-overlay styles.

    Finance remains the new right-hand finance indicator.

    They are status labels rather than extra product links, so
    pointer events pass through to the product image link below.
==============================================================*/

.product-grid-flex .product-card-image .product-card-image-stage .image-overlay {
    position: absolute !important;

    top: 4px !important;
    left: 4px !important;
    right: auto !important;

    margin: 0 !important;
    transform: none !important;

    z-index: 2;
    pointer-events: none;
}


.product-grid-flex .product-card-image .product-card-image-stage .image-overlay.finance {
    left: auto !important;
    right: 4px !important;

    background: #3f7898 !important;
    color: #fff !important;
    border: 1px solid #32657f !important;
}


/* =============================================================
    Description

    Hidden in the normal grid.
    Quick view exposes the description alongside the image.
==============================================================*/

.product-grid-flex .product-card-description {
    grid-area: description;
    display: none !important;

    width: auto;
    min-width: 0;

    box-sizing: border-box;
}


/* =============================================================
    Pricing - normal grid

    ------------------------------------------
    | RRP                 | review-stars     |
    ------------------------------------------
    | Price                                   |
    ------------------------------------------
    | Finance                                 |
    ------------------------------------------
    | Stock description                       |
    ------------------------------------------
    | Basket - hidden in normal grid          |
    ------------------------------------------

    Pricing stays at the bottom of the card and retains the
    established site's simple row-based appearance.
==============================================================*/

.product-grid-flex .product-card-pricing {
    grid-area: pricing;

    min-width: 0;
    min-height: 0 !important;
    height: auto !important;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto;

    align-content: end;

    column-gap: 8px;
    row-gap: 2px;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* RRP occupies the left of the first row. */
.product-grid-flex .product-card-pricing > .rrp {
    grid-column: 1;
    grid-row: 1;

    min-width: 0;
    align-self: center;
}


/* Review stars occupy the right of the first row. */
.product-grid-flex .product-card-pricing > .review-stars {
    grid-column: 2;
    grid-row: 1;

    justify-self: end;
    align-self: center;

    float: none !important;
    clear: none !important;
    position: static !important;

    text-align: right;
}


/* Price occupies its own complete row. */
.product-grid-flex .product-card-pricing > .price {
    grid-column: 1 / -1;
    grid-row: 2;

    display: block;
    min-width: 0;

    align-self: center;
}


/* =============================================================
    Finance

    Finance sits directly below the price and is a complete
    clickable text link rather than a box.

    The whole line is underlined so it is immediately apparent
    that the finance message itself is interactive.
==============================================================*/

.product-grid-flex .product-card-pricing > .price-finance {
    grid-column: 1 / -1;
    grid-row: 3;

    display: block;

    width: fit-content;
    max-width: 100%;
    min-width: 0;

    margin: 2px 0 0 0;
    padding: 2px 0;

    box-sizing: border-box;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    color: #24659a;
    font-size: 1.05em;
    line-height: 1.25;
    font-weight: normal;

    text-align: left;
    text-decoration: underline;
    text-transform: capitalize;

    cursor: pointer !important;
}


.product-grid-flex .product-card-pricing > .price-finance .price-finance-amount {
    font-weight: bold;
}


.product-grid-flex .product-card-pricing > .price-finance:hover {
    text-decoration-thickness: 2px;
}


/* Stock follows finance on its own complete row. */
.product-grid-flex .product-card-pricing > .stock-description {
    grid-column: 1 / -1;
    grid-row: 4;

    display: block;
    min-width: 0;

    align-self: center;
    justify-self: start;

    text-align: left;
}


/* =============================================================
    Basket / purchase button

    The purchase control exists in the markup but is hidden in the
    normal product grid, matching the established site behaviour.

    It is shown only when the user selects quick view.
==============================================================*/

.product-grid-flex .product-card-pricing > .basket-wrapper {
    grid-column: 1 / -1;
    grid-row: 5;

    display: none !important;

    width: 100%;
    margin-top: 6px;

    box-sizing: border-box;
}


.product-grid-flex .product-card-pricing > .basket-wrapper .basket-button {
    display: block;

    width: 50%;
    box-sizing: border-box;

    margin-left: 0;
    margin-right: auto;

    text-align: center;
    cursor: pointer;
}


/* =============================================================
    Focus visibility
==============================================================*/

.product-grid-flex a:focus-visible,
.product-grid-flex button:focus-visible,
.product-grid-flex [role="link"]:focus-visible {
    outline: 2px solid #24659a;
    outline-offset: 2px;
}


/* =============================================================
    Quick view / list mode

    Quick view remains one product per row.

    The title / tagline / colour choices stay across the full
    width at the top. Beneath them the image occupies the left
    column, while description and pricing stack in the right
    column.

    --------------------------------------------------
    | Title / tagline / colours                     |
    --------------------------------------------------
    | Image                | Description             |
    |                      | Pricing                 |
    --------------------------------------------------

    Pricing remains:

    Reviews
    RRP
    Price
    Finance
    Stock
    Purchase Options
==============================================================*/

.product-grid-flex > .product-card.quick-view {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}


.product-grid-flex > .product-card.quick-view > .product-card-inner {
    grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "title       title"
        "image       description"
        "image       pricing";

    column-gap: 18px;
    row-gap: 0;

    align-items: start;
}


/* =============================================================
    Quick-view image
==============================================================*/

.product-grid.product-grid-flex > .product-details.product-card.quick-view .image-box.product-card-image {
    grid-area: image;

    width: 100% !important;
    min-width: 0 !important;

    align-self: start;
}


/* =============================================================
    Quick-view description
==============================================================*/

.product-grid-flex > .product-card.quick-view .product-card-description {
    grid-area: description;

    display: block !important;

    width: auto;
    min-width: 0;

    margin: 0 0 8px 0;
    padding: 0;

    box-sizing: border-box;

    text-align: left;
}


/* =============================================================
    Quick-view pricing
==============================================================*/

.product-grid-flex > .product-card.quick-view .product-card-pricing {
    grid-area: pricing;

    width: 100%;
    min-width: 0;
    min-height: 0 !important;

    margin-top: 0;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;

    row-gap: 2px;

    align-content: start;
}


/* Reviews become the first full-width row in quick view. */
.product-grid-flex > .product-card.quick-view .product-card-pricing > .review-stars {
    grid-column: 1;
    grid-row: 1;

    justify-self: start;
    text-align: left;
}


/* RRP follows reviews. */
.product-grid-flex > .product-card.quick-view .product-card-pricing > .rrp {
    grid-column: 1;
    grid-row: 2;

    justify-self: start;
}


/* Price follows RRP. */
.product-grid-flex > .product-card.quick-view .product-card-pricing > .price {
    grid-column: 1;
    grid-row: 3;
}


/* Finance follows price. */
.product-grid-flex > .product-card.quick-view .product-card-pricing > .price-finance {
    grid-column: 1;
    grid-row: 4;
}


/* Stock follows finance. */
.product-grid-flex > .product-card.quick-view .product-card-pricing > .stock-description {
    grid-column: 1;
    grid-row: 5;

    justify-self: start;
    text-align: left;
}


/* Purchase Options is the final quick-view row. */
.product-grid-flex > .product-card.quick-view .product-card-pricing > .basket-wrapper {
    grid-column: 1;
    grid-row: 6;

    display: block !important;
}


/* =============================================================
    Narrow quick view

    On smaller screens the side-by-side quick-view body becomes
    vertical again so the image and information are not cramped.

    Title / tagline / colours
    Image
    Description
    Pricing
==============================================================*/

@media (max-width: 640px) {
    .product-grid-flex > .product-card.quick-view > .product-card-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "title"
            "image"
            "description"
            "pricing";

        column-gap: 0;
    }


    .product-grid-flex > .product-card.quick-view .product-card-description {
        margin-top: 6px;
        margin-bottom: 6px;
    }


    .product-grid-flex > .product-card.quick-view .product-card-pricing {
        margin-top: 0;
    }
}


/* =============================================================
    Defensive resets against old product-grid formatting
==============================================================*/

.product-grid-flex .product-card,
.product-grid-flex .product-card-inner,
.product-grid-flex .product-card-image,
.product-grid-flex .product-card-title,
.product-grid-flex .product-card-description,
.product-grid-flex .product-card-pricing {
    float: none !important;
    clear: none !important;
}