/* Claude B (14.10.2026): подбор по автомобилю в каталоге — блок автомобиля над выдачей, режим «штатный / с допусками», пометки карточек.
   Только токены темы (--hg-*), поэтому день и ночь — те же правила. Один responsive DOM: телефон перестраивает те же узлы. */

/* ── Блок автомобиля: панель смены (.hg-vbar) + база, режим, ось, реплика, справка ── */
.hg-store .hg-fit{margin:4px 0 20px;border:1px solid var(--hg-line);border-radius:14px;background:var(--hg-white);color:var(--hg-ink)}
.hg-store .hg-fit>.hg-vbar{margin:0;border:0;border-radius:14px 14px 0 0;background:transparent;box-shadow:none}
.hg-store .hg-fit>.hg-vbar>.hg-vbar__summary{min-height:76px;padding:14px 16px}
.hg-store .hg-fit .hg-vbar__icon{background:var(--hg-ink);color:var(--hg-paper)}
.hg-store .hg-fit__who{display:grid;gap:1px;min-width:0}
.hg-store .hg-fit__who .hg-fit__lbl{color:var(--hg-muted);font-size:12px;font-weight:700;line-height:1.4}
.hg-store .hg-fit__who .hg-fit__name{font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-.015em;overflow-wrap:anywhere}
.hg-store .hg-fit__who .hg-fit__meta{color:var(--hg-muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere}

.hg-store .hg-fit__body{display:grid;gap:14px;padding:18px 20px 0;border-top:1px solid var(--hg-line)}
.hg-store .hg-fit__form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px 32px;align-items:start;margin:0}
.hg-store .hg-fit__form fieldset{min-width:0;margin:0;padding:0;border:0}
.hg-store .hg-fit__base{grid-column:1;min-width:0}
.hg-store .hg-fit__mode{grid-column:2;grid-row:1/span 2}
.hg-store .hg-fit__axle{grid-column:1}
.hg-store .hg-fit__k{display:block;float:none;width:auto;margin:0 0 8px;padding:0;color:var(--hg-muted);font-size:12px;font-weight:700;line-height:1.4}
.hg-store .hg-fit input[type=radio]{position:absolute!important;width:1px!important;height:1px!important;margin:0;padding:0;opacity:0!important;pointer-events:none}

/* База: одна строка или радиокнопки вариантов источника */
.hg-store .hg-fit__refs{margin:0}
.hg-store .hg-fit__ref-list{display:flex;flex-wrap:wrap;gap:8px}
.hg-store .hg-fit__ref{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;margin:0;padding:7px 12px 7px 8px;border:1px solid var(--hg-line);border-radius:8px;background:var(--hg-white);color:var(--hg-ink);cursor:pointer;transition:border-color .2s var(--hg-ease),background-color .2s var(--hg-ease)}
.hg-store .hg-fit__ref.is-static{cursor:default}
.hg-store .hg-fit__ref strong{font-size:16px;font-weight:700;line-height:1.35;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hg-store label.hg-fit__ref:hover{border-color:var(--hg-ink)}
.hg-store .hg-fit__ref:has(input:checked){border-color:var(--hg-ink);box-shadow:inset 0 0 0 1px var(--hg-ink)}
.hg-store .hg-fit__ref:has(input:focus-visible){outline:3px solid var(--hg-red);outline-offset:3px}
.hg-store .hg-fit__kind{display:inline-flex;align-items:center;min-height:24px;padding:2px 7px;border-radius:4px;background:var(--hg-soft);color:var(--hg-ink);font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap}
.hg-store .hg-fit__kind--oe{background:var(--hg-ink);color:var(--hg-paper)}

/* Режим: две взаимоисключающие кнопки-карточки; выбранная — инверсия, как активная категория */
.hg-store .hg-fit__seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hg-store .hg-fit__opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 12px;min-height:68px;box-sizing:border-box;margin:0;padding:12px 14px;border:1px solid var(--hg-line);border-radius:8px;background:var(--hg-white);color:var(--hg-ink);cursor:pointer;transition:border-color .2s var(--hg-ease),background-color .2s var(--hg-ease),color .2s var(--hg-ease)}
.hg-store .hg-fit__opt:hover{border-color:var(--hg-ink)}
.hg-store .hg-fit__opt:has(input:checked){border-color:var(--hg-ink);background:var(--hg-ink);color:var(--hg-paper)}
.hg-store .hg-fit__opt:has(input:focus-visible){outline:3px solid var(--hg-red);outline-offset:3px}
.hg-store .hg-fit__opt:has(input:disabled){cursor:not-allowed;border-style:dashed;background:transparent;color:var(--hg-muted)}
.hg-store .hg-fit__mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--hg-line);border-radius:50%;color:var(--hg-muted);transition:inherit}
.hg-store .hg-fit__opt:has(input:checked) .hg-fit__mark{border-color:var(--hg-action,var(--hg-red));background:var(--hg-action,var(--hg-red));color:#fff}
.hg-store .hg-fit__opt-text{display:grid;gap:2px;min-width:0}
.hg-store .hg-fit__opt-text strong{font-size:15px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.hg-store .hg-fit__opt-text small{font-size:13px;line-height:1.45;color:var(--hg-muted);overflow-wrap:anywhere}
.hg-store .hg-fit__opt:has(input:checked) .hg-fit__opt-text small{color:inherit}
.hg-store .hg-fit__n{align-self:start;min-width:34px;padding:3px 8px;border-radius:999px;background:var(--hg-soft);color:var(--hg-ink);font-size:14px;font-weight:700;line-height:1.35;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.hg-store .hg-fit__opt:has(input:checked) .hg-fit__n{background:var(--hg-paper);color:var(--hg-ink)}

/* Ось разноширокой пары */
.hg-store .hg-fit__axles{display:inline-flex;flex-wrap:wrap;gap:6px}
.hg-store .hg-fit__ax{position:relative;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;margin:0;padding:8px 14px;border:1px solid var(--hg-line);border-radius:6px;background:var(--hg-white);color:var(--hg-ink);font-size:14px;font-weight:600;cursor:pointer}
.hg-store .hg-fit__ax:hover{border-color:var(--hg-ink)}
.hg-store .hg-fit__ax:has(input:checked){border-color:var(--hg-ink);background:var(--hg-ink);color:var(--hg-paper)}
.hg-store .hg-fit__ax:has(input:focus-visible){outline:3px solid var(--hg-red);outline-offset:3px}

/* Реплика маскота и снятие автомобиля */
.hg-store .hg-fit__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;min-width:0}
.hg-store .hg-fit__foot .hg-mascot{--hg-mascot-h:52px;--hg-mascot-scale:1;flex:1 1 420px;max-width:860px;margin:0;gap:12px}
.hg-store .hg-fit__foot .hg-mascot-figure img{width:52px;height:52px;border-radius:50%;background:var(--hg-soft);object-fit:cover}
.hg-store .hg-fit__foot .hg-mascot-bubble{padding:10px 14px;border-radius:12px;box-shadow:none;background:var(--hg-paper)}
.hg-store .hg-fit__foot .hg-mascot-text{margin:0;font-size:14px;line-height:1.7}
.hg-store .hg-fit__foot .hg-mascot-action{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;color:var(--hg-red);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.hg-store .hg-fit__say-plain{flex:1 1 420px;margin:0}
.hg-store .hg-fit__say-plain p{margin:0;font-size:14px;line-height:1.7}
.hg-store .hg-fit__say-plain a{display:inline-flex;min-height:44px;align-items:center;color:var(--hg-red);font-weight:700}
.hg-store .hg-fit__clear{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;color:var(--hg-ink);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.hg-store .hg-fit__clear .hg-fit-i{width:16px;height:16px}

/* Справка — раскрытие во всю ширину блока */
.hg-store .hg-fit__ref-details{margin:0 -20px;border-top:1px solid var(--hg-line)}
.hg-store .hg-fit__ref-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 20px;color:var(--hg-ink);font-size:14px;font-weight:700;list-style:none;cursor:pointer}
.hg-store .hg-fit__ref-details>summary::-webkit-details-marker{display:none}
.hg-store .hg-fit__ref-details>summary .hg-fit-i{transition:transform .25s var(--hg-ease)}
.hg-store .hg-fit__ref-details[open]>summary .hg-fit-i{transform:rotate(180deg)}
.hg-store .hg-fit__ref-details>summary:focus-visible{outline-offset:-3px}
.hg-store .hg-fit__ref-body{padding:0 20px 18px}
.hg-store .hg-fit__ref-table{display:grid;gap:0;margin:0}
.hg-store .hg-fit__ref-row{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:4px 20px;padding:10px 0;border-top:1px solid var(--hg-line)}
.hg-store .hg-fit__ref-row:first-child{border-top:0}
.hg-store .hg-fit__ref-row dt{color:var(--hg-muted);font-size:13px;font-weight:700;line-height:1.6}
.hg-store .hg-fit__ref-row.is-base dt{color:var(--hg-ink)}
.hg-store .hg-fit__ref-row dd{display:grid;gap:4px;margin:0}
.hg-store .hg-fit__ref-row dd p{display:flex;flex-wrap:wrap;gap:2px 16px;margin:0;font-size:15px;line-height:1.6;font-variant-numeric:tabular-nums}
.hg-store .hg-fit__ref-row dd small{color:var(--hg-muted);font-size:12px;font-weight:700}
.hg-store .hg-fit__axle-name{min-width:3em;font-weight:700}
.hg-store .hg-fit__note{margin:12px 0 0;color:var(--hg-muted);font-size:13px;line-height:1.75}
.hg-store .hg-fit__more{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;color:var(--hg-ink);font-size:14px;font-weight:700}
.hg-store .hg-fit__more .hg-fit-i{width:18px;height:18px;transition:transform .25s var(--hg-ease)}
.hg-store .hg-fit__more:hover .hg-fit-i{transform:translateX(4px)}
.hg-store .hg-fit__apply{margin-top:12px}

/* ── Пометка на карточке товара ── */
.hg-store .hg-fit-note{display:grid;gap:6px;margin-top:10px}
.hg-store .hg-fit-note p{margin:0}
.hg-store .hg-fit-note__tag{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hg-store .hg-fit-tag{display:inline-flex;align-items:center;gap:4px;min-height:26px;box-sizing:border-box;padding:2px 8px 2px 5px;border:1px solid transparent;border-radius:4px;font-size:12px;font-weight:700;line-height:1.3}
.hg-store .hg-fit-tag .hg-fit-i{width:16px;height:16px}
.hg-store .hg-fit-tag--match{background:var(--hg-soft);color:var(--hg-ink)}
.hg-store .hg-fit-tag--tolerance{border-color:var(--hg-ink);background:transparent;color:var(--hg-ink)}
.hg-store .hg-fit-note__axle{color:var(--hg-muted);font-size:12px;font-weight:700}
.hg-store .hg-fit-note__diff{color:var(--hg-ink);font-size:13px;line-height:1.6;font-variant-numeric:tabular-nums}
.hg-store .hg-fit-note__base{color:var(--hg-muted)}
.hg-store .hg-fit-note__diff>span:not(.hg-fit-note__base):not(.hg-fit-note__sep){font-weight:700}
.hg-store .hg-fit-note__unknown{color:var(--hg-muted);font-size:13px;line-height:1.6}
.hg-store .hg-fit-note__ask{display:inline-flex;align-items:center;gap:5px;justify-self:start;min-height:44px;color:var(--hg-red);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.hg-store .hg-fit-note__ask .hg-fit-i{width:18px;height:18px}
.hg-store .jp-product-card:has(.hg-fit-note) .jp-product-bottom{margin-top:6px}

/* ── Пустая выдача с автомобилем ── */
.hg-store .hg-fit-empty{display:grid;justify-items:center;gap:6px;padding:52px 24px}
.hg-store .hg-fit-empty h2{max-width:28em;margin:0;font-size:22px;line-height:1.45;text-wrap:balance}
.hg-store .hg-fit-empty p{max-width:34em;margin:0 0 12px;font-size:15px;line-height:1.8;text-wrap:pretty}
.hg-store .hg-fit-empty__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px}
.hg-store .hg-fit-empty__actions .jp-button{display:inline-flex;align-items:center;gap:8px;min-height:50px}
.hg-store .hg-fit-empty__actions .jp-button .hg-fit-i{transition:transform .25s var(--hg-ease)}
.hg-store .hg-fit-empty__actions .jp-button:hover .hg-fit-i{transform:translateX(4px)}
.hg-store .hg-fit-empty__link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--hg-ink);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* ── Подбор (главная и панель каталога): переход к товарам после модификации, справочные размеры — раскрытием ── */
.hg-store .hgs-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0 0 4px}
.hg-store .hgs-go[hidden],.hg-store .hgs-go__alt[hidden]{display:none}
.hg-store .hgs .hgs-go__main{display:inline-flex;align-items:center;gap:10px;min-height:54px;margin:0}
.hg-store .hgs .hgs-go__main svg{transition:transform .25s var(--hg-ease)}
.hg-store .hgs .hgs-go__main:hover svg{transform:translateX(4px)}
.hg-store .hgs-go__alt{display:inline-flex;align-items:center;min-height:44px;color:var(--hg-ink);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.hg-store .hgs-ref-details{border-top:1px solid var(--hg-line)}
.hg-store .hgs-ref-details__summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;color:var(--hg-ink);font-size:14px;font-weight:700;list-style:none;cursor:pointer}
.hg-store .hgs-ref-details__summary::-webkit-details-marker{display:none}
.hg-store .hgs-ref-details__summary svg{flex:none;transition:transform .25s var(--hg-ease)}
.hg-store .hgs-ref-details[open]>.hgs-ref-details__summary svg{transform:rotate(180deg)}
.hg-store .hgs-ref-details>.hgs-ref-body{padding:4px 0 8px}

/* ── Справочная страница /vehicles/: кнопка в каталог ── */
.hg-store .hg-vehicle-go{margin:16px 0 0}
.hg-store .hg-vehicle-go .jp-button{display:inline-flex;align-items:center;gap:10px;min-height:54px}

/* ── Планшет и телефон ── */
@media (max-width:1000px){
  .hg-store .hg-fit__form{grid-template-columns:minmax(0,1fr)}
  .hg-store .hg-fit__base,.hg-store .hg-fit__mode,.hg-store .hg-fit__axle{grid-column:1;grid-row:auto}
}
@media (max-width:680px){
  .hg-store .hg-fit{margin:0 0 14px;border-radius:12px}
  .hg-store .hg-fit>.hg-vbar{border-radius:12px 12px 0 0}
  .hg-store .hg-fit>.hg-vbar>.hg-vbar__summary{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px 10px;min-height:0;padding:12px}
  .hg-store .hg-fit .hg-vbar__icon{width:40px;height:40px;border-radius:10px}
  .hg-store .hg-fit .hg-vbar__text small{display:block}
  .hg-store .hg-fit__who .hg-fit__name{font-size:17px}
  .hg-store .hg-fit__who .hg-fit__meta{font-size:14px}
  .hg-store .hg-fit .hg-vbar__cta{grid-column:2;justify-self:start;min-height:44px;margin:2px 0 0;padding:0 14px}
  .hg-store .hg-fit__body{gap:12px;padding:14px 12px 0}
  .hg-store .hg-fit__k{font-size:13px}
  .hg-store .hg-fit__kind{font-size:14px}
  /* Режим на телефоне: две строки во всю ширину — заголовок и пояснение без переносов по слогам, цель касания ≥ 56px */
  .hg-store .hg-fit__seg{grid-template-columns:minmax(0,1fr);gap:8px}
  .hg-store .hg-fit__opt{gap:2px 10px;min-height:60px;padding:10px 12px}
  .hg-store .hg-fit__mark{width:28px;height:28px}
  .hg-store .hg-fit__opt-text small{font-size:14px;line-height:1.5}
  /* Сетка с определённой шириной колонки: пузырь (container-type:inline-size) иначе считает высоту по своей минимальной ширине */
  .hg-store .hg-fit__foot{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:2px}
  .hg-store .hg-fit__foot .hg-mascot{--hg-mascot-h:44px;max-width:none;gap:10px}
  .hg-store .hg-fit__foot .hg-mascot-figure img{width:44px;height:44px}
  .hg-store .hg-fit__clear{justify-self:end}
  .hg-store .hg-fit__ref-details{margin:0 -12px}
  .hg-store .hg-fit__ref-details>summary{padding:0 12px}
  .hg-store .hg-fit__ref-body{padding:0 12px 14px}
  .hg-store .hg-fit__ref-row{grid-template-columns:minmax(0,1fr)}
  .hg-store .hg-fit__ref-row dt{font-size:14px}
  .hg-store .hg-fit__note{font-size:14px}
  .hg-store .hg-fit-tag,.hg-store .hg-fit-note__axle{font-size:13px}
  .hg-store .hg-fit-note__diff,.hg-store .hg-fit-note__unknown,.hg-store .hg-fit-note__ask{font-size:14px}
  .hg-store .hg-fit-empty{padding:36px 16px}
  .hg-store .hg-fit-empty h2{font-size:19px}
  .hg-store .hg-fit-empty__actions{flex-direction:column;align-items:stretch}
  .hg-store .hg-fit-empty__actions .jp-button{justify-content:center}
  .hg-store .hg-fit-empty__link{justify-content:center}
  .hg-store .hgs-go{flex-direction:column;align-items:stretch;gap:4px}
  .hg-store .hgs .hgs-go__main{justify-content:center;width:100%}
  .hg-store .hgs-go__alt{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .hg-store .hg-fit__ref,.hg-store .hg-fit__opt,.hg-store .hg-fit__mark,.hg-store .hg-fit__ref-details>summary .hg-fit-i,.hg-store .hg-fit__more .hg-fit-i,.hg-store .hg-fit-empty__actions .jp-button .hg-fit-i,.hg-store .hgs .hgs-go__main svg,.hg-store .hgs-ref-details__summary svg{transition:none}
  .hg-store .hg-fit__more:hover .hg-fit-i,.hg-store .hg-fit-empty__actions .jp-button:hover .hg-fit-i,.hg-store .hgs .hgs-go__main:hover svg{transform:none}
}