/* <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;
    transition: border-color 0.1s;
}

commerce_search-product-card .cardContainerGrid:hover {
    border-color: var(--ecomm-color-secondary-02);
}

/* 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 {
    position: relative;
    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:has(img[src*="default-product-image.svg"]) experience-picture {
    opacity: 0;
}


commerce_search-product-card .imageArea a figure.productImage:has(img[src*="default-product-image.svg"])::after {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 143' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37.1027 59.5577H143.31C147.005 59.5577 150 62.553 150 66.2479V135.659C150 139.354 147.005 142.349 143.31 142.349H37.1027C33.4078 142.349 30.4124 139.354 30.4124 135.659V66.2479C30.4124 62.553 33.4078 59.5577 37.1027 59.5577ZM46.3017 127.296H135.783V103.058L124.856 78.792L99.9469 88.3917L80.6025 107.95L60.0355 82.1553L46.3017 114.492V127.296ZM69.0875 46.1773H24.5585C20.8636 46.1773 17.8683 49.1726 17.8683 52.8675V93.2844L0.40529 45.3052C-0.858441 41.8331 0.931774 37.994 4.40385 36.7303L104.206 0.40529C107.678 -0.858441 111.517 0.931774 112.781 4.40385L127.985 46.1773H112.118L110.51 41.7599L91.9423 22.6947L71.819 40.2347L69.0875 46.1773Z' fill='%234D5963'%3E%3C/path%3E%3C/svg%3E");
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 3.75rem;
    min-width: 3.75rem;
    height: 3.574375rem;
    transform: translate(-50%, -50%);
}

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

commerce_search-product-card .fieldsArea > a:hover,
commerce_search-product-card .fieldsArea > a:focus {
    color: var(--ecomm-color-secondary-02) !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 !important;
    font-size: 1.125rem !important;
}

/* Product card: Price */

commerce_search-product-card .priceArea {
    justify-content: center !important;
    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;
}

commerce_search-product-card .priceArea:has(.price-unavailable) {
    padding-top: 0 !important;
}

commerce_search-product-card .priceArea .price-unavailable {
    display: none;
}