/* UI-02-c: вид слотов маскота «реплика представительницы» (разметка и поведение — ENG-03 inc/mascot-slots.php, assets/mascot-slots.*).
   Цвета — токены hub.css, поэтому день/ночь без отдельных правил. Высота фигуры = h карты inc/mascot-map.php (sizes), на телефоне 3/4.
   Пара поз день/ночь (ENG-03c): какую картинку показать, решает mascot-slots.css C3 по html[data-theme=dark]. */
.hg-mascot{--hg-mascot-h:112px;--hg-mascot-scale:1;position:relative;display:flex;align-items:center;gap:14px;max-width:760px;margin:24px 0;color:var(--hg-ink)}
.hg-mascot--selector{--hg-mascot-h:96px}
.hg-mascot--search-empty,.hg-mascot--product-check,.hg-mascot--cart-quantity,.hg-mascot--cart-empty,.hg-mascot--checkout-after{--hg-mascot-h:140px}
.hg-mascot--home-welcome,.hg-mascot--company-intro,.hg-mascot--contact-prepare,.hg-mascot--notfound-page,.hg-mascot--delivery-ship,.hg-mascot--returns-first,.hg-mascot--support-contact{--hg-mascot-h:168px}
.hg-mascot .hg-mascot-figure{flex:none;margin:0;line-height:0}
/* Ширина — из width/height картинки (aspect-ratio до загрузки), фигура не обрезается и не сжимается. */
.hg-mascot .hg-mascot-figure img{width:auto;max-width:none;height:calc(var(--hg-mascot-h) * var(--hg-mascot-scale))}
/* display — отдельно и с низкой специфичностью (0,1,1): правила пары ENG-03c (0,2,0 днём, 0,3,1 ночью) скрывают лишнюю картинку поверх него. */
.hg-mascot-figure img{display:block}
.hg-mascot-bubble{position:relative;flex:1 1 auto;min-width:0;padding:14px 18px;border:1px solid var(--hg-line);border-radius:16px;background:var(--hg-white);box-shadow:0 8px 24px #171b220d}
.hg-mascot-figure+.hg-mascot-bubble::before{content:"";position:absolute;top:calc(50% - 6px);left:-7px;width:12px;height:12px;border-bottom:1px solid var(--hg-line);border-left:1px solid var(--hg-line);background:inherit;transform:rotate(45deg)}
.hg-mascot .hg-mascot-text{margin:0;font-size:15px;line-height:1.75;color:var(--hg-ink);overflow-wrap:anywhere}
.hg-mascot .hg-mascot-action{display:inline-flex;align-items:center;min-height:32px;margin-top:2px;color:var(--hg-red);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hg-mascot .hg-mascot-action:hover{color:var(--hg-red-hover)}
.hg-mascot .hg-mascot-action:focus-visible,.hg-mascot .hg-mascot-dismiss:focus-visible{outline:2px solid var(--hg-red);outline-offset:2px}
/* UI-03f: японский перенос по фразе (word-break:auto-phrase, Chromium) — последний иероглиф подписи действия и слог вроде 「い。」
   не остаются одни на строке; text-wrap:pretty добирает короткий хвост. Текст пузыря переносится по фразам, только если колонка
   не уже 150px (около 11 знаков): в более узкой фразы дают строки по 2–3 знака, там прежний перенос. container-type не меняет
   ширину пузыря (flex:1 1 auto заполняет место). Ширина, фигура и тексты прежние; без поддержки (Safari) неизвестное объявление
   отбрасывается — прежний перенос; overflow-wrap:anywhere не даёт фразе выйти за пузырь. */
html:lang(ja) .hg-mascot-bubble{container-type:inline-size}
html:lang(ja) .hg-mascot .hg-mascot-text{text-wrap:pretty}
@container (min-width:150px){html:lang(ja) .hg-mascot .hg-mascot-text{word-break:auto-phrase}}
html:lang(ja) .hg-mascot .hg-mascot-action{word-break:auto-phrase;overflow-wrap:anywhere}
/* UI-03m: на узком экране широкая фигура (ночные позы 320×482, дневная care 320×345; у home/welcome ещё поле кнопки закрытия) оставляла тексту
   меньше 150px — перенос по фразам выключался и слова рвались (JA 320 dark: 「ようこ/そ」, 「ホイー/ル」). Пузырь рядом с фигурой не уже порога:
   150 + поля 14+14 (с кнопкой закрытия 14+48) + рамка 2. Не хватает места — уменьшается фигура: пропорции держит object-fit, высота места прежняя.
   Если места хватает, ширины прежние: пузырь и так забирает остаток (flex-grow). */
@media (max-width:680px){
  html:lang(ja) .hg-mascot .hg-mascot-figure{flex:0 1 auto;min-width:0}
  html:lang(ja) .hg-mascot .hg-mascot-figure img{max-width:100%;object-fit:contain;object-position:50% 100%}
  html:lang(ja) .hg-mascot-figure+.hg-mascot-bubble{flex:1 1 180px;min-width:180px}
  html:lang(ja) .hg-mascot[data-hg-mascot-dismiss] .hg-mascot-figure+.hg-mascot-bubble{flex-basis:214px;min-width:214px}
}
/* Закрытие: 44×44 в правом поле пузыря (пузырь растянут до края слота). */
.hg-mascot[data-hg-mascot-dismiss] .hg-mascot-bubble{padding-right:52px}
.hg-mascot .hg-mascot-dismiss{position:absolute;top:calc(50% - 22px);right:4px;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--hg-muted);font-size:22px;line-height:1;cursor:pointer}
.hg-mascot .hg-mascot-dismiss:hover{background:var(--hg-soft);color:var(--hg-ink)}
/* Реплика без фигуры (рядом уже есть иллюстрация или блок): тихая заметка с акцентом. */
.hg-mascot:not(:has(.hg-mascot-figure)) .hg-mascot-bubble{border:0;border-left:3px solid var(--hg-red);border-radius:4px 12px 12px 4px;background:var(--hg-soft);box-shadow:none}
[data-theme=dark] .hg-mascot-bubble{box-shadow:none}

/* Места */
.hg-mascot-wrap>.hg-mascot{margin:32px auto 8px}
.hg-care-copy .hg-mascot{margin:20px 0 0}
.hg-mascot--selector{gap:10px;margin:10px 0 14px}
.hg-mascot--selector .hg-mascot-bubble{padding:10px 14px}
.hg-mascot--selector .hg-mascot-text{font-size:14px}
.jp-page-heading+.hg-mascot,.jp-editorial>.hg-mascot{margin:8px 0 28px}
.jp-empty+.hg-mascot{margin:20px auto 8px}
.jp-product-summary .hg-mascot{max-width:none;margin:20px 0}
.jp-product-information .hg-mascot{margin:4px 0 16px}
.hg-auth-story .hg-mascot{margin:12px 0}
.hg-notfound .hg-mascot{margin:8px 0 32px}
.hg-notfound-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0 0 48px}
/* UI-02-h (R73 09): пустая корзина — woocommerce/cart/cart-empty.php. Как 404: заголовок, действие, реплика; ниже пять категорий.
   Цвет заголовка задан явно: h5 Ecomus в тёмной теме был тёмным на тёмном. */
.hg-cart-empty{max-width:760px;margin:8px 0 72px;color:var(--hg-ink)}
.hg-store .hg-cart-empty-title{margin:0 0 10px;font-size:clamp(24px,2.4vw,32px);line-height:1.4;color:var(--hg-ink)}
.hg-cart-empty-text{margin:0 0 22px;font-size:15px;line-height:1.85;color:var(--hg-muted)}
.hg-cart-empty-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.hg-cart-empty .hg-mascot{margin:28px 0 32px}
.hg-store .hg-cart-empty-categories h3{margin:0 0 12px;font-size:16px;line-height:1.5;color:var(--hg-ink)}
.hg-cart-empty-categories ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.hg-cart-empty-categories a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--hg-line);border-radius:999px;background:var(--hg-white);color:var(--hg-ink);font-size:14px;font-weight:600;text-decoration:none}
.hg-cart-empty-categories a:hover{border-color:var(--hg-red);color:var(--hg-red)}
.hg-cart-empty-categories svg{width:18px;height:18px;flex:none}
.hg-cart-empty a:focus-visible{outline:2px solid var(--hg-red);outline-offset:3px}
/* UI-02-h (R73 01): фигура блока «Связаться с магазином» обращена к тексту. Сторону выбирает реестр поз (hg_c1_mascot_figure):
   faces=right — слева от текста (--figure-start), faces=left — справа (--figure-end, раскладка hub.css). Без позы — текст на всю ширину. */
.hg-contact-r60 .hg-contact-welcome.hg-contact-welcome--figure-start{grid-template-columns:136px minmax(0,1fr)}
.hg-contact-r60 .hg-contact-welcome:not(:has(.hg-contact-welcome-mascot)){grid-template-columns:minmax(0,1fr)}
.hg-contact-r60 .hg-contact-welcome-mascot img{display:block;width:100%;max-width:136px;height:auto}

@media (max-width:1100px) and (min-width:901px){
  .hg-contact-r60 .hg-contact-welcome.hg-contact-welcome--figure-start{grid-template-columns:112px minmax(0,1fr)}
  .hg-contact-r60 .hg-contact-welcome--figure-start .hg-contact-welcome-mascot{justify-self:start}
  .hg-contact-r60 .hg-contact-welcome-mascot img{max-width:112px}
}
@media (max-width:480px){
  .hg-contact-r60 .hg-contact-welcome.hg-contact-welcome--figure-start{grid-template-columns:90px minmax(0,1fr)}
  .hg-contact-r60 .hg-contact-welcome-mascot img{max-width:90px}
}
@media (max-width:680px){
  .hg-mascot{--hg-mascot-scale:.75;gap:10px;margin:20px 0}
  .hg-mascot-bubble{padding:12px 14px}
  .hg-mascot .hg-mascot-text{font-size:14px;line-height:1.7}
  .hg-mascot .hg-mascot-action{min-height:44px}
  .hg-mascot[data-hg-mascot-dismiss] .hg-mascot-bubble{padding-right:48px}
  .hg-mascot .hg-mascot-dismiss{right:2px}
  .hg-cart-empty{margin-bottom:56px}
  .hg-cart-empty-categories a{font-size:13px;padding:8px 14px}
}
/* Декоративное появление пузыря; .hg-mascot--static и reduced motion гасит mascot-slots.css. */
@media (prefers-reduced-motion:no-preference){
  .hg-mascot:not(.hg-mascot--static) .hg-mascot-bubble{animation:hg-mascot-in .32s var(--hg-ease,ease-out) both}
}
@keyframes hg-mascot-in{from{opacity:0;transform:translateY(6px)}}
/* UI-03-a: появление при входе в окно (assets/hg-reveal.js; Motion Primitives InView + AnimatedGroup, MIT) — только opacity/transform.
   Секция главной поднимается целиком; у реплики по очереди фигура, пузырь и кнопка. Классы ставит только скрипт: без JS и при reduced-motion их нет. */
@media (prefers-reduced-motion:no-preference){
  .is-hg-waiting{opacity:0;transform:translateY(16px)}
  .is-hg-shown{animation:hg-reveal .6s cubic-bezier(.2,.7,.2,1) backwards}
  .hg-mascot.is-hg-waiting{opacity:1;transform:none}
  .hg-mascot.is-hg-waiting :is(.hg-mascot-figure,.hg-mascot-bubble){opacity:0;animation:none}
  .hg-mascot.is-hg-shown{animation:none}
  .hg-mascot.is-hg-shown .hg-mascot-figure{animation:hg-mascot-in .5s cubic-bezier(.2,.7,.2,1) both}
  .hg-mascot.is-hg-shown .hg-mascot-bubble{animation:hg-mascot-in .5s .12s cubic-bezier(.2,.7,.2,1) both}
  .hg-mascot.is-hg-shown .hg-mascot-action{animation:hg-mascot-in .45s .3s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes hg-reveal{from{opacity:0;transform:translateY(16px)}}
@media print{.hg-mascot{display:none}}

/* R90: только contact pair; общий contact img display:block не раскрывает обе темы. */
.hg-contact-r60 .hg-contact-welcome-mascot img[data-hg-mascot-theme="night"],html[data-theme=dark] .hg-contact-r60 .hg-contact-welcome-mascot img[data-hg-mascot-theme="day"]{display:none}
html[data-theme=dark] .hg-contact-r60 .hg-contact-welcome-mascot img[data-hg-mascot-theme="night"]{display:block}