/* ============================================================ TASK-0161 · Карточка товара — новый дизайн (тест на heavytop) Классы pc-/pc__. Подключается ТОЛЬКО в тестовом шаблоне «Товар — тест НД (TASK-0161)». Manrope из макета заменён на локальный Inter: Google Fonts на проекте запрещены (TASK-0147). ============================================================ */ /* --- защита от глобальных правил styles.min.css: div{display:flex;justify-content:space-between}, ul li:before{звезда} и т.п. ВАЖНО (урок первой версии): сброс обязан быть СЛАБЕЕ классовых правил. :where(.pc) div = специфичность 0-0-1 — бьёт сайтовый div{...} (0-0-1) только порядком каскада (этот файл грузится позже styles.min.css), а любой класс (.pc__grid, .rating__best и т.д.) его перекрывает. --- */ .pc { text-align: left; } :where(.pc) div { display: block; justify-content: flex-start; } :where(.pc) ul { list-style: none; margin: 0; padding: 0; } /* нейтрализатор сайтовой звёздочки у li (ul li:before, 0-0-3): нужен 0-1-1, без !important — чтобы разделитель .pc__crumbs li+li::before (0-1-2) жил */ .pc li::before { content: none; } .pc [hidden] { display: none !important; } :where(.pc) img { max-width: 100%; } /* ширина = контейнеру шапки сайта (.page: 1600px, паддинги 16px) */ .pc { --pc-accent:#16528c; --pc-cta:#f08a24; --pc-red:#e2231a; --pc-ink:#14181f; --pc-muted:#5c6675; --pc-light:#7b8494; --pc-line:#e4e7ec; --pc-bg:#f4f5f7; font-family:'Inter',-apple-system,'Segoe UI',sans-serif; color:var(--pc-ink); max-width:1600px; margin:0 auto; padding:24px 16px 48px; box-sizing:border-box; } .pc *, .pc *::before, .pc *::after { box-sizing:border-box; } .pc a { color:var(--pc-accent); text-decoration:none; } .pc a:hover { color:#0f3d6b; text-decoration:underline; } .pc h1, .pc h2 { margin:0; letter-spacing:-0.02em; } /* --- крошки (разметку даёт goodsCrumbs → pc.crumbItem) --- */ .pc__crumbs { margin-bottom:18px; font-size:13px; color:var(--pc-light); } .pc__crumbs ul { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pc__crumbs li { display:flex; gap:8px; align-items:center; margin:0; padding:0; } /* TASK-0171, баг 5 (Дмитрий, 11.08.2026): разделитель наезжал на последнюю букву предыдущей крошки — «Столешницы» читалось как «Столешниць|». Причина: сайтовый глобаль `ul li:before` задаёт не только значок, но и `position:absolute; left:-1rem; top:3px`. Мы переопределяли только content/color/font, а геометрия доставалась в наследство — псевдоэлемент уезжал на 1rem влево, поверх соседа. Поэтому позицию возвращаем в поток явно: тогда «/» становится обычным flex-элементом внутри li и разводится теми же gap:8px. */ .pc__crumbs li + li::before { content:'/'; color:var(--pc-light); font-family:inherit; font-size:13px; position:static; left:auto; right:auto; top:auto; bottom:auto; } .pc__crumbs a { color:var(--pc-light); } .pc__crumbs li:last-child span { color:var(--pc-ink); } /* --- шапка карточки --- position:static страховкой: сайтовая тема фиксирует тег header, и любое совпадение классов не должно утащить блок из потока */ .pc__head { display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; position:static !important; } .pc__head-main { flex:1; } .pc__title { font-size:30px; line-height:1.2; font-weight:800; margin-bottom:10px; text-wrap:pretty; } .pc__meta { display:flex; gap:20px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--pc-light); } .pc__meta-item i { font-style:normal; color:var(--pc-ink); } .pc__rating { display:flex; gap:8px; align-items:center; } /* статичные звёзды в шапке (значение рейтинга; интерактивный виджет — в табе «Отзывы») */ .pc__stars { position:relative; display:inline-block; font-size:15px; line-height:1; letter-spacing:2px; color:#d7dce4; white-space:nowrap; } .pc__stars-bg { display:inline; } .pc__stars-fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:#f0a020; display:inline-block; } /* интерактивный виджет SimpleRating в табе «Отзывы» */ .pc__panel--reviews .rating { display:block; margin:6px 0 10px; } .pc__reviews-hint { color:var(--pc-muted); font-size:13px; } .pc__panel--reviews .pc__rating-note { display:inline-block; margin-top:6px; } /* TASK-0171, баг 4 (Дмитрий, 11.08.2026): звёзды в шапке карточки теперь тот же интерактивный виджет SimpleRating, что и во вкладке «Отзывы», а не картинка. Компонентный спрайт 130×35 велик для строки меты — ужимаем трансформом; трансформ не меняет занимаемое место, поэтому лишнюю ширину и высоту снимаем отрицательными полями. */ .pc__rating .rating { display:inline-block; transform:scale(.62); transform-origin:left center; margin:0 -50px 0 0; } .pc__rating .rating__best { margin:0; } .pc__rating .rating.rating_active .rating__star { cursor:pointer; } .pc__rating-note { font-size:13px; color:var(--pc-light); white-space:nowrap; } .pc__rating-note b { color:var(--pc-ink); } /* избранное/сравнение: глушим сайтовую кнопочную тему (оранжевый фон, радиус) */ .pc__actions { display:flex; gap:18px; align-items:center; padding-top:6px; } .pc .pc__act { display:inline-flex; gap:7px; align-items:center; background:transparent !important; border:0; border-radius:0 !important; box-shadow:none !important; padding:0; cursor:pointer; font-family:inherit; font-size:13px; color:var(--pc-muted); } .pc .pc__act:hover { color:var(--pc-accent); } .pc__act-ico { font-size:15px; line-height:1; } .pc__grid { display:grid; grid-template-columns:520px minmax(0,1fr) 360px; gap:20px; align-items:stretch; } /* элемент грида по умолчанию не сжимается меньше своего содержимого (min-width:auto) и может вылезти за контейнер — на узком экране это уводило правую колонку (блок покупки/сервисов) за край. Жёстко запрещаем: */ .pc__grid { max-width:100%; } .pc__grid > * { min-width:0; max-width:100%; } .pc__card { background:#fff; border:1px solid var(--pc-line); border-radius:14px; } /* симметрия 100%: левые карточки жёстко в высоту ряда (stretch сам не дотягивает) */ .pc__grid > .pc__gallery, .pc__grid > .pc__specs, .pc__grid > .pc__options { height:100%; } /* TASK-0219: раскладка с сервисами полосой под гридом — включается классом .pc--strip из скрипта в шаблоне, когда иначе ряд раздувается и в колонках появляются пустые зоны. .pc--measure — служебный класс на время замера. */ .pc--measure .pc__grid { align-items:start; } .pc--measure .pc__grid > .pc__gallery, .pc--measure .pc__grid > .pc__specs, .pc--measure .pc__grid > .pc__options { height:auto; } /* на момент замера сайтовый JS ещё не открыл первую панель вариантов — показываем её сами, иначе средняя колонка меряется почти пустой */ .pc--measure .pc__opt-panel { display:none !important; } .pc--measure .pc__opt-panel:first-of-type { display:block !important; } /* и не собрал виджет размера: нативный список размеров ещё развёрнут и завышает колонку покупки на 100...600 px. На время замера прячем его содержимое — остаётся зарезервированная inline min-height, то есть финальная высота. */ .pc--measure .pc__sizes { display:none !important; } /* --- галерея --- */ .pc__gallery { padding:20px; display:flex; flex-direction:column; } .pc__badges { display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-height:26px; margin-bottom:12px; } .pc__badge { background:var(--pc-red); color:#fff; font-size:12px; font-weight:800; padding:5px 10px; border-radius:6px; letter-spacing:0.03em; } .pc__badge--info { background:#eaf3ff; color:var(--pc-accent); font-weight:700; } .pc__badge--stock { background:#e7f6ee; color:#1c8a4a; font-weight:700; } /* TASK-0219: высота бокса фото = пропорция превью (470×465), не высота колонки */ .pc__photo { flex:0 0 auto; display:flex; align-items:center; justify-content:center; height:auto; aspect-ratio:470/465; max-height:465px; position:relative; } .pc__photo-link { display:none; width:100%; height:100%; } .pc__photo-link.is-active { display:flex; align-items:center; justify-content:center; } .pc__photo-link img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; } .pc__photo iframe { width:100%; height:100%; border:0; display:none; } .pc__thumbs { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; min-height:76px; } .pc .pc__thumb { width:76px; height:76px; padding:4px; background:#fff !important; border:2px solid var(--pc-line); border-radius:10px !important; box-shadow:none !important; cursor:pointer; position:relative; } .pc__thumb img { width:100%; height:100%; object-fit:contain; display:block; } .pc__thumb.is-active { border-color:var(--pc-accent); } .pc__thumb-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(20,24,31,.35); border-radius:8px; color:#fff; } .pc__hint { font-size:13px; color:var(--pc-light); margin-top:12px; } /* --- характеристики (карточка) --- */ .pc__specs { padding:22px 24px; display:flex; flex-direction:column; } .pc__specs h2 { font-size:17px; font-weight:800; margin-bottom:6px; } .pc__specs-body { overflow-x:auto; } .pc__specs-body table { width:100% !important; border-collapse:collapse; font-size:14px; } .pc__specs-groups { display:block; } .pc__panel--specs .pc__specs-groups { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:0 36px; align-items:start; } .pc__panel--specs .pc__specs-groups > table { width:100% !important; } .pc__specs-body td { padding:10px 8px 10px 0 !important; border-bottom:1px solid #eef0f4; vertical-align:top; width:auto !important; height:auto !important; } .pc__specs-body tr td:first-child { color:var(--pc-muted); } .pc__specs-body tr td:last-child { font-weight:700; text-align:right; white-space:nowrap; } .pc__tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:16px; } .pc__tag { background:#f2f4f8; color:#2b3341; font-size:13px; font-weight:600; padding:7px 12px; border-radius:20px; } /* --- выбор исполнения: обивка / каркас / цвет (вариант карточки TASK-0164) --- Сайтовые классы (tabs details / tabcontent / thumb / large) сохранены — их слушает scripts.min.js; здесь только внешний вид. */ .pc__options { padding:0; display:flex; flex-direction:column; overflow:hidden; } .pc__opt-tabs { display:flex; gap:0; border-bottom:1px solid var(--pc-line); flex:0 0 auto; } .pc .pc__opt-tabs li { display:flex; align-items:center; gap:8px; padding:15px 20px; margin:0; font-size:15px; font-weight:600; color:var(--pc-light); cursor:pointer; background:#f8f9fb; border-bottom:3px solid transparent; white-space:nowrap; } .pc .pc__opt-tabs li + li { border-left:1px solid var(--pc-line); } .pc .pc__opt-tabs li.active { color:var(--pc-ink); font-weight:800; background:#fff; border-bottom-color:var(--pc-cta); } .pc__opt-dot { width:8px; height:8px; border-radius:50%; background:var(--pc-cta); flex:0 0 auto; } .pc__opt-dot.is-set { background:#1c8a4a; } /* .tabcontent у темы — flex, и jQuery .show() пишет inline display:flex (инлайн бьёт CSS). Поэтому не воюем за display, а делаем панель flex-безопасной: колонка + дети во всю ширину. !important на display нельзя — сломает .hide(). */ .pc .pc__opt-panel { display:block; flex-direction:column; align-items:stretch; padding:18px 20px 8px; } /* Область вариантов: компактные плитки + фиксированная высота со скроллом, чтобы блок не вытягивался при любом числе обивок (--pc-opt-h ставит product-card.js по высоте фото-колонки). Снизу — градиент-подсказка «список продолжается». */ /* TASK-0171, баг 1 (Дмитрий, 11.08.2026): было overscroll-behavior:contain — оно запрещает передачу прокрутки странице, и при курсоре над блоком вариантов колесо переставало листать страницу вообще. Здесь это не нужно: блок не модалка, а часть потока. auto = долистал внутренний список -> дальше едет страница. В выпадашке размера contain оставлен осознанно — там это правильно. */ .pc .pc__variants { width:100%; min-width:0; flex:1 1 100%; max-height:var(--pc-opt-h, 420px); overflow-y:auto; overscroll-behavior:auto; padding-right:6px; scrollbar-width:thin; } .pc .pc__variants::-webkit-scrollbar { width:8px; } .pc .pc__variants::-webkit-scrollbar-thumb { background:#d5dae2; border-radius:4px; } .pc .pc__variants::-webkit-scrollbar-track { background:transparent; } .pc__opt-scroll { position:relative; } .pc__opt-scroll.has-more::after { content:''; position:absolute; left:0; right:6px; bottom:0; height:36px; pointer-events:none; background:linear-gradient(rgba(255,255,255,0), #fff); } .pc__opt-count { color:var(--pc-light); } .pc__opt-lead { font-size:13px; color:var(--pc-muted); margin-bottom:12px; } .pc__variants { display:grid; grid-template-columns:repeat(auto-fill, minmax(82px, 1fr)); gap:10px; align-content:start; } .pc .pc__variant { position:relative; margin:0; padding:6px; border:2px solid var(--pc-line); border-radius:9px; background:#fff; cursor:pointer; text-align:center; } .pc .pc__variant:hover { border-color:#c9d6e6; } .pc .pc__variant:focus-visible { outline:2px solid var(--pc-accent); outline-offset:2px; } .pc__variant-ico { position:relative; } .pc .pc__variant .image-wrapper img { width:100% !important; height:44px !important; max-width:none; object-fit:cover; border-radius:5px; display:block; } /* название в две строки максимум — иначе плитки прыгают по высоте */ .pc .pc__variant figcaption { margin-top:5px; font-size:11px; line-height:1.25; color:#2b3341; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:27px; word-break:break-word; } /* «Выбран»: сайтовый JS снимает класс hidden с .overlay */ .pc .pc__variant .overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:rgba(22,82,140,.72); border-radius:6px; color:#fff; font-size:11px; } .pc .pc__variant .overlay.hidden { display:none; } .pc .pc__variant .overlay p { margin:0; } .pc .pc__variant .overlay .zmdi { font-size:18px; } /* figure.large нужна корзине (из неё читается выбранное) — визуально не показываем */ .pc__opt-large { display:none; } .pc__opt-note { margin:14px 20px 16px; font-size:12px; line-height:1.45; color:var(--pc-light); } /* сводка выбранного рядом с кнопкой покупки */ .pc__picks { margin-top:16px; border:1px solid var(--pc-line); border-radius:10px; overflow:hidden; } .pc__pick { display:flex; align-items:center; gap:10px; padding:9px 12px; font-size:13px; } .pc__pick + .pc__pick { border-top:1px solid var(--pc-line); } .pc__pick-ico { width:28px; height:28px; border-radius:6px; overflow:hidden; background:#f2f4f8; flex:0 0 auto; } .pc__pick-ico img { width:100%; height:100%; object-fit:cover; display:block; } .pc__pick-label { color:var(--pc-muted); } .pc__pick-val { margin-left:auto; font-weight:700; color:var(--pc-light); text-align:right; } .pc__pick.is-set .pc__pick-val { color:var(--pc-ink); } /* --- покупка --- */ .pc__buy { display:flex; flex-direction:column; gap:12px; } .pc__price-card { padding:20px; } .pc__price-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .pc__price { font-size:34px; font-weight:800; letter-spacing:-0.02em; white-space:nowrap; } .pc__price #opt_koff { font-size:18px; font-weight:700; color:var(--pc-muted); } .pc__price-old { font-size:17px; color:#98a1b0; text-decoration:line-through; white-space:nowrap; } .pc__price-note { font-size:13px; color:var(--pc-muted); margin-top:4px; } .pc__retail { margin-top:14px; background:#f6f8fb; border:1px dashed #c9d6e6; border-radius:10px; padding:12px 14px; } .pc__retail-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; } .pc__retail-row > span { font-size:14px; font-weight:700; color:var(--pc-muted); } .pc__retail-row b { font-size:20px; font-weight:800; color:#2b3341; white-space:nowrap; } .pc__retail-row #rozn_koff { font-size:14px; } .pc__retail p { margin:4px 0 0; font-size:12px; color:var(--pc-muted); line-height:1.4; } /* TASK-0190: вместо числа розничной цены — условие наценки. Это ключевое условие покупки, поэтому текст читаемого размера в той же выделенной рамке, а не сноска. */ .pc__retail-note { font-size:15px; line-height:1.45; color:var(--pc-ink); font-weight:600; } .pc__retail-note b { font-weight:800; color:var(--pc-accent); white-space:nowrap; } /* число с наценкой остаётся в DOM для корзины (.tochart читает data-price), но не показывается */ .pc .pc__retail-data { display:none !important; } /* размеры/углы (старый функциональный блок в новой колонке) */ .pc__sizes { margin-top:16px; } .pc__sizes-title { font-size:13px; font-weight:700; color:var(--pc-muted); margin-bottom:8px; } .pc__sizes table.price-options { width:100%; border-collapse:collapse; font-size:13px; } .pc__sizes th { text-align:left; font-size:13px; color:var(--pc-muted); padding:4px 6px 4px 0; } .pc__sizes td { padding:4px 6px 4px 0; vertical-align:top; } /* TASK-0205: сайтовый input+ul (источник цены для ProductScripts и корзины, узлы остаются в DOM) прячем СРАЗУ, а не по классу has-picker после отрисовки JS-виджета. Раньше на карточках с длинным MigX-списком размеров неукрощённый