/* ==========================================================================
   Страница изделия. Десктопный кит, лист product.html.
   Галерея, липкая колонка выбора, строки варианта, окно заявки.

   Скрипта нет. Выбор варианта и кадра - скрытые radio: подсветка через
   `label:has(:checked)`, подстановка цены и характеристик - перечислением
   номеров ниже, потому что CSS не умеет считать.

   Перечисление доведено до 24 вариантов и 12 кадров: в каталоге есть цепь
   с 21 предложением и изделие с 12 кадрами. Оценка правил проекта
   «примерно восемь» была осторожной, а не измеренной.
   ========================================================================== */

/* --- раскладка ----------------------------------------------------------- */
.ac-pc{display:grid;grid-template-columns:minmax(0,1fr) var(--ac-d-rail);gap:var(--ac-s16);align-items:start;padding-top:var(--ac-s6)}

/* --- галерея ------------------------------------------------------------- */
.ac-gal{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--ac-s3)}
.ac-gal:has(.ac-gal__m--single){grid-template-columns:minmax(0,1fr)}
.ac-gal__t{display:grid;gap:var(--ac-s2);align-content:start}
.ac-gal__t-i{display:block;aspect-ratio:1;overflow:hidden;border-radius:10px;background:var(--ac-photo-bg);box-shadow:inset 0 0 0 1px var(--ac-line);cursor:pointer;transition:box-shadow var(--ac-dur) var(--ac-ease)}
.ac-gal__t-i:hover{box-shadow:inset 0 0 0 1px var(--ac-line-strong)}
.ac-gal__t-i img{width:100%;height:100%;object-fit:cover}
.ac-gal__m{position:relative;display:grid;aspect-ratio:1;overflow:hidden;border-radius:var(--ac-r-card);background:var(--ac-photo-bg)}
.ac-gal__f{grid-area:1/1;display:none}
.ac-gal__f img{width:100%;height:100%;object-fit:cover}
/* Кадр один - переключателей в разметке нет вовсе, и показать его некому:
   правило выше скрывает все кадры. Так у 203 изделий из 293. */
.ac-gal__m--single .ac-gal__f{display:block}
.ac-gal__n{position:absolute;left:var(--ac-s4);bottom:var(--ac-s4);padding:5px 11px;border-radius:var(--ac-r-pill);background:var(--ac-glass-dark);color:var(--ac-on-ink);font-family:var(--ac-font-mono);font-size:var(--ac-size-xs)}

/* --- колонка выбора ------------------------------------------------------ */
.ac-rail h1{font-family:var(--ac-font-display);font-size:32px;font-weight:var(--ac-w-semi);line-height:1.14;letter-spacing:-.022em;text-wrap:balance}
.ac-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--ac-s3);font-family:var(--ac-font-display);font-size:var(--ac-size-price);font-weight:var(--ac-w-semi);letter-spacing:-.02em}
.ac-price s{font-size:var(--ac-size-h3);font-weight:var(--ac-w-reg);color:var(--ac-ink-strike)}
.ac-price i{font-style:normal;font-family:var(--ac-font-mono);font-size:var(--ac-size-mono);color:var(--ac-sale)}
.ac-only{font-size:var(--ac-size-sm);color:var(--ac-ink-body)}
.ac-vh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ac-s3)}
.ac-vh b{font-size:var(--ac-size-xs);letter-spacing:var(--ac-track-caps);text-transform:uppercase;color:var(--ac-ink-mute)}
.ac-vr{display:grid;gap:var(--ac-s2);border:0;padding:0;margin:0}

/* --- Экземпляры чипами ----------------------------------------------------
   Прежде каждый экземпляр занимал строку во всю колонку и высоту 56px:
   двенадцать экземпляров давали полотенце на пол-экрана. Чипы по два в ряд
   дают те же двенадцать за шесть рядов, и выбор виден целиком.

   Колонки ровно две: в правой колонке 400px третий чип обрезал бы цену,
   а цена здесь главное после размера. */
.ac-vg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}

/* `align-content:start` обязателен: в чипе без веса строк две, а в соседнем
   три, и грид растягивал две строки на высоту ряда - цена проваливалась вниз,
   ряды выглядели рваными. Теперь содержимое прижато к верху, а разница
   в высоте уходит в пустоту снизу. */
.ac-vc{position:relative;display:grid;align-content:start;gap:0;padding:8px var(--ac-s2) 9px;border-radius:10px;background:var(--ac-bg);cursor:pointer;transition:background var(--ac-dur) var(--ac-ease)}
.ac-vc:hover{background:var(--ac-surface-sunk)}
.ac-vc input{position:absolute;width:0;height:0;opacity:0}
/* Выбранный чип. `:has(:checked)` не требует перечисления номеров -
   в отличие от подстановки цены наверху панели. */
.ac-vc:has(:checked){background:var(--ac-surface);box-shadow:inset 0 0 0 1.5px var(--ac-ink)}
.ac-vc:has(:focus-visible){outline:2px solid var(--ac-focus);outline-offset:2px}
/* Порядок строк в чипе: размер, цена, при повторе размера вес. Размер
   крупнее цены намеренно - ищут глазами именно его. */
.ac-vc b{font-family:var(--ac-font-mono);font-size:var(--ac-size-body);font-weight:var(--ac-w-med);line-height:1.25}
.ac-vc em{font-style:normal;font-family:var(--ac-font-display);font-size:var(--ac-size-xs);font-weight:var(--ac-w-semi);line-height:1.3;white-space:nowrap}
.ac-vc span{font-family:var(--ac-font-mono);font-size:var(--ac-size-nano);line-height:1.3;color:var(--ac-ink-mute)}
.ac-vc em s{margin-left:6px;font-weight:var(--ac-w-reg);font-size:var(--ac-size-xs);color:var(--ac-ink-strike)}

/* Хвост длинного списка. Раскрытие не прячет выбранное: по умолчанию
   отмечен самый дешёвый экземпляр, а он всегда в первой восьмёрке. */
.ac-vmore summary{display:flex;align-items:center;gap:6px;padding:8px 2px;font-size:var(--ac-size-sm);color:var(--ac-ink-body);cursor:pointer;list-style:none}
.ac-vmore summary::-webkit-details-marker{display:none}
.ac-vmore summary::after{content:"";width:9px;height:9px;border-right:1.4px solid var(--ac-line-strong);border-bottom:1.4px solid var(--ac-line-strong);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--ac-dur) var(--ac-ease)}
.ac-vmore[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.ac-vmore summary:hover{color:var(--ac-ink)}
.ac-act{position:relative;display:grid;gap:var(--ac-s2)}
/* Скрытый чекбокс, открывающий заявку, - единственный фокусируемый элемент
   этой пары кнопок, и обводку он отдаёт им обеим: делают они одно и то же.
   До этого проверка доступности видела шаг табуляции без видимого фокуса. */
main:has(#ask:focus-visible) .ac-act .ac-btn{outline:2px solid var(--ac-focus);outline-offset:2px}
/* `.ac-note` и `.ac-note--mid` переехали в kit.css: та же строка стоит
   в заявке, а страничный лист там другой. */
.ac-hr{height:1px;margin:var(--ac-s1) 0;background:var(--ac-line);border:0}

/* Скрытый переключатель: размер 0 и прозрачный, но фокус не теряет -
   `display:none` его бы снял. Обводка фокуса рисуется на строке. */
.ac-vin{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

/* --- значения выбранного варианта --------------------------------------- */
.ac-v{display:none}

/* --- Паспорт вставки -----------------------------------------------------
   Отдельный блок под характеристиками: это не одна строка значения, а список
   камней, и втискивать его в ячейку «ключ - значение» значит вернуть ту самую
   нечитаемую строку из 1С. Оформление как у остальных перечней набора:
   волосяные линии, моноширинные цифры, никакой заливки строк. */
.ac-pass{margin-top:var(--ac-s8)}
.ac-pass h2{margin-bottom:var(--ac-s3)}
.ac-pass__t{width:100%;border-collapse:collapse;font-size:var(--ac-size-sm)}
.ac-pass__t th,.ac-pass__t td{padding:9px 0;border-top:1px solid var(--ac-line);text-align:left;vertical-align:top}
.ac-pass__t thead th{border-top:0;border-bottom:1px solid var(--ac-ink);font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);font-weight:var(--ac-w-reg);letter-spacing:var(--ac-track-caps);text-transform:uppercase;color:var(--ac-ink-mute)}
.ac-pass__t tbody tr:last-child td{border-bottom:1px solid var(--ac-line)}
.ac-pass__t td{color:var(--ac-ink-body)}
.ac-pass__t td:first-child{color:var(--ac-ink)}
.ac-pass__t td:nth-child(3),.ac-pass__t td:nth-child(4){font-family:var(--ac-font-mono);font-size:var(--ac-size-mono);white-space:nowrap}
.ac-pass__t b{font-family:var(--ac-font-mono);font-size:var(--ac-size-mono);font-weight:var(--ac-w-med);color:var(--ac-ink)}
.ac-pass__no{color:var(--ac-ink-mute)}
.ac-pass__hint{margin-top:var(--ac-s3);color:var(--ac-ink-mute)}

/* --- Служебная плашка ----------------------------------------------------
   Видна только вошедшему в панель управления: посетителю сниппет не отдаёт
   ни байта. Оформлена нарочито непохоже на витрину - пунктир и моноширинный
   шрифт, - чтобы её нельзя было спутать со сведениями об изделии. */
.ac-dbg{margin-top:var(--ac-s8);padding:var(--ac-s4) var(--ac-s5);border:1px dashed var(--ac-line-strong);border-radius:var(--ac-r-field);background:var(--ac-surface-sunk)}
.ac-dbg__t{display:block;font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);letter-spacing:var(--ac-track-caps);text-transform:uppercase;color:var(--ac-act-del)}
.ac-dbg__s{margin-top:6px;font-size:var(--ac-size-sm);color:var(--ac-ink-body)}
.ac-dbg__l{display:grid;gap:6px;margin:var(--ac-s3) 0 0;padding:0;list-style:none}
.ac-dbg__l li{display:grid;grid-template-columns:22px 1fr;gap:2px var(--ac-s2);font-size:var(--ac-size-xs)}
.ac-dbg__l b{font-family:var(--ac-font-mono);color:var(--ac-ink-mute)}
.ac-dbg__l span{color:var(--ac-ink)}
.ac-dbg__l em{grid-column:2;font-style:normal;font-family:var(--ac-font-mono);color:var(--ac-act-del)}
.ac-dbg__l code{grid-column:2;font-family:var(--ac-font-mono);font-size:var(--ac-size-nano);line-height:1.5;color:var(--ac-ink-mute);word-break:break-word}
/* Паспорт свой у каждого экземпляра: в разметке лежат все, показывается
   выбранный. Тот же приём, что у цены и веса, но своим классом - общий
   `.ac-v` открывается как `display:inline`, а здесь блок с таблицей. */
.ac-pass__v{display:none}
.ac-pass__v--one{display:block}
main:has(#v1:checked) .ac-pass__v--1,
main:has(#v2:checked) .ac-pass__v--2,
main:has(#v3:checked) .ac-pass__v--3,
main:has(#v4:checked) .ac-pass__v--4,
main:has(#v5:checked) .ac-pass__v--5,
main:has(#v6:checked) .ac-pass__v--6,
main:has(#v7:checked) .ac-pass__v--7,
main:has(#v8:checked) .ac-pass__v--8,
main:has(#v9:checked) .ac-pass__v--9,
main:has(#v10:checked) .ac-pass__v--10,
main:has(#v11:checked) .ac-pass__v--11,
main:has(#v12:checked) .ac-pass__v--12,
main:has(#v13:checked) .ac-pass__v--13,
main:has(#v14:checked) .ac-pass__v--14,
main:has(#v15:checked) .ac-pass__v--15,
main:has(#v16:checked) .ac-pass__v--16,
main:has(#v17:checked) .ac-pass__v--17,
main:has(#v18:checked) .ac-pass__v--18,
main:has(#v19:checked) .ac-pass__v--19,
main:has(#v20:checked) .ac-pass__v--20,
main:has(#v21:checked) .ac-pass__v--21,
main:has(#v22:checked) .ac-pass__v--22,
main:has(#v23:checked) .ac-pass__v--23,
main:has(#v24:checked) .ac-pass__v--24{display:block}

/* --- окно заявки -------------------------------------------------------- */
/* Открывается без скрипта: метка нажимает скрытый чекбокс. */
/* `main:has(...)`, а не `#ask:checked ~`: комбинатор требовал, чтобы чекбокс
   стоял рядом с окном - то есть в конце страницы, и фокус с клавиатуры
   приходил на него последним, подсвечивая кнопки далеко выше экрана.
   Через `:has()` чекбокс живёт там, где стоят кнопки. */
.ac-scrim,.ac-modal{display:none}
main:has(#ask:checked) .ac-scrim{display:block}
main:has(#ask:checked) .ac-modal{display:grid}
.ac-obj__b{display:grid;gap:2px;min-width:0}
.ac-obj__t{font-size:var(--ac-size-sm)}
.ac-obj__p{font-family:var(--ac-font-display);font-weight:var(--ac-w-semi)}
.ac-obj__ph{width:56px;height:56px;border-radius:8px;background:var(--ac-photo-bg);box-shadow:inset 0 0 0 1px var(--ac-line)}

/* --- что показывается по выбору -----------------------------------------
   Через `:has()` на общем родителе, а не комбинатором `~`. Причина простая:
   переключатель варианта лежит внутри своей строки (так в ките), то есть
   внутри сетки, - а `~` видит только соседей. `:has()` от положения
   не зависит, и разметку под селектор выгибать не нужно.

   `main` взят родителем, потому что окно заявки лежит рядом с сеткой:
   цену в окне тоже надо менять вместе с выбором.                        */

/* Кадр галереи по выбранной миниатюре. */
main:has(#p1:checked) .ac-gal__f--1,
main:has(#p2:checked) .ac-gal__f--2,
main:has(#p3:checked) .ac-gal__f--3,
main:has(#p4:checked) .ac-gal__f--4,
main:has(#p5:checked) .ac-gal__f--5,
main:has(#p6:checked) .ac-gal__f--6,
main:has(#p7:checked) .ac-gal__f--7,
main:has(#p8:checked) .ac-gal__f--8,
main:has(#p9:checked) .ac-gal__f--9,
main:has(#p10:checked) .ac-gal__f--10,
main:has(#p11:checked) .ac-gal__f--11,
main:has(#p12:checked) .ac-gal__f--12 { display: block; }

/* Обводка выбранной миниатюры. */
main:has(#p1:checked) .ac-gal__t-i--1,
main:has(#p2:checked) .ac-gal__t-i--2,
main:has(#p3:checked) .ac-gal__t-i--3,
main:has(#p4:checked) .ac-gal__t-i--4,
main:has(#p5:checked) .ac-gal__t-i--5,
main:has(#p6:checked) .ac-gal__t-i--6,
main:has(#p7:checked) .ac-gal__t-i--7,
main:has(#p8:checked) .ac-gal__t-i--8,
main:has(#p9:checked) .ac-gal__t-i--9,
main:has(#p10:checked) .ac-gal__t-i--10,
main:has(#p11:checked) .ac-gal__t-i--11,
main:has(#p12:checked) .ac-gal__t-i--12 { box-shadow: inset 0 0 0 2px var(--ac-ink); }

/* Фокус на скрытом переключателе кадра виден на его миниатюре: обводка
   на элементе размером 0×0 не видна никому. Проверяется a11y-check.js. */
main:has(#p1:focus-visible) .ac-gal__t-i--1,
main:has(#p2:focus-visible) .ac-gal__t-i--2,
main:has(#p3:focus-visible) .ac-gal__t-i--3,
main:has(#p4:focus-visible) .ac-gal__t-i--4,
main:has(#p5:focus-visible) .ac-gal__t-i--5,
main:has(#p6:focus-visible) .ac-gal__t-i--6,
main:has(#p7:focus-visible) .ac-gal__t-i--7,
main:has(#p8:focus-visible) .ac-gal__t-i--8,
main:has(#p9:focus-visible) .ac-gal__t-i--9,
main:has(#p10:focus-visible) .ac-gal__t-i--10,
main:has(#p11:focus-visible) .ac-gal__t-i--11,
main:has(#p12:focus-visible) .ac-gal__t-i--12 {
  outline: 2px solid var(--ac-focus);
  outline-offset: 2px;
}

/* Значения выбранного варианта: цена наверху панели, подпись под ней,
   вес и размер в характеристиках, цена в окне заявки - меняются вместе. */
main:has(#v1:checked) .ac-v--1,
main:has(#v2:checked) .ac-v--2,
main:has(#v3:checked) .ac-v--3,
main:has(#v4:checked) .ac-v--4,
main:has(#v5:checked) .ac-v--5,
main:has(#v6:checked) .ac-v--6,
main:has(#v7:checked) .ac-v--7,
main:has(#v8:checked) .ac-v--8,
main:has(#v9:checked) .ac-v--9,
main:has(#v10:checked) .ac-v--10,
main:has(#v11:checked) .ac-v--11,
main:has(#v12:checked) .ac-v--12,
main:has(#v13:checked) .ac-v--13,
main:has(#v14:checked) .ac-v--14,
main:has(#v15:checked) .ac-v--15,
main:has(#v16:checked) .ac-v--16,
main:has(#v17:checked) .ac-v--17,
main:has(#v18:checked) .ac-v--18,
main:has(#v19:checked) .ac-v--19,
main:has(#v20:checked) .ac-v--20,
main:has(#v21:checked) .ac-v--21,
main:has(#v22:checked) .ac-v--22,
main:has(#v23:checked) .ac-v--23,
main:has(#v24:checked) .ac-v--24 { display: inline; }

/* --- поделиться ------------------------------------------------------------
   Блок стоит под кнопками списков, перед строкой про звонок: сначала
   действия для себя, потом «показать другому», потом запасной путь. */
.ac-share { display: grid; gap: var(--ac-s2); margin-top: var(--ac-s4); }
.ac-share__t { font-family: var(--ac-font-mono); font-size: var(--ac-size-xs);
               letter-spacing: var(--ac-track-caps); text-transform: uppercase;
               color: var(--ac-ink-mute); }

/* Кнопка MAX на компьютере скрыта. Её адрес https://max.ru/:share?text=...
   отдаёт «404 Not found» всем, кто не в мессенджере - проверено настоящим
   браузером. На телефоне та же ссылка открывается и предлагает поделиться,
   поэтому ниже 768 кнопка остаётся. Вести человека на 404 хуже, чем
   не показать кнопку.

   Здесь `!important`, и это единственное место в наборе, где он нужен.
   Причина не в лени: у виджета есть правило
   `.ya-share2__list.ya-share2__list_direction_horizontal > .ya-share2__item`
   ровно того же веса, что любой разумный селектор с нашей стороны, а свои
   стили он вставляет скриптом - то есть всегда после наших файлов. При
   равном весе побеждает последний, поэтому гонка за специфичностью здесь
   не выигрывается: три попытки подряд (класс, родитель, три класса)
   кнопку не скрыли. Порядок применения показал сам браузер через
   отладочный протокол: наше правило стоит выше, виджетовское ниже,
   и оно берёт верх. */
@media (min-width: 768px) {
  .ac-share .ya-share2__item_service_max { display: none !important; }
}