/*
* =============================================================
* Homepage Featured Products
*
* Uses the shared product-card markup and JavaScript, but does
* NOT use the normal search/category product-grid CSS.
*
* Visual order follows the established homepage:
*
*   image
*   title
*   colours (if applicable)
*   review stars
*   RRP
*   price
*   finance
* =============================================================
*/


/*
* Restore the established separation between the banner above
* and the Featured Products widget.
*/
.home-widget-products {
    margin-top: 10px;
}


/*
* Three equal columns.
*
* 8px is deliberately closer to the visual spacing on the
* established homepage than the previous 2px gap.
*/
.homepage-featured-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

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

    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    align-items: stretch;
}

/*
* Explicitly use the site's standard UI/product font.
*
* This prevents legacy heading rules (notably h3) from falling back
* to Georgia / Times when flex_grid_css is not loaded.
*/
.homepage-featured-grid,
.homepage-featured-grid .product-card-inner,
.homepage-featured-grid .product-card-title,
.homepage-featured-grid .product-card-title h3,
.homepage-featured-grid .product-card-title h3 a,
.homepage-featured-grid .product-card-title span,
.homepage-featured-grid .product-card-pricing,
.homepage-featured-grid .product-card-pricing span,
.homepage-featured-grid .product-card-pricing a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}


/*
* Each product fills its grid cell.
*/
.homepage-featured-grid > .homepage-featured-product {
    display: flex;

    width: auto;
    min-width: 0;
    max-width: none;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/*
* The inner product card fills the complete grid-cell height.
*
* Flex ordering below lets the homepage place the image above
* the title without changing the shared CFM partial.
*/
.homepage-featured-grid .product-card-inner {
    display: flex;
    flex-direction: column;

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

    margin: 0;
    padding: 5px 4px 4px 4px;

    box-sizing: border-box;

    border: 1px solid #DDD;
    background: #fff;
}


/*
* =============================================================
* Elements deliberately hidden on the homepage
* =============================================================
*/

.homepage-featured-grid .product-card-tagline,
.homepage-featured-grid .tagline,
.homepage-featured-grid .product-card-description,
.homepage-featured-grid .stock-description,
.homepage-featured-grid .basket-wrapper {
    display: none !important;
}


/*
* The live homepage shows review stars but not the numerical
* review count.
*/
.homepage-featured-grid .review-count {
    display: none !important;
}


/*
* =============================================================
* Image
*
* The established homepage places the image ABOVE the title.
* =============================================================
*/

.homepage-featured-grid .product-card-image {
    order: 1;

    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: center;
}


.homepage-featured-grid .product-card-image-stage {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: center;
}


.homepage-featured-grid .product-card-image .image {
    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: center;
}


.homepage-featured-grid .product-card-image img {
    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 300px;

    margin: 0 auto;
}


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

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

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

    display: inline-block;

    width: auto;
    height: auto;

    margin: 0 !important;
    padding: 2px 5px;

    box-sizing: border-box;

    font-size: 11px;
    line-height: 16px;
    font-weight: bold;

    text-decoration: none;

    z-index: 2;

    pointer-events: none;
}


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

    background: #3f7898 !important;
    color: #fff !important;

    border: 1px solid #32657f !important;
}


/*
* =============================================================
* Product title
*
* More restrained than the Search / Category title treatment.
* =============================================================
*/

.homepage-featured-grid .product-card-title {
    order: 2;

    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 3px 0 0 0;

    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


.homepage-featured-grid .product-card-title h3 {
    margin: 0;
    padding: 0;

    border: 0 !important;

    font-size: 11px;
    line-height: 14px;
    font-weight: normal;
}


.homepage-featured-grid .product-card-title h3 a {
    display: block;

    margin: 0;
    padding: 0;

    border: 0 !important;

    background: transparent !important;

    color: inherit;

    font-size: 11px;
    line-height: 14px;
    font-weight: normal;

    text-decoration: none;

    box-shadow: none !important;
}


/*
* Manufacturer retains a little emphasis, while the actual
* product title remains lighter as on the established homepage.
*/
.homepage-featured-grid .product-card-title .brand, 
.homepage-featured-grid .product-card-title .title {
    font-weight: bold;
}


/*
* =============================================================
* Colours
* =============================================================
*/

.homepage-featured-grid .colour-list {
    order: 3;

    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/*
* =============================================================
* Pricing
*
* Homepage layout:
*
*   RRP                         stars
*   price
*   finance
*
* This mirrors the compact established homepage presentation.
* =============================================================
*/

.homepage-featured-grid .product-card-pricing {
    order: 4;

    display: grid;

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

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

    width: 100%;
    min-width: 0;

    margin-top: auto;
    padding: 3px 0 0 0;

    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/*
* RRP: first row, left.
*
* Deliberately small and light compared with the selling price.
*/
.homepage-featured-grid .product-card-pricing > .rrp {
    grid-column: 1;
    grid-row: 1;

    display: block !important;

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

    min-width: 0;

    margin: 0;
    padding: 0;

    align-self: center;

    color: #999;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 10px;
    line-height: 13px;
    font-weight: normal;

    white-space: nowrap;
}


.homepage-featured-grid .product-card-pricing > .rrp .label {
    display: inline !important;

    margin: 0;
    padding: 0;

    color: inherit;

    font-family: inherit !important;
    font-size: inherit;
    line-height: inherit;
    font-weight: normal;
}


/*
* Review stars: first row, right.
*
* The numerical review count remains hidden.
*/
.homepage-featured-grid .review-stars {
    grid-column: 2;
    grid-row: 1;

    display: block;

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

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

    width: auto;
    min-width: 0;

    margin: 0;
    padding: 0;

    line-height: 12px;

    text-align: right;
}


.homepage-featured-grid .review-count {
    display: none !important;
}


.homepage-featured-grid .review-stars a {
    display: inline-block;

    margin: 0;
    padding: 0;

    line-height: 12px;
}


.homepage-featured-grid .review-stars .stars {
    display: inline-block;
}


.homepage-featured-grid .review-stars img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}


/*
* Preserve the first-row height even for products with no reviews,
* so RRP and pricing align consistently across the row.
*/
.homepage-featured-grid .review-stars-none {
    min-width: 0;
    min-height: 12px;
}


/*
* Selling price: complete second row.
*/
.homepage-featured-grid .product-card-pricing > .price {
    grid-column: 1 / -1;
    grid-row: 2;

    display: block !important;

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

    min-width: 0;

    margin: 0;
    padding: 0;

    color: #333;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    line-height: 17px;
    font-weight: bold;
}


.homepage-featured-grid .product-card-pricing > .price.special {
    color: #c00;
}


/*
* Finance: complete third row.
*/
.homepage-featured-grid .price-finance {
    grid-column: 1 / -1;
    grid-row: 3;

    display: block;

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

    min-width: 0;

    margin: 1px 0 0 0;
    padding: 0;

    color: #24659a;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px;
    line-height: 14px;
    font-weight: normal;

    text-decoration: underline;

    cursor: pointer;

    white-space: normal;
}


.homepage-featured-grid .price-finance-amount {
    font-family: inherit !important;
    font-weight: bold;
}


/*
* Genuine interactive elements should retain the expected
* pointer cursor even though flex_grid_css is not loaded.
*/
.homepage-featured-grid a,
.homepage-featured-grid button,
.homepage-featured-grid [role="link"] {
    cursor: pointer;
}


/*
* =============================================================
* Responsive layout
* =============================================================
*/

@media (max-width: 767px) {

    .homepage-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

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

}


@media (max-width: 360px) {

    .homepage-featured-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}