/* =========================================
   SOLD OUT — надпись под товаром
   ========================================= */

.t-store__card__sold-out-msg {
    visibility: hidden;
}

.t-store__card__sold-out-msg::after {
    content: "SOLD OUT";
    visibility: visible;
    display: block;
}


/* =========================================
   SOLD OUT — кнопка на странице товара
   ========================================= */

.t-store__prod-popup__btn_disabled .js-store-prod-popup-buy-btn-txt {
    font-size: 0 !important;
}

.t-store__prod-popup__btn_disabled .js-store-prod-popup-buy-btn-txt::after {
    content: "SOLD OUT";
    font-size: 14px !important;
}


/* =========================================
   SOLD OUT — визуально выделяем картинку
   ========================================= */

/* Немного обесцвечиваем и затемняем только
   изображения товаров, у которых SOLD OUT */

.t-store__card:has(.t-store__card__sold-out-msg) .t-store__card__imgwrapper {
    filter: grayscale(45%);
    opacity: 0.72;
}


/* Делаем контейнер относительно позиционированным,
   чтобы разместить над ним надпись */

.t-store__card:has(.t-store__card__sold-out-msg) .t-store__card__imgwrapper {
    position: relative;
}


/* Большая надпись поверх изображения */

.t-store__card:has(.t-store__card__sold-out-msg) .t-store__card__imgwrapper::after {
    content: "SOLD OUT";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);

    padding: 8px 18px;

    border: 2px solid #000;
    background: rgba(255, 255, 255, 0.88);

    color: #000;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;

    z-index: 10;
    pointer-events: none;