/* Claude v3.1 · исполнитель F — «取扱ブランド» на главной: бегущая лента логотипов (parts/brand-wall.php, поведение — assets/v31-brands.js).
   Две дорожки во всю ширину окна (до 2560 px) с мягким затуханием краёв, шины едут влево, диски и 純正 — вправо. Движение — только transform
   дорожки (CSS animation, без библиотек); набор повторён --hgb-sets раз, сдвиг на один набор = calc(-100% / --hgb-sets), цикл бесшовный.
   Пауза: наведение (устройства с hover), фокус внутри, кнопка «止める», блок вне экрана. prefers-reduced-motion — без движения, копии скрыты,
   ряд прокручивается сам. Высота дорожки = плашка + поля: задана заранее, загрузка логотипов ничего не сдвигает.
   Плашки светлые в обеих темах, логотип смешивается с плашкой (multiply) — белые поля JPG не дают прямоугольников, ночью плашка тёплая и тише. */

.hg-store .hg-brand-wall.hgb{--hgb-plate-w:176px;--hgb-plate-h:76px;--hgb-gap:16px;--hgb-item-s:6s;--hgb-pad-y:12px;--k:1;--hgb-lead:.6;
  --hgb-fade:clamp(24px,7vw,140px);--hgb-gutter:max(40px,calc((100% - 1320px) / 2));padding-top:80px}
.hg-store .hgb .jp-section-heading{margin-bottom:24px}
.hg-store .hgb .jp-section-heading p:not(.jp-eyebrow){max-width:none}
.hgb-actions{display:flex;flex:none;align-items:center;gap:6px}

/* Кнопка паузы: круг 44×44 (как стрелки строки разделов), без JS скрыта */
.hgb-toggle[hidden]{display:none}
.hg-store .hgb-toggle{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--hg-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hg-store .hgb-toggle::before{content:"";position:absolute;inset:6px;border:1px solid var(--hg-line);border-radius:50%;background:var(--hg-white);transition:border-color .2s}
.hg-store .hgb-toggle:is(:hover,:focus,:active){background:none;color:var(--hg-ink)}
.hg-store .hgb-toggle svg{position:relative;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hgb-toggle .hgb-toggle__play{display:none;fill:currentColor;stroke-width:1.6}
.hgb.is-paused .hgb-toggle .hgb-toggle__pause{display:none}
.hgb.is-paused .hgb-toggle .hgb-toggle__play{display:inline}
.hg-store .hgb-toggle:focus-visible{outline:3px solid var(--hg-red);outline-offset:0}
@media (hover:hover){.hg-store .hgb-toggle:hover::before{border-color:var(--hg-ink)}}

/* Дорожки. Колонка minmax(0,1fr) и min-width:0: при overflow:clip дорожка не контейнер прокрутки, и без этого её минимальная ширина
   в сетке равнялась бы ширине всей ленты (документ получал горизонтальную прокрутку). Обёртка дополнительно обрезает по X. */
.hgb-lanes{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:2560px;margin-inline:auto;overflow-x:clip}
.hgb-lane{position:relative;min-width:0;overflow:clip;padding-block:var(--hgb-pad-y);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--hgb-fade),#000 calc(100% - var(--hgb-fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--hgb-fade),#000 calc(100% - var(--hgb-fade)),transparent 100%)}
/* Старт со сдвигом: первый логотип ряда (самый частый бренд) сразу виден целиком, а не в затухании края — --hgb-lead плашек от края
   (≈ ширина затухания / шаг плашки). Влево: фаза 1 − lead/n (задержка lead·t − n·t); вправо: фаза lead/n (задержка −lead·t). */
.hgb-track{display:flex;width:max-content;animation:hgb-left calc(var(--hgb-n,10) * var(--hgb-item-s)) linear calc(var(--hgb-item-s) * (var(--hgb-lead) - var(--hgb-n,10))) infinite;will-change:transform}
.hgb-lane[data-dir=right] .hgb-track{animation-name:hgb-right;animation-delay:calc(var(--hgb-item-s) * var(--hgb-lead) * -1)}
@keyframes hgb-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-100% / var(--hgb-sets,2)),0,0)}}
@keyframes hgb-right{from{transform:translate3d(calc(-100% / var(--hgb-sets,2)),0,0)}to{transform:translate3d(0,0,0)}}
.hg-store .hgb-set{display:flex;flex:none;margin:0;padding:0;list-style:none}
.hg-store .hgb-set>li{flex:none;margin:0;padding:0 var(--hgb-gap) 0 0;list-style:none}
.hg-store .hgb-set>li::before,.hg-store .hgb-set>li::marker{content:none}

/* Плашка и логотип: видимая часть логотипа (--iw × --ih) — окно на кадр файла (--fw × --fh со сдвигом --fx/--fy), всё × --k */
.hg-store .hgb-logo{display:grid;place-items:center;box-sizing:border-box;width:var(--hgb-plate-w);height:var(--hgb-plate-h);margin:0;padding:0;border:1px solid #e6e3dd;border-radius:14px;
  background:#fff;color:inherit;text-decoration:none;transition:border-color .2s var(--hg-ease),box-shadow .25s var(--hg-ease),transform .25s var(--hg-ease)}
.hgb-ink{position:relative;display:block;overflow:hidden;width:calc(var(--iw,120) * var(--k) * 1px);height:calc(var(--ih,30) * var(--k) * 1px);pointer-events:none}
.hg-store .hgb-ink img{position:absolute;left:calc(var(--fx,0) * var(--k) * -1px);top:calc(var(--fy,0) * var(--k) * -1px);display:block;width:calc(var(--fw,120) * var(--k) * 1px);
  height:calc(var(--fh,30) * var(--k) * 1px);max-width:none;max-height:none;margin:0;object-fit:fill;mix-blend-mode:multiply}
html[data-theme=dark] .hg-store .hgb-logo{border-color:#ffffff14;background:#e9e7e1}
.hg-store .hgb-logo:focus-visible{outline:3px solid var(--hg-red);outline-offset:3px}
@media (hover:hover){
  .hgb-lane:hover .hgb-track{animation-play-state:paused}
  .hg-store .hgb-logo:hover{border-color:var(--hg-ink);box-shadow:0 8px 16px -10px #00000059;transform:translateY(-2px)}
  html[data-theme=dark] .hg-store .hgb-logo:hover{border-color:#fff;box-shadow:0 8px 18px -10px #000}
}
/* Пауза: фокус внутри, кнопка, блок вне экрана (класс ставит JS) */
.hgb-lane:focus-within .hgb-track,.hgb.is-paused .hgb-track,.hgb.is-offscreen .hgb-track{animation-play-state:paused}
/* Клавиатура без JS: ряд с фокусом встаёт в начало и прокручивается обычной прокруткой — фокус браузер показывает сам. */
.hgb:not(.is-js) .hgb-lane:focus-within{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.hgb:not(.is-js) .hgb-lane:focus-within .hgb-track{animation:none}
/* С JS (v31-brands.js): ряд с фокусом переходит в прокрутку с того же места, где стояла лента (без скачка), и подводит плашку с фокусом. */
.hgb-lane.is-manual{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.hgb-lane.is-manual::-webkit-scrollbar,.hgb:not(.is-js) .hgb-lane:focus-within::-webkit-scrollbar{display:none}
.hgb-lane.is-manual .hgb-track{animation:none}
/* В режиме фокуса перед первой плашкой поле шириной затухания: первый бренд ряда можно подвести за пределы затухания (JS учитывает поле). */
.hgb-lane.is-manual .hgb-track,.hgb:not(.is-js) .hgb-lane:focus-within .hgb-track{padding-inline-start:calc(var(--hgb-fade) + 8px)}

/* Планшет */
@media (max-width:1200px){.hg-store .hg-brand-wall.hgb{--hgb-gutter:28px}}
@media (max-width:1024px){
  .hg-store .hg-brand-wall.hgb{--hgb-plate-w:154px;--hgb-plate-h:68px;--hgb-gap:14px;--hgb-item-s:5.6s;--hgb-pad-y:11px;--k:.88;--hgb-lead:.5}
  .hg-store .hgb-logo{border-radius:12px}
}
/* Телефон: 2,6 плашки на 360 px, скорость ≈ 28 px/с */
@media (max-width:680px){
  .hg-store .hg-brand-wall.hgb{--hgb-plate-w:128px;--hgb-plate-h:58px;--hgb-gap:10px;--hgb-item-s:5s;--hgb-pad-y:10px;--k:.74;--hgb-lead:.3;--hgb-gutter:18px;padding-top:56px}
  .hg-store .hgb .jp-section-heading{flex-direction:column;align-items:stretch;gap:6px;margin-bottom:12px}
  .hg-store .hgb .hgb-actions{justify-content:space-between;flex-direction:row-reverse;margin-right:-6px}
  .hg-store .hgb-logo{border-radius:10px}
}
@media (max-width:370px){.hg-store .hg-brand-wall.hgb{--hgb-plate-w:120px;--hgb-plate-h:54px;--k:.69;--hgb-gutter:14px}}

/* Без движения: копии скрыты, ряд с полями контейнера прокручивается пальцем, колесом или Tab; кнопка паузы не нужна.
   Поле в конце ряда не меньше затухания справа + 8 px (с учётом зазора после плашки): последний бренд докручивается целиком. */
@media (prefers-reduced-motion:reduce){
  .hgb-track{animation:none;will-change:auto;padding-inline:var(--hgb-gutter) max(var(--hgb-gutter),calc(40px - var(--hgb-gap)))}
  .hgb-set[aria-hidden=true]{display:none}
  .hgb-lane{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scroll-padding-inline:var(--hgb-gutter);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent 100%)}
  .hg-store .hgb-toggle{display:none}
  .hg-store .hgb-logo{transition:none}
  .hg-store .hgb-logo:hover{transform:none}
}
@media print{.hgb-track{animation:none}.hgb-set[aria-hidden=true]{display:none}.hgb-lane{overflow:visible;-webkit-mask-image:none;mask-image:none}}