/* Страница модели. Оформление повторяет страницу производителя:
   Montserrat, всё по центру, единый фон-фотография под всем контентом,
   тонкие разделители, характеристики и комплект в три колонки,
   технологии — три подписи с раскрытием по «+».
   Шапка — как на главной: фиксированная, прозрачная поверх фона. */

.m-page{
  font-family:'Montserrat','Heebo',ui-sans-serif,system-ui,sans-serif;
  color:#fff;
}

/* ——— шапка как на главной ——— */
/* justify-content:flex-start (не space-between) + margin-inline-end:auto
   на .mnav-logo ниже: правый кластер (язык, ЛК, корзина, бургер) держится
   одним общим gap, без «рваных» промежутков между иконками (жалоба
   владельца, 10.09.2026: «язык слишком далеко от бургера» — там же, где
   у .lang-switch/.fme-acc/.fme-cart был свой лишний margin поверх gap). */
.mnav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:flex-start;
  gap:20px; padding:20px 6vw;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
/* Меню прозрачное всегда — плашки при прокрутке нет, читаемость держит тень текста. */
.mnav.is-solid{background:transparent; border-bottom-color:transparent}
.mnav a,.mnav .lang-toggle{text-shadow:0 1px 14px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)}
.mnav-logo{
  font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:.9;
  text-decoration:none; color:#fff; margin-inline-end:auto;
}
.mnav-links{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.mnav-links a{
  font-size:15px; letter-spacing:.02em; text-transform:uppercase;
  color:#fff; opacity:.75; text-decoration:none; transition:opacity .18s var(--ease);
}
.mnav-links a:hover{opacity:1}
.mnav-links a.nav-cta{
  /* font-size был пропущен — «Конструктор» наследовал 15px от .mnav-links a,
     а на остальных страницах (pages/site.js) у CTA явно задан 16px
     (жалоба владельца, 10.09.2026: «элементы меню в шапке должны быть
     одинаковы»). */
  font-size:16px;
  padding:9px 20px; border:1px solid rgba(201,168,76,.55);
  border-radius:var(--radius-pill); color:var(--color-accent);
  opacity:1; font-weight:700;
  transition:background .22s var(--ease), border-color .22s var(--ease);
}
.mnav-links a.nav-cta:hover{background:rgba(201,168,76,.14); border-color:var(--color-accent)}
.mnav-burger{
  /* Виден на любой ширине, не только на телефоне (просьба владельца,
     10.09.2026: «все пункты меню должны быть в бургере как на мобильной
     версии») — единственное меню и на десктопе тоже. flex-shrink:0 —
     без него на узких телефонах бургер (как и .fme-acc/.fme-cart) схлопывался
     до 0 и уезжал за край экрана, когда весь правый кластер иконок не
     помещался в строку (жалоба владельца, 10.09.2026: «бургера и корзины
     нет в каталоге»). */
  display:block; width:28px; height:20px; position:relative; flex-shrink:0;
  background:none; border:0; padding:0; cursor:pointer; z-index:110;
}
.mnav-burger span{position:absolute; left:0; right:0; height:1px; background:#fff;
  transition:transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease)}
.mnav-burger span:nth-child(1){top:0}
.mnav-burger span:nth-child(2){top:9px}
.mnav-burger span:nth-child(3){top:18px}
.mnav-burger.is-open span:nth-child(1){top:9px; transform:rotate(45deg)}
.mnav-burger.is-open span:nth-child(2){opacity:0}
.mnav-burger.is-open span:nth-child(3){top:9px; transform:rotate(-45deg)}
/* Боковая панель, не во весь экран (просьба владельца 10.09.2026) —
   съезжает со стороны бургера (эти внутренние страницы всегда LTR,
   direction:ltr задан ниже, поэтому бургер и панель всегда справа). */
.mnav-backdrop{
  position:fixed; inset:0; z-index:98;
  background:rgba(8,6,4,.5);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.mnav-backdrop.is-open{opacity:1; visibility:visible}
.mnav-panel{
  position:fixed; top:0; bottom:0; right:0; z-index:99;
  width:min(360px,86vw);
  display:flex; flex-direction:column; gap:20px;
  padding:96px 32px 40px; background:rgba(10,8,8,.97); backdrop-filter:blur(8px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:-12px 0 48px rgba(0,0,0,.35);
  transform:translateX(100%);
  transition:transform .35s var(--ease);
}
.mnav-panel.is-open{transform:translateX(0)}
.mnav-close{
  position:absolute; top:20px; right:20px; width:34px; height:34px;
  border-radius:50%; border:1px solid rgba(255,255,255,.22); background:none;
  color:#fff; font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mnav-close:hover{border-color:currentColor}
.mnav-panel a{font-size:16px; text-transform:uppercase; color:#fff; text-decoration:none; opacity:.85}
.mnav-panel a.nav-cta{
  align-self:flex-start; padding:10px 22px; border:1px solid rgba(201,168,76,.55);
  border-radius:var(--radius-pill); color:var(--color-accent); font-weight:700; opacity:1;
}

/* На иврите шапка не переворачивается: логотип слева, меню и язык
   справа — как на главной. Меняется только язык надписей. */
[dir="rtl"] .mnav, [dir="rtl"] .mnav-panel { direction: ltr; }
[dir="rtl"] .mnav-panel a { text-align: left; }

/* Выпадающий пункт «ПРАВИЛА» (юридические/сервисные страницы) — как на
   главной и на остальных внутренних страницах (просьба владельца,
   10.09.2026). */
.mnav-drop{position:relative}
.mnav-drop-btn{font:inherit; letter-spacing:inherit; text-transform:inherit; background:none;
  border:0; padding:0; margin:0; color:inherit; opacity:.75; cursor:pointer; display:inline-flex;
  align-items:center; gap:5px; transition:opacity .18s var(--ease)}
.mnav-drop-btn:hover,.mnav-drop.is-open .mnav-drop-btn{opacity:1}
.mnav-drop-btn svg{width:9px; height:9px; transition:transform .2s var(--ease)}
.mnav-drop.is-open .mnav-drop-btn svg{transform:rotate(180deg)}
.mnav-drop-panel{position:absolute; top:100%; inset-inline-start:0; transform:translate(0,4px);
  margin-top:14px; min-width:220px; padding:10px; border-radius:14px; background:rgba(10,8,8,.97);
  border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;}
.mnav-drop:hover .mnav-drop-panel,.mnav-drop.is-open .mnav-drop-panel{opacity:1; visibility:visible;
  pointer-events:auto; transform:translate(0,0)}
.mnav-drop-panel a{display:block; padding:8px 12px; font-size:13px; text-transform:none;
  letter-spacing:normal; border-radius:8px; text-shadow:none!important; white-space:nowrap;
  color:#fff; opacity:.8}
.mnav-drop-panel a:hover{opacity:1; background:rgba(255,255,255,.06)}
.mnav-panel-toggle{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  background:none; border:0; font:inherit; letter-spacing:.08em; text-transform:uppercase; font-size:12px;
  color:#fff; opacity:.45; cursor:pointer; margin:6px 0 0; padding:14px 0 0;
  border-top:1px solid rgba(255,255,255,.12); transition:opacity .18s var(--ease)}
.mnav-panel-toggle:hover,.mnav-panel-toggle[aria-expanded="true"]{opacity:.75}
.mnav-panel-toggle svg{width:9px; height:9px; flex:none; transition:transform .2s var(--ease); opacity:.8}
.mnav-panel-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Свёрнуто по умолчанию — раскрывается по клику (просьба владельца, 10.09.2026:
   «ПРАВИЛА И ИНФОРМАЦИЯ в меню бургера должна открываться по клику. По умолчанию свёрнуто»). */
.mnav-panel-sub-wrap{display:none; flex-direction:column; gap:14px; padding-top:2px}
.mnav-panel-sub-wrap.is-open{display:flex}
.mnav-panel a.sub{font-size:14px; opacity:.65; padding-inline-start:14px}

/* Переключатель языка — тот же, что на главной: пилюля с глобусом и
   выпадающее меню. Разметку строит lang-switch.js. */
.lang-switch{position:relative; margin-inline-start:18px}
.lang-toggle{
  display:flex; align-items:center; gap:7px; background:none; cursor:pointer;
  border:1px solid rgba(240,237,232,.22); border-radius:999px; padding:7px 12px;
  font:inherit; font-size:12px; letter-spacing:.08em; color:inherit; opacity:.8;
  transition:opacity .25s, border-color .25s;
}
.lang-toggle:hover,.lang-switch.is-open .lang-toggle{opacity:1; border-color:currentColor}
.lang-toggle svg{width:16px; height:16px; flex:0 0 auto}
.lang-toggle .chev{width:12px; height:12px; transition:transform .25s}
.lang-switch.is-open .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; min-width:150px; z-index:60;
  background:#151009; border:1px solid rgba(240,237,232,.14); border-radius:12px;
  padding:6px; box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.lang-switch.is-open .lang-menu{opacity:1; visibility:visible; transform:none}
.lang-menu button{
  display:block; width:100%; text-align:start; background:none; border:0;
  border-radius:8px; padding:9px 12px; font:inherit; font-size:13px;
  color:inherit; opacity:.72; cursor:pointer; transition:background .2s, opacity .2s;
}
.lang-menu button:hover{background:rgba(240,237,232,.08); opacity:1}
.lang-menu button.on{opacity:1; color:var(--color-accent)}

/* Приписка Israel в логотипе — одинаковая во всех шапках сайта. */
.mnav-logo-il{margin-inline-start:.32em; color:var(--color-accent); font-weight:400; letter-spacing:.02em}

/* ——— герой ——— */
.m-hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; text-align:center; overflow:hidden;
  padding:0 24px;
}
.m-hero-bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 52%}
/* X2/X3/X4 — обычная предметная фотография во весь экран смотрится
   непропорционально крупной; показываем её мельче, поле вокруг —
   сплошной фирменный цвет модели (BG_FALLBACK, задан прямо на
   .m-hero-bg через style.background). Сама фотография — отдельный слой
   m-hero-bg-photo (см. ниже): это вырезанный PNG/WebP с альфа-каналом
   (без белой подложки исходного кадра), поэтому просто лежит сверху без
   blend-mode — раньше здесь стоял mix-blend-mode:multiply, который заодно
   темнил сам продукт до черноты на тёмной подложке. */
.m-hero-bg-photo{
  position:absolute; inset:0; background-size:34%; background-repeat:no-repeat;
  background-position:center;
}
/* Промо-фото брендов местами очень светлые — белые заголовок и меню на них
   пропадали. Затемняющая вуаль сверху и снизу, середина остаётся чистой. */
.m-hero-bg.is-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(8,7,6,.55) 0%,rgba(8,7,6,.12) 34%,
    rgba(8,7,6,.10) 58%,rgba(8,7,6,.6) 88%,rgba(10,8,8,.92) 100%);
}
.m-hero-in{
  position:relative; z-index:1; flex:1; width:100%; max-width:1170px; margin:0 auto;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  padding:132px 0 0;
}
.m-hero-top{width:100%}
.m-brand{
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin:0 0 10px; font-weight:500;
}
.m-name{
  font-size:clamp(52px,9vw,92px); font-weight:600; line-height:1.05;
  margin:0; color:#fff; text-align:center;
}
/* Полное имя модели (Neon 4, Krypton 5) под коротким индексом. */
.m-sub{
  font-size:clamp(16px,2vw,20px); font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.9);
  text-shadow:0 2px 18px rgba(0,0,0,.75);
  margin:10px 0 0; text-align:center; unicode-bidi:plaintext;
}
.m-stats{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(24px,6vw,80px); flex-wrap:wrap;
  width:100%; margin:0; padding:0 0 56px;
}
.m-stat b{display:block; font-size:30px; font-weight:600; line-height:1.25; color:#fff}
.m-stat span{display:block; font-size:20px; font-weight:400; color:rgba(255,255,255,.86); margin-top:2px}
.m-price b{color:var(--color-accent)}


/* ——— контент на общем фоне ——— */
.m-body{position:relative; overflow:hidden}
.m-body-bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center}
.m-body-bg::after{
  content:''; position:absolute; inset:0;
  /* У производителя фон синий до самого низа; тёмный хвост нужен только
     на последних процентах, чтобы страница сошлась с чёрным подвалом. */
  background:linear-gradient(to bottom,rgba(10,20,34,.26) 0%,rgba(10,20,34,.34) 82%,rgba(10,8,8,.55) 96%,rgba(10,8,8,.9) 100%);
}
/* Фон под текстом у 64 Audio — мягкий градиент производителя. У остальных
   брендов там продуктовое фото, поэтому затемняем заметно сильнее. */
/* Фото контента у остальных брендов уже собраны на тёмном фоне
   (assets/models/<бренд>/<модель>/info.avif) — вуаль умеренная. */
.m-body-bg.is-photo::after{
  background:linear-gradient(to bottom,rgba(8,7,6,.5) 0%,rgba(8,7,6,.58) 82%,rgba(10,8,8,.8) 96%,rgba(10,8,8,1) 100%);
}
.m-in{position:relative; z-index:1; max-width:1170px; margin:0 auto; padding:0 24px}

.m-lead{
  font-size:18px; font-weight:400; line-height:1.6; text-align:center;
  max-width:1000px; margin:0 auto; padding:78px 0 74px; color:#fff;
}
.m-rule{height:1px; background:rgba(255,255,255,.22); border:0; margin:0}
.m-sec{padding:64px 0 76px; text-align:center}
.m-h{font-size:clamp(30px,3.4vw,42px); font-weight:600; line-height:1.2; margin:0 0 40px; color:#fff}

/* Перечисления идут плотной группой: строки внутри пункта и сами
   пункты близко друг к другу, иначе список рассыпается по экрану
   и читается как отдельные фразы, а не как один перечень. */
.m-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:18px 28px}
.m-cols .m-cell{font-size:17px; font-weight:500; line-height:1.35; color:#fff}
.m-cell i{font-style:normal; opacity:.9; display:block; line-height:1.35}
.m-cell b{display:block; font-weight:600}

.m-made{margin-top:52px}
.m-made img{width:120px; margin:0 auto; opacity:.92}
.m-made p{font-size:13px; font-weight:400; color:rgba(255,255,255,.78); margin:14px auto 0; max-width:840px; line-height:1.5}

/* ——— технологии ——— */
.m-tech{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 24px}
.m-tech details{text-align:center}
.m-tech summary{
  list-style:none; cursor:pointer; display:block;
  font-size:30px; font-weight:700; letter-spacing:-.01em; color:#fff;
}
.m-tech summary::-webkit-details-marker{display:none}
.m-tech summary::after{
  content:'+'; display:block; margin-top:10px;
  font-size:20px; font-weight:400; color:rgba(255,255,255,.85);
  transition:transform .25s var(--ease);
}
.m-tech details[open] summary::after{transform:rotate(45deg)}
.m-tech .m-tech-body{
  font-size:15px; font-weight:400; line-height:1.6;
  color:rgba(255,255,255,.86); margin:16px auto 0; max-width:34ch;
}

/* ——— технологии Phonix (X-Line): тот же accordion, что .m-tech у 64 Audio
   (текст открывается по клику на «+»), только с иконкой в золотом акценте
   перед названием. По умолчанию центрированы (общий шаблон 64audio, где
   живут X2/X3/X4); на собственной вёрстке Phonix (.m-plain, H6/H10/SF12) —
   влево, как остальной текст на той раскладке. */
.px-tech{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 24px}
.px-tech-item{text-align:center}
.px-tech-item summary{
  list-style:none; cursor:pointer; display:flex; flex-direction:column; align-items:center;
}
.px-tech-item summary::-webkit-details-marker{display:none}
.px-tech-ic{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,168,76,.4); border-radius:50%;
  color:var(--color-accent); margin-bottom:14px;
}
.px-tech-ic svg{width:22px; height:22px}
.px-tech-name{
  font-size:26px; font-weight:700; letter-spacing:-.01em; color:#fff;
}
.px-tech-item summary::after{
  content:'+'; display:block; margin-top:10px;
  font-size:20px; font-weight:400; color:rgba(255,255,255,.85);
  transition:transform .25s var(--ease);
}
.px-tech-item[open] summary::after{transform:rotate(45deg)}
.px-tech-item .m-tech-body{margin:16px auto 0; max-width:34ch}
.m-plain .px-tech-item{text-align:start}
.m-plain .px-tech-item summary{align-items:flex-start}
.m-plain .px-tech-ic{margin-inline:0}
.m-plain .px-tech-item .m-tech-body{margin-inline:0}

/* ——— нижний CTA ——— */
.m-buy{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 42px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.75); background:transparent; color:#fff;
  font-size:17px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.m-buy:hover{background:#fff; color:#0d1c2e; border-color:#fff}
.m-buy.gold{border-color:var(--color-accent); color:var(--color-accent)}
.m-buy.gold:hover{background:var(--color-accent); color:#14100a}
.m-note{font-size:13px; color:rgba(255,255,255,.6); margin:16px auto 0; max-width:640px; line-height:1.6}

.m-others{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.m-others a{
  padding:8px 17px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.22); text-decoration:none;
  font-size:14px; color:rgba(255,255,255,.8);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.m-others a:hover,.m-others a[aria-current]{border-color:var(--color-accent); color:var(--color-accent)}

/* ——— двунаправленный текст ———
   На иврите латиница и числа внутри RTL-строки переворачиваются:
   «64 Audio» становится «Audio 64», «2 790 ₽» — «₽ 790 2».
   plaintext берёт направление от первого сильного символа. */
.m-name,.m-brand,.m-cell,.m-tech summary,.m-tech-body,.m-lead,.px-tech-name{unicode-bidi:plaintext}
/* Значение характеристики — своя строка со своим направлением: иначе
   на иврите «20 Hz – 20 kHz» переворачивается в «Hz – 20 kHz 20». */
.m-cell b,.m-cell i{unicode-bidi:plaintext}
.m-name,.m-cell,.m-tech summary{text-align:center}

@media(max-width:900px){
  .m-cols{grid-template-columns:1fr 1fr; gap:16px 22px}
  .m-tech{grid-template-columns:1fr 1fr; gap:28px 22px}
  .px-tech{grid-template-columns:1fr 1fr; gap:28px 22px}
}
/* Полный ряд пунктов меню не помещается рядом с лого + языком + ЛК +
   корзиной + бургером на ширине планшета (iPad landscape 1024px, iPad Air
   landscape 1180px) — пункты переносятся на вторую строку, а корзина и
   бургер уезжают за край экрана. Порог поднят с 760px до 1220px — выше
   самой широкой альбомной ширины iPad (1194px у 11" Pro). */
@media(max-width:1220px){
  .mnav-links{display:none}
  .mnav-burger{display:block}
}
@media(max-width:480px){
  /* Узкий телефон: сокращаем зазоры и логотип, чтобы ЛК/корзина/бургер
     не выталкивались за край (см. комментарий у .mnav-burger выше). */
  .mnav{gap:10px}
  .mnav-logo{font-size:14px}
}
@media(max-width:760px){
  .lang-switch{margin-inline-start:auto; margin-inline-end:14px}
  .lang-toggle{padding:6px 10px; font-size:11px}
  .m-hero{min-height:92vh}
  .m-hero-in{padding-top:104px}
  /* Продуктовые фото Phonix — плашка на тёмном фоне, а не кадр во весь
     экран: на телефоне cover обрезает мониторы по краям. Вписываем целиком. */
  .brand-phonix .m-hero-bg{background-size:contain; background-position:center 40%}
  .brand-phonix .m-body-bg{background-size:contain; background-position:center 15%}
  /* X2/X3/X4 — тот же уменьшенный кадр и на телефоне, а не contain. */
  .brand-phonix .m-hero-bg-photo{background-size:44%; background-position:center 40%}
  .m-stats{gap:22px; padding-bottom:38px}
  .m-stat b{font-size:23px}
  .m-stat span{font-size:15px}
  .m-lead{font-size:16px; padding:56px 0 52px}
  .m-h{font-size:27px; margin-bottom:28px}
  .m-sec{padding:48px 0 56px}
  .m-cols{grid-template-columns:1fr; gap:14px}
  .m-tech{grid-template-columns:1fr; gap:26px}
  .m-cell,.m-tech summary{font-size:16px}
  .m-tech summary{font-size:22px}
  .px-tech{grid-template-columns:1fr; gap:26px}
  .px-tech-name{font-size:22px}
}

/* ======================================================================
   Общее для раскладок Phonix / Audio Rif / FiR: контент на ровном фоне
   страницы, без фотографий под текстом.
   ====================================================================== */
.m-plain{position:relative}
.m-plain .m-sec{text-align:start}
.m-plain .m-h{text-align:start}
.m-plain .m-cols .m-cell,.m-plain .m-cell{text-align:start}
.m-plain .m-lead{text-align:start; margin:0; padding:0}
.m-plain .m-tech details,.m-plain .m-tech summary{text-align:start}
.m-plain .m-tech .m-tech-body{margin-inline:0}
.m-plain .m-made p{margin-inline:0}
.m-plain .m-tail{text-align:center}
.m-plain .m-tail .m-h{text-align:center}
.m-plain .m-note{margin-inline:auto}
.m-plain .m-tail .m-others{justify-content:center}
.m-page.m-phonix,.m-page.m-rif,.m-page.m-fir{background:#0d0b0a}

/* График сигнатуры 64 Audio: подписи чёрные — на светлой подложке. */
.m-radar{margin:48px auto 0; width:min(100%,380px); text-align:center}
.m-radar img{display:block; width:100%; height:auto; padding:18px 14px 10px; background:#f5f3ef; border-radius:18px}
.m-radar figcaption{margin-top:10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6)}

/* ——— Phonix ——— */
.px-hero{position:relative; min-height:min(100svh,720px); display:flex; align-items:center; overflow:hidden; background:#07060a}
.px-hero-pic,.px-hero-pic img{position:absolute; inset:0; width:100%; height:100%}
.px-hero-pic img{object-fit:cover; object-position:center}
.px-hero-in{position:relative; z-index:1; width:100%; max-width:1170px; margin:0 auto; padding:140px 24px 72px}
.px-hero .m-name{text-align:left; font-size:clamp(64px,9vw,120px); font-weight:500; line-height:.95}
.px-hero .m-sub{text-align:left; margin-top:12px}
.px-hero .m-brand{text-align:left}
/* H6/H10/SF12 — просьба владельца (10.09.2026): текст, кнопка и цена в
   шапке модели — по левому краю физически, а не "start" (в иврите start
   значит справа). .px-hero/.px-tag/.px-hero-row используются только этими
   тремя моделями (единственный потребитель layout:'phonix', см.
   model-data.js), поэтому правим сами селекторы без доп. класса. */
.px-hero-row{direction:ltr; justify-content:flex-start}
.px-tag{max-width:26ch; margin:22px auto 0 0; text-align:left; font-size:clamp(18px,1.8vw,24px); line-height:1.35; color:#fff} /* margin-right:auto (3-й аргумент шорткода — правый) — блок уже своего контейнера (max-width:26ch), в RTL иначе прилипает к правому краю. */
.px-hero-row{display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:34px}
.px-price{font-size:clamp(36px,4vw,56px); font-weight:500; color:#fff; unicode-bidi:plaintext}
.px-intro{padding-top:80px}
.px-intro .m-h{text-align:center}
.px-intro .m-lead{text-align:center; margin:0 auto}
.px-panels{display:grid; gap:22px; padding:0 0 70px}
/* Карточки-схемы («разборка» и спецификация) раньше растягивались на всю
   ширину контента (.m-in — 1170px): на десктопе картинки выходили заметно
   крупнее, чем на сайтах производителей. Просьба владельца (10.09.2026,
   баг-репорт) — уменьшить. Ограничиваем ширину карточки и центрируем;
   картинка внутри по-прежнему масштабируется на всю ширину СВОЕЙ карточки
   (100%), просто сама карточка стала меньше. */
.px-paper{margin:0 auto; max-width:600px; background:#fff; border-radius:22px; padding:clamp(14px,2.5vw,36px); overflow:hidden}
.px-paper img{display:block; width:100%; height:auto}
.px-paper figcaption{margin-top:12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#6b6660; text-align:center}
.px-paper-scroll{display:block; direction:ltr}
.px-lead{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:start}
.px-kicker{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--color-accent); margin:0 0 14px; font-weight:600}
.px-h{font-size:clamp(34px,4vw,56px); font-weight:800; line-height:1.02; letter-spacing:-.02em; margin:0 0 18px; color:#fff}
.px-lead-txt p:last-child{font-size:17px; line-height:1.6; color:rgba(255,255,255,.86); margin:0; max-width:40ch}
.px-lcards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.px-lcard{position:relative; margin:0; border-radius:16px; overflow:hidden; background:#151210; aspect-ratio:3/4; display:flex; flex-direction:column}
.px-lcard img{display:block; width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.px-lcard figcaption{position:relative; z-index:1; margin-top:auto; padding:18px 16px 16px;
  background:linear-gradient(to top,rgba(8,7,6,.92) 0%,rgba(8,7,6,.55) 60%,transparent 100%)}
.px-lcard b{display:block; font-size:17px; font-weight:700; color:#fff}
.px-lcard p{margin:6px 0 0; font-size:13px; line-height:1.45; color:rgba(255,255,255,.8)}
.px-n{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.45); font-size:12px; color:#fff; margin-bottom:10px}

/* ——— Audio Rif ——— */
.rf-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; padding-top:140px; padding-bottom:40px}
.rf-hero .m-brand{text-align:start}
.rf-name{font-size:clamp(40px,5vw,64px); font-weight:500; letter-spacing:-.01em; line-height:1.05; margin:0 0 20px; color:#fff; unicode-bidi:plaintext}
.rf-desc{font-size:17px; line-height:1.6; color:rgba(255,255,255,.88); margin:0 0 26px; max-width:52ch}
.rf-cta{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.rf-price{font-size:clamp(24px,2.4vw,30px); font-weight:500; color:#fff; unicode-bidi:plaintext}
.rf-hero-img img{display:block; width:100%; height:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.rf-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:26px auto 90px; max-width:900px;
  padding:clamp(28px,4vw,56px) clamp(16px,3vw,40px); border-radius:28px; background:rgba(255,255,255,.06); text-align:center}
.rf-stats b{display:block; font-size:clamp(26px,3.2vw,44px); font-weight:500; color:#fff; line-height:1.1; unicode-bidi:plaintext; white-space:nowrap}
.rf-stats span{display:block; margin-top:12px; font-size:clamp(15px,1.4vw,20px); color:rgba(255,255,255,.82)}
.rf-feat{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:center; padding:0 0 80px}
.rf-feat-img img{display:block; width:100%; max-width:440px; height:auto; margin:0 auto; opacity:.85}
.rf-feat-txt h2{font-size:clamp(26px,3vw,36px); font-weight:500; line-height:1.15; margin:0 0 16px; color:#fff}
.rf-feat-txt p{font-size:17px; line-height:1.6; color:rgba(255,255,255,.86); margin:0}
.rf-feat-txt ul{margin:14px 0 0; padding-inline-start:22px; font-size:16px; line-height:1.55; color:rgba(255,255,255,.86)}
.rf-feat-txt li{margin:6px 0}
.rf-techs .m-h{text-align:center}
.rf-row{display:grid; grid-template-columns:minmax(0,1fr) 160px; gap:36px; align-items:center; padding:22px 0}
.rf-row.is-flip{grid-template-columns:160px minmax(0,1fr)}
.rf-row.is-flip .rf-row-txt{order:2}
.rf-row h3{font-size:clamp(20px,2vw,24px); font-weight:500; margin:0 0 10px; color:#fff}
.rf-row p{font-size:16px; line-height:1.6; color:rgba(255,255,255,.84); margin:0; max-width:64ch}
.rf-row-ic{display:flex; justify-content:center}
/* PNG-иконки производителя — уже светлые круги с прозрачным знаком; SVG — линии на прозрачном, им даём кольцо. */
.rf-row-ic img{width:110px; height:110px; object-fit:contain}
.rf-row-ic img[src$=".svg"]{border:1px solid rgba(255,255,255,.35); border-radius:50%; padding:28px}
.rf-row-ic--empty{min-height:1px}
.rf-spec{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center; margin:40px 0 70px;
  padding:clamp(24px,3.5vw,48px); border-radius:28px; background:rgba(255,255,255,.06)}
.rf-spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px 30px}
.rf-spec-grid > div{display:flex; gap:16px; align-items:center}
.rf-spec-grid img{width:40px; height:40px; flex:0 0 auto; opacity:.9}
.rf-spec-grid b{display:block; font-size:16px; font-weight:600; color:#fff; unicode-bidi:plaintext}
.rf-spec-grid span{display:block; font-size:14px; color:rgba(255,255,255,.72); margin-top:2px}
.rf-spec-title{text-align:end; line-height:1}
.rf-spec-title span{display:block; font-size:clamp(34px,4vw,60px); font-weight:500; color:rgba(255,255,255,.4)}
.rf-spec-title b{display:block; font-size:clamp(34px,4vw,60px); font-weight:600; color:#fff}
.rf-box .m-h{text-align:center}
.rf-box-img{display:block; width:100%; max-width:760px; height:auto; margin:0 auto 32px}
.rf-box .m-cols{max-width:900px; margin:0 auto}

/* ——— FiR Audio ——— */
.fr-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; padding-top:130px; padding-bottom:26px}
.fr-head .m-brand{text-align:start}
.fr-name{font-size:clamp(40px,5vw,64px); font-weight:800; letter-spacing:-.02em; line-height:1; margin:0 0 10px; color:#fff; unicode-bidi:plaintext}
.fr-sub{margin:0; font-size:16px; font-weight:600; color:rgba(255,255,255,.85)}
.fr-head-cta{display:flex; align-items:center; gap:22px; padding-bottom:6px}
.fr-price{font-size:clamp(22px,2.2vw,28px); font-weight:500; color:#fff; unicode-bidi:plaintext}
.fr-photo{padding-bottom:70px}
.fr-photo img{display:block; width:100%; height:auto; border-radius:6px; aspect-ratio:2000/758; object-fit:cover}
.fr-big{font-size:clamp(34px,4.6vw,64px); font-weight:800; letter-spacing:-.02em; line-height:1; text-transform:uppercase; margin:0; color:#fff}
.fr-front{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:start; padding-bottom:64px}
.fr-front .fr-big{font-size:clamp(30px,3.6vw,52px); overflow-wrap:normal; word-break:normal; hyphens:manual}
.fr-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:34px 24px}
.fr-stat{display:flex; gap:16px; align-items:center}
.fr-stat img{width:52px; height:52px; object-fit:contain; flex:0 0 auto}
.fr-stat b{display:block; font-size:17px; font-weight:700; color:#fff; unicode-bidi:plaintext}
.fr-stat span{display:block; font-size:13px; color:rgba(255,255,255,.7); margin-top:2px}
.fr-lead{max-width:70ch !important; padding:0 0 64px !important; font-size:17px}
.fr-tech{padding:64px 0 40px}
.fr-tech-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; align-items:center; margin-bottom:40px}
.fr-outline{display:block; width:100%; max-width:440px; height:auto; margin:0 auto; opacity:.95}
.fr-row{display:grid; grid-template-columns:200px minmax(0,1fr); gap:44px; align-items:center; padding:34px 0}
.fr-row.is-flip{grid-template-columns:minmax(0,1fr) 200px}
.fr-row.is-flip .fr-row-txt{order:-1}
.fr-row-ic img{display:block; width:200px; height:200px; object-fit:contain; margin:0 auto}
.fr-row h3{font-size:15px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px; color:#fff}
.fr-row p{font-size:16px; line-height:1.65; color:rgba(255,255,255,.84); margin:0; max-width:66ch}
.fr-modules{margin:10px 0 24px; text-align:center}
.fr-modules img{display:block; width:100%; max-width:960px; height:auto; margin:0 auto}
.fr-modules figcaption{margin-top:10px; font-size:13px; color:rgba(255,255,255,.62)}
.fr-spec .fr-big{margin-bottom:34px}
.fr-build{margin:0 0 34px; font-size:16px; color:#fff}
.fr-build b{display:block; font-weight:700}
.fr-build span{display:block; font-size:14px; color:rgba(255,255,255,.62); margin-top:4px}
.fr-cols{display:grid; grid-template-columns:1fr 1fr; gap:30px 60px}
.fr-cols h4{font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:26px 0 10px; color:#fff}
.fr-cols h4:first-child{margin-top:0}
.fr-cols ul{list-style:none; padding:0; margin:0; font-size:15px; line-height:1.7; color:rgba(255,255,255,.84)}
.fr-cols li{unicode-bidi:plaintext}

@media(max-width:900px){
  .px-lead{grid-template-columns:1fr; gap:28px}
  .rf-hero{grid-template-columns:1fr; gap:22px}
  .rf-hero-img{order:-1; max-width:520px; margin:0 auto}
  .rf-feat{grid-template-columns:1fr; gap:26px}
  .rf-feat-img img{max-width:320px}
  .rf-spec{grid-template-columns:1fr}
  .rf-spec-title{text-align:start; order:-1}
  .fr-front{grid-template-columns:1fr; gap:34px}
  .fr-stats{grid-template-columns:repeat(2,1fr)}
  .fr-tech-head{grid-template-columns:1fr}
  .fr-outline{max-width:300px}
  .fr-cols{grid-template-columns:1fr}
}

/* ——— плавающая корзина (как на accessories.html и в конструкторе) ——— */
.acc-cart{
  position:fixed; inset-inline-end:20px; bottom:20px; z-index:60;
  display:flex; align-items:center; gap:8px; padding:12px 20px;
  border-radius:var(--radius-pill); border:1px solid var(--color-accent);
  background:#fff; color:#8a6d24; text-decoration:none;
  font-size:13px; font-weight:700; letter-spacing:.03em; box-shadow:0 8px 26px rgba(0,0,0,.14);
  transition:transform .2s var(--ease);
}
.acc-cart:hover{transform:translateY(-2px)}
.acc-cart .n{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--color-accent); color:#fff; font-size:11px;
}

@media(max-width:760px){
  .acc-cart{inset-inline-end:14px; bottom:14px; padding:10px 16px; font-size:12px}
  .px-hero{min-height:100svh; align-items:flex-start}
  /* На телефоне не обрезаем фото модели — вписываем целиком, а не кроем всё поле. */
  .px-hero-pic img{object-fit:contain; object-position:center top}
  .px-hero-in{padding:104px 24px 40px}
  .px-hero .m-name{font-size:56px}
  .px-tag{font-size:17px; max-width:none}
  .px-hero-row{gap:18px; margin-top:22px}
  .px-price{font-size:32px}
  .px-intro{padding-top:56px}
  .px-panels{padding-bottom:48px; gap:14px}
  .px-paper{border-radius:16px; max-width:none}
  /* Схему и спецификацию на телефоне не обрезаем и не прячем за скролл —
     показываем целиком, вписав в ширину карточки (мельче, но всё видно). */
  .px-paper-scroll img{width:100%; max-width:100%}
  .px-lcards{grid-template-columns:1fr; gap:12px}
  .px-lcard{aspect-ratio:4/3}
  .rf-hero{padding-top:104px}
  .rf-stats{grid-template-columns:1fr; gap:26px; margin-bottom:56px}
  .rf-row,.rf-row.is-flip{grid-template-columns:1fr; gap:16px; padding:18px 0}
  .rf-row.is-flip .rf-row-txt{order:0}
  .rf-row-ic{justify-content:flex-start}
  .rf-row-ic img{width:84px; height:84px}
  .rf-row-ic img[src$=".svg"]{padding:20px}
  .rf-row-ic--empty{display:none}
  .rf-spec-grid{grid-template-columns:1fr; gap:18px}
  .fr-head{padding-top:100px; padding-bottom:18px}
  .fr-head-cta{width:100%; justify-content:space-between}
  .fr-photo{padding-bottom:44px}
  .fr-photo img{aspect-ratio:3/2}
  .fr-stats{grid-template-columns:1fr; gap:20px}
  .fr-row,.fr-row.is-flip{grid-template-columns:1fr; gap:14px; padding:22px 0}
  .fr-row.is-flip .fr-row-txt{order:0}
  .fr-row-ic img{width:120px; height:120px; margin:0}
  .fr-tech{padding-top:44px}
}