/* fit.css — 2026-11-05. Подгонка под все экраны (320 px … 2560 px) и мелкие баги вёрстки.
Подключается ПОСЛЕДНИМ, поэтому переопределяет store/arcade/tech/prism.
Правило: здесь только размеры/сетки/поведение, цвета — через уже существующие переменные. */
/* ── Ширина контейнера: на больших мониторах сайт был узкой полосой посередине ── */
@media (min-width: 1600px) { :root { --maxw: 1480px; } }
@media (min-width: 2200px) { :root { --maxw: 1760px; } html { font-size: 17px; } }
/* ── Хлебные крошки: .crumbs { padding: 16px 0 } затирал боковой отступ .wrap,
на телефоне текст прилипал к краю экрана ── */
.crumbs { padding-top: 16px; padding-bottom: 4px; padding-left: 20px; padding-right: 20px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.crumbs::-webkit-scrollbar { display: none; }
/* ── Полоса разделов: обрезалась на полуслове («Сетевое обо»). Мягкое затухание
по краю показывает, что её можно прокрутить ── */
.catnav .wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.catnav .wrap a { white-space: nowrap; flex: 0 0 auto; }
/* ── Сетка товаров ── */
.prod-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
@media (min-width: 1600px) { .prod-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } }
@media (max-width: 900px) { .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
/* Телефон: две карточки в ряд, как в любом нормальном магазине (было — одна на весь экран) */
@media (max-width: 640px) {
.prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prod { border-radius: 18px !important; }
.prod:hover { transform: none !important; }
.prod-img img { padding: 8px; }
.prod-body { padding: 9px 10px 11px; }
.prod-brand { font-size: 9.5px; letter-spacing: .08em !important; }
.prod-name { font-size: 12.5px; line-height: 1.35; margin: 3px 0 8px; min-height: 2.7em; }
.prod-price { font-size: 15px; }
.prod-old { font-size: 11px; }
.prod-monthly { font-size: 10.5px; }
.prod-actions .btn { height: 36px; font-size: 12.5px; padding: 0 8px; border-radius: 12px; }
.card-tools { top: 6px !important; right: 6px !important; gap: 4px !important; }
.card-tool { width: 30px !important; height: 30px !important; border-radius: 10px !important; }
.card-tool svg { width: 15px; height: 15px; }
.badge { top: 7px; left: 7px; padding: 3px 8px; font-size: 10px; }
}
@media (max-width: 359px) { .prod-grid { gap: 8px; } .prod-body { padding: 8px; } .prod-name { font-size: 12px; } .prod-price { font-size: 14px; } }
/* ── Страница раздела ── */
.catalog-main { min-width: 0; }
.coll-desc { color: var(--text-dim); margin: -6px 0 16px; max-width: 760px; font-size: 14px; }
.catalog-head h1 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 640px) {
.catalog { gap: 12px; margin-top: 10px; }
.catalog-head { gap: 8px 12px; margin-bottom: 12px; }
.catalog-head h1 { font-size: 23px; }
.catalog-head .sortsel { margin-left: auto; height: 38px; font-size: 13px; max-width: 52%; }
}
/* Фильтры: на телефоне — свёрнутая кнопка «Фильтры и разделы», а не два экрана
списков перед первым товаром. На компьютере — обычная боковая колонка. */
.filters-m > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; padding: 2px 0; }
.filters-m > summary::-webkit-details-marker { display: none; }
.filters-m > summary::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; }
.filters-m > summary::after { content: "▾"; margin-left: auto; transition: transform .2s; opacity: .6; }
.filters-m[open] > summary::after { transform: rotate(180deg); }
.filters-m[open] > summary { margin-bottom: 14px; }
@media (min-width: 861px) {
.filters-m > summary { display: none; }
.filters-m::details-content { content-visibility: visible; display: block; }
}
@media (max-width: 860px) {
.filters { padding: 12px 16px !important; border-radius: 16px !important; }
}
.f-check { display: flex !important; align-items: center; gap: 8px; cursor: pointer; }
.f-check input { width: 16px; height: 16px; accent-color: var(--navy-500, #375BEB); flex: 0 0 16px; }
.f-check small { margin-left: auto; color: var(--text-dim); font-size: 11.5px; }
.f-brand-list { max-height: 260px; overflow-y: auto; padding-right: 4px; }
/* Соседние подразделы — чипы с прокруткой */
.sibchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; padding-bottom: 2px; }
.sibchips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line, var(--edge)); background: var(--surface); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.chip:hover { border-color: var(--navy-400); }
.chip.on { background: var(--grad, var(--navy-500)); color: #fff; border-color: transparent; }
/* Плитки подразделов: иконка + название + сколько товаров (вместо SEO-шаблона
«…в Ереване: цены, наличие» внутри огромной «таблетки») */
.subcats { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 10px !important; margin: 0 0 22px !important; }
html .subcats a.subcat { display: flex !important; align-items: center; gap: 12px; padding: 12px 14px !important; border-radius: 16px !important; min-height: 64px; }
.subcat .sc-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft, var(--silver-50)); color: var(--p1, var(--navy-500)); transition: background .3s, color .3s; }
.subcat .sc-ico svg { width: 22px; height: 22px; }
.subcat:hover .sc-ico { background: rgba(255,255,255,.22); color: #fff; }
.subcat .sc-txt { display: flex; flex-direction: column; min-width: 0; }
.subcat .sc-name { font-size: 14px; font-weight: 650; line-height: 1.25; }
.subcat .sc-cnt { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.subcat:hover .sc-cnt { color: rgba(255,255,255,.85); }
.subcat .sc-desc { display: none !important; }
@media (max-width: 640px) {
.subcats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
html .subcats a.subcat { padding: 10px !important; gap: 9px; min-height: 58px; border-radius: 14px !important; }
.subcat .sc-ico { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
.subcat .sc-ico svg { width: 19px; height: 19px; }
.subcat .sc-name { font-size: 12.5px; }
.subcat .sc-cnt { font-size: 11px; }
}
/* Постраничный вывод (раньше в разделе показывались первые 200 и всё) */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 28px 0 8px; }
.pg { min-width: 40px; height: 40px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--line, var(--edge)); background: var(--surface); font-weight: 600; font-size: 14px; }
.pg:hover { border-color: var(--navy-400); }
.pg.cur { background: var(--grad, var(--navy-500)); color: #fff; border-color: transparent; }
.pg-gap { color: var(--text-dim); padding: 0 2px; }
@media (max-width: 480px) { .pg { min-width: 36px; height: 36px; padding: 0 9px; font-size: 13px; } .pg-nav { flex-basis: 100%; order: 9; } }
/* ── Главная: плитки разделов ── */
.coll-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.coll-tile .ico svg { width: 26px; height: 26px; }
.coll-tile .nm { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 640px) {
html .coll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html .coll-grid .coll-tile { padding: 12px 6px !important; border-radius: 16px !important; }
html .coll-grid .coll-tile .ico { width: 42px !important; height: 42px !important; margin: 0 auto 8px !important; border-radius: 13px !important; }
html .coll-grid .coll-tile .ico svg { width: 21px; height: 21px; }
html .coll-grid .coll-tile .nm { font-size: 11px !important; line-height: 1.25; letter-spacing: -.01em; }
html .coll-grid .coll-tile .ct { font-size: 10.5px !important; }
}
@media (max-width: 359px) { .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── Общие мелочи ── */
img, svg, video { max-width: 100%; }
.page-h1 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 640px) {
.page-h1 { font-size: 24px !important; line-height: 1.2; }
.section { margin-top: 30px; }
.section-head h2 { font-size: 22px; }
.usp-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.usp { padding: 12px !important; }
.usp b { font-size: 13px; } .usp span { font-size: 11.5px; }
}
/* WhatsApp-кнопка не должна закрывать «В корзину» у правой карточки */
@media (max-width: 640px) { .wa-float { width: 48px !important; height: 48px !important; right: 12px !important; bottom: 76px !important; } }
/* Страница товара на телефоне: цена и «В корзину» всегда под пальцем — появляется,
когда основная кнопка ушла за экран (см. store.js) */
.pdp-sticky { display: none; }
@media (max-width: 760px) {
.pdp-sticky { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; align-items: center; gap: 12px;
padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--surface, #fff); border: 1px solid var(--line, var(--edge));
box-shadow: 0 12px 34px -10px rgba(15,21,80,.35); transform: translateY(140%); transition: transform .3s ease; }
.pdp-sticky.on { transform: none; }
.pdp-sticky .ps-price { display: flex; flex-direction: column; min-width: 0; }
.pdp-sticky .ps-price b { font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.pdp-sticky .ps-price small { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.pdp-sticky .btn { margin-left: auto; height: 44px; padding: 0 18px; border-radius: 14px; white-space: nowrap; }
body:has(.pdp-sticky.on) .wa-float { bottom: 84px !important; }
}
/* Таблица характеристик: длинные значения не ломают ширину */
.spec-table td { overflow-wrap: anywhere; }
@media (max-width: 640px) { .spec-table td { font-size: 13px; padding: 9px 6px !important; } .spec-table td:first-child { width: 44%; } }
/* Слайдер на планшете (641–980 px): текст висел посередине с пустотой слева */
@media (max-width: 780px) { .slide-inner > .slide-copy { justify-self: stretch; max-width: none !important; padding-left: 28px !important; padding-right: 28px !important; } }
/* Тёмная тема: белые фото товаров — скруглённой плашкой, а не резким квадратом */
:root[data-theme="dark"] .prod-img img { border-radius: 14px; background: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prod-img img { border-radius: 14px; background: #fff; } }
/* Армянская «Ավելացնել զամբյուղ» длиннее «В корзину» — в узкой карточке обрезалась */
@media (max-width: 640px) {
.prod-actions .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px !important; letter-spacing: -.01em; }
html[lang="hy"] .prod-actions .btn, html[lang="hy-AM"] .prod-actions .btn { font-size: 11px !important; letter-spacing: -.02em; }
}
@media (max-width: 359px) { html[lang="hy"] .prod-actions .btn, html[lang="hy-AM"] .prod-actions .btn { font-size: 10px !important; } }
/* ===== Полки товаров на главной (2026-11-06): ровные ленты одного размера ===== */
.shelf .section-head { align-items: center; justify-content: space-between; gap: 12px; }
.shelf-nav { margin-left: auto; }
.shelf .section-head h2 small { display: inline-block; margin-left: 10px; font-size: 13px; font-weight: 600; opacity: .55; letter-spacing: 0; }
.shelf-nav { display: flex; align-items: center; gap: 8px; }
.shelf-nav a { margin-left: 6px; white-space: nowrap; }
.shelf-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--card, #fff);
color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s, opacity .15s; }
.shelf-btn:hover { transform: scale(1.06); }
.shelf-btn[disabled] { opacity: .35; cursor: default; transform: none; }
.shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 14px; margin: 0 -2px; }
.shelf-row::-webkit-scrollbar { display: none; }
.shelf-row > .prod { scroll-snap-align: start; min-width: 0; height: 100%; }
.shelf-row .prod-name { min-height: 2.6em; }
@media (min-width: 1600px) { .shelf-row { grid-auto-columns: calc((100% - 5 * 18px) / 6); gap: 18px; } }
@media (max-width: 1100px) { .shelf-row { grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; } }
@media (max-width: 900px) { .shelf-row { grid-auto-columns: calc((100% - 2 * 12px) / 3); gap: 12px; } }
@media (max-width: 640px) {
.shelf-row { grid-auto-columns: 44%; gap: 10px; margin: 0 -16px; padding: 4px 16px 12px; scroll-padding: 0 16px; }
.shelf-btn { display: none; }
.shelf .section-head h2 small { display: block; margin: 2px 0 0; }
}
/* Подпись разработчика в подвале */
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: center; }
.made-by { color: inherit; opacity: .7; text-decoration: none; font-size: 13px; }
.made-by b { font-weight: 700; }
.made-by:hover { opacity: 1; text-decoration: underline; }