/* Адаптивная компоновка панели выбора и фотографии. */
*{box-sizing:border-box}body{margin:0;background:#f5f2ed;color:#302722;font:17px/1.5 "Segoe UI",sans-serif}header,main{max-width:1120px;margin:auto;padding:20px 5%}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d7cec4}a{color:#77452e}main{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}h1{font:normal clamp(32px,5vw,58px)/1.06 Georgia,serif}label{display:block;font-weight:600;margin:18px 0}select,input,button{font:inherit;border-radius:8px;padding:10px 14px}select,input{display:block;width:100%;border:1px solid #998c82;background:white}button{background:#713d2e;color:white;border:0;cursor:pointer}button:disabled{opacity:.5}figure{margin:0;background:white;border-radius:16px;overflow:hidden}canvas{width:100%;display:block}small{color:#685b53}@media(max-width:700px){main{grid-template-columns:1fr;gap:16px}h1{margin:12px 0}figure{max-width:480px;width:100%;margin:auto}}
/* Карточки каталога и фильтры остаются доступны с клавиатуры и на телефоне. */
#choices {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:3px;
  max-height:48vh;overflow-y:auto;padding:4px;background:white;border-radius:10px;
}
.product {position:relative;min-width:0}
.product label {position:relative;display:grid;place-items:center;margin:0;padding:5px;aspect-ratio:4/5;cursor:pointer;border-radius:7px}
.product img {width:100%;height:100%;object-fit:contain;min-height:0}
.product input {position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.product label:has(:checked) {box-shadow:inset 0 0 0 2px #713d2e}
.product label:has(:checked)::after {content:"✓";position:absolute;top:2px;right:2px;border-radius:50%;width:19px;text-align:center;background:#713d2e;color:white;font: bold 15px/19px sans-serif;pointer-events:none}
.product label:has(:focus-visible) {outline:2px solid #12628d;outline-offset:1px}
.product button {position:absolute;bottom:2px;right:2px;width:24px;height:24px;padding:0;line-height:1}
.product input:disabled {cursor:default}
/* Две колонки сохраняют место для фотографий на узких экранах. */
.criteria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin-bottom:12px}
.criteria label{margin:0;font-size:14px}.criteria select{max-width:100%;padding:6px}
#composition button{margin:3px;font-size:14px}
/* На телефоне прокручивается таблица; окно загрузки вписывается в экран. */
.catalog-admin{max-width:1440px;margin:auto;padding:2vw}.catalog-scroll{overflow-x:auto}.catalog-scroll table{border-collapse:collapse;width:100%;background:white}.catalog-scroll td,.catalog-scroll th{padding:7px;border-bottom:1px solid #ddd;text-align:left}.catalog-scroll img{width:44px;height:56px;object-fit:contain}.catalog-scroll button{margin:2px;font-size:14px}#sheet{max-width:96vw;width:1000px;max-height:90vh;border:0;border-radius:12px}#sheet::backdrop{background:#30272288}
/* Полоса остаётся внутри границ таблицы и закрепляется снизу окна при чтении длинного списка. */
.catalog-scroll{scrollbar-width:none}
.catalog-scroll::-webkit-scrollbar{display:none}
.catalog-scroll th:first-child,.catalog-scroll td:first-child{position:sticky;left:0;z-index:1;background:white;box-shadow:1px 0 #ddd}
.catalog-rail{position:sticky;bottom:0;z-index:2;background:#f5f2ed;padding:3px 1px}
.catalog-rail input{display:block;width:100%;height:20px;margin:0;padding:0;accent-color:#713d2e;cursor:ew-resize}
/* Шапка перекрывает строки и закреплённые фото; угловая ячейка остаётся непрозрачной. */
.catalog-scroll thead{position:relative;z-index:2;background:white}
.catalog-scroll th{background:white;box-shadow:inset 0 -1px #d7cec4}
/* Переход в справочник рядом с основным действием каталога. */
.reference-link{display:inline-block;padding:8px 14px;border:1px solid #998c82;border-radius:8px;text-decoration:none}