/* The supplied card is shared by home shelves, catalog grids and related products. */
.sf-product.product-card-frame {
    position: relative;
    display: block;
    width: 300px;
    max-width: 100%;
    min-width: 0;
    padding: 18px;
    background: #dededf;
    border: 0;
    border-radius: 32px;
    box-shadow: none;
    overflow: visible;
    color: #1a1a1a;
    isolation: isolate;
    align-self: start;
}
.product-card-frame .product-card-wrap { position: relative; }
.product-card-frame .product-card {
    display: block;
    background: #fff;
    color: #1a1a1a;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
.product-card-frame .product-card__img-wrap {
    position: relative;
    height: 175px;
    margin: 10px;
    border-radius: 14px;
    overflow: hidden;
    background: #f2f2ee;
}
.product-card-frame .product-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-card-frame .product-card__body { padding: 8px 12px 0; }
.product-card-frame .product-card__name {
    display: block;
    min-height: 0;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.85;
    color: #1a1a1a;
    text-align: right;
    overflow-wrap: anywhere;
}
.product-card-frame .product-card__desc { margin: 0; font-size: 11px; color: #b0b0b0; line-height: 1.8; text-align: right; overflow-wrap: anywhere; }
.product-card-frame .product-card__footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 14px; }
.product-card-frame .product-card__btn-placeholder { width: 52px; flex-shrink: 0; }
.product-card-frame .product-card__price { min-width: 0; text-align: right; }
.product-card-frame .product-card__price-label { display: block; margin-bottom: 2px; font-size: 10px; color: #c0c0c0; }
.product-card-frame .product-card__price-value { max-width: 100%; font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.85; overflow-wrap: anywhere; }
.product-card-frame .product-card__price-value small { margin-right: 2px; font-size: 10px; font-weight: 400; color: #a0a0a0; }
.product-card-frame .product-card__price-value--original { color: #b0b0b0; font-size: 12px; text-decoration: line-through; }
.product-card-frame .product-card__stock-note { font-size: 11px; color: #a0a0a0; }
.product-card-frame .product-card__unavailable { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 8px; background: #fff; color: #777; font-size: 10px; }
.product-card-frame .product-card-wrap::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 66px;
    height: 66px;
    background: #dededf;
    border-radius: 0 18px 0 20px;
    z-index: 2;
    pointer-events: none;
}
.product-card-frame .product-card-wrap__concave-top {
    position: absolute;
    bottom: 66px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 0 0 0 18px;
    box-shadow: -9px 9px 0 9px #dededf;
    z-index: 2;
    pointer-events: none;
}
.product-card-frame .product-card-wrap__concave-right {
    position: absolute;
    bottom: 0;
    left: 66px;
    width: 18px;
    height: 18px;
    border-radius: 0 0 0 18px;
    box-shadow: -9px 9px 0 9px #dededf;
    z-index: 2;
    pointer-events: none;
}
.product-card-frame .product-card-wrap__add-btn {
    position: absolute;
    bottom: 9px;
    left: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: #fff;
    color: #1a1a1a;
    text-decoration: none;
    cursor: pointer;
    z-index: 3;
    transition: transform .1s, box-shadow .15s;
}
.product-card-frame .product-card-wrap__add-btn:hover { box-shadow: 0 3px 12px #00000012; }
.product-card-frame .product-card-wrap__add-btn:active { transform: scale(.94); }
.product-card-frame .product-card-wrap__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.product-card-frame .product-card-wrap__icon > svg { color: #1a1a1a; }
.product-card-frame .product-card-wrap__icon-badge {
    position: absolute;
    bottom: -3px;
    right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
}
.product-card-frame :is(.product-card, .product-card-wrap__add-btn):focus-visible { outline: 2px solid #1a1a1a; outline-offset: 4px; }
.sf-product-rail, .sf-shelf--deals .sf-product-rail { grid-auto-columns: min(300px, 100%); gap: 16px; }
.sf-product-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.product-card-slider .product-card-slide { width: 300px; height: auto; }
.product-card-slider .product-card-frame { width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .product-card-frame :is(.product-card, .product-card-wrap__add-btn) { transition: none; }
    .product-card-frame .product-card-wrap__add-btn:active { transform: none; }
}