/* ═══════════════════════════════════════════════════════ PREMIUM CATALOG BLACK / RED ═══════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────── 1. КОНТЕЙНЕР КАТАЛОГА ───────────────────────────────────────────────────── */ .js-catalog-grid-cont { background: #f5f5f5 !important; padding: 24px 10px 40px !important; } /* ───────────────────────────────────────────────────── 2. КАРТОЧКА ТОВАРА ───────────────────────────────────────────────────── */ .t-catalog__card { position: relative !important; background: #161616 !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 14px !important; padding: 10px !important; margin-bottom: 16px !important; overflow: hidden !important; box-sizing: border-box !important; box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important; transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s cubic-bezier(0.22,1,0.36,1), border-color 0.45s ease; } /* ───────────────────────────────────────────────────── 3. HOVER КАРТОЧКИ ───────────────────────────────────────────────────── */ @media (min-width: 768px) { .t-catalog__card:hover { transform: translateY(-5px) !important; border-color: #991b1b !important; box-shadow: 0 24px 48px -12px rgba(0,0,0,0.65), 0 0 0 1px rgba(153,27,27,0.45), 0 0 55px -20px rgba(220,38,38,0.25) !important; } } /* ───────────────────────────────────────────────────── 4. ИЗОБРАЖЕНИЕ ───────────────────────────────────────────────────── */ .t-catalog__card__imgwrapper { position: relative !important; width: 100% !important; border-radius: 10px !important; overflow: hidden !important; background: #111111 !important; } /* затемнение картинки */ .t-catalog__card__imgwrapper::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(10,10,10,0.02) 0%, rgba(10,10,10,0.08) 60%, rgba(10,10,10,0.35) 100% ); opacity: 0.8; transition: opacity 0.5s ease; } /* сама картинка */ .t-catalog__card__imgwrapper img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; filter: brightness(0.94) saturate(0.9); transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), filter 0.5s ease; } /* hover картинки */ @media (min-width: 768px) { .t-catalog__card:hover .t-catalog__card__imgwrapper img { transform: scale(1.045) !important; filter: brightness(0.86) saturate(1); } .t-catalog__card:hover .t-catalog__card__imgwrapper::after { opacity: 0.55; } } /* ═══════════════════════════════════════════════════════ 5. БЕЙДЖ «РАСПРОДАЖА» КОМПАКТНАЯ ГОРИЗОНТАЛЬНАЯ ПЛАШКА ═══════════════════════════════════════════════════════ */ .t-catalog__card__mark-wrapper { position: absolute !important; top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important; z-index: 20 !important; width: auto !important; height: auto !important; max-width: calc(100% - 20px) !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .t-catalog__card__mark { display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: top !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 5px 9px !important; box-sizing: border-box !important; border: none !important; border-radius: 5px !important; background: #dc2626 !important; color: #ffffff !important; font-family: 'Inter', Arial, sans-serif !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.055em !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; box-shadow: 0 4px 12px rgba(220,38,38,0.22) !important; transform: none !important; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important; } /* hover бейджа */ @media (min-width: 768px) { .t-catalog__card:hover .t-catalog__card__mark { background: #e03131 !important; box-shadow: 0 6px 18px rgba(220,38,38,0.35) !important; transform: translateY(-1px) !important; } } /* ───────────────────────────────────────────────────── 6. НАЗВАНИЕ ТОВАРА ───────────────────────────────────────────────────── */ .js-product-name { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; font-family: 'Inter', Arial, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; color: #f0f0f0 !important; margin-top: 10px !important; margin-bottom: 8px !important; transition: color 0.3s ease; } .t-catalog__card:hover .js-product-name { color: #ffffff !important; } /* ───────────────────────────────────────────────────── 7. БЛОК ЦЕНЫ ───────────────────────────────────────────────────── */ .js-catalog-price-wrapper { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 7px 10px !important; width: 100% !important; max-width: 100% !important; margin-top: 3px !important; box-sizing: border-box !important; } /* ───────────────────────────────────────────────────── 8. АКТУАЛЬНАЯ ЦЕНА ───────────────────────────────────────────────────── */ .t-catalog__card__price .t-catalog__card__price-value { font-family: 'Inter', Arial, sans-serif !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1 !important; color: #dc2626 !important; } .t-catalog__card__price .t-catalog__card__price-currency { font-family: 'Inter', Arial, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; color: #dc2626 !important; } /* ───────────────────────────────────────────────────── 9. СТАРАЯ ЦЕНА ───────────────────────────────────────────────────── */ .t-catalog__card__price_old .t-catalog__card__price-value, .t-catalog__card__price_old .t-catalog__card__price-currency { color: #777777 !important; font-size: 14px !important; font-weight: 400 !important; text-decoration: line-through !important; text-decoration-color: #991b1b !important; text-decoration-thickness: 1px !important; } /* ───────────────────────────────────────────────────── 10. ССЫЛКИ ───────────────────────────────────────────────────── */ .t-catalog__card a { text-decoration: none !important; } /* ───────────────────────────────────────────────────── 11. КРАСНЫЙ АКЦЕНТ СНИЗУ ───────────────────────────────────────────────────── */ .t-catalog__card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #dc2626; transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); z-index: 10; pointer-events: none; } @media (min-width: 768px) { .t-catalog__card:hover::after { transform: scaleX(1); } } /* ───────────────────────────────────────────────────── 12. КРАСНАЯ ПОДСВЕТКА ───────────────────────────────────────────────────── */ .t-catalog__card::before { content: ""; position: absolute; width: 180px; height: 180px; left: 50%; bottom: -100px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient( circle, rgba(220,38,38,0.16) 0%, transparent 70% ); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; z-index: 1; } @media (min-width: 768px) { .t-catalog__card:hover::before { opacity: 1; } } /* ═══════════════════════════════════════════════════════ 13. МОБИЛЬНАЯ ВЕРСИЯ ═══════════════════════════════════════════════════════ */ @media (max-width: 767px) { .js-catalog-grid-cont { padding: 16px 6px 30px !important; } .t-catalog__card { padding: 8px !important; border-radius: 12px !important; margin-bottom: 12px !important; } .t-catalog__card__imgwrapper { border-radius: 9px !important; } /* ───────── БЕЙДЖ ───────── */ .t-catalog__card__mark-wrapper { top: 6px !important; left: 6px !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important; max-width: calc(100% - 12px) !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } .t-catalog__card__mark { display: inline-flex !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; padding: 4px 7px !important; font-size: 7px !important; line-height: 1 !important; letter-spacing: 0.035em !important; border-radius: 4px !important; white-space: nowrap !important; box-shadow: 0 3px 10px rgba(220,38,38,0.20) !important; transform: none !important; } .js-product-name { font-size: 14px !important; margin-top: 9px !important; margin-bottom: 7px !important; } .t-catalog__card__price .t-catalog__card__price-value { font-size: 18px !important; } .t-catalog__card__price .t-catalog__card__price-currency { font-size: 14px !important; } } /* ═══════════════════════════════════════════════════════ 14. ЭКРАН ДО 480 PX ═══════════════════════════════════════════════════════ */ @media (max-width: 480px) { .t-catalog__card { padding: 7px !important; border-radius: 11px !important; } .t-catalog__card__mark-wrapper { top: 5px !important; left: 5px !important; max-width: calc(100% - 10px) !important; } .t-catalog__card__mark { padding: 3px 6px !important; font-size: 6.5px !important; line-height: 1 !important; letter-spacing: 0.025em !important; border-radius: 4px !important; min-width: 0 !important; min-height: 0 !important; } .js-product-name { font-size: 13px !important; } .t-catalog__card__price .t-catalog__card__price-value { font-size: 17px !important; } .t-catalog__card__price .t-catalog__card__price-currency { font-size: 13px !important; } } /* ═══════════════════════════════════════════════════════ 15. ЭКРАН ДО 375 PX ═══════════════════════════════════════════════════════ */ @media (max-width: 375px) { .t-catalog__card { padding: 6px !important; } .t-catalog__card__mark-wrapper { top: 5px !important; left: 5px !important; } .t-catalog__card__mark { padding: 3px 5px !important; font-size: 6px !important; line-height: 1 !important; letter-spacing: 0.015em !important; border-radius: 3px !important; } .js-product-name { font-size: 12.5px !important; } .t-catalog__card__price .t-catalog__card__price-value { font-size: 16px !important; } } /* ───────────────────────────────────────────────────── 16. УБИРАЕМ ЛИШНИЕ ТЕНИ TILDA ───────────────────────────────────────────────────── */ .t-catalog__card__imgwrapper, .t-catalog__card__imgwrapper img { box-shadow: none !important; } /* ═══════════════════════════════════════════════════════ 17. REDUCED MOTION ═══════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .t-catalog__card, .t-catalog__card::before, .t-catalog__card::after, .t-catalog__card__imgwrapper img, .t-catalog__card__mark { transition: none !important; } .t-catalog__card:hover { transform: none !important; } .t-catalog__card:hover .t-catalog__card__imgwrapper img { transform: none !important; } .t-catalog__card:hover .t-catalog__card__mark { transform: none !important; } } /* ───────────────────────────────────────────────────── ЧЕРНО-КРАСНАЯ КНОПКА "ЗАГРУЗИТЬ ЕЩЁ" — БЕЗ ФОНА И СТРЕЛКИ ═══════════════════════════════════════════════════════ */ /* ─── КОНТЕЙНЕР КНОПКИ ─── */ .t-catalog__load-more-btn-wrap { padding-top: 35px !important; padding-bottom: 15px !important; } /* ─── КНОПКА ─── */ .t-catalog__load-more-btn { background: transparent !important; /* БЕЗ ФОНА */ border: 1px solid rgba(180, 30, 30, 0.35) !important; /* Приглушенная красная рамка */ border-radius: 50px !important; padding: 16px 50px !important; color: #b01a1a !important; /* Приглушенный красный текст */ font-family: 'Inter', 'Arial', sans-serif !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important; position: relative; min-width: 200px; box-shadow: none !important; } /* ─── ТЕКСТ КНОПКИ ─── */ .t-catalog__load-more-btn .t-btnflex__text { color: #b01a1a !important; /* Приглушенный красный */ transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1); position: relative; z-index: 2; } /* ─── HOVER (ДЕСКТОП) ─── */ @media (min-width: 768px) { .t-catalog__load-more-btn:hover { border-color: #8b1515 !important; /* Темно-красная рамка (НЕ светлая) */ transform: translateY(-2px); box-shadow: 0 8px 30px -6px rgba(139, 21, 21, 0.2) !important; background: transparent !important; } .t-catalog__load-more-btn:hover .t-btnflex__text { color: #8b1515 !important; /* Текст становится темно-красным (НЕ белым) */ } } /* ─── МЯГКОЕ СВЕЧЕНИЕ ПРИ НАВЕДЕНИИ (ТЕМНОЕ) ─── */ .t-catalog__load-more-btn::before { content: ""; position: absolute; inset: -2px; border-radius: 52px; background: radial-gradient(ellipse at center, rgba(139, 21, 21, 0.08), transparent 70%); opacity: 0; transition: opacity 0.5s ease; z-index: 0; pointer-events: none; } @media (min-width: 768px) { .t-catalog__load-more-btn:hover::before { opacity: 1; } } /* ─── АКТИВНОЕ СОСТОЯНИЕ ─── */ .t-catalog__load-more-btn:active { transform: scale(0.96) !important; border-color: #6b1010 !important; } /* ─── ФОКУС ─── */ .t-catalog__load-more-btn:focus-visible { outline: 2px solid #8b1515 !important; outline-offset: 4px; } /* ─── МОБИЛЬНАЯ ВЕРСИЯ ─── */ @media (max-width: 767px) { .t-catalog__load-more-btn { padding: 14px 32px !important; font-size: 11px !important; min-width: 160px; border-radius: 40px !important; border-color: rgba(180, 30, 30, 0.25) !important; } .t-catalog__load-more-btn .t-btnflex__text { color: #b01a1a !important; } .t-catalog__load-more-btn-wrap { padding-top: 25px !important; padding-bottom: 10px !important; } } @media (max-width: 480px) { .t-catalog__load-more-btn { padding: 12px 24px !important; font-size: 10px !important; min-width: 140px; border-radius: 35px !important; } .t-catalog__load-more-btn-wrap { padding-top: 20px !important; } } /* ─── ТЕМНАЯ ТЕМА (если фон серый) ─── */ /* Если у блока фон #1a1a1a или #2a2a2a — кнопка останется видимой */ .t-catalog__load-more-btn { border-color: rgba(180, 30, 30, 0.4) !important; } /* ─── REDUCED MOTION ─── */ @media (prefers-reduced-motion: reduce) { .t-catalog__load-more-btn, .t-catalog__load-more-btn::before { transition: none !important; } .t-catalog__load-more-btn:hover { transform: none !important; } } /* ========================================================= T744 — PRODUCT BLACK / RED ФИНАЛЬНАЯ АДАПТИВНАЯ ВЕРСИЯ ========================================================= */ /* ========================================================= 1. БАЗА ========================================================= */ .t744, .t744 * { box-sizing: border-box !important; } .t744 { width: 100% !important; max-width: 100% !important; overflow: visible !important; } /* ========================================================= 2. КОНТЕЙНЕР ТОВАРА ========================================================= */ /* ВАЖНО: Убираем стандартное соотношение Tilda 7/5. Было: Картинка = 7 колонок Информация = 5 колонок Теперь: Картинка = 50% Информация = 50% */ .t744 .t-container { width: 100% !important; max-width: 1200px !important; display: flex !important; align-items: flex-start !important; flex-wrap: nowrap !important; overflow: visible !important; } /* ========================================================= 3. ЛЕВАЯ КОЛОНКА — ГАЛЕРЕЯ ========================================================= */ .t744 .t744__col_first { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 20px !important; padding-right: 20px !important; min-width: 0 !important; } /* ========================================================= 4. ПРАВАЯ КОЛОНКА — ИНФОРМАЦИЯ ========================================================= */ .t744 .t744__col:not(.t744__col_first) { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 20px !important; padding-right: 20px !important; min-width: 0 !important; } /* ========================================================= 5. ИНФОРМАЦИОННЫЙ БЛОК ========================================================= */ .t744 .t744__info { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; background: #111111 !important; background-image: none !important; color: #ffffff !important; border: 1px solid #242424 !important; border-radius: 18px !important; padding: 30px !important; overflow: hidden !important; } /* Красная линия */ .t744 .t744__info::before { content: ""; position: absolute !important; top: 0 !important; left: 30px !important; width: 60px !important; height: 3px !important; background: #e3262e !important; border-radius: 0 0 5px 5px !important; } /* ========================================================= 6. ГАЛЕРЕЯ ========================================================= */ .t744 .t-slds { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Реальная ширина картинки. Никаких transform — место действительно уменьшается. */ .t744 .t-slds__main { width: 100% !important; max-width: 100% !important; border-radius: 16px !important; overflow: hidden !important; border: 1px solid #e5e5e5 !important; } /* Контейнер слайдов */ .t744 .t-slds__container { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } /* Изображение */ .t744 .t-slds__imgwrapper { width: 100% !important; max-width: 100% !important; } /* Сам квадрат изображения */ .t744 .t-slds__bgimg { width: 100% !important; background-size: cover !important; background-position: center !important; } /* ========================================================= 7. ЗАГОЛОВОК ========================================================= */ .t744 .t744__title { width: 100% !important; max-width: 100% !important; min-width: 0 !important; color: #ffffff !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 30px !important; line-height: 1.2 !important; font-weight: 700 !important; margin-top: 0 !important; margin-bottom: 20px !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* ========================================================= 8. ЦЕНА ========================================================= */ .t744 .t744__price-wrapper { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 12px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 16px 0 !important; margin-bottom: 18px !important; border-top: 1px solid rgba(255,255,255,.12) !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; } .t744 .t744__price { color: #ffffff !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 30px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; } .t744 .t744__price-currency { color: #e3262e !important; font-weight: 700 !important; } .t744 .t744__price_old { color: #777777 !important; font-size: 17px !important; white-space: nowrap !important; } /* ========================================================= 9. КНОПКА ========================================================= */ .t744 .t744__btn-wrapper { width: 100% !important; max-width: 100% !important; margin: 20px 0 24px !important; } .t744 .t744__btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-height: 54px !important; padding: 0 18px !important; background: #e3262e !important; color: #ffffff !important; border: 0 !important; border-radius: 9px !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; box-shadow: 0 8px 25px rgba(227,38,46,.20) !important; transition: .25s ease !important; } .t744 .t744__btn:hover { background: #ff3038 !important; box-shadow: 0 12px 35px rgba(227,38,46,.35) !important; transform: translateY(-2px) !important; } /* ========================================================= 10. ОПИСАНИЕ ========================================================= */ .t744 .t744__descr { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; color: #b8b8b8 !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 14px !important; line-height: 1.6 !important; overflow-wrap: anywhere !important; word-wrap: break-word !important; white-space: normal !important; } .t744 .t744__descr > div { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; color: #b8b8b8 !important; font-size: inherit !important; line-height: inherit !important; overflow-wrap: anywhere !important; word-wrap: break-word !important; } .t744 .t744__descr *, .t744 .t744__descr p, .t744 .t744__descr span { color: #b8b8b8 !important; } /* ========================================================= 11. СПИСКИ В ОПИСАНИИ ========================================================= */ .t744 .t744__descr ul { margin-top: 10px !important; margin-bottom: 10px !important; padding-left: 20px !important; max-width: 100% !important; } .t744 .t744__descr li { max-width: 100% !important; overflow-wrap: anywhere !important; } /* ========================================================= 12. СТРЕЛКИ ========================================================= */ .t744 .t-slds__arrow { background: #111111 !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,.15) !important; transition: .25s ease !important; } .t744 .t-slds__arrow:hover { background: #e3262e !important; border-color: #e3262e !important; } /* ========================================================= 13. МИНИАТЮРЫ ========================================================= */ .t744 .t-slds__thumbsbullet { border-radius: 8px !important; overflow: hidden !important; opacity: .55; transition: .25s ease; } .t744 .t-slds__thumbsbullet:hover { opacity: 1; } .t744 .t-slds__bullet_active { opacity: 1; } .t744 .t-slds__bullet_active .t-slds__thumbsbullet-border { border: 2px solid #e3262e !important; border-radius: 8px !important; } /* ========================================================= 14. ПК — 1201 PX И ВЫШЕ ========================================================= */ @media screen and (min-width: 1201px) { .t744 .t744__col_first { width: 50% !important; max-width: 50% !important; flex-basis: 50% !important; } .t744 .t744__col:not(.t744__col_first) { width: 50% !important; max-width: 50% !important; flex-basis: 50% !important; } .t744 .t744__info { padding: 30px !important; } } /* ========================================================= 15. НОУТБУКИ 769–1200 PX ========================================================= */ /* Здесь делаем картинку ещё немного уже, а информационный блок шире. 48% / 52% */ @media screen and (min-width: 769px) and (max-width: 1200px) { .t744 .t744__col_first { width: 48% !important; max-width: 48% !important; flex: 0 0 48% !important; padding-left: 15px !important; padding-right: 15px !important; } .t744 .t744__col:not(.t744__col_first) { width: 52% !important; max-width: 52% !important; flex: 0 0 52% !important; padding-left: 15px !important; padding-right: 15px !important; } .t744 .t744__info { padding: 20px !important; border-radius: 14px !important; } .t744 .t744__info::before { left: 20px !important; width: 50px !important; } .t744 .t744__title { font-size: 24px !important; line-height: 1.18 !important; margin-bottom: 14px !important; } .t744 .t744__price-wrapper { padding: 13px 0 !important; margin-bottom: 14px !important; gap: 6px 9px !important; } .t744 .t744__price { font-size: 25px !important; } .t744 .t744__price_old { font-size: 15px !important; } .t744 .t744__descr { font-size: 13px !important; line-height: 1.45 !important; } .t744 .t744__btn-wrapper { margin: 14px 0 18px !important; } .t744 .t744__btn { min-height: 48px !important; font-size: 14px !important; } } /* ========================================================= 16. ПЛАНШЕТ ========================================================= */ @media screen and (max-width: 768px) { .t744 .t-container { display: block !important; width: 100% !important; max-width: 100% !important; } .t744 .t744__col_first, .t744 .t744__col:not(.t744__col_first) { display: block !important; width: 100% !important; max-width: 100% !important; flex: none !important; padding-left: 10px !important; padding-right: 10px !important; margin-left: 0 !important; margin-right: 0 !important; } .t744 .t744__col:not(.t744__col_first) { margin-top: 20px !important; } .t744 .t744__info { width: 100% !important; max-width: 100% !important; padding: 22px !important; border-radius: 14px !important; } .t744 .t744__info::before { left: 22px !important; width: 50px !important; } .t744 .t-slds__main { width: 100% !important; max-width: 100% !important; } .t744 .t744__title { font-size: 24px !important; line-height: 1.2 !important; } .t744 .t744__price { font-size: 27px !important; } .t744 .t744__descr { font-size: 14px !important; line-height: 1.6 !important; } .t744 .t744__btn { width: 100% !important; min-height: 52px !important; } } /* ========================================================= 17. ТЕЛЕФОН ========================================================= */ @media screen and (max-width: 480px) { .t744 .t744__col_first, .t744 .t744__col:not(.t744__col_first) { padding-left: 5px !important; padding-right: 5px !important; } .t744 .t744__info { padding: 18px !important; border-radius: 12px !important; } .t744 .t744__info::before { left: 18px !important; width: 45px !important; } .t744 .t744__title { font-size: 21px !important; } .t744 .t744__price { font-size: 25px !important; } .t744 .t744__descr { font-size: 13px !important; line-height: 1.55 !important; } .t744 .t744__btn { min-height: 50px !important; font-size: 14px !important; } } /* ========================================================= 18. ОЧЕНЬ УЗКИЙ ТЕЛЕФОН ========================================================= */ @media screen and (max-width: 375px) { .t744 .t744__info { padding: 16px !important; } .t744 .t744__info::before { left: 16px !important; width: 40px !important; } .t744 .t744__title { font-size: 19px !important; } .t744 .t744__price { font-size: 23px !important; } .t744 .t744__descr { font-size: 12.5px !important; } } /* ========================================================= 19. ЗАЩИТА ОТ ВЫЛЕЗАНИЯ ========================================================= */ .t744 .t744__info, .t744 .t744__info > *, .t744 .t744__textwrapper, .t744 .t744__title-wrapper, .t744 .t744__descr, .t744 .t744__descr > div { min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; } /* ========================================================= 20. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .t744 .t744__btn, .t744 .t-slds__arrow, .t744 .t-slds__thumbsbullet { transition: none !important; } } /* ========================================================= PREMIUM HORIZONTAL PRODUCT CARDS TILDA STORE BLACK / RED ========================================================= */ /* ========================================================= 1. КОНТЕЙНЕР КАРТОЧКИ ========================================================= */ .t-store__card { position: relative !important; display: flex !important; flex-direction: row !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; min-height: 190px !important; margin-bottom: 22px !important; padding: 12px !important; box-sizing: border-box !important; background: #151515 !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 8px 25px rgba(0,0,0,.28) !important; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease !important; } /* ========================================================= 2. HOVER ========================================================= */ @media screen and (min-width: 769px) { .t-store__card:hover { transform: translateY(-3px) !important; border-color: rgba(227,38,46,.45) !important; box-shadow: 0 16px 38px rgba(0,0,0,.45), 0 0 25px rgba(227,38,46,.06) !important; } } /* ========================================================= 3. ЛЕВАЯ ЧАСТЬ — ИЗОБРАЖЕНИЕ ========================================================= */ .t-store__card__imgwrapper_column { flex: 0 0 190px !important; width: 190px !important; max-width: 190px !important; height: 190px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= 4. САМО ИЗОБРАЖЕНИЕ ========================================================= */ .t-store__card__imgwrapper { position: relative !important; width: 100% !important; height: 190px !important; min-height: 190px !important; border-radius: 11px !important; overflow: hidden !important; background: #101010 !important; } /* ========================================================= 5. ФОНОВЫЕ ИЗОБРАЖЕНИЯ ========================================================= */ .t-store__card__bgimg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease !important; } /* ========================================================= 6. ВТОРОЕ ИЗОБРАЖЕНИЕ ========================================================= */ .t-store__card__bgimg_second { opacity: 0 !important; } /* При наведении показываем вторую картинку */ .t-store__card:hover .t-store__card__bgimg_second { opacity: 1 !important; } /* ========================================================= 7. ZOOM КАРТИНКИ ========================================================= */ .t-store__card:hover .t-store__card__bgimg { transform: scale(1.035) !important; } /* ========================================================= 8. ЛЁГКОЕ ЗАТЕМНЕНИЕ ========================================================= */ .t-store__card__imgwrapper::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.10) 100% ); z-index: 2; } /* ========================================================= 9. БЕЙДЖ РАСПРОДАЖИ ========================================================= */ .t-store__card__mark-wrapper { position: absolute !important; top: 9px !important; left: 9px !important; z-index: 10 !important; width: auto !important; } /* сама плашка */ .t-store__card__mark { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 5px 9px !important; background: #e3262e !important; color: #ffffff !important; border: 0 !important; border-radius: 5px !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 9px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; white-space: nowrap !important; box-shadow: 0 4px 12px rgba(227,38,46,.25) !important; } /* ========================================================= 10. ПРАВАЯ ЧАСТЬ ========================================================= */ .t-store__card__contentwrapper { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; justify-content: space-between !important; min-width: 0 !important; width: auto !important; padding: 8px 14px 8px 18px !important; box-sizing: border-box !important; } /* ========================================================= 11. ТЕКСТОВАЯ ЧАСТЬ ========================================================= */ .t-store__card__textwrapper { width: 100% !important; min-width: 0 !important; padding: 0 !important; } /* ========================================================= 12. ЗАГОЛОВОК ========================================================= */ .t-store__card__title { display: block !important; width: 100% !important; margin: 2px 0 9px !important; color: #f4f4f4 !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 17px !important; line-height: 1.35 !important; font-weight: 700 !important; letter-spacing: -.01em !important; text-decoration: none !important; overflow-wrap: break-word !important; word-break: normal !important; } /* hover заголовка */ .t-store__card:hover .t-store__card__title { color: #ffffff !important; } /* ========================================================= 13. ОПИСАНИЕ ========================================================= */ .t-store__card__descr { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; color: #969696 !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 12px !important; line-height: 1.5 !important; font-weight: 400 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow-wrap: break-word !important; } /* ========================================================= 14. ЦЕНА ========================================================= */ .t-store__card__price-buttons { width: auto !important; max-width: 100% !important; margin-top: auto !important; padding-top: 12px !important; } /* ========================================================= 15. БЛОК ЦЕНЫ ========================================================= */ .t-store__card__price-wrapper { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 7px !important; width: auto !important; padding: 0 !important; margin: 0 !important; } /* ========================================================= 16. АКТУАЛЬНАЯ ЦЕНА ========================================================= */ .t-store__card__price { display: flex !important; align-items: baseline !important; gap: 5px !important; color: #ffffff !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 21px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; } .t-store__card__price-value { color: #ffffff !important; font-weight: 800 !important; } .t-store__card__price-currency { color: #e3262e !important; font-size: 13px !important; font-weight: 700 !important; } /* ========================================================= 17. СТАРАЯ ЦЕНА ========================================================= */ .t-store__card__price_old { display: flex !important; align-items: baseline !important; gap: 3px !important; color: #666666 !important; font-size: 13px !important; font-weight: 400 !important; white-space: nowrap !important; } .t-store__card__price_old .t-store__card__price-value { color: #666666 !important; font-size: 13px !important; text-decoration: line-through !important; text-decoration-color: #e3262e !important; } .t-store__card__price_old .t-store__card__price-currency { color: #666666 !important; font-size: 11px !important; } /* ========================================================= 18. ССЫЛКИ ========================================================= */ .t-store__card a { text-decoration: none !important; } /* ========================================================= 19. КРАСНАЯ ЛИНИЯ СНИЗУ ========================================================= */ .t-store__card::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: #e3262e; transform: scaleX(0); transform-origin: left; transition: transform .4s ease; z-index: 20; } @media screen and (min-width: 769px) { .t-store__card:hover::after { transform: scaleX(1); } } /* ========================================================= 20. ПЛАНШЕТ ========================================================= */ @media screen and (max-width: 900px) and (min-width: 601px) { .t-store__card { min-height: 165px !important; margin-bottom: 18px !important; padding: 10px !important; border-radius: 14px !important; } .t-store__card__imgwrapper_column { flex: 0 0 165px !important; width: 165px !important; max-width: 165px !important; height: 165px !important; } .t-store__card__imgwrapper { height: 165px !important; min-height: 165px !important; } .t-store__card__contentwrapper { padding: 6px 12px 6px 15px !important; } .t-store__card__title { font-size: 15px !important; line-height: 1.3 !important; } .t-store__card__descr { font-size: 11px !important; } .t-store__card__price { font-size: 18px !important; } } /* ========================================================= 21. МОБИЛЬНАЯ ВЕРСИЯ ========================================================= */ @media screen and (max-width: 600px) { .t-store__card { min-height: 0 !important; margin-bottom: 16px !important; padding: 8px !important; border-radius: 13px !important; } .t-store__card__imgwrapper_column { flex: 0 0 125px !important; width: 125px !important; max-width: 125px !important; height: 125px !important; } .t-store__card__imgwrapper { height: 125px !important; min-height: 125px !important; border-radius: 9px !important; } .t-store__card__contentwrapper { padding: 4px 8px 4px 12px !important; } .t-store__card__title { font-size: 14px !important; line-height: 1.3 !important; margin-bottom: 6px !important; } .t-store__card__descr { font-size: 10.5px !important; line-height: 1.4 !important; -webkit-line-clamp: 2 !important; } .t-store__card__price-buttons { padding-top: 8px !important; } .t-store__card__price { font-size: 17px !important; } .t-store__card__price-currency { font-size: 11px !important; } .t-store__card__price_old, .t-store__card__price_old .t-store__card__price-value { font-size: 11px !important; } .t-store__card__mark-wrapper { top: 7px !important; left: 7px !important; } .t-store__card__mark { padding: 4px 7px !important; font-size: 7px !important; border-radius: 4px !important; } } /* ========================================================= 22. УЗКИЙ ТЕЛЕФОН ========================================================= */ @media screen and (max-width: 375px) { .t-store__card__imgwrapper_column { flex: 0 0 105px !important; width: 105px !important; max-width: 105px !important; height: 105px !important; } .t-store__card__imgwrapper { height: 105px !important; min-height: 105px !important; } .t-store__card__contentwrapper { padding-left: 10px !important; } .t-store__card__title { font-size: 13px !important; } .t-store__card__descr { font-size: 10px !important; } .t-store__card__price { font-size: 16px !important; } } /* ========================================================= 23. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .t-store__card, .t-store__card::after, .t-store__card__bgimg { transition: none !important; } } /* ========================================================= 24. ЗАЩИТА ОТ ВЫЛЕЗАНИЯ ========================================================= */ .t-store__card, .t-store__card *, .t-store__card__contentwrapper, .t-store__card__textwrapper { box-sizing: border-box !important; max-width: 100% !important; }