/* Карточка товара с комплектами (шаблон ItemKits, тумблер KitsOn у товара): блок «Комплектация» и раскладка карточки.
   Подключается только в шаблоне ItemKits (classes/KitsClass.php → assets), остальные карточки этот файл не видят.
   Перенесено из прототипа: раскладка — proto/kits/kits.css (v1), блок — proto/kits/kits-v2.css; шапка сайта и фото
   галереи на телефоне из v2 сюда НЕ взяты — это правка всего сайта, отдельно. Журнал — projects/arenda-mebel-card/LOG.md. */

/* ---------- раскладка карточки ---------- */
.product-page__common-block .container .product-description .product-parameter-section,
.product-page__common-block .container .product-description .title-wrapper { margin-bottom: 25px; }

/* Правая колонка закреплена так же, как галерея сайта, — прокручивается только середина.
   При прокрутке шапка сайта становится плавающей плашкой (header.fixed) с низом ≈76px; родные 80px у галереи
   давали зазор 4px. 100px = 24px воздуха под шапкой. На 993–1200px у сайта своя отметка галереи — 120px. */
@media (min-width: 993px) {
  .product-page__common-block .container .product-price-additional { position: sticky; top: 120px; align-self: flex-start; }
}
@media (min-width: 1201px) {
  .product-page__common-block .container .product-gallery .gallery-with-thumbs-wrapper,
  .product-page__common-block .container .product-price-additional { top: 100px; }
}

/* Правая колонка уже — 290 px вместо 352 (по просьбе: «центральную часть шире, справа сузить»), середина забирает остаток:
   410 → 472 px. Только от 1331 px — там у сайта 352; на 993–1330 у сайта своя ширина — 260. */
@media (min-width: 1331px) {
  .product-page__common-block .container .product-price-additional { width: 290px; }
  /* «В корзине»: счётчик и кнопка «Корзина →» у сайта пополам. В колонке 290 px на обоих 242 px: половина — 117, а тексту кнопки
     со стрелкой нужно 101 при полях 20, счётчику — не меньше 128 (поле числа min-width 60). Поле числа 32 px без боковых полей
     (у поля сайта они по 16 — съедали всё место), трёхзначное число влезает: счётчику хватает 100 — 44 %, кнопке 56 % с полями 14.
     (На 993–1330 сайт сам прячет «Корзину».) */
  .product-page__common-block .container .product-price-additional .to-cart-block-with-hidden-count .counter-and-btn-wrapper .count-wrapper { width: calc(44% - 4px); }
  .product-page__common-block .container .product-price-additional .to-cart-block-with-hidden-count .counter-and-btn-wrapper .count-wrapper input { min-width: 32px; padding-left: 0; padding-right: 0; }
  .product-page__common-block .container .product-price-additional .to-cart-block-with-hidden-count .counter-and-btn-wrapper .button { width: calc(56% - 4px); padding: 0 14px; }
}

/* тень блока цены мягче родной (0 4px 32px rgba(0,0,0,.15)) */
.round-block-with-shadow.price-block-wrapper,
.round-block-with-shadow.mobile-price-block-wrapper { box-shadow: 0 4px 24px rgba(0, 0, 0, .08); }

body {
  --kv-green: #04bf45;
  --kv-green-soft: rgba(4, 191, 69, .08);
  --kv-gray: #7e7e7e;
  --kv-line: #e7e7e7;
  --kv-bg: #f6f6f6;
  --kv-orange: #ff8a00;
  --kv-ink: #312d2b;
  --kv-shadow: 0 1px 4px 0 rgba(49, 45, 43, .08);
}

.kv-section { container-type: inline-size; position: relative; z-index: 1; }
.kv-step { margin-bottom: 14px; }
.kv-step--last { margin-bottom: 0; }
.kv-step__n { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--kv-gray);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.kv-step__n i { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--kv-bg); color: var(--kv-ink); font-size: 11px; font-style: normal; }
.kv-save { margin-top: 0; background: #fff4e5; color: #a35500; border-radius: 10px; padding: 11px 13px;
  font-size: 13px; line-height: 1.5; }
.kv-save b { font-weight: 700; }

/* ---------- плитки ---------- */
/* Ряд — позиционирующий контейнер: подсказка раскрывается во всю его ширину и не режется по краю плитки. */
.kv-tiles { position: relative; display: grid; gap: 8px; }
.kv-tiles--base { grid-template-columns: repeat(var(--kv-n, 3), minmax(0, 1fr)); }
.kv-b { border: 1px solid var(--kv-line); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer;
  box-shadow: var(--kv-shadow); transition: .15s; -webkit-tap-highlight-color: transparent; user-select: none; }
.kv-b:hover { border-color: #82dfa2; }
.kv-b.on { border-color: var(--kv-green); box-shadow: 0 0 0 2px rgba(4, 191, 69, .14), var(--kv-shadow); }
.kv-b__pic { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--kv-bg); }
.kv-b__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* фото состояний — квадрат, стол в нижней части: в плитке 16:10 кадр сдвинут вниз, иначе срезаются ножки */
.kv-tiles--base .kv-b__pic img { object-position: 50% 90%; }
/* тот же кадр (как object-position 50% 90%), но сдвигом целой картинки: обрезанную через object-fit: cover картинку
   Chrome с GPU уменьшает без сглаживания — на экранах 1× рябь на столешнице и ступеньки по краю (700 → 150 px).
   В узкой колонке фото квадратное — cover там ничего не режет */
@container not (max-width: 380px) {
  .kv-tiles--base .kv-b__pic { overflow: hidden; }
  .kv-tiles--base .kv-b__pic img { position: absolute; left: 0; bottom: -6%; height: auto; }
  /* «i» на фото мелкий (на телефоне ~13 px), а тап по фото там открывает модалку — зона нажатия «i» шире самого кружка */
  .kv-tiles--base .kv-b__pic .kv-b__i::after { content: ""; position: absolute; inset: -8px; }
}
.kv-b__txt { display: block; padding: 7px 9px 9px; }
.kv-b__name { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; line-height: 1.25; }
/* значок подсказки «i» — кружок без обводки и тени, в правом верхнем углу плитки. У стола угол на фото: кружок белый
   и растёт вместе с плиткой (10,5 % ширины, не больше 18 px, отступ 2 %) — справа от столешницы на фото ~12 % ширины,
   так значок не касается стола при любой ширине плитки (зазор от 2 px). У текстиля — светло-серый кружок 16 px в углу плитки */
.kv-b__i { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; display: flex;
  background: #efefef; color: #8a8a8a; opacity: .7; }
.kv-b__i svg { width: 100%; height: 100%; }
.kv-b__pic .kv-b__i { top: 3.2%; right: 2%; width: 10.5%; max-width: 18px; height: auto; aspect-ratio: 1;
  background: rgba(255, 255, 255, .92); color: #7e7e7e; }
.kv-tiles--addon .kv-b__txt { position: relative; }
.kv-tiles--addon .kv-b__i { top: 0; right: 3px; }
/* лупа на фото — только телефон (разметку даёт kits-v2.js, флаг PHONE): тап по фото открывает фото комплектов на весь экран.
   Вид — как у «i» на фото. У стола — в правом нижнем углу фото, зеркально «i» (10,5 % ширины, до 18 px): там пол, стол не задет;
   у текстиля (фото 44 px) — кружок 13 px в правом верхнем углу, на стене: 16 px уже задевал верх стола. Узкая колонка — ниже */
.kv-b__zoom { position: absolute; right: 2%; bottom: 3.2%; width: 10.5%; max-width: 18px; aspect-ratio: 1; border-radius: 50%;
  display: flex; background: rgba(255, 255, 255, .92); color: #7e7e7e; opacity: .7; }
.kv-b__zoom svg { width: 100%; height: 100%; }
.kv-tiles--addon .kv-b__zoom { top: 0; right: 0; bottom: auto; margin: 2px; width: 13px; }
/* подпись — деление шкалы состояния; светлее цены, иначе две серые строки сливаются */
.kv-b__sub { display: block; font-size: 11.5px; color: #a3a3a3; line-height: 1.3; margin-top: 2px; }
/* цена — как на эталоне: обычный вес и серый, акцент держит название */
.kv-b__price { display: block; font-size: 14px; font-weight: 400; color: var(--kv-gray); margin-top: 2px; white-space: nowrap; }
.kv-b__hit { flex-shrink: 0; font-size: 9.5px; font-weight: 700; line-height: 1; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 5px; border-radius: 4px; background: var(--kv-green); color: #fff; }

/* ---------- подсказка ---------- */
/* Раскрывается ВВЕРХ: снизу закрывала бы палитру, отказ и цену, сверху — то, что клиент уже прошёл. */
.kv-tip { display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20;
  padding: 12px 14px; background: #fff; border-radius: 12px; border: 1px solid rgba(49, 45, 43, .08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); font-size: 13px; line-height: 18px; font-weight: 400;
  color: var(--kv-ink); cursor: default; }
.kv-tip strong { font-weight: 700; }
.kv-tip__t { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; margin-bottom: 7px; }
.kv-tip__li { display: block; position: relative; padding-left: 14px; margin-top: 4px; }
.kv-tip__li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 4px; height: 4px;
  border-radius: 50%; background: #c9c9c9; }
.kv-tip__note { display: block; margin-top: 9px; padding: 8px 10px 8px 32px; position: relative;
  background: #fff4e5; border-radius: 8px; color: #a35500; }
.kv-tip__note::before { content: "!"; position: absolute; left: 10px; top: 8px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--kv-orange); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 16px; text-align: center; }
/* крестик подсказки (только тач-экран, kits-v2.js): в правом верхнем углу на уровне заголовка, зона нажатия 32 px;
   cursor: pointer — иначе iPhone не шлёт клик по такому элементу */
.kv-tip__x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: #7e7e7e; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kv-tip__x:active { background: #f2f2f2; }
.kv-tip__x svg { width: 14px; height: 14px; }
.kv-tip__x + .kv-tip__t { padding-right: 26px; }
/* с мышью подсказка у плитки не всплывает — она плашкой на фото галереи (.kv-gallery-plate) */
@media (hover: none) { .kv-b.tip-open .kv-tip { display: block; } }

/* ---------- текстиль ---------- */
/* Дополнение к столу, а не второй такой же выбор: подложка отделяет блок, плитки вдвое мельче плиток стола. */
.kv-addon { position: relative; background: var(--kv-bg); border-radius: 14px; padding: 10px; }
.kv-tiles--addon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kv-tiles--addon .kv-b { display: flex; align-items: center; overflow: visible; }
.kv-tiles--addon .kv-b__pic { width: 44px; aspect-ratio: 1; flex-shrink: 0; margin: 6px 0 6px 6px;
  border-radius: 8px; overflow: hidden; }
.kv-tiles--addon .kv-b__txt { flex: 1; min-width: 0; padding: 6px 9px; }
.kv-tiles--addon .kv-b__name { font-size: 13px; }
.kv-tiles--addon .kv-b__price { font-size: 13px; margin-top: 1px; }
/* отказ от текстиля: доступен, но не спорит с плитками за внимание */
.kv-plain { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 9px;
  border-top: 1px solid rgba(0, 0, 0, .06); font-size: 12.5px; color: var(--kv-gray); cursor: pointer;
  -webkit-tap-highlight-color: transparent; user-select: none; transition: .15s; }
.kv-plain:hover { color: var(--kv-ink); }
.kv-plain.on { color: var(--kv-ink); font-weight: 600; }
.kv-plain__mark { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c9c9c9; transition: .15s; }
.kv-plain.on .kv-plain__mark { border-color: var(--kv-green); border-width: 4px; }

/* ---------- палитра цветов ---------- */
.kv-palette { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 9px 11px;
  background: #fff; border: 1px solid var(--kv-green); border-radius: 10px; text-decoration: none;
  color: var(--kv-ink); transition: .15s; animation: kvFlash .8s ease; }
.kv-palette:hover { background: var(--kv-green-soft); }
.kv-palette__i { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: var(--kv-green-soft); color: var(--kv-green); }
.kv-palette__t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.kv-palette__t small { display: block; font-size: 11px; font-weight: 400; color: var(--kv-gray); margin-top: 2px; }
.kv-palette__go { flex-shrink: 0; color: var(--kv-green); font-size: 16px; line-height: 1; }
/* при смене текстиля в ссылке меняется одно слово — короткая подсветка показывает, что она стала другой */
@keyframes kvFlash {
  0%   { background: var(--kv-green-soft); box-shadow: 0 0 0 3px rgba(4, 191, 69, .18); }
  70%  { background: var(--kv-green-soft); box-shadow: 0 0 0 3px rgba(4, 191, 69, .10); }
  100% { background: #fff; box-shadow: 0 0 0 0 rgba(4, 191, 69, 0); }
}
@media (prefers-reduced-motion: reduce) { .kv-palette { animation: none; } }

/* ---------- фото комплекта поверх галереи ---------- */
.kv-gallery-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity .18s ease; pointer-events: none; z-index: 3; border-radius: inherit; }
.kv-gallery-preview.is-visible { opacity: 1; }
.swiper-slide.kv-previewing > a { opacity: 0; }
/* подсказка наведённой плитки — плашкой у нижнего края фото, по центру. Компактная: столешница на фото кончается
   на 59–61 % высоты, плашка должна начинаться ниже — шрифт мельче, отступы плотнее, ширина почти во всё фото (меньше строк) */
.kv-gallery-plate { position: absolute; bottom: 10px; left: 0; right: 0; width: calc(100% - 20px); margin: 0 auto; z-index: 4;
  padding: 8px 12px; background: rgba(255, 255, 255, .96); border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  font-size: 12px; line-height: 16px; color: var(--kv-ink); opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.kv-gallery-plate .kv-tip__t { font-size: 12.5px; margin-bottom: 3px; }
.kv-gallery-plate .kv-tip__li { margin-top: 2px; }
.kv-gallery-plate .kv-tip__li::before { top: 7px; }
.kv-gallery-plate .kv-tip__note { margin-top: 6px; padding: 5px 8px 5px 28px; }
.kv-gallery-plate .kv-tip__note::before { left: 8px; top: 5px; }
/* окно 1201–1330: фото в галерее 385 px — плашка ещё плотнее, иначе длинная подсказка заходит на столешницу */
@media (max-width: 1330px) {
  .kv-gallery-plate { font-size: 11px; line-height: 14px; padding: 6px 10px; }
  .kv-gallery-plate .kv-tip__t { font-size: 11.5px; margin-bottom: 2px; }
  .kv-gallery-plate .kv-tip__li::before { top: 6px; }
  .kv-gallery-plate .kv-tip__note { margin-top: 5px; padding: 4px 8px 4px 26px; }
  .kv-gallery-plate .kv-tip__note::before { top: 3px; }
}
/* окно до 1200: фото в галерее 265 px (а уже 993 — галерея над плитками, при наведении её не видно) — подсказка в фото
   не помещается, всплывает над плиткой, как раньше; фото в галерее при наведении меняется и здесь */
@media (hover: hover) and (max-width: 1200px) {
  .kv-gallery-plate { display: none; }
  .kv-b:hover .kv-tip { display: block; }
  .kv-tip { pointer-events: none; }                 /* гаснет сразу, как курсор ушёл с плитки */
}
/* текст плашки — плотнее и темнее: Regular 11–12 px на обычном (не ретина) экране выходит тонким и серым. Сама плашка
   не меняется: Medium шире Regular на 0,9 %, трекинг −0,006em это возвращает — строки, высота и место те же */
.kv-gallery-plate { font-weight: 500; letter-spacing: -.006em; color: #1f1c1a; }
.kv-gallery-plate .kv-tip__note { color: #8a4600; }
.kv-gallery-plate.is-visible { opacity: 1; }
.kv-gallery-plate strong { font-weight: 700; }

/* ---------- «Поделиться» (kits-v2.js → shareToCrumbs) ---------- */
/* Кнопка виджета Яндекса без кружка: иконка 15 px, приглушённая. От 993 px — в конце строки крошек с подписью «Поделиться»:
   подпись — ::before самой ссылки виджета, так нажимается вся надпись; уже — у заголовка, одной иконкой. Меню соцсетей —
   в 8 px под кнопкой (у сайта отступ 50 px считан от кружка 40 px).
   Размеры виджета сайт задаёт правилами .share-block-wrapper, а сам виджет вставляет свои стили позже — перебиваем через !important,
   как и сайт */
.share-block-wrapper .ya-share2__container_size_l .ya-share2__badge .ya-share2__icon { width: 22px !important; height: 22px !important; }
.share-block-wrapper .ya-share2__container_size_l .ya-share2__item_more .ya-share2__icon_more { background-size: 15px 15px !important; }
.share-block-wrapper .ya-share2__link_more { background: transparent !important; }
.share-block-wrapper .ya-share2__icon_more { opacity: .55; transition: opacity .15s; }
.share-block-wrapper .ya-share2__link_more:hover .ya-share2__icon_more { opacity: 1; }
.share-block-wrapper .ya-share2__popup_direction_bottom { top: 34px !important; }
.kv-share-crumbs .ya-share2__link_more { display: inline-flex !important; align-items: center; gap: 5px; width: auto !important; }
.kv-share-crumbs .ya-share2__link_more::before { content: "Поделиться"; font-size: 13px; line-height: 1; color: var(--kv-gray);
  transition: color .15s; }
.kv-share-crumbs .ya-share2__link_more:hover::before { color: var(--kv-ink); }
/* виджет стоит внутри nav.breadcrumbs, а крошки каждому li рисуют разделитель-линию (li::after) и уменьшают кегль —
   в меню соцсетей между иконками вставали чёрточки. Меню — как у виджета у заголовка */
.breadcrumbs .kv-share-crumbs li { font-size: inherit; line-height: normal; }
.breadcrumbs .kv-share-crumbs li::after { content: none; }
/* шторка «Поделиться» на телефоне: виджет ставит тексту (og:description) hyphens: auto — название товара рвалось дефисом
   («(кругл-ый)» при 393 px); переносим только по пробелам. Так же и на проде — правило виджета, не прототипа */
.ya-share2__popup-description { -webkit-hyphens: manual !important; hyphens: manual !important; }

/* ---------- узкая колонка (телефон) ---------- */
/* Три плитки в ряд режут названия — раскладываем строками; подсказка тогда висит под своей строкой. */
@container (max-width: 380px) {
  .kv-tiles--base, .kv-tiles--addon { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .kv-b { display: flex; align-items: center; overflow: visible; position: relative; }
  .kv-b__pic { width: 58px; aspect-ratio: 1; flex-shrink: 0; margin: 7px 0 7px 7px;
    border-radius: 8px; overflow: hidden; }
  .kv-b__txt { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 10px;
    align-items: center; padding: 8px 10px; }
  .kv-b__name { grid-column: 1; grid-row: 1; }
  .kv-b__sub { grid-column: 1; grid-row: 2; margin-top: 1px; }
  .kv-b__price { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
  /* у текстиля подписи нет — цена встаёт в одну строку с названием */
  .kv-tiles--addon .kv-b__price { grid-row: 1; }
  .kv-tip { bottom: auto; top: calc(100% + 6px); }
  /* значок: у стола — в правом верхнем углу плитки (цена стоит по центру высоты, угол свободен; фото перестаёт быть
     опорой значка), серый кружок, как у текстиля; у текстиля справа в первой строке цена — значок снова после названия */
  .kv-b__pic { position: static; }
  .kv-b__pic .kv-b__i { top: 3px; right: 3px; width: 16px; height: 16px; background: #efefef; color: #8a8a8a; }
  .kv-tiles--addon .kv-b__i { position: static; flex-shrink: 0; }
  /* лупа: опора absolute здесь плитка (ради «i»), поэтому лупа — в одной ячейке сетки с фото: правый верхний угол,
     на стене над столом (в квадратном фото правый нижний угол задевает ножку) */
  .kv-b__pic { display: grid; }
  .kv-b__pic > img, .kv-b__zoom { grid-area: 1 / 1; }
  .kv-b__zoom { position: static; justify-self: end; align-self: start; margin: 3px; width: 16px; }
}

/* ---------- движок: то, что в прототипе делал скрипт ---------- */
/* наборы шага 2 и ссылки PDF скрыты атрибутом hidden — свои display у классов иначе перебили бы его */
.kv-section [hidden] { display: none !important; }
/* «i» и крестик подсказки — только на тач-экране (в прототипе их выводил скрипт по флагу TOUCH — «нет hover») */
@media (hover: hover) {
  .kv-b__i, .kv-tip__x { display: none !important; }
  .kv-tip__x + .kv-tip__t { padding-right: 0; }
}
/* лупа на фото — только телефону: класс kv-phone ставит js/kits.js по размеру экрана, не окна (LOG п. 51) */
.kv-section:not(.kv-phone) .kv-b__zoom { display: none !important; }
/* «Поделиться»: сервер выводит два виджета — в крошках ({{ItemKitsShare}}) и у заголовка; от 993 px виден первый, уже — второй.
   Виджет в крошках — соседом списка ul, не внутри li (LOG п. 47) */
@media (min-width: 993px) {
  .kv-crumbs-nav .container { display: flex; align-items: center; gap: 16px; }
  .kv-crumbs-nav .container > ul { flex: 1; min-width: 0; }
  .title-block-with-share .share-block-wrapper { display: none; }
}
@media (max-width: 992px) { .kv-share-crumbs { display: none; } }