/* <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 */

commerce_builder-search-results-layout .header-container {
    margin-top: 0.1825rem;
}

commerce_builder-search-results-layout .search-header .textBlock_desktopTabletMobile {
    font-size: 1.125rem;
    font-weight: 600;
}

commerce_builder-search-results-layout .sorting-menu {
    padding-right: 0 !important;
}

commerce_builder-search-results-layout .category-header {
    padding-bottom: 0 !important;
}

/* Product grid */

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

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

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

/* Product card. Grid view */

commerce_search-product-card.card-item .cardContainerGrid {
    grid-template-rows: auto auto 1fr auto;
    border-radius: 0.5rem;
    padding-bottom: 1rem;
    border-width: 1px;
}

commerce_search-product-card.card-item .cardContainerGrid:hover {
    border-color: var(--ecomm-color-primary-green);
}

commerce_search-product-card.card-item .imageArea {
    max-width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    aspect-ratio: 4 / 3;
    background-color: var(--ecomm-color-background);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

commerce_search-product-card.card-item .imageArea > a {
    width: 100%;
    height: 100%;
}

commerce_search-product-card.card-item .imageArea .productImage {
    position: static !important;
    display: block;
    padding-top: 0 !important;
    background: transparent;
    margin-right: 0;
    transform: none;
}

commerce_search-product-card.card-item .imageArea .productImage:has(img[src$="default-product-image.svg"]) picture {
    display: flex;
    justify-content: center;
    align-items: center;
}

commerce_search-product-card.card-item .imageArea .productImage img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

commerce_search-product-card.card-item .imageArea .productImage img[src$="default-product-image.svg"] {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 143' xmlns='http://www.w3.org/2000/svg' fill='%23CBD6DF'%3E%3Cpath c-ecommProductImage_ecommProductImage='' 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'%3E%3C/path%3E%3C/svg%3E");
    width: 3rem;
    height: 3rem;
}

commerce_search-product-card.card-item .fieldsArea {
    margin-top: 1rem;
}

commerce_search-product-card.card-item .fieldsArea a {
    text-decoration: none;
}

commerce_search-product-card.card-item .fieldsArea a div:first-child commerce_search-product-field > div {
    font-size: 1.125rem !important;
    white-space: normal !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-y: hidden;
}

@media (hover: none) {

    commerce_search-product-card.card-item .fieldsArea a div:first-child commerce_search-product-field > div {
        -webkit-line-clamp: initial;
    }

}

commerce_search-product-card.card-item .fieldsArea a div:first-child commerce_search-product-field > div:hover {
    color: var(--ecomm-color-primary-green, #238963);
}

commerce_search-product-card.card-item .fieldsArea a div:not(:first-child) commerce_search-product-field > div {
    font-size: 0.875rem !important;
}

commerce_search-product-card.card-item .quantityRuleArea {
    margin-top: 0.75rem;
}

commerce_search-product-card.card-item .priceArea {
    align-self: end !important;
    margin-top: 1.25rem;
}

commerce_search-product-card.card-item .price-container {
    align-items: self-end;
}

commerce_search-product-card.card-item .price-container > span:first-child {
    order: 1;
}

commerce_search-product-card.card-item .negotiated-price.price-label {
    font-size: 1rem;
    font-weight: 400;
}

commerce_search-product-card.card-item .original-price.price-label {
    font-size: 0.875rem;
    font-weight: 400;
}

commerce_search-product-card.card-item .callToActionArea {
    margin-top: 1.25rem;
    margin-bottom: 0.25rem !important;
}

commerce_search-product-card.card-item .callToActionArea,
commerce_search-product-card.card-item .callToActionArea > div,
commerce_search-product-card.card-item .callToActionArea commerce-action-link,
commerce_search-product-card.card-item .callToActionArea :is(commerce-action-button, commerce-action-link) :is(button, a) {
    width: 100%;
}

commerce_search-product-card.card-item .callToActionArea .quantitySelectorContainer {
    align-items: flex-start;
}

commerce_search-product-card.card-item .callToActionArea commerce-quantity-selector {
    margin-bottom: 1.5rem;
}

commerce_search-product-card.card-item .callToActionArea commerce-quantity-selector-popover {
    margin-right: 0.25rem;
    position: relative;
    bottom: 0.0625rem;
}

commerce_search-product-card.card-item .callToActionArea commerce-quantity-selector-popover slot[name="source"] button {
    color: var(--ecomm-color-primary-orange);
}

commerce_search-product-card.card-item .callToActionArea commerce-quantity-selector-popover button,
commerce_search-product-card.card-item .callToActionArea commerce-quantity-selector-popover lightning-popup button {
    box-shadow: none;
}

commerce_search-product-card.card-item .callToActionArea commerce-quantity-selector-popover lightning-bubble > section {
    border-color: var(--ecomm-color-divider);
}

commerce_search-product-card.card-item .callToActionArea commerce-number-input button {
    width: 1.25rem;
}

commerce_search-product-card.card-item .callToActionArea commerce-number-input button > lightning-icon {
    transform: scale(0.8);
}

commerce_search-product-card.card-item .callToActionArea commerce-number-input input {
    width: 2.75rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

commerce_search-product-card.card-item .callToActionArea commerce-action-button.callToActionButton,
commerce_search-product-card.card-item .callToActionArea commerce-action-link {
    height: 2.25rem;
    width: 100%;
}

commerce_search-product-card.card-item .callToActionArea commerce-action-button:has(button[disabled]) {
    pointer-events: none;
}

commerce_search-product-card.card-item .callToActionArea :is(commerce-action-button, commerce-action-link) :is(button, a) {
    padding: 0.3125rem 1rem;
    padding-right: 1rem;
    font-size: 1rem;
    color: var(--ecomm-color-primary-green, #238963) !important;
    border-color: var(--ecomm-color-primary-green, #238963) !important;
    background-color: var(--ecomm-color-white, #FFFFFF) !important;
}

commerce_search-product-card.card-item .callToActionArea :is(commerce-action-button, commerce-action-link) :is(button, a):hover {
    color: var(--ecomm-color-white, #FFFFFF) !important;
    border-color: var(--ecomm-color-green-hover, #238963) !important;
    background-color: var(--ecomm-color-green-hover, #238963) !important;
}

commerce_search-product-card.card-item .callToActionArea :is(commerce-action-button, commerce-action-link) :is(button, a):disabled,
commerce_search-product-card.card-item .callToActionArea :is(commerce-action-button, commerce-action-link) :is(button, a)[disabled="true"] {
    color: var(--ecomm-color-button-text-disabled, #BBBBBB) !important;
    border-color: var(--ecomm-color-button-border-disabled, #E1E1E1) !important;
    background-color: var(--ecomm-color-white, #FFFFFF) !important;
}

commerce_search-product-card.card-item .callToActionArea a.slds-button_outline-brand:is(:hover, :focus, :active) {
    background-color: var(--ecomm-color-orange-hover);
    border-color: var(--ecomm-color-orange-hover);
}

@media screen and (min-width: 1024px) and (max-width: 1199.98px), screen and (min-width: 640px) and (max-width: 768.98px) {

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

}

@media screen and (max-width: 1024.98px) {

    commerce_builder-search-results-layout .header-container {
        padding-right: 0 !important;
    }

}

@media screen and (min-width: 480px) and (max-width: 639.98px) {

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

    commerce_search-product-card.card-item .callToActionArea commerce-number-input button {
        width: 1.75rem;
    }

}

@media screen and (max-width: 479.98px) {

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

    commerce_search-product-card.card-item .callToActionArea commerce-number-input input {
        width: 4rem;
    }

    commerce_search-product-card.card-item .callToActionArea commerce-number-input button {
        width: 2.5rem;
    }

}

/* Product card. List view changes */

commerce_search-product-grid:has(.cardContainerList) > ul > li {
    margin-left: 1.75rem;
    border-bottom-color: var(--ecomm-color-divider) !important;
}

commerce_search-product-card.card-item .cardContainerList .imageArea {
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: auto;
}

commerce_search-product-card.card-item .cardContainerList .imageArea > a {
    display: flex;
    justify-content: center;
    align-items: center;
}

commerce_search-product-card.card-item .cardContainerList .imageArea .productImage {
    padding-left: 0 !important;
}

commerce_search-product-card.card-item .cardContainerList .fieldsArea {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-top: 0 !important;
}

commerce_search-product-card.card-item .cardContainerList .quantityRuleArea {
    width: 12rem;
}

commerce_search-product-card.card-item .cardContainerList .quantitySelectorContainer {
    flex-direction: column;
}

@media screen and (max-width: 1024.98px) {

    commerce_search-product-grid:has(.cardContainerList) > ul > li {
        margin-left: 0;
    }

}

@media screen and (max-width: 767.98px) {

    commerce_search-product-card.card-item .cardContainerList .priceArea {
        margin-left: 1rem !important;
    }

    commerce_search-product-card.card-item .cardContainerList .priceArea .price-container {
        justify-content: flex-start;
    }

    commerce_search-product-card.card-item .cardContainerList .quantityRuleArea {
        margin-left: 1rem !important;
        width: auto;
    }

    commerce_search-product-card.card-item .cardContainerList .quantitySelectorContainer {
        align-items: center;
    }

    commerce_search-product-card.card-item .cardContainerList .callToActionArea {
        margin-top: 1rem !important;
    }

}