/* Claude v3, исправления аудита телефона/планшета (work/v3/mobile/AUDIT.json), область B — карточка товара:
   блок покупки, нижняя панель покупки (claude-v1.js, раздел buybar), варианты, галерея (m3-pdp.js), уведомление о добавлении в корзину.
   Подключается последним (inc/mobile-v3.php, приоритет 999): перекрывает основные листы без !important; десктоп от 1280 px не меняется. */

/* ── M-02: панель покупки не закрывает последнюю строку подвала (© и 古物商許可) ──
   Пока панель действует (html.hg-has-buybar, ширина до 1024 px), низ страницы резервируется на её высоту поверх резерва дока;
   высоту пишет claude-v1.js (--hg-buybar-h, ResizeObserver). Фокус и якоря тоже не уходят под панель. */
html.hg-has-buybar body.hg-store{padding-bottom:calc(var(--hg-bottom-stack,0px) + var(--hg-buybar-h,80px))}
html.hg-has-buybar{scroll-padding-bottom:calc(var(--hg-bottom-stack,0px) + var(--hg-buybar-h,80px) + 12px)}

/* ── M-08: подписи панели и блока покупки ──
   Подпись цены в панели — до двух строк вместо многоточия; японский текст переносится только в точках смысла:
   U+200B в строке комплекта (inc/pdp-buy-v3.php) и <wbr> после частиц в кнопке (claude-v1.js), остальное держит keep-all. */
.hg-buybar__label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;text-overflow:clip;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
/* кнопка: hub.css (body.hg-store .jp-button) давал ей поля 25 px — на 360 «Ask about price & availability» шла в три строки */
body.hg-store .hg-buybar .jp-button{padding:10px 12px;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.hg-store .hg-buy__label{word-break:keep-all;overflow-wrap:anywhere}
/* у комплекта на телефоне статус «タイヤ・ホイール 各4本» уходит под цену: подпись цены получает всю ширину (было 3–4 строки по 79–108 px) */
@media (max-width:480px){
  .hg-store .hg-buy--pdp.hg-buy--set .hg-buy__head{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "price" "stock" "unit"}
  .hg-store .hg-buy--pdp.hg-buy--set .hg-buy__stock.hg-stock{justify-self:start;margin-top:8px}
}

/* ── M-20: главное фото — лента со свайпом (m3-pdp.js ставит .hg-gal-on на ссылку .jp-main-photo, у неё же имя перехода hg-pdp-photo).
   Кадр ленты занимает ту же коробку, что прежнее фото (без сдвига); полоса прокрутки скрыта, счётчик — в стиле подписи «写真を拡大». ── */
.hg-store .hg-pdp-r440 .jp-main-photo>.hg-gal-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hg-store .hg-pdp-r440 .jp-main-photo>.hg-gal-track::-webkit-scrollbar{display:none}
.hg-store .hg-pdp-r440 .hg-gal-track>img{flex:0 0 100%;width:100%;height:100%;max-height:none;object-fit:contain;scroll-snap-align:center;scroll-snap-stop:always;-webkit-user-drag:none;user-select:none}
.hg-store .hg-pdp-r440 .jp-main-photo>.hg-gal-count{position:absolute;top:auto;right:auto;bottom:10px;left:10px;z-index:1;padding:6px 10px;border-radius:5px;background:#fff;color:#222;font-size:12px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;pointer-events:none}

/* ── M-10 и M-17: плитки вариантов в три колонки при узкой правой колонке (900–1279 px, плитка 151 px, тело 94 px) ──
   M-10: плашка статуса «タイヤ・ホイール 各4本» (nowrap) выходила за рамку на 36 px. M-17: цена «¥52,880 税込» в теле 94 px
   переносилась только с запасными метриками шрифта (94,3 px) и сходилась в строку с веб-шрифтом (85,4 px) — плитка −21 px,
   блок покупки уезжал вверх на 24 px (CLS до 0,10). Теперь миниатюра стоит рядом с названием, а цена, основа цены и статус
   занимают всю ширину плитки: цена не переносится ни с каким шрифтом, основа цены всегда своей строкой, статус переносится внутри. */
@media (min-width:900px) and (max-width:1279px){
  .hg-store .hg-pdp-r440 .hg-variant-card:not(.is-inactive){grid-template-columns:32px minmax(0,1fr);row-gap:6px;align-items:start}
  .hg-store .hg-pdp-r440 .hg-variant-card:not(.is-inactive)>.hg-variant-body{display:contents}
  .hg-store .hg-pdp-r440 .hg-variant-card:not(.is-inactive) :is(.hg-variant-sku,.hg-variant-price,.hg-variant-status){grid-column:1/-1;min-width:0}
  .hg-store .hg-pdp-r440 .hg-variant-head{min-width:0}
  .hg-store .hg-pdp-r440 .hg-variant-total{white-space:nowrap}
  .hg-store .hg-pdp-r440 .hg-variant-basis{flex-basis:100%}
  .hg-store .hg-pdp-r440 .hg-variant-status{justify-self:start;max-width:100%;font-size:12px;text-wrap:pretty}
  html:lang(ja) .hg-store .hg-pdp-r440 .hg-variant-status:not(.hg-stock){word-break:auto-phrase}
  .hg-store .hg-pdp-r440 .hg-variant-status.hg-stock{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
  /* та же причина в доставке: «2個口・140サイズで計算 梱包後…確定します。 配送について» занимал 428 px с веб-шрифтом и 434 px с запасным
     в строке 432 px — ссылка уходила на вторую строку и возвращалась (блок покупки −20 px). Расчёт мест — своей строкой, пояснение со ссылкой — второй. */
  .hg-store .hg-buy--pdp .hg-buy-ship__note [data-hg-ship-plan]{flex-basis:100%}
}

/* ── M-16: строка «レビュー» вынесена из сетки .hg-pdp-below (parts/product.php) — зазор сверху как прежний row-gap сетки (32 / 28 px) ── */
.hg-store .hg-pdp-r440>.hg-pdp-review{margin-top:32px}
@media (max-width:899px){.hg-store .hg-pdp-r440>.hg-pdp-review{margin-top:28px}}
.jp-product-page[data-hg-switching]>.hg-pdp-review{pointer-events:none}

/* ── M-19: уведомление Woo после добавления в корзину (wc_print_notices в parts/product.php) ──
   Ссылка «カート» стояла ниже строки текста (Woo ставит её первой) и выглядела подписью; Woo сам фокусирует уведомление,
   и общее красное кольцо фокуса читалось как ошибка. Текст — слева, ссылка — второстепенной кнопкой справа по центру строки;
   у самого уведомления (tabindex=-1) — нейтральное кольцо, у кнопки остаётся обычное кольцо фокуса клавиатуры. Так же на десктопе:
   там тот же компонент с тем же дефектом (кнопка посередине строки, красное кольцо). */
.hg-store .hg-pdp-r440 :is(.woocommerce-message,.woocommerce-info,.woocommerce-error):focus{outline:2px solid var(--hg-muted);outline:2px solid color-mix(in srgb,var(--hg-ink) 26%,transparent);outline-offset:3px}
.hg-store .hg-pdp-r440 .woocommerce-message:has(>a.button){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 14px 12px 18px;border-radius:12px;line-height:1.6}
.hg-store .hg-pdp-r440 .woocommerce-message:has(>a.button)::after{content:none}
.hg-store .hg-pdp-r440 .woocommerce-message>a.button{order:2;display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;margin:0;padding:9px 18px;border:1px solid var(--hg-ink);border-radius:8px;background:var(--hg-white);color:var(--hg-ink);font-size:14px;font-weight:700;line-height:1.3;text-decoration:none;box-shadow:none}
@media (hover:hover){.hg-store .hg-pdp-r440 .woocommerce-message>a.button:hover{background:var(--hg-ink);color:var(--hg-paper)}}

/* ── M-40 (P3): на 360 шапка, панель и док вместе оставляли содержимому 533 из 780 px. Панель ниже на 10 px: поля 8 px и кнопка 48 px
   (замысел claude-v1.css; hub.css поднимал её до 54 px). Шапка — область C, док — общий; их не трогаем. ── */
@media (max-width:767px){
  .hg-buybar{padding-top:8px;padding-bottom:8px}
  body.hg-store .hg-buybar .jp-button{min-height:48px}
}

/* ── P3 только на карточке: M-29 цели касания, M-25 мелкий текст, M-26 висячие строки, M-38 обрезка RU. Десктоп от 1280 px не меняется. ── */
/* M-29: выбор префектуры 40 → 44 px; «すべての仕様» и «配送について» — зона касания 44 px без сдвига раскладки (отрицательные поля). */
@media (max-width:1279px){
  .hg-store .hg-buy-ship select{min-height:44px}
  .hg-store .hg-keyspecs__all{min-height:44px;margin-top:-4px;margin-bottom:-6px}
  .hg-store .hg-buy-ship__note a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px;margin:-12.7px 0}
}
/* кнопка «?» у характеристик на планшете 36 → 44 px (на телефоне 44 px уже в parameter-help.css); место в плитке прежнее — поля −4 px */
@media (min-width:681px) and (max-width:1279px){
  .hg-store .hg-pdp-r440 .hg-param-help>summary{width:44px;min-height:44px;margin:-4px}
}
/* M-25: вспомогательный текст карточки не меньше 12 px (было 10–11 px: состояние, налог и основа цены вариантов, примечание о протекторе;
   на телефоне варианты уже 12–13 px в claude-v1.css). */
@media (max-width:1279px){
  .hg-store .hg-pdp-r440 .jp-product-meta .jp-state,.hg-store .hg-pdp-r440 .hg-variant-total .gtyres-pack-tax{font-size:12px}
  .hg-store .hg-pdp-r440 .jp-condition .jp-muted{font-size:12.5px;line-height:1.7}
}
@media (min-width:768px) and (max-width:1279px){
  .hg-store .hg-pdp-r440 :is(.hg-variant-basis,.hg-variant-current,.hg-variant-status){font-size:12px}
  .hg-store .hg-pdp-r440 .hg-variant-status{max-width:100%}
  .hg-store .hg-pdp-r440 .hg-variant-status.hg-stock{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
}
@media (max-width:480px){.hg-store .hg-pdp-r440>.jp-breadcrumb{font-size:12px}}
/* M-26: японские абзацы карточки без висячего последнего знака («い。», «ん。»); строка состава — по смысловым частям. */
@media (max-width:1279px){
  .hg-store .hg-pdp-r440 :is(.jp-fitment-note,.jp-condition p,.hg-buy__fine,.hg-composition-rule,.hg-composition-type){text-wrap:pretty}
  /* перенос по фразам (Chromium; Safari переносит как раньше): иначе pretty не видит «せん。» висячим — для него это три отдельных знака */
  html:lang(ja) .hg-store .hg-pdp-r440 :is(.jp-fitment-note,.jp-condition p,.hg-composition-type){word-break:auto-phrase}
}
/* M-38: RU/EN на телефоне — список префектур на всю строку, оценка доставки под ним (было «Выберите преф…»). */
@media (max-width:480px){
  html:not(:lang(ja)) .hg-store .hg-buy-ship__row{grid-template-columns:minmax(0,1fr)}
  html:not(:lang(ja)) .hg-store .hg-buy-ship__price{justify-self:start}
}

/* ── M-14: на планшете (768–1024 px) кнопка покупки ниже первого экрана — та же панель внизу, по сетке страницы ── */
@media (min-width:768px) and (max-width:1024px){
  .hg-buybar{display:flex;gap:24px;padding:12px max(28px,calc((100vw - 968px) / 2))}
  .hg-buybar__price{flex:1 1 auto;max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
  .hg-buybar__label{font-size:14px}
  .hg-buybar__value{font-size:24px}
  body.hg-store .hg-buybar .jp-button{flex:0 1 380px;padding:12px 20px;font-size:15px}
}