/* ==========================================================
   ПРЕМИУМ-КНОПКИ ДЛЯ КАТАЛОГА ТИЛЬДЫ (ЭФФЕКТ УГОЛКОВ)
   ========================================================== */

/* 1. Глобальный сброс: убираем родные стили Тильды для ВСЕХ кнопок магазина */
.t-store__card__btn,
.t-store__prod-popup__btn,
.js-store-prod-btn {
    position: relative !important;
    background-color: transparent !important;
    color: #111111 !important; /* Цвет текста в покое */
    border: none !important;
    border-radius: 0 !important; /* Убираем скругления */
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    z-index: 1;
    overflow: visible !important;
}

/* 2. Делаем шрифт изящным (тонкий, капс, с расстановкой) */
.t-store__card__btn .t-btnflex__text,
.t-store__prod-popup__btn .t-btnflex__text,
.js-store-prod-btn .t-btnflex__text {
    font-weight: 300 !important; /* Тонкое начертание */
    letter-spacing: 2px !important; /* Воздух между буквами */
    text-transform: uppercase !important;
    font-size: 14px !important;
}

/* 3. Убиваем стандартную иконку корзины */
.t-store__card__btn .t-btnflex__icon,
.t-store__prod-popup__btn .t-btnflex__icon {
    display: none !important;
}

/* 4. Рисуем те самые "уголки" через псевдоэлемент ::before */
.t-store__card__btn::before,
.t-store__prod-popup__btn::before,
.js-store-prod-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    transition: all 0.3s ease !important;

    background-image:
        linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);

    background-size:
        1px 12px, 32% 1px, 
        1px 12px, 32% 1px, 
        1px 12px, 32% 1px, 
        1px 12px, 32% 1px; 

    background-position:
        0 0, 0 0,               
        100% 0, 100% 0,         
        0 100%, 0 100%,         
        100% 100%, 100% 100%;   

    background-repeat: no-repeat;
}

/* ==========================================================
   МАГИЯ ПРИ НАВЕДЕНИИ МЫШИ (HOVER) 
   ========================================================== */

.t-store__card__btn:hover,
.t-store__prod-popup__btn:hover,
.js-store-prod-btn:hover {
    background-color: #000000 !important; 
    color: #ffffff !important;            
}

.t-store__card__btn:hover::before,
.t-store__prod-popup__btn:hover::before,
.js-store-prod-btn:hover::before {
    top: 6px; 
    left: 6px; 
    right: 6px; 
    bottom: 6px;
}

/* ==========================================================
   НОВОЕ: СОСТОЯНИЕ "УЖЕ В КОРЗИНЕ"
   ========================================================== */

/* Делаем кнопку сплошной черной (как при hover) */
.t-store__card__btn.is-in-cart,
.t-store__prod-popup__btn.is-in-cart,
.js-store-prod-btn.is-in-cart {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Прячем уголки, чтобы кнопка выглядела монолитно */
.t-store__card__btn.is-in-cart::before,
.t-store__prod-popup__btn.is-in-cart::before,
.js-store-prod-btn.is-in-cart::before {
    display: none !important;
}

/* Плавно скрываем родное слово "КУПИТЬ" */
.is-in-cart .t-btnflex__text {
    font-size: 0 !important;
}

/* Пишем новое слово "УЖЕ В КОРЗИНЕ" */
.is-in-cart .t-btnflex__text::after {
    content: "УЖЕ В КОРЗИНЕ";
    font-size: 14px !important;
    letter-spacing: 2px !important;
    color: #ffffff !important;
}
</style>