/* Claude v3, исправления аудита телефона/планшета (work/v3/mobile/AUDIT.json), область C: шапка, корзина и оформление, кабинет, /grades/, /tire-service/.
   Подключается последним (inc/mobile-v3.php, приоритет 999) и перекрывает основные листы без !important. Поведение — assets/m3-chrome.js.
   Десктоп ≥1280 не меняется: правила ограничены шириной или касаются состояний, которых на десктопе нет. */

/* ── M-13: строка разделов шапки на планшете ──
   681–1000 px: строка шире экрана (JA 1011 при 712 на 768) — у края, куда можно прокрутить, затухание и круглая кнопка-стрелка (m3-chrome.js
   ставит .hg-m3-nav-over/-start/-end по фактической прокрутке). Стрелки — для пальца и мыши; с клавиатуры пункты доступны Tab'ом, а
   scroll-padding держит пункт в фокусе вне затухания. Без JS — прежняя прокрутка. 1001–1100 px: интервал 14 вместо 22 — строка JA помещается целиком. */
.hg-m3-nav-arrow[hidden]{display:none}
@media (min-width:681px){
 .hg-store .jp-header .jp-nav-wrap{position:relative}
 .hg-store .jp-nav-wrap.hg-m3-nav-over .jp-nav{--hg-m3-fade-l:0px;--hg-m3-fade-r:0px;scroll-padding-inline:60px;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--hg-m3-fade-l),#000 calc(100% - var(--hg-m3-fade-r)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--hg-m3-fade-l),#000 calc(100% - var(--hg-m3-fade-r)),transparent 100%)}
 .hg-store .jp-nav-wrap.hg-m3-nav-over:not(.hg-m3-nav-start) .jp-nav{--hg-m3-fade-l:72px}
 .hg-store .jp-nav-wrap.hg-m3-nav-over:not(.hg-m3-nav-end) .jp-nav{--hg-m3-fade-r:72px}
 .hg-m3-nav-arrow{position:absolute;top:50%;z-index:1;display:grid;width:44px;height:44px;margin:-22px 0 0;padding:0;place-items:center;border:0;border-radius:50%;background:none;color:var(--hg-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
 .hg-m3-nav-arrow--next{right:var(--hg-m3-nav-r,28px)}
 .hg-m3-nav-arrow--prev{left:var(--hg-m3-nav-l,28px)}
 .hg-m3-nav-arrow::before{content:"";position:absolute;inset:6px;border:1px solid var(--hg-line);border-radius:50%;background:var(--hg-white);box-shadow:0 4px 14px #171b2214;transition:border-color .2s}
 html[data-theme=dark] .hg-m3-nav-arrow::before{box-shadow:0 4px 14px #0007}
 .hg-m3-nav-arrow svg{position:relative;width:18px;height:18px}
 .hg-store .hg-m3-nav-arrow:is(:hover,:focus,:active){background:none;color:var(--hg-ink)}
 @media (hover:hover){.hg-m3-nav-arrow:hover::before{border-color:var(--hg-ink)}}
}
@media (min-width:1001px) and (max-width:1100px){.hg-store .jp-nav{gap:14px}}

/* ── M-14 (шапка): 681–1024 px — при прокрутке вниз видна только строка бренда и значков (на 768: 90 из 222 px), при прокрутке вверх шапка
   возвращается целиком. Высота шапки в потоке не меняется (только clip-path, как у телефона в hub.css), поэтому сдвигов вёрстки нет;
   переключение с порогом по направлению прокрутки — без мигания. .hg-m3-shrink ставит JS (на страницах без закреплённых блоков под шапкой). */
@media (min-width:681px) and (max-width:1024px){
 .hg-store .jp-header.hg-m3-shrink.is-stuck{clip-path:inset(0 0 -8px 0);transition:clip-path .28s var(--hg-ease,cubic-bezier(.16,1,.3,1))}
 .hg-store .jp-header.hg-m3-shrink.is-stuck.hg-m3-compact{clip-path:inset(0 0 calc(100% - var(--hg-m3-compact-h,100%)) 0)}
 .hg-store .jp-header.hg-m3-shrink::after{content:"";position:absolute;left:0;right:0;top:calc(var(--hg-m3-compact-h,100%) - 1px);height:1px;background:var(--hg-line);opacity:0;pointer-events:none;transition:opacity .2s}
 .hg-store .jp-header.hg-m3-shrink.is-stuck.hg-m3-compact::after{opacity:1}
}
@media (prefers-reduced-motion:reduce){.hg-store .jp-header.hg-m3-shrink.is-stuck,.hg-store .jp-header.hg-m3-shrink::after{transition:none}}

/* ── M-17 (/grades/): панели рангов лежат в одной ячейке сетки с первой отрисовки — высота витрины равна самой высокой панели и до hub.js,
   и после него (раньше до hub.js были видны все шесть панелей подряд, затем страница схлопывалась: CLS 0,09 на 1024×1366).
   Видна панель S+ — та, которую hub.js выбирает первой (select(0)). Скрытые панели не загружают картинку: её место держит ::before той же пропорции.
   Только при html.hg-guide-js (ставится в <head> при включённом JS); без JS — прежний список всех панелей. */
html.hg-guide-js .hg-grade-explorer>.hg-grade-panels{display:grid}
html.hg-guide-js .hg-grade-explorer>.hg-grade-panels>.hg-grade-panel{grid-area:1/1;align-self:start;min-width:0}
html.hg-guide-js .hg-grade-explorer>.hg-grade-panels>.hg-grade-panel[hidden],
html.hg-guide-js .hg-grade-explorer:not(:has(>.hg-grade-tabs[data-enhanced]))>.hg-grade-panels>.hg-grade-panel:not(:first-child){display:grid;visibility:hidden}
html.hg-guide-js .hg-grade-explorer>.hg-grade-panels>.hg-grade-panel[hidden]>figure>img,
html.hg-guide-js .hg-grade-explorer:not(:has(>.hg-grade-tabs[data-enhanced]))>.hg-grade-panels>.hg-grade-panel:not(:first-child)>figure>img{display:none}
html.hg-guide-js .hg-grade-explorer>.hg-grade-panels>.hg-grade-panel[hidden]>figure::before,
html.hg-guide-js .hg-grade-explorer:not(:has(>.hg-grade-tabs[data-enhanced]))>.hg-grade-panels>.hg-grade-panel:not(:first-child)>figure::before{content:"";display:block;width:100%;aspect-ratio:1.12}
@media (max-width:680px){
 html.hg-guide-js .hg-grade-explorer>.hg-grade-panels>.hg-grade-panel[hidden],
 html.hg-guide-js .hg-grade-explorer:not(:has(>.hg-grade-tabs[data-enhanced]))>.hg-grade-panels>.hg-grade-panel:not(:first-child){display:block}
 html.hg-guide-js .hg-grade-explorer>.hg-grade-panels>.hg-grade-panel[hidden]>figure::before,
 html.hg-guide-js .hg-grade-explorer:not(:has(>.hg-grade-tabs[data-enhanced]))>.hg-grade-panels>.hg-grade-panel:not(:first-child)>figure::before{aspect-ratio:1.16}
}

/* ── M-18: корзина ≤767 px — закреплённая полоса «合計 ¥… / 購入手続きに進む» над доком, пока основная кнопка ниже видимой области
   (тот же приём, что у панели покупки PDP; разметку строит m3-chrome.js из итогов и кнопки Woo, тексты — их же). ── */
.hg-m3-cartbar{display:none}
@media (max-width:767px){
 .hg-m3-cartbar,.hg-m3-cartbar[hidden]{position:fixed;left:0;right:0;bottom:var(--hg-bottom-stack,0px);z-index:45;display:flex;align-items:center;gap:12px;box-sizing:border-box;padding:10px 16px;
  background:var(--hg-white);border-top:1px solid var(--hg-line);box-shadow:0 -10px 26px #00000017;transform:translateY(calc(100% + var(--hg-bottom-stack,0px) + 8px));visibility:hidden;
  transition:transform .34s var(--hg-ease,cubic-bezier(.16,1,.3,1)),visibility 0s .34s}
 .hg-m3-cartbar.is-visible{transform:none;visibility:visible;transition:transform .34s var(--hg-ease,cubic-bezier(.16,1,.3,1)),visibility 0s}
 html[data-theme=dark] .hg-m3-cartbar{box-shadow:0 -10px 26px #0006}
 .hg-m3-cartbar__price{display:grid;flex:none;max-width:46%;line-height:1.25}
 .hg-m3-cartbar__label{overflow:hidden;color:var(--hg-muted);font-size:13px;white-space:nowrap;text-overflow:ellipsis}
 .hg-m3-cartbar__value{color:var(--hg-ink);font-size:19px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
 .hg-m3-cartbar__value .woocommerce-Price-currencySymbol{font-size:.9em}
 .hg-store .hg-m3-cartbar .jp-button{flex:1 1 auto;min-width:0;min-height:48px;margin:0;padding:10px 14px;font-size:15px;line-height:1.3;text-align:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.hg-m3-cartbar,.hg-m3-cartbar.is-visible{transition:none}}

/* ── M-22: главная кнопка формы выше дока на первом экране телефона ──
   /my-account/ (вход): крошки 25+25 → 12+4 px, заголовок 18/35 → 4/16 px — кнопка «ログイン» на 360 поднимается на 67 px (было 712–762 при доке 722).
   /vehicles/: второй переключатель JA/RU/EN в заголовке дублирует язык шапки (на телефоне он в шапке) — скрыт; отступы плотнее. */
@media (max-width:480px){
 body.hg-store.woocommerce-account .jp-content-page>.jp-breadcrumb{padding-block:12px 4px}
 body.hg-store.woocommerce-account .jp-content-page>.jp-page-heading{padding:4px 0 16px}
 .hg-store .hg-vehicle-page>.hg-vehicle-heading{padding-bottom:14px}
 .hg-store .hg-vehicle-page>.hg-vehicle-layout{padding-top:8px}
}
@media (max-width:680px){
 .hg-store .hg-vehicle-heading-tools>.hg-vehicle-languages{display:none}
 .hg-store .hg-vehicle-heading-tools:not(:has(>:not(.hg-vehicle-languages))){display:none}
}

/* ── M-36 (/tire-service/): на ≤420 px реплика под иллюстрацией на всю ширину (было: столбик ≈190 px в 7 строк), хвост пузыря — вверх к маскоту. ── */
@media (max-width:420px){
 .hg-store .jp-editorial .hg-service-hero__guide{flex-direction:column;align-items:stretch;gap:12px;margin-top:18px}
 .hg-store .jp-editorial .hg-service-figure{align-self:flex-start;margin-left:6px}
 .hg-store .jp-editorial .hg-service-say{margin:0 0 6px}
 .hg-store .jp-editorial .hg-service-say p::after{left:58px;right:auto;top:-9px;bottom:auto;width:18px;height:10px;clip-path:polygon(50% 0,100% 100%,0 100%)}
}
/* M-26 (/tire-service/): без висячего последнего знака «す。» в абзацах. M-30: номер на «電話で相談する» в тёмной теме — полный контраст (было .9 → 4,33:1). */
.hg-store .jp-editorial .hg-service :is(p,li){text-wrap:pretty}
html[data-theme=dark] .hg-store .jp-editorial .hg-service-call__number{opacity:1}

/* ── M-29: цели касания подвала на планшете (768–1279 px): ссылки разделов 36 px через 2 px → 44 px (без зазора строк); телефон и почта
   40 → 44 px с полями −2 px — в потоке те же 40 px (иначе колонка контактов до загрузки шрифта выше колонки бренда и подвал сдвигается);
   действие в реплике маскота корзины 32 → 44 px без изменения высоты пузыря (отрицательные поля). На телефоне подвал уже 44 px. ── */
@media (min-width:768px) and (max-width:1279px){
 .hg-store .hg-footer-group-r435 nav{row-gap:0}
 .hg-store .hg-footer-group-r435 nav a{min-height:44px}
 .hg-store .hg-footer-direct-r435 a{min-height:44px;margin-block:-2px}
}
@media (min-width:681px) and (max-width:1279px){
 body.hg-store.woocommerce-cart .hg-mascot .hg-mascot-action{min-height:44px;margin:-4px 0 -6px}
}
/* M-25: слоган шапки 11 → 12 px (телефон и планшет; на 390 JA — в две строки, как RU/EN, высота шапки та же).
   Крошки оставлены 11 px: при 12 px длинные RU-крошки и названия товаров переносятся и сдвигают первый экран (на /vehicles/ RU 390 — на 27 px). */
@media (max-width:1279px){.hg-store .jp-header .jp-tagline{font-size:12px}}

/* ── M-37: корзина и оформление ──
   Корзина (≤1279): название не рвётся внутри «冬用タイヤ» (разбиение по фразам). Оформление (все ширины): название в «ご注文» целиком — это последняя сверка
   перед заказом, а год выпуска, номер лота и задняя ось в конце названия («後輪 11.0J ET43») важны для заказа (было обрезано на «BRIDGESTONE…»); строка «合計» (≤1279) — единый фон обеих ячеек.
   Название стало «h1 · spec» (58–85 знаков): Ecomus режет его до 2 строк (≥1280), прежний предел в 4 строки (768–1279) резал самые длинные — теперь предела нет на всех ширинах. */
@media (max-width:1279px){
 body.hg-store.woocommerce-cart .hg-cart-product-name{word-break:auto-phrase}
 .hg-store .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total>:is(th,td){background:var(--hg-soft)}
}
.hg-store form.checkout table.shop_table tbody td.product-name .checkout-review-product-name{-webkit-line-clamp:none;word-break:auto-phrase}

/* Lead v3: на 900–1024 px закреплённая галерея PDP (pdp-r440: top 150px — полная шапка) поднимается к сжатой шапке (M-14),
   иначе над ней пустая полоса около 60 px: видимая высота сжатой шапки + 12 px зазора.
   v3.1: подпись под логотипом убрана, шапка стала ниже на 14–18 px — отступы берутся из замеров скриптов
   (--hg-sticky-h — hub.js, --hg-m3-compact-h — m3-chrome.js), а не числом. */
@media (min-width:900px){.hg-store .hg-pdp-r440 .jp-gallery{top:var(--hg-sticky-h,135px)}}
@media (min-width:900px) and (max-width:1024px){
 .hg-store .hg-pdp-r440 .jp-gallery{transition:top .25s ease}
 .hg-store:has(.jp-header.hg-m3-compact) .hg-pdp-r440 .jp-gallery{top:calc(var(--hg-m3-compact-h,74px) + 12px)}
}
@media (prefers-reduced-motion:reduce){.hg-store .hg-pdp-r440 .jp-gallery{transition:none}}