:host {
    --ref-c-search-product-field-align-self: var(--ref-c-search-product-card-content-align-self, auto);
    --ref-c-search-product-field-justify-self: var(--ref-c-search-product-card-content-justify-self, auto);
    --ref-c-search-product-field-padding: var(--ref-c-search-product-card-content-padding, 0);
}
.productImage {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.75);
    display: contents;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.productName {
    cursor: pointer;
    padding: 0.3125rem;
}
.cardContainerList,
.cardContainerGrid {
    background-color: var(--ref-c-search-product-card-container-color-background, inherit);
    border-color: var(--ref-c-search-product-card-container-color-border, transparent);
    border-radius: var(--ref-c-search-product-card-container-radius-border, 0);
    height: var(--ref-c-search-product-card-container-height, auto);
    padding: var(--ref-c-search-product-card-container-padding, 0);
}
.cardContainerList .priceArea,
.cardContainerGrid .priceArea {
    align-self: var(--ref-c-search-product-card-content-align-self, auto);
    justify-self: var(--ref-c-search-product-card-content-justify-self, auto);
    padding: var(--ref-c-search-product-card-content-padding, 0);
}
.cardContainerList {
    display: grid;
    padding-right: 0.5rem;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    overflow: hidden;
    grid-template-columns: var(--ref-c-search-product-card-container-grid-template-columns, min-content 3fr 1fr);
    grid-template-areas: var(
        --ref-c-search-product-card-container-grid-template-areas,
        'imageArea fieldsArea fieldsArea subscriptionArea' 'imageArea fieldsArea fieldsArea priceArea'
            'imageArea fieldsArea fieldsArea quantityRuleArea' 'imageArea fieldsArea fieldsArea callToActionArea'
    );
    flex-grow: 1;
}
.cardContainerList .productImage {
    min-height: 6.25rem;
    max-height: 8.75rem;
    align-self: var(--ref-c-search-product-card-content-align-self, center);
    justify-self: var(--ref-c-search-product-card-content-justify-self, auto);
    position: relative;
    padding-left: 100%;
    height: 100%;
}
.cardContainerList .imageArea {
    min-width: 8.75rem;
}
.cardContainerList aside {
    align-self: center;
}
.cardContainerList a {
    padding: 0;
    text-decoration: none;
}
.cardContainerList .fieldsArea {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}
.cardContainerList .priceArea {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.cardContainerList .subscriptionArea {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: var(--dxp-g-spacing-xsmall);
    margin-bottom: var(--dxp-g-spacing-xsmall);
}
.cardContainerList .quantityRuleArea {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: var(--dxp-g-spacing-xsmall);
}
.imageArea {
    display: grid;
    grid-area: imageArea;
    align-items: end;
    --com-c-image-width-mobile: var(--ref-c-search-product-card-image-width-mobile, 300);
    --com-c-image-width-tablet: var(--ref-c-search-product-card-image-width-tablet, 130);
    --com-c-image-width-desktop: var(--ref-c-search-product-card-image-width-desktop, 330);
}
.fieldsArea {
    display: grid;
    grid-area: fieldsArea;
}
.quantityRuleArea {
    display: grid;
    word-break: break-word;
    grid-area: quantityRuleArea;
}
.callToActionArea {
    display: flex;
    grid-area: callToActionArea;
    justify-self: center;
}
.callToActionButton {
    height: 2.5rem;
}
.cardContainerGrid {
    display: grid;
    border-width: var(--sds-c-card-sizing-border);
    padding: 0 0.75rem;
    border-style: solid;
    overflow: hidden;
    grid-template-rows: var(
        --ref-c-search-product-card-container-grid-template-rows,
        min-content min-content min-content auto min-content min-content
    );
    grid-template-areas: var(
        --ref-c-search-product-card-container-grid-template-areas,
        'imageArea' 'fieldsArea' 'subscriptionArea' 'priceArea' 'quantityRuleArea' 'callToActionArea'
    );
    flex-grow: 1;
}
.cardContainerGrid .productImage {
    position: relative;
    padding-top: 100%;
    width: 100%;
    align-self: var(--ref-c-search-product-card-content-align-self, auto);
    justify-self: var(--ref-c-search-product-card-content-justify-self, auto);
}
.cardContainerGrid .callToActionArea {
    margin-bottom: 1.25rem;
    justify-content: center;
    align-items: center;
}
.cardContainerGrid .priceArea {
    align-self: start;
}
.cardContainerGrid .subscriptionArea {
    justify-self: center;
    margin-top: var(--dxp-g-spacing-xsmall);
    margin-bottom: var(--dxp-g-spacing-xsmall);
}
.cardContainerGrid .quantityRuleArea {
    justify-self: center;
    margin-bottom: var(--dxp-g-spacing-xsmall);
}
.cardContainerList .callToActionArea {
    justify-self: end;
}
.quantitySelectorContainer {
    display: flex;
}
.stacked {
    flex-direction: column;
    align-items: center;
}
@media only screen and (max-width: 47.9375em) {
    .cardContainerList {
        margin-left: 0;
        margin-right: 0;
        grid-template-areas: var(
            --ref-c-search-product-card-container-grid-template-areas,
            'imageArea fieldsArea fieldsArea' 'imageArea subscriptionArea subscriptionArea'
                'imageArea priceArea priceArea' 'imageArea quantityRuleArea quantityRuleArea'
                'callToActionArea callToActionArea callToActionArea'
        );
    }
    .cardContainerList .productImage {
        max-height: 6.25rem;
        min-width: 6.25rem;
    }
    .cardContainerList .callToActionArea {
        justify-content: center;
        margin-top: 0.5rem;
        width: 100%;
    }
    .cardContainerList .subscriptionArea {
        display: block;
        margin-left: var(--dxp-g-spacing-xsmall);
    }
    .cardContainerList .priceArea {
        display: block;
        margin-left: 0.5rem;
    }
    .cardContainerList .quantityRuleArea {
        display: block;
        margin-left: var(--dxp-g-spacing-xsmall);
    }
}
