/* Claude v3.3 — карточка товара по замечаниям владельца 14.10.2026. Подключается только на карточке, после всех листов
   (inc/front-v33.php, приоритет 1002); селекторы с html body.hg-store перекрывают прежние слои (product-ui, pdp-r440, claude-v1, m3-pdp). */

/* ── Комплектация: «в наличии / текущий съезжает, разметка скачет» ──
   Было: ярлык «✓ Текущий» стоял строкой под названием только у выбранной плитки — при переходе комплект / шины / диски список
   менял высоту на 14–34 px и блок покупки прыгал; цена и статус соседних плиток стояли на разной высоте (до 43 px).
   Стало: ярлык — флажок на верхней кромке выбранной плитки, вне потока; место над плитками зарезервировано у всех.
   В три колонки строки плиток общие (subgrid): миниатюра с названием, артикул, цена, статус — у всех плиток на одной высоте.
   Узкая правая колонка (900–1099 px) и телефон — плитки строками, как на телефоне раньше. */
html body.hg-store .hg-pdp-r440 .hg-variant-card{position:relative;box-sizing:border-box}
html body.hg-store .hg-pdp-r440 .hg-variant-card.is-current{box-shadow:none}
html body.hg-store .hg-pdp-r440 .hg-variant-card .hg-variant-current{position:absolute;top:0;right:10px;z-index:1;display:inline-flex!important;align-items:center;width:auto;max-width:calc(100% - 20px);margin:0!important;padding:1px 8px 1px 7px;border-radius:999px;font-size:12px!important;line-height:1.45;font-weight:700;white-space:nowrap;transform:translateY(-52%);box-shadow:0 0 0 2px var(--hg-paper)}
html body.hg-store .hg-pdp-r440 .hg-variant-card .hg-variant-current::before{margin-right:3px}
html body.hg-store .hg-pdp-r440 .hg-variant-head{min-width:0}
html body.hg-store .hg-pdp-r440 .hg-variant-type{line-height:1.35}
html body.hg-store .hg-pdp-r440 .hg-variant-total{white-space:nowrap}
html body.hg-store .hg-pdp-r440 .hg-variant-status.hg-stock{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}

/* три колонки: ПК от 1100 px и планшет 768–899 px (правая колонка карточки широкая) */
@media (min-width:1100px),(min-width:768px) and (max-width:899px){
  html body.hg-store .hg-pdp-r440 .hg-variants-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:auto;gap:4px 8px!important;align-items:stretch}
  html body.hg-store .hg-pdp-r440 .hg-variants-item{display:grid;grid-row:span 4;grid-template-rows:1fr;grid-template-rows:subgrid;margin:12px 0 0}
  html body.hg-store .hg-pdp-r440 .hg-variant-card{grid-row:1/-1;display:grid!important;grid-template-columns:36px minmax(0,1fr)!important;grid-template-rows:auto auto auto 1fr;grid-template-rows:subgrid;align-items:start!important;gap:4px 8px!important;min-height:0!important;padding:10px!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-card.is-current{padding:9px!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-card>.hg-variant-body{display:contents!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-thumb{grid-area:1/1;width:36px!important;height:36px!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-card:not(.is-inactive):not(:has(>.hg-variant-thumb))::before{grid-area:1/1;width:36px!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-head{grid-area:1/2;align-self:center;display:block!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-card.is-inactive .hg-variant-head{grid-column:1/-1}
  html body.hg-store .hg-pdp-r440 .hg-variant-type{display:block;font-size:14px!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-sku{grid-row:2;grid-column:1/-1}
  html body.hg-store .hg-pdp-r440 .hg-variant-price{grid-row:3;grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0}
  html body.hg-store .hg-pdp-r440 .hg-variant-basis{flex-basis:100%}
  html body.hg-store .hg-pdp-r440 .hg-variant-ambiguous{grid-row:3;grid-column:1/-1}
  html body.hg-store .hg-pdp-r440 .hg-variant-status{grid-row:4;grid-column:1/-1;align-self:start;justify-self:start;max-width:100%;margin:0}
}
@media (min-width:1100px) and (max-width:1279px){
  html body.hg-store .hg-pdp-r440 .hg-variant-type{font-size:13px!important}
}

/* строки: телефон и узкая правая колонка ПК 900–1099 px */
@media (max-width:767px),(min-width:900px) and (max-width:1099px){
  html body.hg-store .hg-pdp-r440 .hg-variants-list{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  html body.hg-store .hg-pdp-r440 .hg-variants-item{display:flex;margin:12px 0 0}
  html body.hg-store .hg-pdp-r440 .hg-variant-card{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:center!important;gap:0 12px!important;min-height:62px!important;padding:9px 12px 9px 9px!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-card.is-current{padding:8px 11px 8px 8px!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-card.is-inactive{grid-template-columns:minmax(0,1fr)!important;min-height:48px!important;padding:10px 12px!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-thumb{width:44px!important;height:44px!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-card:not(.is-inactive):not(:has(>.hg-variant-thumb))::before{width:44px!important}
  html body.hg-store .hg-pdp-r440 .hg-variant-card>.hg-variant-body{display:grid!important;gap:2px;min-width:0}
  html body.hg-store .hg-pdp-r440 .hg-variant-head{display:block!important;padding-right:0}
  html body.hg-store .hg-pdp-r440 .hg-variant-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
  html body.hg-store .hg-pdp-r440 .hg-variant-basis{flex-basis:auto}
  html body.hg-store .hg-pdp-r440 .hg-variant-status{justify-self:start;max-width:100%}
}
@media (min-width:900px) and (max-width:1099px){
  html body.hg-store .hg-pdp-r440 .hg-variant-type{font-size:14px!important}
}

/* описание состояния из источника может содержать длинные строки без пробелов (адрес, код) — переносятся внутри колонки, страница не уезжает вбок */
html body.hg-store .hg-pdp-r440 .jp-condition p{overflow-wrap:anywhere}

/* ── Характеристики: «бренд можно иконочку … много пустого места, квадратики» ──
   Группа шины или диска — карточка: шапка со значком вида, заголовком группы (у комплекта) и маркой — логотип на светлой плашке
   и модель. Плитки — одним листом с тонкими разделителями; последний ряд растягивается, пустых клеток нет. */
html body.hg-store .hg-pdp-v2 #hg-pdp-specs>.hg-mascot--product-params{margin:0 0 14px}
html body.hg-store .hg-pdp-v2 .hg-spec-card{margin:0 0 12px;border:1px solid var(--hg-line);border-radius:12px;background:var(--hg-white);overflow:hidden}
html body.hg-store .hg-pdp-v2 .hg-spec-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:52px;padding:10px 14px;border-bottom:1px solid var(--hg-line);background:var(--hg-soft);box-sizing:border-box}
html body.hg-store .hg-pdp-v2 .hg-spec-card__icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--hg-white);color:var(--hg-ink);box-shadow:inset 0 0 0 1px var(--hg-line)}
html body.hg-store .hg-pdp-v2 .hg-spec-card__icon svg{width:18px;height:18px}
html body.hg-store .hg-pdp-v2 .hg-spec-card .hg-spec-group-title{margin:0!important;padding:0;border:0;background:none;font-size:15px!important;font-weight:700;line-height:1.4;color:var(--hg-ink)}
html body.hg-store .hg-pdp-v2 .hg-spec-card .hg-spec-group-title+.hg-spec-brand{padding-left:12px;border-left:1px solid var(--hg-line)}
html body.hg-store .hg-pdp-v2 .hg-spec-brand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;margin:0;font-size:15px;line-height:1.4}
html body.hg-store .hg-pdp-v2 .hg-spec-brand__logo{display:block;flex:none;padding:5px 8px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--hg-line);line-height:0}
html body.hg-store .hg-pdp-v2 .hg-spec-brand__ink{position:relative;display:block;overflow:hidden;width:calc(var(--iw,96) * 1px);height:calc(var(--ih,22) * 1px)}
html body.hg-store .hg-pdp-v2 .hg-spec-brand__ink img{position:absolute;left:calc(var(--fx,0) * -1px);top:calc(var(--fy,0) * -1px);display:block;width:calc(var(--fw,96) * 1px);max-width:none;height:calc(var(--fh,22) * 1px)}
html body.hg-store .hg-pdp-v2 .hg-spec-brand__name,html body.hg-store .hg-pdp-v2 .hg-spec-brand__model{font-weight:700;letter-spacing:.01em;color:var(--hg-ink);overflow-wrap:anywhere}
html body.hg-store .hg-pdp-v2 .hg-spec-brand__name{margin-right:-4px}
html body.hg-store .hg-pdp-v2 .hg-spec-card .hg-spec-tiles{display:flex!important;flex-wrap:wrap;gap:1px!important;margin:0!important;padding:0;border:0;border-radius:0;background:var(--hg-line)}
/* ширина плитки от 200 px: подписи «Посадочный диаметр», «Отверстия и PCD» и «не подтверждён» в одну строку; диски 3 + 2, шины 3 */
/* подпись — сверху, значение — по нижней линии плитки: значения ряда стоят на одной высоте, даже если подпись соседа в две строки */
html body.hg-store .hg-pdp-v2 .hg-spec-card .hg-spec-tile{flex:1 1 200px;grid-template-rows:1fr auto;align-items:start;min-width:0;min-height:0;margin:0;padding:10px 4px 11px 14px!important;border:0!important;border-radius:0!important;background:var(--hg-white)}
html body.hg-store .hg-pdp-v2 .hg-spec-card .hg-spec-tile__value{align-self:end}
html body.hg-store .hg-pdp-v2 .hg-spec-card .hg-spec-tile__help{align-self:center}
html body.hg-store .hg-pdp-v2 .hg-spec-card .hg-spec-tile :is(.hg-spec-tile__label,.hg-spec-tile__value){overflow-wrap:break-word}
html body.hg-store .hg-pdp-v2 .hg-spec-tile[data-spec-state=unknown] .hg-spec-tile__value{font-size:14px;line-height:1.5}
/* остаток протектора — шкала из 10 делений справа от значения */
html body.hg-store .hg-pdp-v2 .hg-spec-tile__value:has(>.hg-spec-meter){display:flex;align-items:center;gap:10px}
html body.hg-store .hg-pdp-v2 .hg-spec-meter{display:block;flex:1 1 auto;max-width:132px;min-width:60px;height:6px;background:linear-gradient(90deg,var(--hg-ink) var(--hg-meter,0%),var(--hg-line) 0);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%)}
/* состояние лота (группа common) — строкой под карточками: подпись, значение плашкой и «?» */
html body.hg-store .hg-pdp-v2 .hg-spec-tiles[data-spec-group=common]{display:flex!important;flex-wrap:wrap;gap:8px!important;margin:2px 0 0!important;padding:0}
html body.hg-store .hg-pdp-v2 .hg-spec-tiles[data-spec-group=common] .hg-spec-tile{display:inline-grid;grid-template-columns:auto auto auto;grid-template-areas:"label value help";align-items:center;gap:0 10px;min-height:0;padding:0 0 0 2px!important;border:0!important;background:none}
html body.hg-store .hg-pdp-v2 .hg-spec-tiles[data-spec-group=common] .hg-spec-tile__label{font-size:13px}
html body.hg-store .hg-pdp-v2 .hg-spec-tiles[data-spec-group=common] .hg-spec-tile__value{padding:2px 10px;border-radius:6px;background:var(--hg-soft);font-size:14px;line-height:1.5}
html body.hg-store .hg-pdp-v2 .hg-spec-tiles[data-spec-group=common] .hg-spec-tile__help:not([data-enhanced])[open]{grid-column:1/-1}
html[data-theme=dark] body.hg-store .hg-pdp-v2 .hg-spec-brand__logo{background:#e9e7e1;box-shadow:inset 0 0 0 1px #ffffff14}
html[data-theme=dark] body.hg-store .hg-pdp-v2 .hg-spec-meter{background:linear-gradient(90deg,var(--hg-ink) var(--hg-meter,0%),#ffffff2e 0)}
@media (max-width:680px){
  /* шапка телефона: значок слева на две строки — группа сверху, марка под ней, без разделителя */
  html body.hg-store .hg-pdp-v2 .hg-spec-card__head{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:6px 12px;padding:10px 12px}
  html body.hg-store .hg-pdp-v2 .hg-spec-card__head>.hg-spec-card__icon{grid-row:1/span 2;align-self:center}
  html body.hg-store .hg-pdp-v2 .hg-spec-card__head>:is(.hg-spec-group-title,.hg-spec-brand){grid-column:2}
  html body.hg-store .hg-pdp-v2 .hg-spec-card .hg-spec-group-title+.hg-spec-brand{padding-left:0;border-left:0}
  html body.hg-store .hg-pdp-v2 .hg-spec-card .hg-spec-tile{flex-basis:140px;padding-left:12px!important}
}