/* «Лаборатория» (assets/features/lab.js): раздел #lab на главной и страница #/laboratoriya.
   Ночь в лаборатории: тёплый чёрный, цвет дают только фото сырья и сама жидкость в колбе. Отчёт — на бумаге, как лабораторный лист.
   Шкала шрифтов сайта: подписи капсом от 11px, строчный текст от 13px, ноты и цены — 14px, вводные абзацы — от 17px. */

/* ===================== Раздел на главной ===================== */
.labt { position: relative; background: var(--ink); color: var(--white); padding: var(--sec-pad) 0; overflow: hidden; }
.labt__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.labt__text { grid-column: 1 / span 6; min-width: 0; }
.labt__title { margin: 26px 0 30px; }
.labt__lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--mute-inv); max-width: 33rem; }
.labt__facts { list-style: none; display: flex; flex-wrap: wrap; margin: 30px 0 40px; padding: 0; }
.labt__facts li {
  font: 500 .75rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--white);
  padding: 0 22px; border-left: 1px solid var(--line-inv-2);
}
.labt__facts li:first-child { padding-left: 0; border-left: 0; }
.labt__go .ico { transition: transform .6s var(--ease); }
.labt__go:hover .ico { transform: translateX(6px); }
.labt__start { margin: 46px 0 16px; color: var(--mute-inv); }
.labt__seeds { display: flex; gap: 2px; }
.labt__seed {
  display: grid; justify-items: center; gap: 6px; flex: 1 1 0; min-width: 0; max-width: 88px; padding: 6px 2px 8px;
  color: var(--mute-inv); text-decoration: none; font-size: .8125rem; line-height: 1.2; text-align: center;
  transition: color .4s;
}
.labt__seed img { width: 100%; max-width: 64px; height: auto; aspect-ratio: 1; object-fit: contain; transition: transform .6s var(--ease); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); }
.labt__seed:hover { color: var(--white); }
.labt__seed:hover img { transform: translateY(-5px) scale(1.06); }
.labt__stage { grid-column: 8 / -1; height: clamp(500px, 52vw, 760px); display: flex; justify-content: center; align-items: stretch; }
/* колба — фотография (media/lab/flask.webp, 600 × 1335), холст тех же пропорций */
.labt__flask, .labt__stage .lab__svg { height: 100%; width: auto; aspect-ratio: 600 / 1335; max-width: 100%; }

/* ===================== Страница: тёмная лаборатория ===================== */
.pg.pg--lab { background: var(--ink); color: var(--white); }
.pg.pg--lab .pg__foot { border-top-color: var(--line-inv); color: var(--mute-inv); }
.pg.pg--lab .pg__foot .link { color: var(--white); }
html.am-paged.am-lab body:not(.menu-open) .hdr {
  color: var(--white); background: rgba(18, 17, 15, .9); border-color: var(--line-inv);
}
html.am-paged.am-lab body:not(.menu-open) .hdr .badge { background: var(--white); color: var(--ink); }

.lab { color: var(--white); }
.lab .eyebrow { color: var(--mute-inv); }
.lab__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 26px; margin-bottom: clamp(44px, 5vw, 84px); }
.lab__head .eyebrow { grid-column: 1 / span 3; padding-top: 1.05em; }
.lab__title { grid-column: 4 / -1; }
.lab__lead { grid-column: 4 / span 6; font-size: var(--fs-lead); line-height: 1.65; color: var(--mute-inv); max-width: 37rem; }

.lab__bench { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 76px); align-items: start; }
/* стенд: высокая колба слева, рядом — формула и показатели, под ними — «Смешать» и советы; всё помещается в экран и липнет */
.lab__stage {
  position: sticky; top: calc(var(--hdr-h) + 14px); display: grid; gap: 22px clamp(18px, 2vw, 30px);
  grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "flask side" "panel panel"; align-items: center;
}
.lab__flaskbox { grid-area: flask; position: relative; height: clamp(340px, calc(100svh - var(--hdr-h) - 210px), 660px); display: flex; justify-content: center; align-items: stretch; }
.lab__side { grid-area: side; display: grid; gap: 20px; min-width: 0; }
.lab__side .lab-meters { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lab__flask, .lab__flaskbox .lab__svg { height: 100%; width: auto; aspect-ratio: 600 / 1335; max-width: 100%; }
.lab__status {
  position: absolute; left: 0; top: 4px;
  font: 500 .75rem/1.3 var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--white);
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .6s var(--ease);
}
.lab__status.is-on { opacity: 1; transform: none; }
.lab__skip { position: absolute; right: 0; top: 0; color: var(--mute-inv); }

/* колба без WebGL: та же фотография, жидкость — круг шара (центр 50 % / 67,81 %, радиус 38 % ширины), срезанный по уровню и дну */
.lab__static { position: relative; display: block; --liq: #b07a3a; --lev: 60%; }
.lab__static img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lab__static-liq {
  position: absolute; left: 12.01%; width: 75.97%; top: 50.74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(60% 50% at 50% 92%, color-mix(in srgb, var(--liq) 70%, #fff), var(--liq) 60%, color-mix(in srgb, var(--liq) 55%, #000));
  clip-path: inset(var(--lev) 0 7% 0); mix-blend-mode: screen; opacity: .85;
  transition: clip-path .8s var(--ease), background .8s;
}

/* живая панель под колбой */
.lab__panel { grid-area: panel; display: grid; gap: 18px; }
.lab__panel:empty { display: none; }
.lab__empty { font-size: .9375rem; line-height: 1.55; color: var(--mute-inv); max-width: 26rem; }
.lab__sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: .875rem; color: var(--mute-inv); }
.lab__sum .caps { color: var(--white); }
.lab-pyr__bar { display: flex; gap: 3px; height: 6px; }
.lab-pyr__seg { flex: 1 1 0; min-width: 2px; background: currentColor; opacity: .3; transition: flex-grow .6s var(--ease); }
.lab-pyr__seg[data-t="1"] { opacity: .55; }
.lab-pyr__seg[data-t="2"] { opacity: .85; }
.lab-pyr__lab { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: .8125rem; color: var(--mute-inv); }
.lab-pyr__lab b { font-weight: 500; color: var(--white); }
.lab-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; margin: 0; }
.lab-m { min-width: 0; }
.lab-m dt { font: 500 .6875rem/1.2 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute-inv); }
.lab-m dd { margin: 8px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; }
.lab-m__v { font: 300 1.375rem/1 var(--f-display); white-space: nowrap; }
.lab-m__track { position: relative; height: 1px; background: var(--line-inv-2); overflow: hidden; }
.lab-m__track span { position: absolute; inset: 0; background: currentColor; transform-origin: left; transition: transform .7s var(--ease); }
.lab-m__note { grid-column: 1 / -1; font-size: .8125rem; color: var(--mute); }
.lab-tips .caps { color: var(--mute-inv); font-size: .6875rem; margin-bottom: 10px; }
.lab-tips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-tip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 14px 3px 4px;
  background: none; border: 1px solid var(--line-inv-2); color: inherit; font-size: .875rem;
  transition: background-color .4s, border-color .4s;
}
.lab-tip img { width: 36px; height: 36px; object-fit: contain; }
.lab-tip b { font-weight: 500; }
.lab-tip small { font-size: .8125rem; color: var(--mute-inv); }
.lab-tips--light .lab-tip small { color: var(--mute); }
.lab-tip:hover { background: rgba(250, 248, 244, .07); border-color: var(--white); }
/* совет «убрать ноту»: фото ноты приглушено — её в колбе станет меньше */
.lab-tip--cut img { opacity: .5; filter: grayscale(.6); }
.lab__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.lab__need { flex-basis: 100%; font-size: .8125rem; color: var(--mute-inv); }
.lab.is-brewing .lab__organ, .lab.is-brewing .lab__panel, .lab.is-brewing .lab__side { opacity: .45; pointer-events: none; transition: opacity .5s; }

/* орган: три полки по 16 нот (вкладки ярусов — только на телефоне) */
.lab__organ { display: grid; gap: clamp(26px, 3vw, 46px); min-width: 0; }
.lab__tabs { display: none; }
.lab__shelf { border-top: 1px solid var(--line-inv); padding-top: 18px; }
.lab__shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 12px; }
.lab__shelf-head h2 { margin: 0; }
.lab__shelf-head p { font-size: .8125rem; color: var(--mute-inv); }
.lab__vials { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px 2px; }
@media (max-width: 1360px) { .lab__vials { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lab-vial { position: relative; display: grid; align-content: start; min-width: 0; }
.lab-vial__pick {
  display: grid; justify-items: center; align-content: start; gap: 5px; width: 100%; padding: 8px 3px 10px;
  background: none; border: 0; color: inherit; text-align: center; border-radius: 0;
  transition: background-color .45s;
}
.lab-vial__img { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.lab-vial__img img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); transition: transform .6s var(--ease); }
.lab-vial__pick:hover .lab-vial__img img { transform: translateY(-6px) scale(1.05); }
.lab-vial__pick:active .lab-vial__img img { transform: translateY(2px) scale(.97); transition-duration: .15s; }
.lab-vial__name { font-size: .875rem; line-height: 1.25; color: var(--white); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; max-width: 100%; }
.lab-vial__d { font-size: .8125rem; line-height: 1.3; color: var(--mute-inv); opacity: 0; max-height: 0; transition: opacity .4s, max-height .5s var(--ease); overflow: hidden; }
.lab-vial__pick:hover .lab-vial__d, .lab-vial__pick:focus-visible .lab-vial__d { opacity: 1; max-height: 3.2em; }
.lab-vial.is-on .lab-vial__pick { background: rgba(250, 248, 244, .07); }
.lab-vial.is-on .lab-vial__name { font-weight: 500; }
.lab-vial__ctl { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; background: rgba(250, 248, 244, .07); border-top: 1px solid var(--line-inv); }
.lab-vial__b { height: 32px; background: none; border: 0; color: inherit; font: 300 1.25rem/1 var(--f-text); transition: background-color .3s; }
.lab-vial__b:hover { background: rgba(250, 248, 244, .1); }
.lab-vial__n { text-align: center; white-space: nowrap; }
.lab-vial__n b { font: 400 1.0625rem/1 var(--f-display); }

/* нижняя строка на телефоне */
.lab__bar { display: none; }

/* ===================== Отчёт: лабораторный лист ===================== */
.lab-res { background: var(--paper); color: var(--ink); margin-top: clamp(90px, 10vw, 160px); padding: clamp(70px, 8vw, 130px) 0 clamp(70px, 7vw, 110px); }
.lab-res .eyebrow { color: var(--mute); }
.lab-res__head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.lab-res__namebox { display: block; }
.lab-res__name {
  width: 100%; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; color: inherit;
  font: 300 var(--fs-h2)/1.05 var(--f-display); letter-spacing: -.022em;
}
.lab-res__name::placeholder { color: rgba(18, 17, 15, .28); font-style: italic; }
.lab-res__name:focus { outline: none; border-bottom-color: var(--ink); }
.lab-res__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 70px); align-items: start; }
.lab-res__bottle { max-width: 360px; margin-top: -20px; }

/* Флакон Aroma Magic (фото 629 × 1100): белый фон фото ложится на бумагу «умножением» и исчезает.
   Два холста: пустой флакон и полный; полный открывается снизу вверх — флакон наполняется цветом формулы */
/* «умножение» — на всём флаконе: container-type делает его отдельным слоем, и холсты внутри смешивались бы с пустотой */
.lab-bottle { position: relative; margin: 0; width: 100%; aspect-ratio: 629 / 1100; container-type: inline-size; mix-blend-mode: multiply; }
.lab-bottle__c { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s; }
.lab-bottle.is-ready .lab-bottle__c { opacity: 1; }
.lab-bottle__full { transition: opacity .5s, clip-path 1.6s cubic-bezier(.45, .05, .25, 1); }
/* этикетка: напечатана на кремовой бумаге флакона — дом, имя аромата, формула, город и дата */
.lab-bottle__label {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2cqi;
  padding: 3cqi 3.4cqi; text-align: center; color: #2a2722;
  opacity: 0; transform: translateY(1.5cqi); transition: opacity .8s .1s, transform .9s var(--ease);
}
.lab-bottle.is-full .lab-bottle__label { opacity: 1; transform: none; }
.lab-bottle__house { font: 500 3cqi/1 var(--f-text); letter-spacing: .32em; text-transform: uppercase; padding-bottom: 2.2cqi; border-bottom: 1px solid rgba(42, 39, 34, .35); }
.lab-bottle__name { font: italic 300 6.8cqi/1.05 var(--f-display); letter-spacing: -.01em; max-width: 100%; overflow-wrap: anywhere; }
.lab-bottle__meta, .lab-bottle__city { font: 500 2.8cqi/1.2 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: #5d574e; }
.lab-bottle__city { margin-top: -.6cqi; }
.lab-res__score .caps { color: var(--mute); }
.lab-res__big { display: flex; align-items: baseline; gap: 14px; margin: 10px 0 4px; }
.lab-res__big span { font: 200 clamp(6.5rem, 12vw, 11.5rem)/.82 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lab-res__big small { font: 500 .75rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.lab-res__claim { font-size: 1.0625rem; line-height: 1.55; max-width: 26rem; margin-bottom: 30px; }
.lab-res__rows { display: grid; gap: 18px; margin: 0; }
.lab-res__rows .lab-m dt { color: var(--mute); }
.lab-res__rows .lab-m__track { background: var(--line-2); }
.lab-res__rows .lab-m__v { font-size: 1.5rem; }
.lab-res__fl .caps { color: var(--mute); margin-bottom: 14px; }
.lab-res__fl .lab-pyr__lab { color: var(--mute); }
.lab-res__fl .lab-pyr__lab b { color: var(--ink); }
.lab-fl { display: grid; gap: 18px; margin-top: 26px; }
.lab-fl__tier .caps { font-size: .6875rem; margin-bottom: 8px; }
.lab-fl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lab-fl li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: .9375rem; padding: 2px 0; border-bottom: 1px solid var(--line); }
.lab-fl li img { width: 40px; height: 40px; object-fit: contain; }
.lab-fl li b { font-weight: 500; font-variant-numeric: tabular-nums; }

.lab-res__h { font: 300 clamp(2rem, 3.4vw, 3.2rem)/1.05 var(--f-display); letter-spacing: -.02em; margin: 0; }
.lab-res__says { margin-top: clamp(70px, 8vw, 120px); padding-top: 26px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 22px clamp(28px, 4vw, 70px); }
.lab-res__facts { display: grid; gap: 16px; font-size: 1.0625rem; line-height: 1.6; max-width: 46rem; }
.lab-res__says .lab-tips { grid-column: 2; }
.lab-tips--light .caps { color: var(--mute); }
.lab-tips--light .lab-tip { border-color: var(--line-2); }
.lab-tips--light .lab-tip:hover { background: var(--paper-2); border-color: var(--ink); }
.lab-res__sec { margin-top: clamp(80px, 9vw, 140px); padding-top: 26px; border-top: 1px solid var(--ink); }
.lab-res__sh { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(28px, 4vw, 70px); margin-bottom: clamp(30px, 4vw, 56px); }
.lab-res__sh p { font-size: 1.0625rem; line-height: 1.6; color: var(--mute); max-width: 40rem; }
.lab-res__matches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); }
.lab-match { display: grid; align-content: start; gap: 6px; min-width: 0; }
.lab-match__ph { display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: var(--paper-2); overflow: hidden; margin-bottom: 12px; }
.lab-match__ph img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ease); }
.lab-match__ph:hover img { transform: scale(1.04); }
.lab-match__pct { display: flex; align-items: baseline; gap: 4px; }
.lab-match__pct span { font: 300 3.2rem/1 var(--f-display); letter-spacing: -.03em; }
.lab-match__pct small { margin-left: 10px; font: 500 .6875rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.lab-match__brand { color: var(--mute); margin-top: 4px; }
.lab-match__name { font: 400 1.375rem/1.15 var(--f-display); margin: 0; }
.lab-match__shared { font-size: .875rem; color: var(--mute); }
.lab-match__price { font-size: .9375rem; margin: 4px 0 6px; }
.lab-match .link { justify-self: start; }
.lab-res__cmp { margin-top: 30px; }
.lab-res__blends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 70px); }
.lab-blend { display: grid; align-content: start; gap: 12px; padding-top: 4px; }
/* одна смесь — во всю ширину: флаконы слева, пропорция и порядок нанесения справа */
.lab-res__blends.is-one { grid-template-columns: minmax(0, 1fr); }
.lab-res__blends.is-one .lab-blend { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 4vw, 70px); align-items: end; }
.lab-res__blends.is-one .lab-blend__row { grid-row: 1 / span 5; }
.lab-res__blends.is-one .lab-blend > :not(.lab-blend__row) { grid-column: 2; }
@media (max-width: 860px) {
  .lab-res__blends.is-one .lab-blend { grid-template-columns: minmax(0, 1fr); }
  .lab-res__blends.is-one .lab-blend__row { grid-row: auto; }
  .lab-res__blends.is-one .lab-blend > :not(.lab-blend__row) { grid-column: 1; }
}
.lab-blend__row { display: flex; align-items: center; gap: 6px; }
.lab-blend__ph { flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 5; padding: 0; border: 0; background: var(--paper-2); overflow: hidden; }
.lab-blend__ph img { width: 100%; height: 100%; object-fit: contain; }
.lab-blend__plus { font: 200 2.4rem/1 var(--f-display); color: var(--mute); }
.lab-blend__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 8px; }
.lab-blend__ratio { font: 300 2.6rem/1 var(--f-display); letter-spacing: .02em; }
.lab-blend__pct span { font: 300 2.6rem/1 var(--f-display); }
.lab-blend__pct small { font: 500 .6875rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.lab-blend__gain { font-size: .875rem; color: var(--mute); }
.lab-blend__how { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: .9375rem; line-height: 1.45; }
.lab-blend__how b { font-weight: 500; }
.lab-blend__note { font-size: .875rem; color: var(--mute); }
/* смесь — в корзину: по флакону каждого аромата; рядом сумма и объёмы — ровно то, что ляжет в корзину */
.lab-blend__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.lab-blend__add { flex: 0 0 auto; }
.lab-blend__add.is-done { border-color: var(--ink); }
.lab-blend__sum { display: grid; gap: 4px; min-width: 0; font-size: 1rem; line-height: 1.3; }
.lab-blend__sum b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-blend__sum small { font-size: .875rem; color: var(--mute); }
.lab-res__none { font-size: 1.0625rem; color: var(--mute); }
.lab-res__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: clamp(70px, 8vw, 120px); padding-top: 30px; border-top: 1px solid var(--line-2); }
.lab-res__how { margin-top: 40px; max-width: 52rem; }
.lab-res__how summary { cursor: pointer; color: var(--mute); list-style: none; padding: 8px 0; }
.lab-res__how summary::-webkit-details-marker { display: none; }
.lab-res__how summary::after { content: " +"; }
.lab-res__how[open] summary::after { content: " −"; }
.lab-res__how p { font-size: .9375rem; line-height: 1.6; color: var(--mute); margin-top: 10px; }

/* ===================== Планшет и телефон ===================== */
/* средняя ширина: рядом с колбой показателям тесно — встают под неё, колба чуть ниже, чтобы стенд помещался в экран */
@media (max-width: 1340px) and (min-width: 861px) {
  .lab__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "flask" "side" "panel"; gap: 20px; }
  .lab__flaskbox { height: clamp(260px, calc(100svh - var(--hdr-h) - 470px), 560px); }
  .lab__side .lab-meters { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
}
@media (max-width: 1100px) {
  .labt__text { grid-column: 1 / span 7; }
  .labt__stage { grid-column: 8 / -1; }
  .lab-res__top { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .lab-res__fl { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .labt__in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .labt__text, .labt__stage { grid-column: 1; }
  .labt__stage { height: min(68vw, 460px); order: -1; }
}
/* телефон стоя и лёжа (лёжа он бывает шире 860 px) */
@media (max-width: 860px), (max-width: 1100px) and (orientation: landscape) and (max-height: 540px) {
  /* ---------- Стенд на телефоне — один экран, без прокрутки ----------
     Сверху колба, рядом четыре показателя; ниже — советы модели одной строкой, вкладки ярусов «Верх · Сердце · База»
     и сетка 4 × 4 из 16 нот открытого яруса. Итог формулы, «Очистить» и «Смешать» — в нижней строке.
     Высота стенда — видимая высота экрана (100svh) без шапки и нижней строки; на совсем невысоком экране ряды нот
     не мельчают меньше 56 px — тогда стенд чуть выше экрана. Заголовок страницы остаётся только для чтения с экрана */
  .pg--lab { --lab-bar: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .pg--lab .pg__in { padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 10px); }
  .pg--lab .pg__crumbs { display: none; }
  .lab__head { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lab__bench {
    --lab-top: clamp(118px, 24svh, 200px);
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--lab-top) auto minmax(282px, 1fr);
    grid-template-areas: "flask side" "panel panel" "organ organ"; gap: 10px 18px; align-items: stretch;
    min-height: calc(100svh - var(--hdr-h) - env(safe-area-inset-top, 0px) - 10px - var(--lab-bar));
  }
  .lab__stage { display: contents; }
  .lab__flaskbox { grid-area: flask; height: var(--lab-top); width: calc(var(--lab-top) * 600 / 1335); }
  .lab__flask, .lab__flaskbox .lab__svg { width: 100%; height: 100%; }
  .lab__side { grid-area: side; align-self: center; gap: 12px; transition: opacity .4s; }
  .lab__sum { display: none; }
  .lab__side .lab-meters { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .lab-m dt { letter-spacing: .16em; }
  .lab-m dd { margin-top: 5px; gap: 4px 8px; }
  .lab-m__v { font-size: 1.125rem; }
  .lab-pyr__lab { margin-top: 7px; }
  .lab__empty { font-size: .9375rem; }
  /* пока колба мешает и настаивается, на месте показателей — что происходит */
  .lab__status { left: calc(100% + 18px); top: 50%; width: calc(100vw - 100% - 18px - 2 * var(--gutter)); line-height: 1.6; transform: translateY(calc(-50% + 6px)); }
  .lab__status.is-on { transform: translateY(-50%); }
  .lab__skip { left: calc(100% + 18px); right: auto; top: calc(50% + 30px); }
  .lab.is-brewing .lab__side { opacity: 0; }
  /* советы — одной строкой; «Смешать» и «Очистить» — в нижней строке */
  /* место под строку советов есть всегда: иначе после первой ноты сетка нот подпрыгивает вверх-вниз */
  .lab__panel { grid-area: panel; gap: 0; grid-template-columns: minmax(0, 1fr); min-height: 68px; }
  .lab__panel:empty { display: grid; }
  .lab-tips { min-width: 0; }
  .lab__acts { display: none; }
  .lab-tips .caps { margin-bottom: 6px; }
  .lab-tips__row { flex-wrap: nowrap; gap: 6px; }
  /* плитка совета в две строки: имя сверху, доза («× 8» — столько капель ляжет) и прибавка оценки снизу — они не сжимаются */
  .lab-tip {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 3px 8px 3px 3px; font-size: .8125rem; line-height: 1.2; text-align: left;
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "img t t" "img x g"; column-gap: 6px; align-content: center;
  }
  .lab-tip img { grid-area: img; width: 32px; height: 32px; align-self: center; }
  .lab-tip__t { grid-area: t; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lab-tip__x { grid-area: x; white-space: nowrap; }
  .lab-tip__g { grid-area: g; justify-self: end; white-space: nowrap; }
  /* совет «Убрать «нота»» — нажатие стирает ноту из формулы: он вдвое шире, текст целиком, третий совет рядом с ним не помещается */
  .lab-tip--cut { flex: 2 1 0; }
  .lab-tips__row:has(.lab-tip--cut) > .lab-tip:nth-child(3) { display: none; }
  /* орган: вкладки ярусов и одна полка сеткой 4 × 4 */
  .lab__organ { grid-area: organ; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
  .lab__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line-inv); }
  .lab__tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 4px; margin-bottom: -1px;
    background: none; border: 0; border-bottom: 1px solid transparent; color: var(--mute-inv);
    font: 500 .75rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; transition: color .3s, border-color .3s;
  }
  .lab__tab[aria-selected="true"] { color: var(--white); border-bottom-color: var(--white); }
  .lab__tab b { font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--white); }
  .lab__tab b:empty { display: none; }
  .lab__shelf { display: none; border: 0; padding: 0; }
  .lab__shelf.is-shown { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .lab__shelf-head { display: none; }
  .lab__vials { flex: 1; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(56px, 1fr)); gap: 4px; }
  .lab-vial { display: flex; flex-direction: column; min-height: 0; }
  .lab-vial__pick { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 2px; }
  .lab-vial__img { flex: 1 1 0; min-height: 0; width: 100%; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; }
  /* у фото нот прозрачные поля: в маленькой ячейке предмет увеличен, чтобы перец и можжевельник не терялись */
  .lab-vial__img img { width: auto; height: 100%; max-height: 56px; max-width: 100%; aspect-ratio: 1; scale: 1.28; }
  .lab-vial__name { flex: none; font-size: .8125rem; line-height: 1.15; letter-spacing: -.01em; position: relative; overflow-wrap: normal; }
  .lab-vial__pick { padding-inline: 0; }
  .lab-vial__d { display: none; }
  .lab-vial__pick:hover .lab-vial__img img { transform: none; }
  /* выбранная нота: картинка и подпись на месте; капли — числом в углу, «−» — кружок слева, нажатие на ноту — ещё капля */
  .lab-vial__ctl { position: absolute; inset: 0 0 auto; z-index: 1; height: 0; display: block; background: none; border: 0; }
  .lab-vial__b[data-lab-inc] { display: none; }
  .lab-vial__b[data-lab-dec] {
    position: absolute; left: 3px; top: 3px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0 0 2px;
    border-radius: 50%; background: rgba(250, 248, 244, .16); font-size: 1.125rem;
  }
  .lab-vial__n { position: absolute; right: 4px; top: 6px; min-width: 24px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 12px; background: var(--white); color: var(--ink); }
  .lab-vial__n b { font: 500 .8125rem/1 var(--f-text); }
  /* «Готово» и дни настаивания — только пока колба занята: потом на этом месте снова показатели */
  .lab:not(.is-brewing) .lab__status { display: none; }
  .lab__bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(18, 17, 15, .94); border-top: 1px solid var(--line-inv); color: var(--white);
    transform: translateY(105%); transition: transform .5s var(--ease);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .lab__bar.is-on { transform: none; }
  .lab__bar-clr { flex: none; color: var(--mute-inv); font-size: .6875rem; letter-spacing: .16em; }
  .lab__bar-t { flex: 1 1 auto; font-size: .8125rem; line-height: 1.35; color: var(--mute-inv); min-width: 0; }
  .lab__bar-t b { display: block; font-weight: 500; letter-spacing: .06em; color: var(--white); }
  .lab__bar .btn { flex: none; }
  .lab.is-brewing .lab__bar { transform: translateY(105%); }
  .pg--lab .pg__foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- Отчёт на телефоне — короче: флакон меньше, показатели в два столбца, похожие и смеси — строками ---------- */
  .pg--lab .lab-res ~ * , .pg--lab .lab-res { scroll-margin-top: calc(var(--hdr-h) + 12px); }
  .lab-res { margin-top: 40px; padding: 46px 0 56px; }
  .lab-res__head { gap: 12px; margin-bottom: 26px; }
  .lab-res__name { font-size: 2.1rem; padding-bottom: 10px; }
  .lab-res__top { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lab-res__bottle { width: 52%; max-width: 230px; margin: 0 auto; }
  .lab-res__big { margin-top: 6px; }
  .lab-res__big span { font-size: 5.6rem; }
  .lab-res__claim { font-size: 1rem; margin-bottom: 22px; }
  .lab-res__rows { grid-template-columns: 1fr 1fr; gap: 16px 18px; }
  .lab-res__rows .lab-m__v { font-size: 1.25rem; }
  .lab-res__fl { grid-column: 1; }
  .lab-fl { gap: 14px; margin-top: 20px; }
  .lab-fl ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .lab-fl li { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; font-size: .875rem; }
  .lab-fl li img { width: 30px; height: 30px; }
  .lab-res__says, .lab-res__sh { grid-template-columns: minmax(0, 1fr); }
  .lab-res__says { margin-top: 48px; gap: 16px; }
  .lab-res__says .lab-tips { grid-column: 1; }
  .lab-res__facts { font-size: 1rem; gap: 12px; }
  .lab-res__h { font-size: 1.9rem; }
  .lab-res__sec { margin-top: 56px; padding-top: 20px; }
  .lab-res__sh { margin-bottom: 20px; gap: 10px; }
  .lab-res__sh p { font-size: .9375rem; }
  /* похожие ароматы — строками: фото слева, совпадение, название и цена справа */
  .lab-res__matches { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
  .lab-match { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 3px; align-content: center; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
  .lab-match__ph { grid-row: 1 / span 6; align-self: start; margin: 0; max-width: none; }
  .lab-match__pct span { font-size: 2.1rem; }
  .lab-match__pct small { margin-left: 6px; letter-spacing: .16em; }
  .lab-match__brand { margin-top: 2px; }
  .lab-match__name { font-size: 1.15rem; }
  .lab-match__price { margin: 2px 0; }
  .lab-res__cmp { margin-top: 20px; }
  /* смеси: флаконы небольшие, пропорция и совпадение — рядом */
  .lab-res__blends { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lab-blend { gap: 8px; }
  .lab-blend__row { justify-content: flex-start; }
  .lab-blend__ph { flex: 0 0 96px; }
  .lab-blend__plus { font-size: 1.8rem; }
  .lab-blend__meta { margin-top: 4px; }
  .lab-blend__ratio, .lab-blend__pct span { font-size: 2rem; }
  .lab-blend__how { font-size: .875rem; }
  .lab-blend__buy { padding-top: 14px; margin-top: 4px; }
  .lab-res__acts { margin-top: 44px; padding-top: 22px; }
  .lab-res__how { margin-top: 24px; }
}
/* ниже 361px — подписи советов без картинок */
@media (max-width: 360px) {
  .lab__bench { column-gap: 14px; }
  .lab-tip img { display: none; }
  .lab-tip { padding-left: 8px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "x g"; }
}
/* невысокий телефон стоя (панели браузера, маленький экран): колба ниже, без строки пирамиды и подписи над советами —
   иначе нижний ряд нот уходит под строку «Смешать» */
@media (max-width: 860px) and (orientation: portrait) and (max-height: 640px) {
  .lab__bench { --lab-top: clamp(100px, 19svh, 140px); grid-template-rows: var(--lab-top) auto minmax(250px, 1fr); }
  .lab__side .lab-pyr { display: none; }
  .lab__side .lab-meters { gap: 8px 14px; }
  .lab-tips .caps { display: none; }
  .lab__panel { min-height: 44px; }
  .lab__vials { grid-template-rows: repeat(4, minmax(48px, 1fr)); }
  .lab-vial__pick { padding-block: 3px; }
}
/* телефон лёжа: колба слева во всю высоту, рядом показатели и советы, справа — вкладки и сетка нот 8 × 2 */
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 540px) {
  .lab__bench {
    --lab-top: calc(100svh - var(--hdr-h) - 84px);
    grid-template-columns: auto minmax(210px, 3fr) minmax(0, 6fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "flask side organ" "flask panel organ"; gap: 10px 22px; align-items: start;
    min-height: 0; height: calc(100svh - var(--hdr-h) - 84px);
  }
  .lab__vials { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  /* ячейки лёжа узкие: длинное слово («Можжевельник») переносится по слогам, а не налезает на соседа */
  .lab-vial__name { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .lab__side .lab-pyr { display: none; }
  .lab-tips .caps { display: none; }
  .lab__organ { height: 100%; }
  .lab__side { align-self: start; }
  .lab-tips__row { flex-wrap: wrap; }
  .lab-tip { flex: 0 1 auto; }
  .lab__panel { min-height: 0; }
}
@media (max-width: 860px) {
  .labt__facts { gap: 10px 22px; }
  .labt__facts li, .labt__facts li:first-child { padding: 0; border-left: 0; }
  .labt__seeds { flex-wrap: wrap; row-gap: 6px; }
  .labt__seed { flex: 0 0 calc(25% - 2px); max-width: none; }
}
@media (max-width: 420px) {
  .lab-meters { gap: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-vial__img img, .labt__seed img, .lab-m__track span { transition: none; }
}
@media print { .labt { display: none; } }
