/* «Зал показу» — новий вигляд УСЬОГО сайту Quantula (етап 1: основа стилю, 06.10).
   Підключається лише з body.look-hall (за прихованим ?look=hall до запуску, див. App\Http\Middleware\SiteLook).
   Лягає поверх theme.css і міняє токени та базові елементи; сторінки переводимо етапами 2–5.
   Затверджено клієнтом 06.10: шрифти з їхнього quantula-l.com (Jost — заголовки, Inter — текст),
   слоган одним кольором, без підписів великими літерами (Борис 01.10), два вигляди + повзунок температури
   (Борис 06.10 «2 а» — режим «Засвітка» прибрано: у новому вигляді він дорівнює денному). */

:root{
  --sans:"Inter","Helvetica Neue","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --display:"Jost","Inter",system-ui,sans-serif;
  /* коди й артикули — тим самим Inter із табличними цифрами (font-feature tnum стоїть у theme.css) */
  --mono:"Inter","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --white:#fffdf8;
}
/* 08.10: у Jost немає українських «є» і «ґ» — браузер брав їх з Inter, і «продає» читалось як «продаЄ»
   (скріни співвласника й Бориса). Заголовки української версії — Manrope (Борис 08.10 «1 а»);
   EN/PL/PT лишаються на Jost — клієнт просив саме його, і там усі літери є. Шрифт підключає layouts/site. */
html[lang="uk"]{--display:"Manrope","Inter",system-ui,sans-serif}

/* 08.10 Борис: «було 3 режими — темний, світлий теплий, світлий холодний, зараз щось зламалося». Тут стояло правило,
   яке робило «Засвітку» копією дня (06.10) — третє положення повзунка нічого не міняло. Прибрано: холодна сцена бере
   свої кольори з theme.css (ті самі, що в дизайн-коді: біле тло, холодний акцент #0f6c8e). */

/* Етап 2а (07.10, Борис: «всі лінії, шрифти, відступи — за затвердженим стандартом»).
   ОДНА шкала для всіх 39 сторінок — значення з затвердженого концепту /design/hall (коуч, 01–06.10).
   Сторінки не правимо поодинці: теми h1, .h2, h3 і section вже спільні, тож шкала лягає на всі разом. */
:root{
  --t-h1:clamp(36px,5vw,64px);      /* заголовок сторінки (у концепті — cmp-title) */
  --t-h2:clamp(28px,3.4vw,50px);    /* заголовок розділу — погоджено коучем */
  --t-h3:clamp(19px,1.6vw,24px);    /* заголовок картки */
  --t-body:16px; --t-small:14px; --t-micro:13px;
  --sec-y:clamp(72px,10vw,140px);   /* відступ розділу зверху й знизу, як у концепті */
  --head-gap:clamp(28px,4vw,56px);  /* від заголовка розділу до змісту */
  --gap:clamp(16px,2vw,24px);       /* між картками */
}

/* Заголовки — Jost 500, як у затвердженому концепті */
.look-hall h1,.look-hall h2,.look-hall h3,.look-hall .h2{font-family:var(--display);font-weight:500;letter-spacing:-.02em}
.look-hall h1{line-height:1;font-size:var(--t-h1)}
.look-hall .h2,.look-hall section>.wrap>h2{font-size:var(--t-h2);line-height:1.05}
.look-hall .pill-card h3,.look-hall .fcard h3,.look-hall .b2b-card h3{font-size:var(--t-h3);line-height:1.2}
.look-hall body,.look-hall{font-size:var(--t-body)}

/* Ритм розділів — як у концепті; сторінка товару й каталог мають власну щільність (етап 4), їх не чіпаємо */
.look-hall section{padding-block:var(--sec-y)}
.look-hall .pagehead+section{padding-top:clamp(24px,3vw,40px)}
.look-hall .pd h1.pt{font-size:clamp(30px,4vw,48px)}
.look-hall .eyebrow,.look-hall .sec-eyebrow{letter-spacing:0;text-transform:none}

/* Попап нової збірки (07.10): одне речення й одна кнопка, по центру */
.nvbox{max-width:400px;text-align:center}
.nvtext{margin:0 0 1.1rem;font-size:1.05rem;color:var(--ink)}

/* Кнопки — пігулки кольору бренду, як у концепті */
.look-hall .btn{font-weight:600;letter-spacing:0}

/* Без підписів великими літерами (Борис 01.10) — усі 14 правил теми, що їх вмикали */
.look-hall .pd-rel-h,.look-hall .ctable thead th,.look-hall footer h4,.look-hall footer .fh,.look-hall .ncard .meta,
.look-hall .nextup .k,.look-hall .prevnext .k,.look-hall .mega h5,.look-hall .spec td.k,.look-hall .drawac .lbl,
.look-hall .cfg h6,.look-hall .cfg .cfgh,.look-hall .cfg .gl,.look-hall .ltable thead th,.look-hall .fltbar .gl,
.look-hall .cabcard .rl{text-transform:none;letter-spacing:0}
/* 08.10: те саме для правил, що лежать у <style> усередині шаблонів (картка проєкту «ОДЯГ», сертифікати, калькулятор,
   таблиця прайсу) — перевірка бачила лише theme.css і їх пропускала */
.look-hall .ccard .tg,.look-hall .certrow .k,.look-hall .calcform h6,.look-hall .rl,.look-hall .ptable th{text-transform:none;letter-spacing:0}

/* Етап 2б (07.10): мобільне меню, підвал.
   Меню — головні пункти кеглем Jost, каталог розгортається по тапу, мова внизу. */
.look-hall .mnav{padding:.4rem 18px 1.2rem;max-height:calc(100dvh - 64px);overflow-y:auto}
/* 08.10: відкрите меню закриває весь екран — під ним не визирає шматок сторінки */
.look-hall .mnav.open{min-height:calc(100dvh - 64px)}
.look-hall .mnav>a,.look-hall .mcat>summary{display:flex;align-items:center;min-height:52px;padding:0;
  font:500 20px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid var(--line2)}
.look-hall .mnav>a[aria-current]{color:var(--accent-d)}
.look-hall .mcat>summary{cursor:pointer;list-style:none;justify-content:space-between}
.look-hall .mcat>summary::-webkit-details-marker{display:none}
.look-hall .mcat>summary::after{content:"";width:9px;height:9px;margin-right:4px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.look-hall .mcat[open]>summary::after{transform:rotate(225deg) translate(-2px,-1px)}
.look-hall .mcat__body{display:flex;flex-direction:column;padding:.3rem 0 .9rem 1rem;border-bottom:1px solid var(--line2)}
.look-hall .mcat__body a{padding:.5rem 0;font-size:var(--t-body);color:var(--ink);border:0}
.look-hall .mcat__body>a:first-child{font-weight:600;color:var(--accent-d)}
.look-hall .mcat__h{margin:.8rem 0 .15rem;font-size:var(--t-micro);color:var(--soft)}
.look-hall .mnav .mlang{margin:1.2rem 0 0;padding:0;border:0}
@media(prefers-reduced-motion:reduce){.look-hall .mcat>summary::after{transition:none}}

/* Етап 3 (07.10): головна. */
/* Заголовки карток-закликів і цитата — тим самим Jost, що й решта заголовків */
.look-hall .b2b-card h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin-bottom:.7rem}
.look-hall .proof .quote{font-family:var(--display);font-weight:500;letter-spacing:-.02em;font-size:clamp(26px,3vw,40px);line-height:1.12}
/* Відео: кадр-заставка з ролику, кнопка й підпис поверх затемнення */
.look-hall .vid__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.look-hall .vid__poster~button{background:linear-gradient(180deg,transparent 35%,rgba(22,20,18,.55))}
.look-hall .vid__poster~button .cap{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
/* Порівняння на телефоні: критерій зверху, «типовий» і «Quantula» поруч з підписами.
   До того таблиця була ширша за екран — колонка Quantula, заради якої блок існує, ховалась за краєм. */
@media(max-width:620px){
  .look-hall .cmpwrap{overflow:visible}
  .look-hall .cmpwrap .ctable{min-width:0}
  .look-hall .ctable,.look-hall .ctable tbody{display:block}
  .look-hall .ctable thead{display:none}
  .look-hall .ctable tr{display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1rem;padding:.95rem 0;
    border-bottom:1px solid color-mix(in oklab,var(--on-ink) 14%,transparent)}
  .look-hall .ctable td{border:0;padding:0}
  .look-hall .ctable td:first-child{grid-column:1/-1;font-weight:600;margin-bottom:.3rem}
  .look-hall .ctable td[data-k]::before{content:attr(data-k);display:block;margin-bottom:.15rem;font-size:12px;font-weight:500;
    color:color-mix(in oklab,var(--on-ink) 55%,transparent)}
  .look-hall .fcard .top{height:76px}
}

/* Етап 4 (08.10, Борис: «роби каталог і сторінку виробу»): мова концепту «Хол» на каталозі й виробі. */
/* Головна кнопка — бурштинова пігулка з темним текстом, як у концепті (була чорна). У холодній сцені акцент синій — текст білий. */
.look-hall .btn-dark{background:var(--accent);color:#161412;box-shadow:0 8px 24px color-mix(in oklab,var(--accent) 26%,transparent)}
.look-hall .btn-dark:hover{filter:brightness(1.06)}
:root[data-scene="bright"] .look-hall .btn-dark{color:#fff}
/* Картка виробу: радіус із дизайн-коду (12px), назва шрифтом заголовків, фото «під світильником» — пляма світла згори */
.look-hall .pcard{border-radius:12px}
.look-hall .pcard .t{font-family:var(--display);font-weight:600;font-size:var(--t-h3);letter-spacing:-.01em}
.look-hall .pcard .im{background:radial-gradient(120% 72% at 50% 0,color-mix(in oklab,var(--accent-hi) 30%,var(--imgbg)),var(--imgbg) 64%)}

/* Етап 5 (08.10): «Про компанію» — текст клієнта з їхньої системи. Слів не чіпаємо, лише подача.
   Рядок жирним на весь абзац — це підзаголовок: шрифт заголовків, повітря зверху. */
.look-hall .cbody{max-width:760px;font-size:17px;line-height:1.65}
.look-hall .cbody p:has(> strong:only-child){font-family:var(--display);font-size:var(--t-h3);font-weight:600;line-height:1.25;margin:2.2rem 0 .7rem;color:var(--ink)}
.look-hall .cbody p:has(> strong:only-child) strong{font-weight:inherit}
/* Перший рядок у клієнта розірваний посеред речення («QUANTULA – виробник передових професійних» + «освітлювальних рішень…»):
   показуємо обидва шматки одним вступним абзацом */
.look-hall .cbody > p:first-child:has(> strong:only-child),
.look-hall .cbody > p:first-child:has(> strong:only-child) + p{display:inline;font:400 clamp(19px,1.7vw,23px)/1.5 var(--sans);margin:0;color:var(--ink)}
.look-hall .cbody > p:first-child:has(> strong:only-child) strong{font-weight:600}
.look-hall .cbody > p:first-child:has(> strong:only-child) + p::after{content:"";display:block;height:1.6rem}
/* 09.10 (замір лінії 2, PageSpeed мобільний: зсув верстки на виробі 0,319 і на проєкті 0,193): місце під головне фото
   зарезервоване ДО завантаження картинки — сторінка більше не стрибає, коли фото приїжджає */
.look-hall .pd-photo{aspect-ratio:1/1}
.look-hall .pd-photo img{max-height:100%}
.look-hall .hero > img{aspect-ratio:16/9;object-fit:cover;height:auto}
.look-hall .drawac .body img{aspect-ratio:16/10;width:min(560px,100%);height:auto}

/* Таблиця «Прайсом» (09.10): коди виробів — тим самим шрифтом, що й решта сайту, з рівними цифрами
   (у шаблоні для них стояв системний моноширинний, якого в «Хол» немає) */
.look-hall .ptable .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}

/* Замовлення (09.10): порожній список — підказка й кнопка в каталог */
.look-hall #empty .lead{max-width:56ch}
.look-hall .empty-cta{margin:1.6rem 0 3rem}

/* Контакти (09.10): картки офісів — блок карти на одній лінії в усіх трьох, навіть коли адреса на два рядки */
.look-hall .offcard{display:flex;flex-direction:column}
.look-hall .offcard .b{flex:1 1 auto}
.look-hall .offcard .t{font-family:var(--display);font-weight:600;font-size:var(--t-h3)}

/* Картки принципів і виробництв: фото однієї висоти, щоб назви стояли на одній лінії */
.look-hall .scard .im{aspect-ratio:3/2;overflow:hidden}
.look-hall .scard .im img{width:100%;height:100%;object-fit:cover;display:block}
.look-hall .scard .t{font-family:var(--display);font-weight:600;font-size:var(--t-h3)}
.look-hall .cbody ul,.look-hall .cbody ol{margin:0 0 1.2rem 1.25rem;padding:0}
.look-hall .cbody li{margin:.35rem 0;padding-left:.2rem}

/* 08.10 (скрін Бориса): підпис студії в нижньому рядку не рветься — слово «Impeca» не лишається саме на новому рядку */
.look-hall .fbot .wrap>*:last-child{white-space:nowrap}
@media(max-width:560px){.look-hall .fbot .wrap>*:last-child{white-space:normal}}

/* Підвал: колонки по тій самій сітці, що й сторінка (.wrap 1160), заголовки читаються */
.look-hall footer .cols{max-width:1160px;margin:0 auto;padding:clamp(48px,6vw,72px) 28px 40px;gap:2rem 2.5rem}
.look-hall footer .fh{font:600 var(--t-small)/1.3 var(--sans);color:var(--ink);margin:0 0 1rem}
/* 08.10 (Борис: «немає спільного горизонтального рівня… вирівняти»): підпис «Мова сайту» стоїть на одній лінії з кнопками мов —
   на нього лягав нижній відступ заголовків колонок підвалу */
.look-hall footer .flang .fh{margin:0;line-height:1}
.look-hall .flang .wrap{align-items:center}
.look-hall footer .office{font-size:15px;line-height:1.85}
.look-hall footer .desc{font-size:15px;line-height:1.6}
.look-hall footer .office a[href^="mailto"]{white-space:nowrap}
.look-hall .flang .wrap,.look-hall .fbot .wrap{padding-block:1.1rem}
@media(max-width:760px){
  .look-hall footer .cols{grid-template-columns:1fr 1fr;padding-inline:18px;gap:2.2rem 1.5rem}
  .look-hall footer .cols>div:first-child,.look-hall footer .cols>div:last-child{grid-column:1/-1}
  .look-hall footer .desc{max-width:none}
  .look-hall .flang .wrap,.look-hall .fbot .wrap{padding-inline:18px}
}

/* Етап 4б (09.10, Борис: «тут бачу проблеми», скрін конфігуратора виробу): однакові плитки оптики, підписані кольори,
   колір окремим рядком під керуванням, вкладки й чіпи на телефоні. Вигляд лише тут (стандарт §8), кольори — токени. */
.cfg .grp[data-g="opt"] .optrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.5rem}
.cfg .opt.opticopt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.28rem;text-align:center;min-height:112px;padding:.65rem .5rem .6rem;border-radius:12px}
.cfg .opt.opticopt .beam{display:block;line-height:0}
.cfg .opt.opticopt .beam svg{width:36px;height:36px;display:block}
.cfg .opt.opticopt b{font-size:.95rem;font-weight:700;line-height:1.1;color:var(--ink)}
.cfg .opt.opticopt small{font-size:.74rem;font-weight:500;line-height:1.25;color:var(--soft);overflow-wrap:anywhere}
.cfg .opt.opticopt.on b,.cfg .opt.opticopt.on small{color:var(--accent-d)}
.cfg-ctlcol{display:block}
.cfg-ctlcol .grp+.grp{margin-top:1.2rem}
.cfg .grp[data-g="col"] .optrow{gap:.5rem}
.cfg .opt.swopt{width:auto;height:auto;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.55rem .6rem .5rem;border-radius:12px}
.cfg .opt.swopt .sw{display:block;width:44px;height:44px;border-radius:10px;border:1px solid var(--line)}
.cfg .opt.swopt em{font-style:normal;font-size:.78rem;font-weight:600;line-height:1.1;color:var(--ink)}
.cfg .opt.swopt.on .sw{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--accent-d)}
.cfg .opt.swopt.on em{color:var(--accent-d)}
@media (max-width:520px){
  .vtoggle{display:flex;width:100%}
  .vtoggle a{flex:1 1 0;justify-content:center;padding:.5rem .25rem;font-size:.78rem;gap:.28rem;min-width:0}
  .cfg .grp:not([data-g="opt"]):not([data-g="ctl"]):not([data-g="col"]) .optrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
  .cfg .grp:not([data-g="opt"]):not([data-g="ctl"]):not([data-g="col"]) .opt{text-align:center;padding:.5rem .3rem}
  .cfg .grp[data-g="opt"] .optrow{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Етап 4в (09.10): «Прайсом» на телефоні. Таблиця мала мінімальну ширину 640 px і горизонтальну прокрутку без підказки —
   списки й «у замовлення» були обрізані справа (знімок 375). На вузькому екрані кожна позиція — картка: фото й назва
   зверху, чотири списки парами, дії внизу. Розмітка таблиці не змінена, тож скрипти конфігурації працюють як раніше. */
@media (max-width:720px){
  .tblwrap{overflow:visible}
  .tblwrap .ltable{min-width:0;display:block}
  .ltable thead{display:none}
  .ltable tbody{display:block}
  .ltable tr[data-row]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem .6rem;align-items:start;padding:.9rem .9rem .3rem;margin-top:.8rem;border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;background:var(--white)}
  .ltable tr[data-row] td{display:block;padding:0;border:0;min-width:0}
  .ltable tr[data-row] td:nth-child(1){grid-column:1;grid-row:1}
  .ltable tr[data-row] td:nth-child(2){grid-column:2 / -1;grid-row:1}
  .ltable tr[data-row] td:nth-child(n+3){grid-column:span 2}
  .ltable tr[data-row] td:nth-child(n+3) select{width:100%;max-width:none}
  .ltable tr[data-actions]{display:block;padding:.2rem .9rem .9rem;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;background:var(--white)}
  .ltable tr[data-actions] td{display:flex;flex-wrap:wrap;gap:.5rem .7rem;align-items:center;padding:0;border:0;text-align:left}
  .ltable tr[data-actions] td select{flex:1 1 100%;max-width:none}
  .ltable tr[data-actions] .rowacts .dl{margin-right:auto}
}

/* 09.10 (виріб, телефон): три показники — завжди в один ряд (CRI більше не падає окремим рядком);
   активний режим показу — бурштинова пігулка, як головна кнопка «Хол» (був чорний); кольори корпусу — три в ряд. */
.look-hall .vtoggle a.on{background:var(--accent);color:#161412}
:root[data-scene="bright"] .look-hall .vtoggle a.on{color:#fff}
@media (max-width:520px){
  .look-hall .pperf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
  .look-hall .pperf b{font-size:clamp(1.05rem,5vw,1.3rem);line-height:1.1}
  .look-hall .cfg .grp[data-g="col"] .optrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .look-hall .cfg .opt.swopt{min-width:0}
}

/* 09.10 Замовлення на телефоні: таблиця на 640 px ховала частину рядка за краєм (без підказки, що її можна гортати).
   Тепер кожна позиція — картка: серія і ✕ зверху, артикул, опції, далі кількість і даташит. */
@media (max-width:620px){
  .look-hall #otwrap{overflow:visible}
  .look-hall #otable{min-width:0;display:block;border:0;box-shadow:none;background:none}
  .look-hall #otable thead{display:none}
  .look-hall #otable tbody{display:grid;gap:.7rem}
  .look-hall #otable tr{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"n s x" "a a a" "o o o" "q q d";
    gap:.35rem .6rem;padding:.9rem 1rem;background:var(--white);border:1px solid var(--line);border-radius:12px}
  .look-hall #otable td{padding:0;border:0;background:none!important}
  .look-hall #otable td:nth-child(1){grid-area:n;color:var(--soft)}
  .look-hall #otable td:nth-child(2){grid-area:s;font-family:var(--display);font-weight:500!important;font-size:1.05rem}
  .look-hall #otable td:nth-child(3){grid-area:a;word-break:break-all}
  .look-hall #otable td:nth-child(4){grid-area:o;font-size:.88rem}
  .look-hall #otable td:nth-child(5){grid-area:q;padding-top:.3rem}
  .look-hall #otable td:nth-child(6){grid-area:d;justify-self:end;align-self:end}
  .look-hall #otable td:nth-child(7){grid-area:x}
}

/* 09.10 Борис (скрін «Замовлення»): «відстань від тексту до лінії і до наступного заголовку має бути однаково».
   Було: нижнє поле останнього розділу (до 140 px) + власний відступ підвалу (до 80 px) над лінією, а під лінією — 48–72 px.
   Тепер одне значення по обидва боки лінії підвалу, на всіх сторінках. */
.look-hall{--foot-gap:clamp(48px,6vw,72px)}
.look-hall footer{margin-top:0}
/* останній РОЗДІЛ, а не останній вузол: на головній, «Замовленні» й «Проєктувальникам» останнім стоїть <script> */
.look-hall main>section:last-of-type,.look-hall main>section:last-of-type .final{padding-bottom:var(--foot-gap)!important;margin-bottom:0!important}
.look-hall main>section:last-of-type>.wrap>:last-child,.look-hall main>section:last-of-type>.wrap>:last-child>:last-child{margin-bottom:0}
.look-hall footer .cols{padding-top:var(--foot-gap)}
/* те саме, точково: у «Замовленні» останній вузол розділу — прихований #odone, видимий текст стоїть у #oform;
   у «Проєктувальникам» останні картки .b2b мають власний нижній відступ */
.look-hall #oform>:last-child,.look-hall #odone>:last-child{margin-bottom:0}
.look-hall main>section:last-of-type .b2b,.look-hall main>section:last-of-type .b2b-card>:last-child{margin-bottom:0}
.look-hall #empty>:last-child{margin-bottom:0}
.look-hall #empty .empty-cta{display:flex;margin-bottom:0}

/* 10.10 ШІ-пошук на телефоні: кнопка «Знайти» вилазила за край вікна — поле не стискалось нижче довжини підказки.
   Поле тепер стискається, а на вузькому екрані кнопка — під полем на всю ширину. */
.look-hall .aiinput{min-width:0}
@media (max-width:520px){
  .look-hall .aiform{flex-direction:column}
  .look-hall .aiform .btn,.look-hall .aiform button{width:100%;justify-content:center}
}