/* Claude v3.2 (E3): загрузка 3D-вида в калькуляторе гида — постер, полоса с процентом, кнопка при экономии трафика, сообщение.
   Разметка — parts/fit-tools.php, логика — assets/fit-tools.js (состояние в data-fit3d-state: idle | loading | live | wait | failed),
   сам модуль — assets/fit3d. Лист подключается после guide-v3.css (inc/front-v32.php, приоритет 1001) и перекрывает его без !important. */

/* Слот сцены занят постером с первой отрисовки: пустого места и мерцания нет. Прежнее «мерцание ожидания» (:empty) не нужно. */
.hg-store .jp-editorial .hg-fit-3d__stage{isolation:isolate}
.hg-store .jp-editorial .hg-fit-3d__poster{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--hg-soft)}
.hg-store .jp-editorial .hg-fit-3d__poster[hidden]{display:none}
.hg-store .jp-editorial .hg-fit-3d__poster img{display:none;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 56%}

/* Одна картинка из восьми: вкладка (data-fit-mode) × тема сайта × форма. Форма — по ширине контейнера, как у самого холста:
   узкая 1:1, от 600 px — широкая 16:10. Остальные ленивые картинки скрыты (display:none) и не скачиваются. */
.hg-store .jp-editorial .hg-fit-3d__poster img:is(
  html:not([data-theme=dark]) .hg-fit-3d[data-fit-mode=et] [data-pm=et][data-pt=light],
  html:not([data-theme=dark]) .hg-fit-3d[data-fit-mode=speed] [data-pm=speed][data-pt=light],
  html[data-theme=dark] .hg-fit-3d[data-fit-mode=et] [data-pm=et][data-pt=dark],
  html[data-theme=dark] .hg-fit-3d[data-fit-mode=speed] [data-pm=speed][data-pt=dark]
)[data-ps=narrow]{display:block}
@container hg-fit (min-width:600px){
  .hg-store .jp-editorial .hg-fit-3d__poster img:is(
    html:not([data-theme=dark]) .hg-fit-3d[data-fit-mode=et] [data-pm=et][data-pt=light],
    html:not([data-theme=dark]) .hg-fit-3d[data-fit-mode=speed] [data-pm=speed][data-pt=light],
    html[data-theme=dark] .hg-fit-3d[data-fit-mode=et] [data-pm=et][data-pt=dark],
    html[data-theme=dark] .hg-fit-3d[data-fit-mode=speed] [data-pm=speed][data-pt=dark]
  )[data-ps=narrow]{display:none}
  .hg-store .jp-editorial .hg-fit-3d__poster img:is(
    html:not([data-theme=dark]) .hg-fit-3d[data-fit-mode=et] [data-pm=et][data-pt=light],
    html:not([data-theme=dark]) .hg-fit-3d[data-fit-mode=speed] [data-pm=speed][data-pt=light],
    html[data-theme=dark] .hg-fit-3d[data-fit-mode=et] [data-pm=et][data-pt=dark],
    html[data-theme=dark] .hg-fit-3d[data-fit-mode=speed] [data-pm=speed][data-pt=dark]
  )[data-ps=wide]{display:block}
}

/* Полоса загрузки: тонкая линия по нижнему краю и процент чипом; только пока идёт загрузка. Для чтецов это скрыто (aria-hidden):
   они слышат «началась» и «готово» из отдельной области aria-live. */
.hg-store .jp-editorial .hg-fit-3d__load{position:absolute;inset:auto 0 0;z-index:3;display:none;height:46px;pointer-events:none}
.hg-store .jp-editorial .hg-fit-3d[data-fit3d-state=loading] .hg-fit-3d__load{display:block}
.hg-store .jp-editorial .hg-fit-3d__pct{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:5px 12px;border-radius:999px;background:var(--hg-white);background:color-mix(in srgb,var(--hg-white) 90%,transparent);box-shadow:0 0 0 1px var(--hg-line);color:var(--hg-ink);font-size:12px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hg-store .jp-editorial .hg-fit-3d__track{position:absolute;inset:auto 0 0;height:3px;background:var(--hg-line);background:color-mix(in srgb,var(--hg-ink) 14%,transparent)}
.hg-store .jp-editorial .hg-fit-3d__fill{display:block;height:100%;background:var(--hg-red);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s ease-out}

/* Экономия трафика / медленная сеть: постер, кнопка и пояснение по центру нижней части сцены */
.hg-store .jp-editorial .hg-fit-3d__wait{position:absolute;inset:auto 0 0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 14px 14px}
.hg-store .jp-editorial .hg-fit-3d__wait[hidden]{display:none}
.hg-store .jp-editorial .hg-fit-3d__start{min-height:48px;margin:0;padding:10px 26px;gap:0;box-shadow:0 6px 18px #17171726}
.hg-store .jp-editorial .hg-fit-3d__saver{margin:0;max-width:min(100%,420px);padding:4px 12px;border-radius:14px;background:var(--hg-white);background:color-mix(in srgb,var(--hg-white) 90%,transparent);box-shadow:0 0 0 1px var(--hg-line);color:var(--hg-ink);font-size:12px;line-height:1.5;text-align:center}

/* Подсказка про вращение имеет смысл, только когда сцена ожила; место под неё занято, строка не двигается */
.hg-store .jp-editorial .hg-fit-3d:not([data-fit3d-state=live]) .hg-fit-3d__hint{visibility:hidden}

/* Отказ: нет WebGL2, ошибка сети или файла, потеря контекста — вместо сцены короткое сообщение, SVG-схемы вернулись (has-3d снят) */
.hg-store .jp-editorial .hg-fit-3d__fail{margin:0;padding:10px 14px;border-radius:10px;background:var(--hg-soft);color:var(--hg-muted);font-size:13px;line-height:1.6}
.hg-store .jp-editorial .hg-fit-3d__fail[hidden]{display:none}
.hg-store .jp-editorial .hg-fit-3d[data-fit3d-state=failed] :is(.hg-fit-3d__stage,.hg-fit-3d__bar){display:none}

/* Сноска и атрибуция модели (CC BY 4.0) видны, пока на странице есть сцена или её постер */
.hg-store .jp-editorial .hg-fit .hg-fit-3d__credit{margin-top:2px;font-size:12px;line-height:1.6;color:var(--hg-muted)}
.hg-store .jp-editorial .hg-fit .hg-fit-3d__credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hg-store .jp-editorial .hg-fit .hg-fit-3d__credit a:hover{color:var(--hg-ink)}
.hg-store .jp-editorial .hg-fit:not(:is(.has-3d,.is-3d-wait)) :is(.hg-fit-3d__note,.hg-fit-3d__credit){display:none}
.hg-store .jp-editorial .hg-fit.is-3d-wait :is(.hg-fit-3d__note,.hg-fit-3d__credit){display:block}

@media (prefers-reduced-motion:reduce){.hg-store .jp-editorial .hg-fit-3d__fill{transition:none}}

/* ================= Claude v3.3 (E3): бегунки размера шины, «Сейчас / После замены / Сравнить», рентген, разные колёса спереди и сзади ================= */

/* Блок сцены: сетка — холст на всю ширину, под ним переключатель «что показать» (на широком — подсказка справа), полоса видов и рентгена.
   Все кнопки не ниже 44 px. */
.hg-store .jp-editorial .hg-fit-3d{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 16px;align-content:start}
.hg-store .jp-editorial .hg-fit-3d>*{min-width:0;margin-block:0}
.hg-store .jp-editorial .hg-fit-3d__bar{margin-top:0}
.hg-store .jp-editorial .hg-fit-3d[data-fit3d-state=failed] :is(.hg-fit-3d__mode,.hg-fit-3d__modehint){display:none}

/* Переключатель «что показать»: три крупные кнопки-радио; метки-образцы те же, что у заголовков групп «Сейчас» (серый) и «После замены» (красная рамка) */
.hg-store .jp-editorial .hg-fit-3d__mode{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--hg-soft)}
.hg-store .jp-editorial .hg-fit-3d__mode button{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;margin:0;padding:6px 12px;border:0;border-radius:9px;background:transparent;color:var(--hg-muted);font-size:14px;font-weight:700;line-height:1.25;text-align:center;text-wrap:balance;word-break:auto-phrase;cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.hg-store .jp-editorial .hg-fit-3d__mode button:is(:hover,:focus,:active){background:transparent;color:var(--hg-ink)}
.hg-store .jp-editorial .hg-fit-3d__mode button[aria-checked=true]{background:var(--hg-white);color:var(--hg-ink);box-shadow:0 0 0 1px var(--hg-line),0 2px 6px #0000000f}
.hg-store .jp-editorial .hg-fit-sw{flex:none;display:block;width:20px;height:12px;border-radius:3px;box-sizing:border-box}
.hg-store .jp-editorial .hg-fit-sw--now{background:color-mix(in srgb,var(--hg-muted) 38%,transparent)}
.hg-store .jp-editorial .hg-fit-sw--after{background:color-mix(in srgb,var(--hg-red) 14%,transparent);box-shadow:inset 0 0 0 2px var(--hg-red)}
.hg-store .jp-editorial .hg-fit-sw--compare{background:linear-gradient(90deg,color-mix(in srgb,var(--hg-muted) 38%,transparent) 50%,transparent 50%);box-shadow:inset 0 0 0 2px var(--hg-red)}
.hg-store .jp-editorial .hg-fit .hg-fit-3d__modehint{font-size:13px;line-height:1.5;color:var(--hg-muted)}

/* Кнопка рентгена: нажатое состояние — тёмная заливка (видно и без цвета) */
.hg-store .jp-editorial .hg-fit-3d__xray{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:6px 16px 6px 12px;border:1px solid var(--hg-line);border-radius:999px;background:var(--hg-white);color:var(--hg-muted);font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.hg-store .jp-editorial .hg-fit-3d__xray svg{flex:none;display:block}
.hg-store .jp-editorial .hg-fit-3d__xray:is(:hover,:focus,:active){background:var(--hg-white);color:var(--hg-ink);border-color:var(--hg-ink)}
.hg-store .jp-editorial .hg-fit-3d__xray[aria-pressed=true]{background:var(--hg-ink);border-color:var(--hg-ink);color:var(--hg-white)}
.hg-store .jp-editorial .hg-fit-3d__xray[aria-pressed=true]:is(:hover,:focus,:active){background:var(--hg-ink);border-color:var(--hg-ink);color:var(--hg-white)}

@container hg-fit (min-width:600px){
  .hg-store .jp-editorial .hg-fit-3d{grid-template-columns:auto minmax(0,1fr);align-items:center}
  .hg-store .jp-editorial .hg-fit-3d :is(.hg-fit-3d__stage,.hg-fit-3d__fail,.hg-fit-3d__bar){grid-column:1/-1}
  .hg-store .jp-editorial .hg-fit-3d__mode{width:max-content}
  .hg-store .jp-editorial .hg-fit-3d__mode button{flex:0 0 auto;padding:6px 22px}
}
/* узкий контейнер: полоса видов и рентген в одну строку, рентген — значком (имя остаётся для чтецов) */
@container hg-fit (max-width:599px){
  .hg-store .jp-editorial .hg-fit-3d__bar{flex-wrap:nowrap;gap:8px}
  .hg-store .jp-editorial .hg-fit-3d__views{flex:1 1 auto;width:auto;min-width:0}
  .hg-store .jp-editorial .hg-fit-3d__views button{flex:1 1 0;min-width:0;padding:6px 6px}
  .hg-store .jp-editorial .hg-fit-3d__xray{flex:none;width:44px;padding:0}
  .hg-store .jp-editorial .hg-fit-3d__xray span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* «Разные спереди и сзади»: переключатель (role=switch) и блоки осей */
.hg-store .jp-editorial .hg-fit-split{margin:0 0 14px}
.hg-store .jp-editorial .hg-fit-split__btn{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:0;padding:8px 12px;border:1px solid var(--hg-line);border-radius:12px;background:var(--hg-white);color:var(--hg-ink);text-align:left;cursor:pointer;transition:border-color .2s ease}
.hg-store .jp-editorial .hg-fit-split__btn:is(:hover,:focus,:active){background:var(--hg-white);color:var(--hg-ink);border-color:var(--hg-ink)}
.hg-store .jp-editorial .hg-fit-split__knob{position:relative;flex:none;width:44px;height:26px;border-radius:13px;background:color-mix(in srgb,var(--hg-muted) 45%,transparent);transition:background-color .2s ease}
.hg-store .jp-editorial .hg-fit-split__knob::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--hg-white);box-shadow:0 1px 3px #0000003d;transition:transform .2s ease}
.hg-store .jp-editorial .hg-fit-split__btn[aria-checked=true] .hg-fit-split__knob{background:var(--hg-red)}
.hg-store .jp-editorial .hg-fit-split__btn[aria-checked=true] .hg-fit-split__knob::after{transform:translateX(18px)}
.hg-store .jp-editorial .hg-fit-split__text{display:grid;gap:1px;min-width:0}
.hg-store .jp-editorial .hg-fit-split__text b{font-size:14px;font-weight:700;line-height:1.35}
.hg-store .jp-editorial .hg-fit-split__text small{font-size:12px;line-height:1.45;color:var(--hg-muted)}
.hg-store .jp-editorial .hg-fit .hg-fit-axle__title{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;font-weight:700;line-height:1.4;color:var(--hg-ink)}
.hg-store .jp-editorial .hg-fit-axle__dot{flex:none;width:10px;height:10px;border-radius:50%;box-sizing:border-box;border:2px solid var(--hg-ink)}
.hg-store .jp-editorial .hg-fit-axle__dot--front{background:var(--hg-ink)}
.hg-store .jp-editorial .hg-fit.is-split :is(.hg-fit-axle,.hg-fit-axres){padding:10px 12px 2px;border:1px solid var(--hg-line);border-radius:12px}
.hg-store .jp-editorial .hg-fit.is-split .hg-fit-axle{margin-bottom:12px}
.hg-store .jp-editorial .hg-fit.is-split .hg-fit-axres{padding-bottom:12px}
.hg-store .jp-editorial .hg-fit-axle-more+.hg-fit-axle-more{margin-top:6px}
.hg-store .jp-editorial .hg-fit-axres-list{display:grid;gap:12px;min-width:0}
.hg-store .jp-editorial .hg-fit-axres{display:grid;gap:10px;min-width:0}
.hg-store .jp-editorial .hg-fit-table__ax,.hg-store .jp-editorial .hg-fit-gauge__ax{font-weight:700;color:var(--hg-ink)}
.hg-store .jp-editorial .hg-fit.is-split .hg-fit-table th[scope=row]{white-space:normal}
.hg-store .jp-editorial .hg-fit .hg-fit-awd{padding:10px 14px;border-left:3px solid var(--hg-line);border-radius:4px 10px 10px 4px;background:var(--hg-soft)}

/* Размер шины бегунками: сводка строкой «205/55 R16 → 345/45 R17» и список быстрого выбора */
.hg-store .jp-editorial .hg-fit-sum{display:grid;gap:6px;margin:0 0 14px}
.hg-store .jp-editorial .hg-fit .hg-fit-sum p{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:10px 14px;border-radius:10px;background:var(--hg-soft);font-size:17px;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums}
.hg-store .jp-editorial .hg-fit .hg-fit-sum p:empty{min-height:3.1em}
.hg-store .jp-editorial .hg-fit-sum__ax{flex-basis:100%;font-size:12px;font-weight:700;line-height:1.4;color:var(--hg-muted)}
.hg-store .jp-editorial .hg-fit-sum__from{color:var(--hg-muted);font-weight:600}
.hg-store .jp-editorial .hg-fit-sum__arrow{color:var(--hg-muted);font-weight:600}
.hg-store .jp-editorial .hg-fit-sum__to{font-weight:800}
.hg-store .jp-editorial .hg-fit .hg-fit-pick__label{margin:8px 0 0;font-size:12px;font-weight:700;line-height:1.5;color:var(--hg-muted)}

@media (prefers-reduced-motion:reduce){
  .hg-store .jp-editorial .hg-fit-3d__mode button,.hg-store .jp-editorial .hg-fit-3d__xray,.hg-store .jp-editorial .hg-fit-split__btn,.hg-store .jp-editorial .hg-fit-split__knob,.hg-store .jp-editorial .hg-fit-split__knob::after{transition:none}
}

/* Телефон: липкий блок сцены (guide-v3.css) не выше половины экрана — холст 5:4, подсказка состояния скрыта (состояние видно в самой
   сцене и в переключателе; чтецу оно озвучивается), переключатель и полоса видов — по одной строке по 44 px. */
@media (max-width:680px){
  .hg-store .jp-editorial .hg-fit.has-3d .hg-fit-3d{gap:6px;padding-block:6px}
  .hg-store .jp-editorial .hg-fit.has-3d .hg-fit-3d__stage{aspect-ratio:5/4;max-height:none}
  .hg-store .jp-editorial .hg-fit.has-3d .hg-fit-3d__modehint{display:none}
  .hg-store .jp-editorial .hg-fit-3d__mode button{gap:7px;padding:4px 6px;font-size:13px}
  .hg-store .jp-editorial .hg-fit-3d__bar{margin-top:0}
}

/* ================= Claude v3.4 (E3): две машины по теме сайта — днём R34, ночью R35 в светло-сером гараже ================= */

/* Ночной постер — светло-серый гараж с чёрной машиной: пока картинка не пришла, подложка того же тона (тёмная подложка страницы мигала бы) */
html[data-theme=dark] .hg-store .jp-editorial .hg-fit-3d__poster{background:#cdd0d3}

/* Атрибуция по машине на экране: обе строки (R34 днём, R35 ночью) лежат в одной ячейке сетки — блок всегда высотой с большую из них,
   при смене машины вёрстка не сдвигается; невидимая строка не читается и не получает фокус (visibility). Какую показать — data-shown,
   его ставит assets/fit-tools.js, когда на экране появляется другая машина. */
.hg-store .jp-editorial .hg-fit-3d__credit-stack{display:grid}
.hg-store .jp-editorial .hg-fit-3d__credit-stack>span{grid-area:1/1}
.hg-store .jp-editorial .hg-fit-3d__credit:not([data-shown=dark]) [data-credit=dark],
.hg-store .jp-editorial .hg-fit-3d__credit[data-shown=dark] [data-credit=light]{visibility:hidden}

/* ================= Claude v3.6 (E3): свободное вращение, «Увеличить» и окно калькулятора крупнее ================= */

/* Значение бегунка (output) пусто, пока fit-tools.js не посчитал. Строка выровнена по базовой линии (align-items:baseline), а у пустого блока
   базовой линии нет: подпись садится на его нижний край, и при запуске каждая строка бегунка сжимается на 3.8 px (четыре бегунка — 15 px, блок
   вместе с текстом под ним уезжает вверх). Невидимый нулевой символ даёт пустому значению строку и настоящую базовую линию: высота та же, что с числом. */
.hg-store .jp-editorial .hg-fit-range__head output:empty::before{content:"\200b"}

/* Переключатель «Свободное вращение» (role=switch) и кнопка «Увеличить» — таблетки того же вида, что рентген; свободное вращение включено —
   тёмная заливка (видно и без цвета). Оба места заняты с первой отрисовки: «Увеличить» до готовности сцены невидимо (visibility), но не убрано;
   без 3D (нет WebGL2, ошибка, экономия трафика до нажатия) обеих кнопок нет. */
.hg-store .jp-editorial .hg-fit-3d :is(.hg-fit-3d__free,.hg-fit-3d__zoom){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:6px 16px 6px 12px;border:1px solid var(--hg-line);border-radius:999px;background:var(--hg-white);color:var(--hg-muted);font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.hg-store .jp-editorial .hg-fit-3d :is(.hg-fit-3d__free,.hg-fit-3d__zoom) svg{flex:none;display:block}
.hg-store .jp-editorial .hg-fit-3d :is(.hg-fit-3d__free,.hg-fit-3d__zoom):is(:hover,:focus,:active){background:var(--hg-white);color:var(--hg-ink);border-color:var(--hg-ink)}
.hg-store .jp-editorial .hg-fit-3d__free[aria-checked=true],
.hg-store .jp-editorial .hg-fit-3d__free[aria-checked=true]:is(:hover,:focus,:active){background:var(--hg-ink);border-color:var(--hg-ink);color:var(--hg-white)}
/* режим «Контрастная тема» Windows (forced-colors) заменяет заливку на системные цвета: включённое состояние переключателя показываем цветом выделения */
@media (forced-colors:active){
  .hg-store .jp-editorial .hg-fit-3d__free[aria-checked=true],
  .hg-store .jp-editorial .hg-fit-3d__free[aria-checked=true]:is(:hover,:focus,:active){background:Highlight;border-color:Highlight;color:HighlightText}
}
.hg-store .jp-editorial .hg-fit:not(.has-3d) :is(.hg-fit-3d__free,.hg-fit-3d__zoom){display:none}
.hg-store .jp-editorial .hg-fit-3d:not([data-fit3d-state=live]) .hg-fit-3d__zoom{visibility:hidden}
/* подсказка занимает остаток строки (и переносится сама: две ровные строки, японский — по смысловым отрезкам, без висящего «す。»), рентген и «Увеличить» прижаты вправо */
.hg-store .jp-editorial .hg-fit .hg-fit-3d__hint{flex:1 1 150px;min-width:0;text-wrap:balance;word-break:auto-phrase}
.hg-store .jp-editorial .hg-fit-3d__xray{margin-left:auto}
/* сцена — остановка Tab, пока вращение свободное (стрелки поворачивают): видимый фокус внутри скруглённой рамки */
.hg-store .jp-editorial .hg-fit-3d__stage:focus{outline:none}
.hg-store .jp-editorial .hg-fit-3d__stage:focus-visible{outline:3px solid var(--hg-red);outline-offset:-3px}

/* узкий контейнер (телефон): переключатель, рентген и «Увеличить» — круглые значки по 40 px (зона нажатия 44 px — ::after) в той же строке, что
   виды: новой строки нет, липкий блок сцены не растёт. Виды ужимаются: 12 px и узкие поля, чтобы «フロント» / «Спереди» / «Overview» не рвались
   на 320 px. Имя переключателя и рентгена остаётся для чтецов (текст скрыт клипом), у «Увеличить» оно в aria-label. Меньше 320 px (телефоны 360 px
   на странице) переключателю места нет: свободное вращение остаётся включённым, выключить его можно в окне «Увеличить», где строка шире. */
@container hg-fit (max-width:599px){
  .hg-store .jp-editorial .hg-fit-3d__bar{gap:6px}
  .hg-store .jp-editorial .hg-fit-3d__views{padding:2px;gap:1px}
  .hg-store .jp-editorial .hg-fit-3d__views button{padding:6px 2px;font-size:12px}
  .hg-store .jp-editorial .hg-fit-3d :is(.hg-fit-3d__free,.hg-fit-3d__zoom,.hg-fit-3d__xray){position:relative;flex:none;width:40px;height:40px;min-height:40px;margin-left:0;padding:0}
  .hg-store .jp-editorial .hg-fit-3d :is(.hg-fit-3d__free,.hg-fit-3d__zoom,.hg-fit-3d__xray)::after{content:"";position:absolute;inset:-2px}
  .hg-store .jp-editorial .hg-fit-3d :is(.hg-fit-3d__free,.hg-fit-3d__zoom) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@container hg-fit (max-width:319px){
  .hg-store .jp-editorial .hg-fit-3d .hg-fit-3d__free{display:none}
}

/* Окно «Увеличить». Обычно <dialog> лежит в потоке страницы без рамки и отступов (как div). С showModal() весь калькулятор встаёт в слой top layer:
   на телефоне и узком экране — на весь экран, на широком — крупным окном: сцена слева (липкая), вкладка с бегунками и цифрами справа. Контейнер
   для container query в окне — само окно (справа — колонка бегунков), поэтому раскладки внутри считаются по размеру окна, а не страницы. */
.hg-store .jp-editorial .hg-fit-shell{display:block;position:static;inset:auto;box-sizing:border-box;width:auto;max-width:none;height:auto;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;overflow:visible}
.hg-store .jp-editorial .hg-fit-shell:not([open]) .hg-fit-shell__bar{display:none}
html.hg-fit-open{overflow:hidden;scrollbar-gutter:stable}
.hg-fit-shell::backdrop{background:rgb(8 10 14 / .62)}
.hg-store .jp-editorial .hg-fit-shell[open]{position:fixed;inset:0;width:100%;height:100%;padding:0 14px 24px;overflow:auto;overscroll-behavior:contain;background:var(--hg-white);color:var(--hg-ink);container:hg-fit/inline-size}
.hg-store .jp-editorial .hg-fit-shell__bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -14px 4px;padding:10px 14px;background:var(--hg-white);border-bottom:1px solid var(--hg-line)}
.hg-store .jp-editorial .hg-fit .hg-fit-shell__title{margin:0;font-size:17px;font-weight:700;line-height:1.35;text-wrap:balance;word-break:auto-phrase}
.hg-store .jp-editorial .hg-fit-shell__close{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:6px 18px 6px 14px;border:1px solid var(--hg-line);border-radius:999px;background:var(--hg-white);color:var(--hg-ink);font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;transition:border-color .2s ease}
.hg-store .jp-editorial .hg-fit-shell__close:is(:hover,:focus,:active){background:var(--hg-white);color:var(--hg-ink);border-color:var(--hg-ink)}
.hg-store .jp-editorial .hg-fit-shell__close svg{flex:none;display:block}
/* в окне кнопки «Увеличить» нет: закрывает «Закрыть» вверху и Esc */
.hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-3d__zoom{display:none}
/* телефон: липкий блок сцены держится под полосой окна (а не под шапкой сайта), отступы — по полям окна */
@media (max-width:680px){
  .hg-store .jp-editorial .hg-fit.has-3d .hg-fit-shell[open] .hg-fit-3d{top:65px;margin:0 -14px;padding:8px 14px}
}
/* планшет в портрете: окно в одну колонку, сцена липкая под полосой окна (на низком экране — как на странице, не липкая) */
@media (min-width:681px) and (max-width:999px) and (min-height:760px){
  .hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-3d{position:sticky;top:65px;z-index:4;margin:0 -14px;padding:8px 14px;background:var(--hg-white);box-shadow:0 12px 14px -14px rgb(0 0 0 / .35)}
}
/* широкое окно: две колонки — сцена крупная и липкая слева (почти вся высота окна), вкладки и бегунки справа; высота сцены следует за высотой окна */
@media (min-width:1000px){
  .hg-store .jp-editorial .hg-fit-shell[open]{inset:10px;width:auto;height:auto;padding:0 22px 22px;border-radius:18px;box-shadow:0 28px 90px rgb(0 0 0 / .5);display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,350px);column-gap:24px;grid-template-rows:auto auto auto auto auto 1fr;align-content:start;grid-template-areas:"bar bar" "stage tabs" "stage panel" "stage note" "stage credit" "stage foot"}
  .hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-shell__bar{grid-area:bar;margin:0 -22px;padding:8px 22px}
  .hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-tabs{grid-area:tabs;display:flex;margin-top:18px}
  .hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-tabs button{flex:1 1 0;padding:8px 10px;font-size:13px}
  .hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-3d{grid-area:stage;position:sticky;top:70px;align-self:start;margin-top:18px}
  .hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-3d__stage{aspect-ratio:auto;height:clamp(420px,calc(100vh - 250px),900px);height:clamp(420px,calc(100dvh - 250px),900px);max-height:none}
  .hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-stack{grid-area:panel;container:hg-fit/inline-size;min-width:0;margin-top:18px}
  .hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-3d__note{grid-area:note}
  .hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-3d__credit{grid-area:credit}
  .hg-store .jp-editorial .hg-fit-shell[open] .hg-fit-foot{grid-area:foot}
}