/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/components/commerce-search-product-grid.css?{ versionKey }"/> */
/* 
    This component is used on the "Category", "Search" pages

    Setting in 'Experience Builder':

    1. LAYOUT:
        1.1. Results Layout:         Grid **HAS NO EFFECT**
        1.2. Grid Column Spacing:    Small **HAS NO EFFECT**
        1.3. Grid Row Spacing:       Small **HAS NO EFFECT**

    2. RESULTS DISPLAY
        2.1. Card Background Color: --com-c-product-card-container-color-background
        2.2. Card Border Color:     --com-c-product-card-container-color-border
        2.3. Card Border Radius:    8 **HAS NO EFFECT**
        2.4. Card Alignment:        Center

*/

/* Product grid */

commerce_search-product-grid {
    --ecomm-commerce-product-card-border-color-hover: var(--ecomm-color-primary-02);
    --ecomm-commerce-product-card-name-color: var(--ecomm-color-black-02);
    --ecomm-commerce-product-card-name-color-hover: var(--ecomm-color-primary-02);
    --ecomm-commerce-product-original-price-color: var(--ecomm-color-gray-02);
}

commerce_search-product-grid ul.product-grid-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    padding: 0 !important;
}

@media (max-width: 1199.98px) {

    commerce_search-product-grid ul.product-grid-container {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 1023.98px) {

    commerce_search-product-grid ul.product-grid-container {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

@media (max-width: 767.98px) {

    commerce_search-product-grid ul.product-grid-container {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 574.98px) {

    commerce_search-product-grid ul.product-grid-container {
        grid-template-columns: 1fr;
    }

}

commerce_search-product-grid ul.product-grid-container li.grid-item,
commerce_search-product-grid ul.product-grid-container li.grid-item > section,
commerce_search-product-grid ul.product-grid-container li.grid-item > section commerce_search-product-card {
    display: block !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

/* Product card */

commerce_search-product-card .cardContainerGrid {
    grid-template-areas: "imageArea" "fieldsArea" "priceArea" !important;
    grid-template-rows: min-content min-content 1fr !important;
    height: 100% !important;
    padding: 0 !important;
    border-width: 1px !important;
    border-radius: 0.5rem !important;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color 0.1s;
}

commerce_search-product-card .cardContainerGrid:hover {
    outline-color: var(--ecomm-commerce-product-card-border-color-hover, var(--dxp-g-brand));
}

/* Product card: Image */

commerce_search-product-card .imageArea {
    display: block !important;
    aspect-ratio: unset !important;
}

commerce_search-product-card .imageArea a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0.25rem;
    cursor: pointer;
}

commerce_search-product-card .imageArea picture {
    overflow: hidden;
}

commerce_search-product-card .imageArea a figure.productImage {
    display: block !important;
    max-width: 100% !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    transform: unset !important;
    cursor: pointer !important;
}

commerce_search-product-card .imageArea a figure.productImage img {
    max-height: 20rem;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
}

commerce_search-product-card .imageArea a figure.productImage img[src*="default-product-image.svg"] {
    transform: scale(1.5);
}

@media (max-width: 1299.98px) {

    commerce_search-product-card .imageArea a figure.productImage img {
        max-height: none;
    }

}

@media (max-width: 574.98px) {

    commerce_search-product-card .imageArea a figure.productImage img {
        max-height: 30rem;
    }

}

/* Product card: Fields */

commerce_search-product-card .fieldsArea {
    width: 100%;
    padding-top: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

commerce_search-product-card .fieldsArea > a {
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-decoration: none !important;
    color: var(--ecomm-commerce-product-card-name-color, var(--dxp-g-root-contrast)) !important;
    transition: color 0.1s;

    &:hover, &:focus {
        color: var(--ecomm-commerce-product-card-name-color-hover, var(--dxp-g-brand-1)) !important;
    }
}

commerce_search-product-card .fieldsArea > a > div,
commerce_search-product-card .fieldsArea > a > div > commerce_search-product-field,
commerce_search-product-card .fieldsArea > a > div > commerce_search-product-field > div,
commerce_search-product-card .fieldsArea > a > div > commerce_search-product-field > div lightning-formatted-rich-text,
commerce_search-product-card .fieldsArea > a > div > commerce_search-product-field > div lightning-formatted-rich-text span {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    white-space: normal !important;
}

commerce_search-product-card .fieldsArea > a > div > commerce_search-product-field > div lightning-formatted-rich-text span {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow-y: hidden;
    word-break: break-word;
    white-space: pre-line;
}

/* Product card: Price */

commerce_search-product-card .priceArea {
    align-self: end !important;
    width: 100%;
    padding-top: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1.25rem !important;
}

commerce_search-product-card .priceArea .price-container-horizontal {
    grid-column-gap: 1rem;
    line-height: 1;
    flex-direction: row-reverse;
}

commerce_search-product-card .priceArea .price-container-horizontal > span {
    padding: 0;
}

commerce_search-product-card .priceArea .price-container-horizontal .original-price,
commerce_search-product-card .priceArea .price-container-horizontal .negotiated-price {
    font-size: 1rem;
    font-weight: 500 !important;
    line-height: 1.375rem;
}

commerce_search-product-card .priceArea .price-container-horizontal .original-price {
    font-weight: 400 !important;
    color: var(--ecomm-commerce-product-original-price-color, var(--dxp-g-root-2));
    text-decoration-color: var(--ecomm-commerce-product-original-price-color, var(--dxp-g-root-2));
    -webkit-text-decoration-color: var(--ecomm-commerce-product-original-price-color, var(--dxp-g-root-2));
}