/* ============================================================ Выкрас — экран 03 «Карточка товара» (десктоп 5a / мобайл 5m / планшет 5t). Только уникальные блоки экрана (префикс vk-pdp-*). База (кнопки, .vk-reimburse, .vk-stepper, .vk-mcard__can, токены) — из main.css, не переопределяется. Значения 1:1 из reference/vykras-storefront.dc.html. ============================================================ */ /* ---- Раскладка: 7fr медиа/система + 5fr покупка ---- */ .vk-pdp{ display:grid;grid-template-columns:7fr 5fr;column-gap:56px;align-items:start; padding:40px var(--pad) 64px; } .vk-pdp__left{min-width:0} .vk-pdp__buy{min-width:0} /* ---- Хлебные крошки ---- */ .vk-pdp__crumb{font:400 13px var(--ff-mono);color:var(--ink-45);margin-bottom:22px} /* ---- Главное медиа (пак-шот) ---- */ .vk-pdp__stage-card{background:var(--surface);border:1px solid var(--line-12);border-radius:16px;overflow:hidden} .vk-pdp__stage{height:430px;position:relative} .vk-pdp__stage-badge{ position:absolute;top:18px;left:18px;background:var(--graphite);color:var(--surface); font:500 11px var(--ff-mono);padding:6px 10px;border-radius:7px;pointer-events:none; } /* Реальное фото товара в сцене (contain — тара целиком) + рисованный пак-шот-фолбэк */ .vk-pdp__stage-img{width:100%;height:100%;object-fit:contain;padding:28px;box-sizing:border-box} .vk-pdp__can{position:absolute;inset:0;display:grid;place-items:center;padding:32px} /* ---- Миниатюры ---- */ .vk-pdp__thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap} .vk-pdp__thumb img.vk-pdp__thumb-fill{object-fit:contain;background:var(--surface)} .vk-pdp__thumb{ width:96px;height:74px;border-radius:10px;overflow:hidden;flex:none;position:relative; border:1px solid rgba(46,52,56,.15);padding:0;background:none;cursor:pointer; } .vk-pdp__thumb--active{border:2px solid var(--graphite)} .vk-pdp__thumb-fill{display:block;width:100%;height:100%} .vk-pdp__thumb-tag{ position:absolute;bottom:6px;left:8px;font:500 10px var(--ff-mono);color:rgba(251,249,245,.85); } /* ---- Система покрытия ---- */ .vk-pdp__sys{ margin-top:44px;background:var(--surface);border:1px solid var(--line-12); border-radius:16px;padding:28px 32px; } .vk-pdp__sys-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px} .vk-pdp__sys-title{font:600 20px var(--ff-golos)} .vk-pdp__sys-kicker{font:500 12px var(--ff-mono);color:var(--ink-5)} .vk-pdp__sys-params{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px} .vk-pdp__param{border:1px solid rgba(46,52,56,.18);border-radius:10px;padding:12px 16px} .vk-pdp__param-label{font:500 11px var(--ff-mono);color:var(--ink-5);margin-bottom:4px} .vk-pdp__param-val{font:600 17px var(--ff-golos)} .vk-pdp__layers{ display:grid;gap:1px;background:var(--line-12);border-radius:12px;overflow:hidden; border:1px solid var(--line-12); } .vk-pdp__layer{ display:grid;grid-template-columns:26px 34px minmax(0,1fr) 96px 116px;gap:12px;align-items:center; background:var(--canvas);padding:14px 18px; } /* Чек-лист: галка тянется на всю высоту строки — в 18-пиксельный квадратик попадать мышью (и тем более пальцем) неудобно, а название слоя — второе поле нажатия того же чекбокса (label for=). */ .vk-pdp__layer-check{display:flex;align-items:center;align-self:stretch} .vk-pdp__layer-box{width:18px;height:18px;margin:0;flex:none;cursor:pointer;accent-color:var(--graphite)} .vk-pdp__layer-mult{font:500 12px var(--ff-mono);color:var(--ink-5)} .vk-pdp__layer-name{font:500 15px var(--ff-golos)} /* Курсор только там, где есть что нажимать: у звена без товара в каталоге чекбокса нет, и его строка — просто текст. */ label.vk-pdp__layer-check,label.vk-pdp__layer-name{cursor:pointer} .vk-pdp__layer-rate{font:400 13px var(--ff-mono);color:var(--ink-55)} /* Фасовки и цена набора — одна колонка в две строки (см. комментарий в разметке). */ .vk-pdp__layer-nums{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0} .vk-pdp__layer-qty{font:600 15px var(--ff-golos);text-align:right} .vk-pdp__layer-sum{font:500 13px var(--ff-mono);color:var(--ink-55);text-align:right;white-space:nowrap} /* Пояснение для концентратов. Тише суммы: это справка о том, откуда взялся литраж, а не число, по которому принимают решение. Перенос разрешён — на узком экране строка длиннее колонки, а nowrap выдавил бы её за край. */ .vk-pdp__layer-dil{font:400 12px var(--ff-golos);color:var(--ink-45);text-align:right;line-height:1.3} /* Снятый слой не исчезает, а гаснет: покупатель должен видеть, от чего именно отказался, и вернуть галку одним нажатием — а не гадать, куда делась строка. */ .vk-pdp__layer.is-off .vk-pdp__layer-name{color:var(--ink-45);text-decoration:line-through} .vk-pdp__layer.is-off .vk-pdp__layer-mult, .vk-pdp__layer.is-off .vk-pdp__layer-rate, .vk-pdp__layer.is-off .vk-pdp__layer-qty, .vk-pdp__layer.is-off .vk-pdp__layer-sum{color:var(--ink-45)} .vk-pdp__sys-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px} .vk-pdp__sys-total{font:400 13px/1.5 var(--ff-mono);color:var(--ink-5)} .vk-pdp__sys-add{ background:var(--graphite);color:var(--surface);font:600 15px var(--ff-golos); padding:13px 24px;border-radius:10px;border:0;cursor:pointer;white-space:nowrap; transition:background .18s; } .vk-pdp__sys-add:hover{background:var(--terracotta-ink)} .vk-pdp__sys-add[disabled]{opacity:.5;cursor:default} /* Ответ сервера (причина отказа, пропущенный слой) — под кнопкой, а не тостом: покупатель смотрит на состав системы, а всплывашка уводит взгляд с него. */ .vk-pdp__sys-msg{margin-top:12px;font:400 13px/1.5 var(--ff-mono);color:var(--ink-55)} .vk-pdp__sys-msg.is-error{color:var(--terracotta-ink)} /* Цвет не выбран — подсвечиваем сам селектор, а не только текст ошибки: блок расчёта и выбор цвета стоят в разных колонках, и связь между ними иначе не читается. */ .vk-pdp__card.is-need{border-color:var(--terracotta);box-shadow:0 0 0 3px var(--terracotta-tint)} /* ---- Техплитки ---- */ .vk-pdp__tech{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px} .vk-pdp__tile{border:1px solid var(--line-14);border-radius:12px;padding:16px 18px;background:var(--surface)} .vk-pdp__tile-label{font:500 11px var(--ff-mono);color:var(--ink-5);margin-bottom:6px} .vk-pdp__tile-val{font:600 16px var(--ff-golos)} .vk-pdp__tile-sub{font:400 12px var(--ff-golos);color:var(--ink-5)} /* ---- Панель покупки ---- */ .vk-pdp__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .vk-pdp__meta-chip{ font:500 11px var(--ff-mono);color:var(--ink-6);border:1px solid var(--line-2); padding:5px 10px;border-radius:7px; } .vk-pdp__title{font:700 38px/1.1 var(--ff-golos);letter-spacing:-.02em;margin:0 0 10px} .vk-pdp__title--ru{margin-bottom:4px} .vk-pdp__lead{font:400 15px/1.55 var(--ff-golos);color:var(--ink-62);margin:0 0 28px} .vk-pdp__card{ background:var(--surface);border:1px solid var(--line-12);border-radius:16px; padding:24px;margin-bottom:16px; } .vk-pdp-matrix{padding:20px 24px} .vk-pdp__card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .vk-pdp__card-label{font:500 12px var(--ff-mono);color:var(--ink-5)} .vk-pdp__card-label--mb{display:block;margin-bottom:14px} .vk-pdp__palette-link{font:600 13.5px var(--ff-golos);color:var(--terracotta-ink)} .vk-pdp__palette-link:hover{color:var(--terracotta)} /* Матрица совместимости */ .vk-pdp-matrix__chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0} .vk-pdp-matrix__chip{font:500 12px var(--ff-mono);padding:6px 10px;border-radius:7px} .vk-pdp-matrix__chip--ok{color:#3F5A44;background:rgba(74,93,78,.12)} .vk-pdp-matrix__chip--no{color:var(--terracotta-ink);background:var(--terracotta-tint)} .vk-pdp-matrix__note{font:400 12.5px/1.5 var(--ff-golos);color:var(--ink-55)} /* Цвет */ .vk-pdp-color__sel{display:flex;align-items:center;gap:16px;margin-bottom:16px} .vk-pdp-color__big{width:64px;height:64px;border-radius:12px;flex:none;box-shadow:inset 0 0 0 1px var(--line-1)} .vk-pdp-color__name{font:600 17px var(--ff-golos)} .vk-pdp-color__code{font:400 12.5px var(--ff-mono);color:var(--ink-55)} .vk-pdp-color__row{display:flex;gap:7px} .vk-pdp-color__sw{width:34px;height:34px;border-radius:9px;border:0;padding:0;cursor:pointer;flex:none} .vk-pdp-color__sw.is-active{outline:2px solid var(--graphite);outline-offset:2px} .vk-pdp-color__more{ width:34px;height:34px;border-radius:9px;border:1px dashed var(--line-35); display:grid;place-items:center;font:500 16px var(--ff-golos);color:var(--ink-45);flex:none; } .vk-pdp-color__more:hover{border-color:var(--terracotta-ink);color:var(--terracotta-ink)} /* Дропдаун цвета/базы (когда оттенков много — свотчами не влезает) */ .vk-pdp-select{ width:100%;font:500 15px var(--ff-golos);color:var(--graphite); background:var(--surface);border:1px solid rgba(46,52,56,.22);border-radius:10px; padding:13px 40px 13px 16px;cursor:pointer;appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%232E3438' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; } .vk-pdp-select:focus{outline:none;border-color:var(--terracotta)} /* Свотч цвета/базы (общий класс выбора .vk-pdp__pick) */ .vk-pdp-color__sw.vk-pdp__pick{cursor:pointer} .vk-pdp-color__sw.vk-pdp__pick.is-active{outline:2px solid var(--graphite);outline-offset:2px} .vk-pdp-color__row{flex-wrap:wrap} /* Фасовка */ .vk-pdp-pack{display:flex;gap:10px;flex-wrap:wrap} .vk-pdp-pack__chip{ border:1px solid rgba(46,52,56,.22);border-radius:10px;padding:11px 18px; font:500 15px var(--ff-golos);color:var(--ink-70);background:none;cursor:pointer; } .vk-pdp-pack__chip:hover{border-color:var(--terracotta-ink);color:var(--terracotta-ink)} .vk-pdp-pack__chip.is-active{border:2px solid var(--graphite);padding:10px 18px;font-weight:600;color:var(--graphite)} /* Банка, которой нет у выбранной базы: объёмы у баз разные, и показывать несуществующую фасовку — значит вести в тупик. [hidden] сам по себе не срабатывает у элементов с заданным display, поэтому явно. */ .vk-pdp-pack__chip[hidden]{display:none} /* Цена */ .vk-pdp__price{display:flex;justify-content:space-between;align-items:baseline;margin:26px 2px 18px} .vk-pdp__price-val{font:500 34px var(--ff-serif)} .vk-pdp__price-note{font:400 13px var(--ff-mono);color:var(--ink-5)} /* Русское написание под заголовком товара — подсказка для поиска и слуха, не второе название: мельче и тише h1. */ .vk-pdp__title-ru{margin:0 2px 14px;font:500 14px/1.35 var(--ff-sans);color:var(--ink-55)} /* CTA */ .vk-pdp__cta{display:grid;gap:10px} /* Количество + «В корзину» одной строкой: степпер по содержимому, кнопка тянется. */ .vk-pdp__buyrow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch} .vk-pdp__qty{border-radius:11px} .vk-pdp__qty button{width:40px;height:auto;font-size:18px} .vk-pdp__qty input.vk-stepper__val{width:36px;font-size:15px} .vk-pdp-cta{ display:block;width:100%;font:600 16.5px var(--ff-golos);border-radius:11px;text-align:center; cursor:pointer;border:1.5px solid transparent;transition:background .18s,border-color .18s,color .18s; } .vk-pdp-cta--primary{background:var(--terracotta);color:var(--surface);padding:17px} .vk-pdp-cta--primary:hover{background:var(--terracotta-ink)} /* Кнопка без выбранной комбинации: раньше выключенная выглядела ровно как рабочая — покупатель жал и не получал ничего. */ .vk-pdp-cta[disabled]{opacity:.45;cursor:not-allowed} .vk-pdp-cta--primary[disabled]:hover{background:var(--terracotta)} .vk-pdp-cta--outline{border-color:var(--graphite);color:var(--graphite);padding:16px;background:none} .vk-pdp-cta--outline:hover{border-color:var(--terracotta-ink);color:var(--terracotta-ink)} /* Плашки-примечания */ .vk-pdp__reimburse{margin-top:12px} .vk-pdp__warn{ display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(46,52,56,.16); border-radius:11px;padding:14px 16px;margin-top:10px; } .vk-pdp__warn svg{flex:none;margin-top:1px} .vk-pdp__warn-text{font:400 13.5px/1.5 var(--ff-golos);color:var(--ink-62)} /* ---- Нижний sticky-бар (только мобайл) ---- */ .vk-pdp-sticky{display:none} /* ============================================================ Адаптив ============================================================ */ @media (max-width:1024px){ /* Планшет: медиа/система слева, покупка в правой колонке 340px, техплитки в 2 кол. */ .vk-pdp{grid-template-columns:minmax(0,1fr) 320px;column-gap:32px;padding:24px var(--pad) 48px} .vk-pdp__stage{height:400px} .vk-pdp__tech{grid-template-columns:repeat(2,1fr)} .vk-pdp__title{font-size:32px} } @media (max-width:600px){ /* Мобайл: одна колонка — медиа → покупка → система; + нижний sticky-бар. */ .vk-pdp{display:flex;flex-direction:column;gap:16px;padding:14px var(--pad) 96px} .vk-pdp__left{display:contents} .vk-pdp__media{order:1} .vk-pdp__buy{order:2} .vk-pdp__aside{order:3} .vk-pdp__stage{height:280px} .vk-pdp__thumbs{overflow-x:auto;-webkit-overflow-scrolling:touch} .vk-pdp__sys{margin-top:0;padding:20px} .vk-pdp__sys-head{flex-wrap:wrap;gap:6px 16px} .vk-pdp__sys-foot{flex-direction:column;align-items:stretch;gap:12px} .vk-pdp__sys-add{width:100%} /* Мобайл: галка слева на всю высоту строки (палец в неё попадает), название на своей строке во всю ширину, под ним кратность, расход и числа. Позиции задаём явно — порядок в разметке десктопный, автопотоком он бы рассыпался. */ .vk-pdp__layer{grid-template-columns:30px auto auto 1fr;gap:4px 10px;padding:12px 14px} .vk-pdp__layer-check{grid-column:1;grid-row:1 / span 2} .vk-pdp__layer-box{width:22px;height:22px} /* Название — второе поле нажатия того же чекбокса, поэтому ему нужна высота под палец, а не 18 px строки текста (замерено). */ .vk-pdp__layer-name{grid-column:2 / -1;grid-row:1;padding:5px 0} .vk-pdp__layer-mult{grid-column:2;grid-row:2} .vk-pdp__layer-rate{grid-column:3;grid-row:2;color:var(--ink-5)} .vk-pdp__layer-nums{grid-column:4;grid-row:2} .vk-pdp__layer-qty{font-size:14px} .vk-pdp__tech{grid-template-columns:1fr 1fr;margin-top:14px} .vk-pdp__title{font-size:28px;margin-bottom:8px} .vk-pdp__lead{margin-bottom:20px} .vk-pdp__card{padding:18px 20px;margin-bottom:14px} .vk-pdp-matrix{padding:18px 20px} /* Sticky-бар: цена + степпер + «В корзину» */ .vk-pdp-sticky{ display:flex;position:sticky;bottom:0;z-index:40;gap:10px;align-items:center; padding:10px 14px;background:rgba(251,249,245,.97);border-top:1px solid var(--line-12); } .vk-pdp-sticky__price{flex:1;min-width:0} .vk-pdp-sticky__val{font:500 17px var(--ff-serif)} .vk-pdp-sticky__sub{font:400 9px var(--ff-sans);color:var(--ink-5)} .vk-pdp-sticky__stepper{flex:none} .vk-pdp-sticky__add{ display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none; background:var(--terracotta);color:var(--surface);font:600 13.5px var(--ff-sans); padding:11px 18px;border-radius:9px;border:0;cursor:pointer; } .vk-pdp-sticky__add:hover{background:var(--terracotta-ink)} } /* Похожие материалы под карточкой товара */ .vk-pdp-related{padding-top:56px;padding-bottom:72px} .vk-pdp-related .vk-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px;list-style:none;padding:0} @media (max-width:1024px){.vk-pdp-related .vk-cat-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.vk-pdp-related .vk-cat-grid{grid-template-columns:1fr}} /* Живой блок системы: поле площади и выбор подложки вместо статичных значений эталона. Оформление — как у .vk-pdp__param-val, чтобы контролы не выбивались из плитки параметра. */ .vk-pdp__param input.vk-pdp__param-val { width: 100%; border: 0; background: transparent; padding: 0; /* 16px — минимум, при котором Safari на iPhone не зумит страницу при фокусе. */ font: 600 16px var(--ff-golos); color: var(--graphite); appearance: none; -moz-appearance: textfield; } /* Системные стрелки числового поля не вписываются в плитку — убираем. */ .vk-pdp__param input[type=number]::-webkit-outer-spin-button, .vk-pdp__param input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Обводку фокуса рисуем на плитке целиком, а не на поле: рамка внутри рамки выглядела как ошибка ввода. */ .vk-pdp__param input.vk-pdp__param-val:focus { outline: none; } .vk-pdp__param:focus-within { border-color: var(--terracotta); } .vk-pdp__param { display: block; cursor: text; transition: border-color .15s; } /* Свой дропдаун подложки — нативный