/* LFO uplift-v4.css (20.10.2026) — пара к uplift-v3.v4.js. Палитра ч/б через переменные темы
   (--ink, --paper, --surface, --line, --muted), обе темы. Откат = убрать <link> из HTML. */

/* ---------- Галерея статьи блога ---------- */
.lfo-gal{margin:40px 0 8px}
.lfo-gal-h{margin:0 0 14px;font-size:var(--text-lg,20px);font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.lfo-gal-grid{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:701px){.lfo-gal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
.lfo-gal-grid li{margin:0;padding:0}
.lfo-gal-grid li::before{content:none}
.lfo-gal-item{display:block;width:100%;aspect-ratio:1/1;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--radius,12px);
  background:var(--surface);overflow:hidden;cursor:zoom-in;min-height:0}
.lfo-gal-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
@media (hover:hover){.lfo-gal-item:hover img{transform:scale(1.03)}}
.lfo-gal-item:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lfo-gal-item img{transition:none}}

/* Просмотр крупно — тёмный в обеих темах, как у фотогалерей. */
.lfo-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(12,12,12,.96);color:#f4f4f4;overflow:hidden}
.lfo-lb[open]{display:flex;align-items:center;justify-content:center}
.lfo-lb::backdrop{background:rgba(0,0,0,.5)}
.lfo-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.lfo-lb-img{display:block;max-width:none;object-fit:contain;border-radius:8px;background:#1b1b1b}
.lfo-lb-cap{font-size:13px;line-height:1;color:#bdbdbd;font-variant-numeric:tabular-nums}
.lfo-lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(17,17,17,.6);color:#fff;cursor:pointer;transition:background .2s,color .2s}
.lfo-lb-btn[hidden]{display:none}
.lfo-lb-btn:hover{background:#fff;color:#111}
.lfo-lb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lfo-lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lfo-lb-next{right:20px;top:50%;transform:translateY(-50%)}
.lfo-lb-close{right:16px;top:16px}
@media (max-width:700px){
  .lfo-lb-prev,.lfo-lb-next{top:auto;bottom:22px;transform:none}
  .lfo-lb-prev{left:calc(50% - 60px)}
  .lfo-lb-next{right:calc(50% - 60px)}
  .lfo-lb-close{right:12px;top:12px}
}
html.lfo-lb-open{overflow:hidden}

/* ---------- Подборки главной: спрятанная распроданная карточка (рядом — замена в наличии) ---------- */
.product-card[data-lfo-hide]{display:none!important}

/* ---------- Мелкие починки ---------- */
/* Визуально скрытый, но читаемый экранным диктором заголовок (h1 на пустом оформлении заказа). */
.lfo-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Товар без описания: заглушка вместо пустоты; пустой подзаголовок не занимает места. */
.lfo-desc-stub{margin:14px 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius,12px);background:var(--surface);
  color:var(--ink);font-size:14px;line-height:1.5}
.lfo-desc-stub p{margin:0;color:var(--muted)}
.lfo-desc-stub .text-link{margin-top:6px;min-height:32px;font-size:14px;color:var(--ink)}
.pdp .buy-box .pdp-subtitle:empty{display:none}

/* Пол 12px: плашки «Нет в наличии», скидка, источник отзыва, качество видео (были 10–11px). */
.stock-badge,.price .discount-badge,#lfo-reviews .lfo-rv-src,.photo-slide .lfo-vp-badge{font-size:12px}

/* ---------- Сдвиг вёрстки ---------- */
/* Полоса «Загружаем сохранённое рабочее пространство…» на 1–3 с вставала между шапкой и страницей и
   при исчезновении дёргала всю страницу на 49px. Простое сообщение о загрузке — только для экранного
   диктора (role=status остаётся); ошибки и полосы с кнопками видны как раньше. */
.workspace-status:not(.has-error):not(:has(button,a)){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Карточка товара, телефон: пока видео первого слайда не отдало размеры — держим высоту вертикального
   ролика (ту же, что ставит lfo-hls-upgrade классом lfo-portrait-on). */
@media (max-width:760px){
  .pdp .gallery-stage[data-lfo-wait]{width:100%!important}
  .pdp .gallery-stage[data-lfo-wait] .photo-rail{aspect-ratio:auto!important;height:min(calc((100vw - 40px) * 16 / 9),calc(100svh - 150px));transition:none}
}
/* Хлебная крошка товара — в одну строку: длинное имя из данных сменяется коротким без скачка высоты. */
.pdp .breadcrumb{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.pdp .breadcrumb>*{flex-shrink:0}
.pdp .breadcrumb>span:last-child{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Пока данные едут с сервера, страница-заготовка короче настоящей: подвал виден и потом уезжает вниз.
   Держим высоту основной части не меньше экрана — сдвиг уходит за край экрана. */
#root:has(>.workspace-status:not(.has-error)) > main{min-height:100vh}
/* Липкая кнопка на телефоне: цена со старой ценой и скидкой — в одну строку, высота плашки не скачет. */
.sticky-buy>div>span{white-space:nowrap;overflow:hidden}
.sticky-buy .price{flex-wrap:nowrap}
@media (max-width:420px){.sticky-buy .discount-badge{display:none}}