/* ============================================
БЕЙДЖИКИ НА КАРТОЧКАХ ТОВАРОВ - СЛЕВА
ТОНКОЕ НАЧЕРТАНИЕ КАК В РАЗДЕЛАХ КАТАЛОГА
============================================ */
/* Делаем карточку относительной для позиционирования */
.t-store__card {
position: relative !important;
}
/* Контейнер бейджей - позиционируем слева */
.t-store__card .t-store__card__mark-wrapper {
position: absolute !important;
top: 12px !important;
left: 12px !important;
right: auto !important;
bottom: auto !important;
z-index: 10 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
pointer-events: none !important;
}
/* Сама метка - прямоугольная, тонкое начертание */
.t-store__card .t-store__card__mark-wrapper .t-store__card__mark,
.t-store__card .t-store__card__mark-wrapper .t-mark,
.t-store__card .t-store__card__mark-wrapper > div {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 5px 14px !important;
background-color: #222222 !important;
color: #ffffff !important;
/* ===== ТОНКОЕ НАЧЕРТАНИЕ ===== */
font-family: 'PTSANS', sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important; /* Regular, не жирный */
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.3 !important;
border-radius: 0 !important;
white-space: nowrap !important;
width: fit-content !important;
height: auto !important;
margin: 0 !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
}
/* ===== ЦВЕТА МЕТОК ===== */
/* Распродажа - красный */
.t-store__card .t-store__card__mark-wrapper .t-store__card__mark_sale,
.t-store__card .t-store__card__mark-wrapper .t-mark_sale {
background-color: #e74c3c !important;
color: #ffffff !important;
}
/* Новинка - зеленый */
.t-store__card .t-store__card__mark-wrapper .t-store__card__mark_new,
.t-store__card .t-store__card__mark-wrapper .t-mark_new {
background-color: #2ecc71 !important;
color: #ffffff !important;
}
/* Хит - оранжевый */
.t-store__card .t-store__card__mark-wrapper .t-store__card__mark_hit,
.t-store__card .t-store__card__mark-wrapper .t-mark_hit {
background-color: #f39c12 !important;
color: #ffffff !important;
}
/* Скидка - синий */
.t-store__card .t-store__card__mark-wrapper .t-store__card__mark_discount,
.t-store__card .t-store__card__mark-wrapper .t-mark_discount {
background-color: #3498db !important;
color: #ffffff !important;
}
/* Акция - фиолетовый */
.t-store__card .t-store__card__mark-wrapper .t-store__card__mark_action,
.t-store__card .t-store__card__mark-wrapper .t-mark_action {
background-color: #9b59b6 !important;
color: #ffffff !important;
}
/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media screen and (max-width: 480px) {
.t-store__card .t-store__card__mark-wrapper {
top: 8px !important;
left: 8px !important;
gap: 4px !important;
}
.t-store__card .t-store__card__mark-wrapper .t-store__card__mark,
.t-store__card .t-store__card__mark-wrapper .t-mark,
.t-store__card .t-store__card__mark-wrapper > div {
padding: 3px 10px !important;
font-size: 9px !important;
letter-spacing: 0.3px !important;
}
}
/* ===== ПЛАНШЕТ ===== */
@media screen and (max-width: 768px) {
.t-store__card .t-store__card__mark-wrapper {
top: 10px !important;
left: 10px !important;
}
.t-store__card .t-store__card__mark-wrapper .t-store__card__mark,
.t-store__card .t-store__card__mark-wrapper .t-mark,
.t-store__card .t-store__card__mark-wrapper > div {
padding: 4px 12px !important;
font-size: 10px !important;
}
}
/* ===== УБИРАЕМ СТАНДАРТНЫЕ СТИЛИ TILDA ===== */
.t-store__card .t-store__card__mark-wrapper .t-store__card__mark {
box-shadow: none !important;
border: none !important;
}