:root { --blue: #005bff; --blue-dark: #0046cc; --bg: #f2f3f5; --text: #1a1a1a; --muted: #99a3ae; --border: #e3e8ee; --danger: #f91155; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', system-ui, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } a { color: inherit; text-decoration: none; } code { background: #f0f4f8; padding: 2px 6px; border-radius: 6px; font-size: 12px; } /* ---------- Шапка (как Ozon) ---------- */ .header { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 100; } .header-inner { max-width: 1280px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; } .logo { font-size: 26px; font-weight: 800; color: var(--blue); letter-spacing: -0.5px; white-space: nowrap; } .header-search { flex: 1; display: flex; } .header-search input { flex: 1; border: 2px solid var(--blue); border-right: 0; border-radius: 8px 0 0 8px; padding: 10px 14px; font-size: 15px; outline: none; } .header-search button { background: var(--blue); color: #fff; border: 0; border-radius: 0 8px 8px 0; padding: 0 28px; font-size: 15px; cursor: pointer; } .header-search button:hover { background: var(--blue-dark); } .header-nav { display: flex; gap: 26px; align-items: stretch; white-space: nowrap; } .header-nav .nav-item { padding: 2px 4px; } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #8b95a0; font-size: 12px; line-height: 1; padding: 2px; min-width: 48px; } .nav-item svg { width: 24px; height: 24px; } .nav-item:hover { color: var(--blue); } .nav-icon-wrap { position: relative; display: inline-flex; } .cart-badge { display: none; position: absolute; top: -6px; right: -8px; background: #f91155; color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; white-space: nowrap; } /* ---------- Контент ---------- */ .container { max-width: 1280px; margin: 0 auto; padding: 20px; } .section-title { font-size: 20px; font-weight: 700; margin: 20px 0 14px; } .muted { color: var(--muted); } /* ---------- Категории-пилюли ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; } .chip { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: 13px; color: #333; } .chip:hover { border-color: var(--blue); color: var(--blue); } .chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } /* ---------- Сетка товаров ---------- */ .grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .card { background: #fff; border-radius: 12px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; display: flex; flex-direction: column; } .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); } .card-img { display: block; background: linear-gradient(135deg, #eaf1ff, #dbe7ff); aspect-ratio: 1 / 0.75; position: relative; overflow: hidden; } .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-img-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 800; color: var(--blue); opacity: .55; } .card-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .card-title { font-size: 14px; line-height: 1.35; height: 38px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .card-title:hover { color: var(--blue); } .card-brand { font-size: 12px; color: var(--muted); } .card-price { font-size: 19px; font-weight: 800; margin-top: auto; } /* ---------- Кнопки ---------- */ .btn-add { width: 100%; background: var(--blue); color: #fff; border: 0; border-radius: 10px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; } .btn-add:hover { background: var(--blue-dark); } .btn-add.big { width: auto; padding: 12px 32px; font-size: 15px; } .btn-outline { background: #fff; color: var(--blue); border: 1px solid var(--blue); border-radius: 10px; padding: 8px 16px; cursor: pointer; display: inline-block; } .btn-outline:hover { background: #f0f5ff; } .btn-danger { background: #fff; color: var(--danger); border: 1px solid var(--danger); border-radius: 10px; padding: 6px 12px; cursor: pointer; } .btn-danger:hover { background: #fff0f4; } .out { color: var(--muted); font-size: 13px; } /* ---------- Карточка товара (страница) ---------- */ .product-page { display: flex; gap: 24px; padding: 24px; } .product-img { width: 340px; min-width: 340px; background: linear-gradient(135deg, #eaf1ff, #dbe7ff); border-radius: 12px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; } .product-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .product-img { justify-content: center; overflow: hidden; } .product-img span { font-size: 110px; font-weight: 800; color: var(--blue); opacity: .55; } .product-info h1 { font-size: 22px; margin: 0 0 8px; } .product-price { font-size: 30px; font-weight: 800; margin: 16px 0 4px; } .stock { color: #0cb477; font-size: 13px; } .buy-row { display: flex; gap: 10px; align-items: center; margin-top: 16px; } .buy-row input { width: 70px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; text-align: center; } /* ---------- Таблицы ---------- */ .panel { background: #fff; border-radius: 12px; padding: 16px 20px; margin: 12px 0; } .grid { width: 100%; border-collapse: collapse; } .grid th { text-align: left; color: var(--muted); font-weight: 500; font-size: 13px; padding: 10px 8px; border-bottom: 1px solid var(--border); } .grid td { padding: 12px 8px; border-bottom: 1px solid var(--border); font-size: 14px; } .grid tr:last-child td { border-bottom: 0; } .grid a { color: var(--blue); } .actions { display: flex; gap: 8px; align-items: center; } /* ---------- Интерактивное редактирование в админке ---------- */ .cell-e { display: none; width: 100%; min-width: 90px; padding: 6px 8px; border: 1px solid var(--blue); border-radius: 8px; font-size: 13px; outline: none; } .btn-save { width: auto; padding: 8px 16px; } /* ---------- Корзина ---------- */ .cart-layout { display: flex; gap: 16px; align-items: flex-start; } .cart-main { flex: 1; } .cart-summary { width: 300px; position: sticky; top: 84px; } .cart-summary .total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; margin-bottom: 14px; } .cart-qty input { width: 64px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; text-align: center; } /* ---------- Формы ---------- */ .auth-wrap { max-width: 420px; margin: 40px auto; } .form label { display: block; margin: 14px 0 6px; font-size: 13px; color: #555; } .form input, .form select, .form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; outline: none; } .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue); } .form .btn-add { margin-top: 18px; } .error { color: var(--danger); font-size: 13px; } /* ---------- Админка ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 14px 0; } .stat { background: #fff; border-radius: 12px; padding: 18px; font-size: 13px; color: var(--muted); } .stat b { display: block; font-size: 26px; color: var(--text); margin-top: 4px; } .app-row { display: flex; gap: 8px; margin-bottom: 8px; } .app-row input { flex: 1; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; outline: none; } .app-row input:focus { border-color: var(--blue); } /* ---------- Корзина на витрине, статусы заказов ---------- */ .in-cart { color: #0cb477; font-size: 12px; font-weight: 600; } .in-cart-inline { color: #0cb477; font-weight: 600; } .delivery-option { display: flex !important; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; } .delivery-option:hover { border-color: var(--blue); } .delivery-option input { width: auto !important; margin-top: 3px; } .order-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .order-total { font-size: 18px; font-weight: 800; } .track { font-family: monospace; background: #f0f4f8; padding: 2px 8px; border-radius: 6px; font-size: 13px; } .badge { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600; } .st-new { background: #fff7e0; color: #b58900; } .st-paid { background: #e7f0ff; color: #005bff; } .st-assembled { background: #efe9ff; color: #6f42c1; } .st-shipped { background: #e0f5ff; color: #0284c7; } .st-delivered { background: #e2f9ef; color: #0cb477; } .st-cancelled { background: #ffe9ef; color: #f91155; } .ship-photo img { max-width: 260px; border-radius: 10px; } /* ---------- Рейтинг, отзывы, корзина ---------- */ .stars { color: #ff9f29; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(255, 159, 41, .35); } .card-rating .stars { font-size: 15px; } .stars-sm { font-size: 14px; } .stars-lg { font-size: 26px; } .card-rating { font-size: 12px; } .btn-add.added { background: #0cb477; } .btn-add.added:hover { background: #0aa066; } .cart-badge { display: none; background: #005bff; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; } .product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .product-layout .product-page { margin: 0; } .product-layout .panel { margin: 0; } /* колонки стартуют на одной линии */ .review { background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; } .review:last-of-type { margin-bottom: 0; } .review-head { display: flex; gap: 10px; align-items: center; } .review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; } .review-meta { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; } .review-date { font-size: 11px; } .review .review-body { margin-top: 8px; } .review-photo { max-width: 140px; border-radius: 8px; margin-top: 6px; display: block; } /* ---------- Степпер количества на карточках ---------- */ .qty-stepper { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 3px; } .card .cart-widget { text-align: center; } .stepper-btn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: #555; display: inline-flex; align-items: center; justify-content: center; } .stepper-btn:hover { background: #f0f5ff; color: var(--blue); } .stepper-btn:disabled { opacity: .5; } .stepper-remove { color: #b0b8c0; } .stepper-remove:hover { background: #fff0f4; color: var(--danger) !important; } .qty-value { min-width: 30px; text-align: center; font-weight: 700; font-size: 14px; flex: 0 0 auto; } .qty-input { width: 36px; border: 0; background: transparent; font-weight: 700; font-size: 14px; text-align: center; padding: 4px 0; border-radius: 6px; } .qty-input:focus { outline: 2px solid var(--blue); background: #fff; } /* ---------- Подсказки адреса ---------- */ .address-wrap { position: relative; } .addr-suggest { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 200; max-height: 260px; overflow: auto; } .addr-item { padding: 10px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border); line-height: 1.4; } .addr-item:last-child { border-bottom: 0; } .addr-item:hover { background: #f0f5ff; } /* ---------- Карта 2ГИС в корзине ---------- */ .dgis-map { display: none; width: 100%; height: 240px; margin-top: 8px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } .dgis-map.visible { display: block; } /* ---------- Модальные окна ---------- */ .modal { display: none; } .modal.open { display: block; } .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 300; } .modal-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 16px; padding: 22px 24px; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; z-index: 301; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .modal-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; color: #8b95a0; cursor: pointer; } .modal-close:hover { background: #f0f4f8; color: #333; } /* компактная лента отзывов */ .reviews-list { max-height: 420px; overflow: auto; } /* ---------- Вкладки формы товара ---------- */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; } .tab-btn { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; font-size: 13.5px; color: #6b7684; cursor: pointer; border-radius: 6px 6px 0 0; } .tab-btn:hover { color: var(--blue); } .tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; } .qty-stepper.at-limit { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(249, 17, 85, .15); } /* ---------- Галерея фото товара ---------- */ .photo-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .photo-item { position: relative; width: 96px; } .photo-item img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; } .photo-main-badge { position: absolute; top: 4px; left: 4px; background: var(--blue); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 999px; } .photo-actions { display: flex; gap: 4px; justify-content: center; margin-top: 4px; } .photo-actions .stepper-btn { width: 26px; height: 26px; font-size: 13px; } .thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 2px solid var(--border); cursor: pointer; } .thumb.active, .thumb:hover { border-color: var(--blue); } /* ---------- Стиль 1С: строки «метка — поле» ---------- */ .fc-row { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0; flex-wrap: wrap; } .fc-label { width: 190px; flex: 0 0 190px; padding-top: 11px; font-size: 13px; color: #444; text-align: left; } .fc-row input, .fc-row select { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; } .fc-row input:focus, .fc-row select:focus { border-color: var(--blue); } .fc-hint { flex-basis: 100%; margin-left: 202px; font-size: 12px; color: var(--muted); } @media (max-width: 640px) { .fc-label { flex-basis: 100%; width: auto; padding-top: 0; } .fc-hint { margin-left: 0; } } /* ---------- Панель разделов админки (стиль Ozon) ---------- */ .admin-nav { display: flex; gap: 6px; flex-wrap: wrap; } .admin-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 16px; border-radius: 12px; color: #8b95a0; font-size: 12px; line-height: 1.15; min-width: 76px; text-align: center; } .admin-nav-item svg { width: 26px; height: 26px; } .admin-nav-item:hover { background: #f0f5ff; color: var(--blue); } /* ---------- Dropzone загрузки фото ---------- */ .dropzone { border: 2px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; cursor: pointer !important; transition: border-color .15s, background .15s; color: #6b7684; user-select: none; } .dropzone:hover, .dropzone.over { border-color: var(--blue); background: #f5f9ff; } .dropzone-hint p { margin: 6px 0 2px; font-size: 13px; } .dropzone-files { margin-top: 8px; } /* ---------- Фото в отзывах ---------- */ .review-photos { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; } .review-photos { gap: 8px; margin-top: 8px; } .review-photos .review-photo { width: 88px; height: 88px; max-width: 88px; max-height: 88px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); margin: 0; } .review-photos .review-photo:hover { border-color: var(--blue); } /* ---------- Миниатюры в dropzone ---------- */ .dropzone-files { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .dz-thumb-item { position: relative; width: 76px; } .dz-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; } .dz-thumb-name { font-size: 10px; color: var(--muted); text-align: center; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dz-thumb-del { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #f91155; color: #fff; font-size: 13px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); } /* ---------- WYSIWYG-контент (TinyMCE) ---------- */ .review-body { line-height: 1.65; margin: 6px 0; } .review-body p { margin: 0 0 8px; } .review-body ul, .review-body ol { margin: 4px 0 8px; padding-left: 22px; } .review-body a { color: var(--blue); } /* ---------- Видео в карточке товара ---------- */ .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .video-item iframe, .video-item video { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; display: block; } .video-link { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: #1e293b; color: #fff; border-radius: 10px; font-size: 15px; } .video-link:hover { color: #7dd3fc; } /* ---------- Карусель изображений товара ---------- */ .gallery-main { position: relative; } .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #333; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; z-index: 2; } .gallery-nav:hover { background: #fff; color: var(--blue); } .gallery-nav.prev { left: 10px; } .gallery-nav.next { right: 10px; } .gallery-counter { position: absolute; bottom: 10px; right: 10px; background: rgba(15,23,42,.65); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 999px; z-index: 2; } /* ---------- Корзина (карточки товаров) ---------- */ .cart-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; } .cart-item-img { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #eaf1ff, #dbe7ff); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: var(--blue); opacity: .75; } .cart-item-img img { width: 100%; height: 100%; object-fit: cover; } .cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .cart-item-name { font-weight: 600; font-size: 14px; line-height: 1.3; } .cart-item-name:hover { color: var(--blue); } .cart-item-price { text-align: right; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; } .cart-item-price b { font-size: 16px; } .cart-item-price .muted { font-size: 12px; } .cart-item-del button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: #b0b8c0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .cart-item-del button:hover { background: #fff0f4; color: var(--danger); } .cart-totals { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 10px; font-size: 14px; } .cart-totals > div { display: flex; justify-content: space-between; padding: 3px 0; } .cart-total-row { font-size: 17px; font-weight: 800; margin-top: 4px; } /* ---------- Мессенджеры-иконки ---------- */ .messenger-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .messenger-opt input { position: absolute; opacity: 0; pointer-events: none; } .messenger-ico { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 10px 6px; border: 2px solid var(--border); border-radius: 12px; cursor: pointer; font-size: 11px; color: #667; user-select: none; transition: border-color .12s, background .12s; } .messenger-ico svg { display: block; } .messenger-opt input:checked + .messenger-ico { border-color: var(--blue); background: #f0f5ff; color: #333; } /* ---------- Тумблер «не звонить» ---------- */ .call-toggle { display: block; margin: 12px 0 4px; cursor: pointer; } .call-toggle input { position: absolute; opacity: 0; pointer-events: none; } .call-toggle-box { display: flex; align-items: center; gap: 12px; border: 2px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fff; transition: border-color .12s, background .12s; } .call-toggle-box small { color: var(--muted); font-size: 12px; } .call-toggle-icon { font-size: 24px; } .call-toggle input:checked + .call-toggle-box { border-color: var(--blue); background: #f0f5ff; } .mt6 { margin: 6px 0 10px; } /* ---------- Предложить своё видео ---------- */ /* ---------- Предложить своё видео (заметный блок с анимацией) ---------- */ .suggest-video { margin-top: 14px; padding: 14px 16px; border: 2px dashed var(--blue); border-radius: 14px; background: linear-gradient(135deg, #f5f9ff, #eef4ff); animation: sv-pulse 2.4s ease-in-out infinite; } .sv-head { display: flex; align-items: center; gap: 12px; } .sv-icon { font-size: 28px; line-height: 1; } .suggest-video b { font-size: 15px; } @keyframes sv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 91, 255, .28); border-color: var(--blue); } 50% { box-shadow: 0 0 0 7px rgba(0, 91, 255, 0); border-color: #6aa5ff; } } @media (prefers-reduced-motion: reduce) { .suggest-video { animation: none; } } /* ---------- Карточка товара: центрирование левого блока ---------- */ .product-page { text-align: center; justify-content: center; flex-wrap: wrap; } .product-page > div { margin-left: auto; margin-right: auto; } .product-page .product-info h1, .product-page .product-info > p, .product-page .card-rating { text-align: center; } .product-page .buy-row, .product-page .cart-widget { justify-content: center; } .product-page .product-price { text-align: center; } /* ---------- Drag&drop сортировка фото ---------- */ [data-sortable] .photo-item { cursor: grab; } [data-sortable] .photo-item.dragging { opacity: .45; cursor: grabbing; } /* ---------- Лайтбокс (фото на весь экран) ---------- */ .lightbox .modal-overlay { background: rgba(10, 14, 22, .9); } .lightbox-body { position: fixed; inset: 0; z-index: 301; display: flex; align-items: center; justify-content: center; padding: 40px; } .lightbox-body img { max-width: 94vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 80px rgba(0,0,0,.5); object-fit: contain; background: #fff; } .lightbox .modal-close { position: fixed; top: 16px; right: 20px; width: 44px; height: 44px; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; z-index: 303; } .lightbox .modal-close:hover { background: rgba(255,255,255,.25); } .lightbox .gallery-nav { background: rgba(255,255,255,.15); color: #fff; width: 48px; height: 48px; } .lightbox .gallery-nav:hover { background: rgba(255,255,255,.3); color: #fff; } /* ---------- Миниатюры в таблице админки ---------- */ .admin-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; } .admin-thumb:hover { border-color: var(--blue); } /* ---------- Иконки действий в таблице ---------- */ .icon-btn { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #6b7684; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .icon-btn svg { width: 16px; height: 16px; } .icon-btn:hover { border-color: var(--blue); color: var(--blue); } .icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); background: #fff0f4; } /* ---------- Уведомление об обновлении заказа ---------- */ .order-update { animation: sv-pulse 2.4s ease-in-out infinite; } /* ---------- Мои заказы: сетка + раскрытие ---------- */ .orders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; } .orders-grid:has(> :only-child) { grid-template-columns: 1fr; } .order-card-head { cursor: pointer; user-select: none; } .order-card-head:hover .order-caret { color: var(--blue); } .order-caret { display: inline-block; transition: transform .15s ease; color: var(--muted); } .order-card.open .order-caret { transform: rotate(180deg); } .order-details { border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 4px; } .pp-form { border: 2px dashed transparent; border-radius: 12px; padding: 6px; transition: border-color .15s, background .15s; } .pp-form.pp-drag { border-color: var(--blue); background: #f0f5ff; } .order-paid td { font-weight: 700; } @media (max-width: 860px) { .orders-grid { grid-template-columns: 1fr; } } /* ---------- Рейтинг и отзывы в стиле Ozon ---------- */ .oz-summary { display: flex; gap: 18px; align-items: flex-start; margin: 12px 0 16px; } .oz-num { font-size: 44px; font-weight: 800; line-height: 1; color: var(--text); } .oz-summary-info { flex: 1; min-width: 0; } .oz-bars { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; } .oz-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; } .oz-bar-star { width: 10px; color: var(--muted); text-align: right; } .oz-bar { flex: 1; height: 6px; background: #e9edf2; border-radius: 999px; overflow: hidden; } .oz-bar-fill { height: 100%; background: #ff9f29; border-radius: 999px; } .oz-bar-count { width: 24px; text-align: left; } .oz-helpful { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13px; color: #444; } .oz-helpful-btn { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer; color: #333; } .oz-helpful-btn:hover { border-color: var(--blue); color: var(--blue); } .oz-helpful-btn.voted { border-color: #0cb477; color: #0cb477; background: #f0fbf6; } /* ---------- Позиции заказа (Мои заказы) ---------- */ .order-items { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .order-item { display: flex; align-items: center; gap: 10px; background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; } .order-item-img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #eaf1ff, #dbe7ff); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--blue); opacity: .8; } .order-item-img img { width: 100%; height: 100%; object-fit: cover; } .order-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .order-item-name { font-size: 13px; font-weight: 600; line-height: 1.3; } .order-item-name:hover { color: var(--blue); } .order-item-qty { font-size: 13px; color: #444; white-space: nowrap; } .order-item-sum { white-space: nowrap; font-size: 14px; } /* ---------- Бейдж обновлений заказов (пульсация) ---------- */ .orders-badge { background: #f91155; } .orders-badge:not([style*="none"]) { animation: orders-pulse 1.8s ease-in-out infinite; } @keyframes orders-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 17, 85, .5); } 50% { box-shadow: 0 0 0 6px rgba(249, 17, 85, 0); } } @media (prefers-reduced-motion: reduce) { .orders-badge { animation: none !important; } } /* ---------- Сортировка по заголовкам таблицы ---------- */ th.sortable a { color: inherit; display: inline-flex; align-items: center; gap: 4px; } th.sortable a:hover { color: var(--blue); } th.sortable.active a { color: var(--blue); font-weight: 700; } /* ---------- Форма товара: две колонки + предпросмотр ---------- */ .edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; max-width: 1080px; margin: 0 auto; } .edit-preview { position: sticky; top: 84px; } .preview-card { max-width: 280px; margin: 0 auto; } @media (max-width: 900px) { .edit-layout { grid-template-columns: 1fr; } .edit-preview { position: static; } } /* ---------- Раздел «Авто» ---------- */ .cars-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } tr.car-active td { background: #f0f5ff; } @media (max-width: 900px) { .cars-layout { grid-template-columns: 1fr; } } /* ---------- Модалка товара: ровные блоки ---------- */ #part-edit-modal .fc-row { margin: 12px 0; gap: 10px; align-items: center; } #part-edit-modal .fc-label { width: 140px; flex: 0 0 140px; padding-top: 0; font-size: 13px; line-height: 1.3; } #part-edit-modal .fc-row input, #part-edit-modal .fc-row select, #part-edit-modal .fc-row textarea { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #fff; min-height: 38px; box-sizing: border-box; } #part-edit-modal .fc-row input:focus, #part-edit-modal .fc-row select:focus, #part-edit-modal .fc-row textarea:focus { border-color: var(--blue); } #part-edit-modal .fc-hint { margin-left: 150px; } #part-edit-modal .tabs { margin-bottom: 10px; } #part-edit-modal .form .btn-add { margin-top: 16px; } @media (max-width: 640px) { #part-edit-modal .fc-label { flex-basis: 100%; width: auto; padding-top: 0; } #part-edit-modal .fc-hint { margin-left: 0; } } /* ---------- Группировка каталога: категория -> марка/модель ---------- */ .car-group-title { font-size: 14px; font-weight: 700; color: var(--blue); margin: 14px 0 10px; } /* ---------- Спиннер загрузки ---------- */ .spinner { width: 34px; height: 34px; border: 4px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Прогресс-бар импорта ---------- */ .progress-bar { height: 8px; background: #e9edf2; border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; width: 0; background: var(--blue); border-radius: 999px; transition: width .3s ease; } /* ---------- Компактные строки для малых групп ---------- */ .mini-grid { display: flex; flex-direction: column; gap: 8px; } .mini-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; } .mini-card-img { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #eaf1ff, #dbe7ff); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: var(--blue); opacity: .8; } .mini-card-img img { width: 100%; height: 100%; object-fit: cover; } .mini-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mini-card-name { font-size: 14px; font-weight: 600; line-height: 1.3; } .mini-card-name:hover { color: var(--blue); } .mini-card-side { display: flex; align-items: center; gap: 12px; } .mini-card-price { font-weight: 800; font-size: 15px; white-space: nowrap; } /* ---------- Сердечко «в избранное» на карточке ---------- */ .card { position: relative; } .fav-toggle { pointer-events: auto; position: absolute; top: 8px; right: 8px; z-index: 50; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #8b95a0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); } .fav-toggle svg { width: 18px; height: 18px; } .fav-toggle:hover { color: var(--danger); } .fav-toggle.active { color: var(--danger); background: #fff0f4; } /* ---------- Скрытые товары в админке ---------- */ tr.part-hidden td { opacity: .45; background: #fafbfc; } /* ---------- Мобильная версия таблицы товаров (карточки, без заголовков) ---------- */ @media (max-width: 860px) { .admin-parts-grid { display: block; border-collapse: separate; } .admin-parts-grid thead { display: none !important; } .admin-parts-grid tbody, .admin-parts-grid tr, .admin-parts-grid td { display: block; width: 100%; box-sizing: border-box; } .admin-parts-grid tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: #fff; padding: 10px 12px; position: relative; } .admin-parts-grid td { border: 0; padding: 3px 0; font-size: 13px; } .admin-parts-grid td:first-child { position: absolute; top: 10px; right: 10px; width: auto; padding: 0; } .admin-parts-grid td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 11.5px; } .admin-parts-grid .cell-e { display: none !important; } .admin-parts-grid .cell-v { display: inline; } .admin-parts-grid .actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--border); margin-top: 6px; } } /* ---------- Мобильные фильтры главной ---------- */ @media (max-width: 860px) { .view-filter-bar { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding: 8px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: sticky; top: 64px; z-index: 50; background: var(--bg); margin-left: -4px; margin-right: -4px; } .view-filter-bar::-webkit-scrollbar { display: none; } .view-filter-bar .chip { flex: 0 0 auto; white-space: nowrap; padding: 11px 18px; font-size: 14px; min-height: 40px; } } /* ---------- Бейдж оптовой цены ---------- */ .wholesale-tag { display: inline-block; background: #0cb477; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; font-weight: 600; } /* ---------- Рейтинг: одна звезда + цифра ---------- */ .rating-one { display: inline-flex; align-items: center; gap: 4px; color: #ff9f29; font-weight: 700; font-size: 14px; } .rating-one .star { font-size: 16px; } /* ---------- Анимация скрепки при загрузке файла ---------- */ #chat-attach.chat-attach-loading svg { animation: clip-wiggle 0.5s ease-in-out infinite; } @keyframes clip-wiggle { 0%, 100% { transform: rotate(-12deg) scale(1.1); } 50% { transform: rotate(12deg) scale(1.1); } } /* ---------- «Печатает…» (три точки) ---------- */ .chat-typing { padding: 12px 16px !important; } .typing-dots { display: inline-flex; gap: 4px; } .typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8b95a0; animation: typing-blink 1.2s infinite ease-in-out; } .typing-dots i:nth-child(2) { animation-delay: .2s; } .typing-dots i:nth-child(3) { animation-delay: .4s; } @keyframes typing-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } /* ---------- Чат: кнопка и панель (JivoSite-стиль) ---------- */ #chat-fab { pointer-events: auto; position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #0066ff, #0052cc); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 82, 204, .4), 0 2px 8px rgba(0,0,0,.2); z-index: 9999; transition: transform .2s ease, box-shadow .2s ease; } #chat-fab:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(0, 82, 204, .5), 0 4px 12px rgba(0,0,0,.25); } #chat-fab:active { transform: scale(.96); } #chat-fab svg { display: block; position: relative; z-index: 2; } .chat-fab-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(0, 102, 255, .5); animation: chat-pulse 2.4s ease-out infinite; pointer-events: none; } .chat-fab-ring.r2 { animation-delay: 1.2s; } @keyframes chat-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } } #chat-fab.chat-new-msg { animation: chat-shake .6s ease-in-out; } @keyframes chat-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } } #chat-panel { position: fixed; bottom: 96px; right: 24px; width: 360px; max-width: calc(100vw - 32px); height: 480px; max-height: calc(100vh - 120px); background: #fff; border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.15); z-index: 9998; display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .25s ease, transform .25s ease; pointer-events: none; } #chat-panel.chat-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .chat-head { background: linear-gradient(135deg, #0066ff, #0052cc); color: #fff; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; } .chat-head-info { display: flex; align-items: center; gap: 10px; } .chat-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; border: 2px solid rgba(255,255,255,.4); } .chat-title { font-size: 15px; font-weight: 700; line-height: 1.2; } .chat-status { font-size: 11px; opacity: .9; display: flex; align-items: center; gap: 5px; margin-top: 2px; } .chat-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; box-shadow: 0 0 6px #4ade80; animation: chat-blink 2s infinite; } @keyframes chat-blink { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } #chat-messages { scroll-behavior: smooth; } .chat-bubble { animation: none; } /* мерцание при обновлении убрано */ @keyframes chat-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #chat-close { cursor: pointer; font-size: 24px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .2s; position: relative; z-index: 10001; pointer-events: auto; } #chat-close:hover { background: rgba(255,255,255,.25); } #chat-close:hover { background: rgba(255,255,255,.2); } #chat-threads { max-height: 100px; overflow-y: auto; border-bottom: 1px solid #eef1f5; background: #fafbfc; } .chat-thread { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #f0f2f5; font-size: 13px; transition: background .15s; } .chat-thread:hover { background: #eef4ff; } .chat-badge { background: #ff4757; color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; } #chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; background: #f0f4f8; } .chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-break: break-word; margin-bottom: 10px; clear: both; box-shadow: 0 1px 2px rgba(0,0,0,.06); } .chat-bubble.user { background: #fff; float: left; border-bottom-left-radius: 4px; } .chat-bubble.admin { background: #d3e5ff; float: right; border-bottom-right-radius: 4px; } .chat-bubble img.chat-img, .chat-bubble video { max-width: 100%; border-radius: 12px; display: block; margin-bottom: 6px; } .chat-author { font-size: 11px; font-weight: 700; margin-bottom: 3px; } .chat-bubble.user .chat-author { color: #0052cc; } .chat-bubble.admin .chat-author { color: #0cb477; } .chat-time { display: block; font-size: 10px; color: #8b95a0; text-align: right; margin-top: 3px; } #chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #eef1f5; background: #fff; align-items: center; flex: 0 0 auto; min-height: 64px; } #chat-form input[type="text"] { flex: 1; padding: 11px 16px; border: 1.5px solid #e3e8ee; border-radius: 999px; font-size: 14px; outline: none; transition: border-color .2s; } #chat-form input[type="text"]:focus { border-color: #0066ff; } #chat-form button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #0066ff, #0052cc); color: #fff; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; flex: 0 0 44px; } #chat-form button:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0, 82, 204, .35); } .chat-attach-btn, #chat-attach { background: #eef4ff !important; color: #005bff !important; border: 1.5px solid #d0e0ff !important; border-radius: 12px !important; transition: all .15s ease; } .chat-attach-btn:hover, #chat-attach:hover { background: #dbe7ff !important; border-color: #005bff !important; transform: scale(1.05); } @media (max-width: 480px) { #chat-fab { bottom: 16px; right: 16px; width: 56px; height: 56px; } #chat-panel { right: 8px; left: 8px; width: auto; bottom: 84px; } } /* ---------- Список товаров: мобильные карточки ---------- */ .admin-products-mobile { display: none; } @media (max-width: 768px) { .admin-products-mobile { display: flex; flex-direction: column; gap: 10px; } .admin-parts-desktop { display: none; } .admin-product-card { display: flex; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 12px; align-items: flex-start; } .apc-thumb { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px; overflow: hidden; background: #f0f4f8; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: var(--blue); } .apc-thumb img { width: 100%; height: 100%; object-fit: cover; } .apc-info { flex: 1; min-width: 0; } .apc-status { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; margin-bottom: 6px; } .apc-status.ok { background: #0cb477; color: #fff; } .apc-status.warn { background: #f59e0b; color: #fff; } .apc-name { font-size: 14px; font-weight: 600; line-height: 1.3; display: block; color: inherit; } .apc-name:hover { color: var(--blue); } .apc-sku { font-size: 12px; color: var(--muted); margin-top: 3px; } .apc-bottom { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .apc-price { font-size: 16px; font-weight: 800; background: #fff8e0; padding: 3px 10px; border-radius: 8px; } .apc-stock { font-size: 12px; color: var(--muted); } .apc-actions { flex: 0 0 auto; } } /* ---------- Профиль: метки незаполненных полей ---------- */ .profile-badge { display: inline-block; background: #f59e0b; color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 999px; margin-left: 6px; font-weight: 700; vertical-align: middle; } .profile-hint { background: #fff8e0; border: 1px solid #f59e0b; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #92400e; margin: 10px 0; } .field-empty { border-color: #f59e0b !important; background: #fffdf5; } /* ---------- Админка сообщений ---------- */ .unread-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 6px #f59e0b; } .tg-bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-break: break-word; margin-bottom: 10px; clear: both; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .tg-bubble.in { background: #fff; float: left; border-bottom-left-radius: 4px; } .tg-bubble.out { background: #d3e5ff; float: right; border-bottom-right-radius: 4px; } .tg-time { display: block; font-size: 10px; color: #8b95a0; text-align: right; margin-top: 3px; } /* ---------- Бейдж непрочитанных на кнопке чата ---------- */ .chat-unread-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #f91155; color: #fff; font-size: 11px; font-weight: 800; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); z-index: 2; } #chat-fab.chat-has-unread { animation: chat-shake .6s ease-in-out; } /* ---------- Кнопки в таблицах админки: белый текст ---------- */ .grid td .btn-add { color: #fff !important; } .grid td .btn-outline { color: var(--blue); } @media (max-width: 768px) { .panel[style*="max-width:900px"] { max-width: 100% !important; margin: 0 !important; } } /* ---------- Пульсация кнопки чата при новых сообщениях ---------- */ #chat-fab.chat-pulse-alert { animation: chat-attention 1.6s ease-in-out infinite; } @keyframes chat-attention { 0%, 100% { box-shadow: 0 8px 24px rgba(0, 82, 204, .4), 0 0 0 0 rgba(249, 17, 85, .5); } 50% { box-shadow: 0 8px 24px rgba(0, 82, 204, .4), 0 0 0 12px rgba(249, 17, 85, 0); } } /* ---------- Точка незаполненного профиля ---------- */ .profile-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 4px #f59e0b; } .footer { text-align: center; color: var(--muted); padding: 30px; font-size: 13px; } @media (max-width: 1024px) { .product-layout { grid-template-columns: 1fr; } } @media (max-width: 860px) { /* Видео — одна колонка на всю ширину */ .video-grid { grid-template-columns: 1fr; } /* Защита от вылезания за край */ body { overflow-x: hidden; } .header-inner { max-width: 100%; } .header-search input { min-width: 0; } .header-nav { overflow-x: auto; scrollbar-width: none; max-width: 100%; } .header-nav::-webkit-scrollbar { display: none; } .header-nav .nav-item { flex: 0 0 auto; } .container { padding: 12px; max-width: 100%; } table.grid { display: block; overflow-x: auto; } .grid td, .grid th { word-break: break-word; } .track, .card-brand, .muted, .order-item-name { word-break: break-word; } .section-title { word-break: break-word; } /* Форма предложения видео — на всю ширину */ .suggest-video form input[type="text"], .suggest-video form input[type="url"] { flex: 1 1 100% !important; min-width: 0 !important; } .suggest-video form .btn-add { width: 100% !important; } .header-inner { flex-wrap: wrap; } .header-nav { gap: 10px; } .nav-item { min-width: 40px; } .header-search { order: 3; flex-basis: 100%; } .product-page { flex-direction: column; } .product-img { width: 100%; min-width: 0; } .cart-layout { flex-direction: column; } .cart-summary { width: 100%; position: static; } /* Чипы категорий/марок — крупнее под пальцы (без «съезда» страницы) */ .chips { gap: 8px; } .chip { padding: 11px 18px; font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; } /* Карточки товаров — по 2 в ряд */ .grid-products { grid-template-columns: repeat(2, 1fr); gap: 8px; } .card-body { padding: 8px; } .card-title { font-size: 12.5px; height: 32px; } .card-price { font-size: 16px; } .btn-add { padding: 8px; font-size: 13px; } } /* Полноэкранный режим чата */ #chat-panel.chat-full { top: 12px; right: 12px; bottom: 12px; left: 12px; width: auto; max-width: none; height: auto; max-height: none; border-radius: 16px; z-index: 10000; } #chat-panel.chat-full #chat-messages { flex: 1; min-height: 0; } .chat-head-btns { display: flex; align-items: center; flex: 0 0 auto; margin-left: 12px; } #chat-expand { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 18px; cursor: pointer; opacity: .9; position: relative; z-index: 10000; user-select: none; } #chat-expand:hover { background: rgba(255,255,255,.15); opacity: 1; } @media (max-width: 640px) { #chat-panel.chat-full { top: 0; right: 0; bottom: 0; left: 0; border-radius: 0; } } /* Кнопка-меню разделов на мобильных */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: #1f2a3d; cursor: pointer; flex: 0 0 auto; box-shadow: 0 2px 8px rgba(15,34,67,.06); transition: background .15s, transform .12s; } .nav-toggle:hover { background: #f4f7fc; } .nav-toggle:active { transform: scale(.93); } @keyframes nav-pop-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes nav-item-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .nav-popup { display: block; position: absolute; top: calc(100% + 8px); right: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 48px rgba(15,34,67,.18); z-index: 1001; min-width: 240px; padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.96); transform-origin: top right; transition: opacity .18s ease, transform .18s cubic-bezier(.2,.9,.3,1.25), visibility 0s .18s; } .nav-popup.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity .18s ease, transform .18s cubic-bezier(.2,.9,.3,1.25), visibility 0s; } .nav-popup a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: #1f2a3d; text-decoration: none; font-size: 15px; font-weight: 500; opacity: 0; transform: translateX(-8px); } .nav-popup.open a { animation: nav-item-in .22s ease forwards; } .nav-popup.open a:nth-child(1) { animation-delay: .02s; } .nav-popup.open a:nth-child(2) { animation-delay: .05s; } .nav-popup.open a:nth-child(3) { animation-delay: .08s; } .nav-popup.open a:nth-child(4) { animation-delay: .11s; } .nav-popup.open a:nth-child(5) { animation-delay: .14s; } .nav-popup.open a:nth-child(6) { animation-delay: .17s; } .nav-popup.open a:nth-child(7) { animation-delay: .20s; } .nav-popup.open a:nth-child(8) { animation-delay: .23s; } .nav-popup.open a:nth-child(9) { animation-delay: .26s; } .nav-popup a:hover { background: #eef3fb; color: var(--blue); } .nav-popup a svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--blue); opacity: .85; } .nav-popup .badge { position: static; margin-left: auto; } @media (max-width: 860px) { .header-nav { display: none; } .nav-toggle { display: flex; position: absolute; top: 8px; right: 12px; } } /* Мобильные таблицы админки — карточный вид */ @media (max-width: 860px) { table.grid { display: block; width: 100%; } table.grid tr { display: block; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: #fff; padding: 4px 6px; } table.grid tr:first-child { display: none; } table.grid td, table.grid th { display: block; border: none; padding: 6px 8px; text-align: left !important; white-space: normal !important; word-break: normal; overflow-wrap: anywhere; } table.grid img { width: 56px !important; height: 56px !important; object-fit: cover; } table.grid input[type=number] { width: 64px; } table.grid input, table.grid select { max-width: 100%; } table.grid form { flex-wrap: wrap; } table.grid .btn-outline, table.grid .btn-add, table.grid .btn-danger { padding: 8px 14px; } } .card-sold { display: block; margin-top: 2px; font-size: 13px; }


/* === Правки 26.09: корзина без скачка + меню ⋯ в админ-таблице === */

/* Кнопка «В корзину» и степпер — одинаковой ширины (карточки и страница товара) */
.card .cart-widget { display: flex; align-items: center; justify-content: center; min-height: 41px; }
.card .cart-widget form { flex: 1; }
.card .cart-widget .qty-stepper { width: 100%; display: flex; }
.card .cart-widget .qty-stepper > * { flex: 1 1 0; min-width: 0; }
.card .out { display: flex; align-items: center; justify-content: center; min-height: 41px; width: 100%; text-align: center; }
.product-page .cart-widget { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
.product-page .buy-row { width: 100%; box-sizing: border-box; }
.product-page .buy-row .btn-add { flex: 1; }
.product-page .qty-stepper { width: 100%; display: flex; }
.product-page .qty-stepper > * { flex: 1 1 0; min-width: 0; }
.product-page .qty-stepper .qty-input, .product-page .qty-stepper .qty-value { flex: 0 0 56px; }

/* Меню ⋯ в таблице товаров: раскрытие не двигает раскладку */
.dd { position: relative; display: inline-block; }
.dd > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::marker { content: ""; }
.dd > summary:focus { outline: none; }
.dd > summary:focus-visible { outline: 2px solid var(--blue); border-radius: 8px; }
.dd-menu { position: absolute; right: 0; top: 110%; display: none; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); z-index: 200; padding: 6px; }
.dd[open] .dd-menu { display: block; }
.dd-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: none; background: none; border-radius: 8px; font-size: 14px; color: #1f2a3d; text-decoration: none; cursor: pointer; text-align: left; font-family: inherit; box-sizing: border-box; }
.dd-item:hover { background: #eef3fb; }
.dd-item.danger { color: #c0392b; }
.dd-item.danger:hover { background: #fdecec; }
.admin-parts-grid td.actions { vertical-align: middle; text-align: center; white-space: nowrap; }
.admin-parts-grid .dd > summary.icon-btn { width: 32px; height: 32px; padding: 0; }


/* === Сетка главной: 5 карточек в ряд, шире === */
.grid-products { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1100px) { .grid-products { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
@media (max-width: 860px) { .grid-products { grid-template-columns: repeat(2, 1fr); } }


/* === Фото товара: вмещение целиком, без обрезки === */
.card-img { background: #ffffff; }
.product-img { background: #ffffff; }
.card-img img:not(.card-badge), .product-img img:not(.card-badge) {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-position: center !important;
  padding: 6px;
  box-sizing: border-box;
}
/* метка характеристики: маленькая, слева вверху */
.card-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; z-index: 5; pointer-events: none; }
img.card-badge { width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; object-fit: contain !important; background: rgba(255,255,255,.92); border-radius: 8px; box-shadow: 0 2px 8px rgba(15,34,67,.18); padding: 2px; box-sizing: border-box; }
.gallery-main #main-photo { cursor: zoom-in; }