/* ============================================ БЕЙДЖИКИ НА КАРТОЧКАХ ТОВАРОВ - СЛЕВА ТОНКОЕ НАЧЕРТАНИЕ КАК В РАЗДЕЛАХ КАТАЛОГА ============================================ */ /* Делаем карточку относительной для позиционирования */ .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; }