/* ================= Первый экран главных /gsm и /games + быстрые фильтры + бейджи (hero.php). Подключается только при body.fx-hero-on ================= */
html { scroll-behavior: smooth; }
#fx-showcase { scroll-margin-top: 16px; }

/* ---------- Переключатель GSM | GAMES в шапке (вместо значка «выбор раздела») ---------- */
body.fx-hero-on .site-header .fantom-header-actions .fantom-sections { display: none !important; }
.fx-side-tabs {
  order: -1; display: inline-flex; align-items: center; gap: 2px; padding: 3px; margin-right: 4px; flex: 0 0 auto;
  border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12);
}
html body .fx-side-tabs a {
  padding: 7px 13px; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .6px; line-height: 1.2;
  color: #c9d1db !important; text-decoration: none !important; transition: color .2s, background .2s; white-space: nowrap;
}
html body .fx-side-tabs a:hover { color: #fff !important; }
html body .fx-side-tabs a.is-on { background: linear-gradient(135deg, var(--blue), var(--blue-2, var(--blue))); color: var(--on-accent, #fff) !important; }
@media (max-width: 1249px) { /* шапка в 2 строки (style.css): переключатель — первым во второй строке */
  html body.fx-hero-on .site-header .fx-side-tabs { order: 4; margin: 0; }
  html body.fx-hero-on .site-header .fantom-header-actions .fantom-icon { order: 5; }
  html body.fx-hero-on .site-header .main-navigation { order: 6; }
}
@media (max-width: 480px) { /* на телефоне у «Меню» только значок — чтобы всё влезло в строку */
  html body.fx-hero-on .site-header .menu-toggle { padding: 0 !important; width: 40px; justify-content: center; }
  html body.fx-hero-on .site-header .menu-toggle span { font-size: 0; }
  html body.fx-hero-on .site-header .menu-toggle::before, html body.fx-hero-on .site-header .menu-toggle::after,
  html body.fx-hero-on .site-header .menu-toggle span::before { left: 12px !important; }
  html body .fx-side-tabs a { padding: 7px 10px; font-size: 12px; }
}

/* ---------- Герой ---------- */
.fx-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 32px; padding: 26px 0 14px; }
html body .fx-hero__title {
  font-family: var(--font-head); font-weight: 800; font-size: 58px; line-height: 1.04; letter-spacing: 1px; margin: 0 0 14px; color: var(--text);
}
.fx-hero__title span {
  color: var(--accent-text, var(--blue));
  text-shadow: 0 0 18px color-mix(in srgb, var(--blue) 65%, transparent), 0 0 46px color-mix(in srgb, var(--blue) 40%, transparent);
}
html body .fx-hero__sub { font-size: 20px; line-height: 1.5; color: var(--dim); margin: 0 0 22px; max-width: 540px; }
.fx-hero__points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.fx-hero__points li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--text); margin: 0; }
.fx-hero__points i {
  flex: 0 0 36px; height: 36px; display: grid; place-items: center; font-style: normal; font-size: 18px; border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 14%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
}
.fx-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
html body .fx-hero__cta .button { padding: 14px 26px !important; border-radius: 12px !important; font-weight: 700; }
html body:not(.look-buttons) #content .fx-hero__cta .button.fx-hero__tg {
  background: transparent !important; background-image: none !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: none !important;
}
html body:not(.look-buttons) #content .fx-hero__cta .button.fx-hero__tg:hover { border-color: var(--blue) !important; }
.fx-hero__visual { position: relative; }
.fx-hero__text { position: relative; }
html body.look-buttons #content .fx-hero__cta .button.fx-hero__tg { color: var(--text) !important; }
.fx-hero__visual .fantom-hero__art { height: 380px; }
.fx-promo {
  position: absolute; right: 0; bottom: 6px; z-index: 3; width: 300px; display: flex; align-items: center; gap: 12px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.28);
  text-decoration: none !important; transition: border-color .2s, transform .2s;
}
.fx-promo:hover { border-color: var(--blue); transform: translateY(-2px); }
.fx-promo > img { flex: 0 0 68px; width: 68px; height: 68px; object-fit: cover; border-radius: 10px; margin: 0 !important; }
.fx-promo__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-promo__tag { font-size: 12px; font-weight: 700; color: var(--dim); }
html body #content .fx-promo, html body #content .fx-promo__name { color: var(--text) !important; }
.fx-promo__name { font-size: 15px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html body #content .fx-promo__price, html body #content .fx-promo__price .amount { font-size: 14px; font-weight: 700; color: var(--accent-text, var(--blue)) !important; }
.fx-promo__price del, .fx-promo__price .fw-disc-tag { display: none; }

/* эмодзи WordPress — картинки <img class="emoji">: правила карточек делали их блоками на всю ширину */
html body ul.products li.product .fx-badges img.emoji, html body ul.products li.product .fx-rf img.emoji, html body .fx-promo img.emoji, html body .fx-hero img.emoji {
  display: inline !important; width: 1em !important; height: 1em !important; margin: 0 .25em 0 0 !important; padding: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; vertical-align: -.1em !important; flex: none !important;
}
html body .fx-hero__points i img.emoji { margin: 0 !important; }

/* ---------- Быстрые фильтры разделов ---------- */
.fx-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 26px; }
html body #content .fx-quick a {
  flex: 0 0 auto; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; white-space: nowrap; transition: border-color .2s, color .2s;
}
html body #content .fx-quick a:hover { border-color: var(--blue); color: var(--accent-text, var(--blue)) !important; }

/* ---------- «О сервисе» внизу (прежний текст страницы) ---------- */
.fx-about { margin: 46px 0 10px; padding: 26px 30px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.fx-about__label {
  display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: 13px;
  letter-spacing: .8px; text-transform: uppercase; color: var(--accent-text, var(--blue)); background: color-mix(in srgb, var(--blue) 14%, transparent);
}
.fx-about__text { columns: 2; column-gap: 40px; }
html body .fx-about__text p { font-size: 15px; line-height: 1.65; color: var(--dim); margin: 0 0 12px; max-width: none; break-inside: avoid; }
html body .fx-about__text p strong { color: var(--text); }

/* ---------- Каталог: бейджи на обложке, «Аренда / Навсегда» ---------- */
ul.products li.product { position: relative; }
.fx-badges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.fx-badges span { white-space: nowrap; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1.3; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.fx-badges .is-sale { background: #e0312b; } .fx-badges .is-coop { background: #6d28d9; } .fx-badges .is-new { background: #0a9d45; }
.fx-rf { display: flex; gap: 6px; margin: 8px 0 0; }
.fx-rf > span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 5px 4px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--dim); }
html body .fx-rf b, html body .fx-rf b .amount { font-size: 14px; color: var(--accent-text, var(--blue)) !important; white-space: nowrap; }

/* ---------- «Быстрый возврат» — компактная плашка с кнопкой «Подробнее» (hero.js) ---------- */
.fgs-rent-loyal.fx-loyal { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px 14px; max-height: 70px; overflow: hidden; border-radius: 12px; margin-bottom: 16px; }
.fx-loyal > span { display: none; }
.fx-loyal b { font-size: 15px; }
.fx-loyal em { flex: 1; min-width: 0; font-style: normal; font-size: 14px; line-height: 1.3; opacity: .95; }
.fx-loyal button {
  flex: 0 0 auto; margin-left: auto; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35);
}
.fx-loyal.is-open { flex-wrap: wrap; max-height: none; }
.fx-loyal.is-open > span { display: block; flex: 0 0 100%; order: 5; }
.fx-loyal.is-open em { display: none; }
.fx-loyal em .fx-s { display: none; }

/* ---------- Планшет ---------- */
@media (max-width: 1023px) {
  .fx-hero { gap: 18px; }
  html body .fx-hero__title { font-size: 44px; }
  html body .fx-hero__sub { font-size: 17px; }
  .fx-hero__visual .fantom-hero__art { height: 300px; }
  .fx-promo { position: static; margin: 0 auto; width: 100%; max-width: 320px; }
}
/* ---------- Телефон: заголовок + подзаголовок рядом с маленьким призраком, товары видны без прокрутки ---------- */
@media (max-width: 767px) {
  .fx-hero { grid-template-columns: minmax(0, 1fr) 104px; gap: 10px; padding: 14px 0 8px; text-align: left; }
  html body .fx-hero__title { font-size: 30px; margin: 0 0 6px; }
  html body .fx-hero__sub { font-size: 14px; line-height: 1.4; margin: 0; }
  .fx-hero__points, .fx-hero__cta, .fx-promo { display: none !important; }
  .fx-hero__visual { width: 104px; height: 104px; }
  .fx-hero__visual .fantom-hero__art { position: absolute; top: 0; left: 0; width: 300px; height: 300px; transform: scale(.347); transform-origin: 0 0; }
  .fx-quick { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 6px 0 14px; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fx-quick::-webkit-scrollbar { display: none; }
  html body #content .fx-quick a { padding: 8px 14px; font-size: 13px; }
  html body.fx-hero-on .fantom-home-products-title { font-size: 20px; margin: 0 0 12px; }
  .fx-about { padding: 18px 16px; margin-top: 30px; }
  .fx-about__text { columns: 1; }
  .fx-badges { top: 6px; left: 6px; } .fx-badges span { font-size: 11px; padding: 2px 6px; }
  .fx-rf { flex-direction: column; gap: 4px; }
  .fx-rf > span { flex-direction: row; justify-content: space-between; padding: 4px 8px; }
  .fx-loyal:not(.is-open) b, .fx-loyal em .fx-l { display: none; }
  .fx-loyal em .fx-s { display: inline; }
  .fx-loyal em { font-size: 13px; font-weight: 600; }
}
/* ноутбуки 1250–1439: полная шапка плотная (style.css) — переключатель компактнее, чтобы корзина GAMES не уезжала */
@media (min-width: 1250px) and (max-width: 1439px) {
  .fx-side-tabs { margin-right: 0; }
  html body .fx-side-tabs a { padding: 6px 8px; font-size: 12px; letter-spacing: .3px; }
}

/* ===== Плавное переключение GSM ↔ GAMES (2026-10-05) =====
   Переход между страницами браузера (View Transitions): только при клике по переключателю в шапке (hero.js гасит остальные).
   Подсвеченная кнопка GSM/GAMES «переезжает» на новое место, остальная страница плавно перетекает. Старые браузеры — обычный переход. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: ease; }
html body .fx-side-tabs a.is-on { view-transition-name: fx-side-pill; }
::view-transition-group(fx-side-pill) { animation-duration: .4s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
/* Корзина GAMES — справа от «Мой аккаунт» (как было). Чтобы общие кнопки (стороны, поиск, язык, тема, «Мой аккаунт»)
   стояли на GSM и GAMES в одних местах и не прыгали при переключении, на GSM на месте корзины — пустое место той же ширины. */
@media (min-width: 1250px) {
  html body.mode-gsm .site-header .fantom-header-actions::after { content: ""; flex: 0 0 42px; height: 1px; order: 99; }
}
@media (min-width: 1250px) and (max-width: 1439px) {
  html body.mode-gsm .site-header .fantom-header-actions::after { flex-basis: 36px; }
}