/* <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.2. Grid Column Spacing:    Small **HAS NO EFFECT**
        1.3. Grid Row Spacing:       Small **HAS NO EFFECT**

    2. RESULTS DISPLAY
        2.3. Card Border Radius:    8 **HAS NO EFFECT** Value returns without 'px'
*/

/* Product grid */

commerce_search-product-grid ul.product-grid-container {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

commerce_search-product-grid ul.product-grid-container li.grid-item {
    align-items: stretch;
}

commerce_search-product-grid ul.product-grid-container li.grid-item > section {
    margin: 0.75rem !important;
}

@media (max-width:574.98px) {

    commerce_search-product-grid ul.product-grid-container li.grid-item {
        flex-basis: 100% !important;
    }

    commerce_search-product-grid ul.product-grid-container li.grid-item > section {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

}

/* Product card */

commerce_search-product-card .cardContainerGrid {
    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-color-primary-01);
}

/* 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.2);
}

@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-color-black-01) !important;
    transition: color 0.1s;
}

commerce_search-product-card .fieldsArea > a:hover,
commerce_search-product-card .fieldsArea > a:focus {
    color: var(--ecomm-color-primary-01) !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;
    text-align: left;
    justify-content: flex-start;
}

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:last-child {
    grid-row: 3 / 5;
}

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: 400 !important;
    line-height: 1.375rem;
}

commerce_search-product-card .priceArea .price-container-horizontal .original-price {
    font-weight: 400 !important;
}

/* Product card: Action Button */

commerce_search-product-card .callToActionArea {
    width: 100%;
    padding: 0 1rem;
}

commerce_search-product-card .callToActionArea .callToActionButton {
    height: auto;
}

commerce_search-product-card .callToActionArea .slds-button {
    transition:
        color var(--ecomm-transition-color),
        border-color var(--ecomm-transition-border-color),
        background-color var(--ecomm-transition-background-color),
        box-shadow var(--ecomm-transition-box-shadow) !important;
}

commerce_search-product-card .callToActionArea .slds-button:disabled {
    color: var(--ecomm-button-brand-disabled-color) !important;
    border-color: var(--ecomm-button-brand-disabled-border-color) !important;
    background-color: var(--ecomm-button-brand-disabled-background-color) !important;
}

@media (min-width: 575px) {

    commerce_search-product-card .callToActionArea {
        justify-content: flex-start !important;
    }

    commerce_search-product-card .callToActionArea .slds-button {
        padding-top: var(--ecomm-button-small-padding-top);
        padding-bottom: var(--ecomm-button-small-padding-bottom);
        padding-left: var(--ecomm-button-small-padding-left);
        padding-right: var(--ecomm-button-small-padding-right);
        font-size: var(--ecomm-button-small-font-size);
        line-height: 1.5rem;
        border-radius: var(--ecomm-button-small-border-radius);
    }

}

@media (max-width: 574.98px) {

    commerce_search-product-card .callToActionArea,
    commerce_search-product-card .callToActionArea > div,
    commerce_search-product-card .callToActionArea .callToActionButton,
    commerce_search-product-card .callToActionArea .slds-button {
        width: 100% !important;
    }

}