/* ============================================================
   Сложная карточка 2026 — layout для карточек с программой,
   тарифами, командой и заданиями (тимбилдинг, брендирование).
   Префикс: cx- (всё под .cx-root)
   Токены и ресет заданы на .cx-root, не глобально.
   Значения — по брендбуку редизайна 2026.
   ============================================================ */

@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter/inter-cyrillic.woff2) format("woff2"),url(../fonts/inter/inter-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter/inter-latin.woff2) format("woff2"),url(../fonts/inter/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ₽ (U+20BD) живёт в latin-ext сабсете — без него .notdef-квадрат вместо рубля */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter/inter-latin-ext.woff2) format("woff2"),url(../fonts/inter/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

html,body{margin:0}

.cx-root{
  --cx-accent:#FE5D26;
  --cx-accent-hover:#D95427;
  --cx-accent-soft:#FFAE93;
  --cx-accent-tint:#FFEFEA;
  --cx-ink:#312D2B;
  --cx-text:#272F3D;
  --cx-secondary:rgba(49,45,43,.5);
  --cx-muted:rgba(49,45,43,.4);
  --cx-bg:#F6F6F6;
  --cx-white:#fff;
  --cx-sunken:rgba(49,45,43,.05);
  --cx-hover:rgba(49,45,43,.06);
  --cx-placeholder:#EBEAEA;
  --cx-border:rgba(49,45,43,.1);
  --cx-border-soft:rgba(49,45,43,.05);
  --cx-shadow:0 1px 4px 0 rgba(49,45,43,.08);
  --cx-shadow-hover:0 8px 24px rgba(49,45,43,.1);
  --cx-ring:0 0 0 2px rgba(254,93,38,.16);
  --cx-radius-sm:10px;
  --cx-radius-md:12px;
  --cx-radius-img:16px;
  --cx-radius-lg:24px;
  --cx-transition:.2s ease;
  --cx-rhythm:120px;

  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--cx-text);
  background-color:var(--cx-bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ресет через :where() — нулевая специфичность, чтобы не перебивать компоненты ниже */
.cx-root *,.cx-root *::before,.cx-root *::after{box-sizing:border-box;margin:0;padding:0}
.cx-root :where(a){text-decoration:none;color:inherit}
.cx-root :where(img){max-width:100%;height:auto;display:block}
.cx-root :where(ul){list-style:none}
.cx-root :where(button){font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
.cx-root :focus-visible{outline:2px solid var(--cx-accent);outline-offset:2px}

.cx-container{max-width:1327px;margin:0 auto;padding:0 15px}
/* ресет .cx-root * гасит глобальный клиренс main{margin-top:calc(91px + var(--hot-h,0px))}
   из header-2025.css — возвращаем его, иначе страница уезжает под фикс-шапку */
.cx-root main{display:flex;flex-direction:column;gap:var(--cx-rhythm);padding-bottom:var(--cx-rhythm);
  margin-top:calc(91px + var(--hot-h, 0px))}
.cx-section{padding:0}
/* якорные переходы («Смотреть стоимость») — чтобы заголовок не ушёл под фикс-шапку */
.cx-section[id]{scroll-margin-top:calc(91px + var(--hot-h, 0px) + 24px)}

/* ---------- заголовок секции ---------- */
.cx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:16px}
.cx-head__t{font-size:32px;line-height:40px;font-weight:500;color:var(--cx-ink);letter-spacing:-.01em}
.cx-head__sub{font-size:16px;line-height:24px;color:var(--cx-secondary);margin-top:8px;max-width:720px}
.cx-head__aside{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* ---------- кнопки ---------- */
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;line-height:24px;font-weight:500;padding:12px 28px;border-radius:var(--cx-radius-md);
  border:1px solid transparent;transition:background-color var(--cx-transition),color var(--cx-transition),border-color var(--cx-transition);
  text-align:center}
.cx-btn--primary{background:var(--cx-accent);color:#fff}
.cx-btn--ghost{background:var(--cx-white);color:var(--cx-ink);border-color:var(--cx-border)}
.cx-btn--soft{background:var(--cx-accent-tint);color:var(--cx-accent)}
.cx-btn--wide{width:100%}
.cx-btn--sm{font-size:14px;line-height:20px;padding:10px 20px}
.cx-btn svg{flex:0 0 auto}

.cx-icon-btn{width:40px;height:40px;border-radius:50%;background:var(--cx-white);
  border:1px solid var(--cx-border);display:inline-flex;align-items:center;justify-content:center;
  color:var(--cx-ink);transition:background-color var(--cx-transition),border-color var(--cx-transition),opacity var(--cx-transition);flex:0 0 auto}
.cx-icon-btn[disabled]{opacity:.4;cursor:default}

@media (hover:hover){
  .cx-btn--primary:hover{background:var(--cx-accent-hover)}
  .cx-btn--ghost:hover{border-color:var(--cx-accent);color:var(--cx-accent)}
  .cx-btn--soft:hover{background:var(--cx-accent-soft);color:#fff}
  .cx-icon-btn:hover:not([disabled]){background:var(--cx-hover);border-color:var(--cx-accent-soft)}
}

/* ---------- крошки ----------
   Конвенция карточки товара: цепочка категорий с выпадашкой дочерних,
   название товара не выводится (оно рядом в H1). Вид — копия
   .batut-scope .breadcrumbs26 из batut.css: тот файл сюда не подключить. */
.cx-bread{margin-bottom:calc(-1 * var(--cx-rhythm))}
.cx-bread .breadcrumbs26{display:flex;align-items:center;gap:4px;overflow:visible}
.cx-bread .breadcrumbs26 a{font-size:12px;line-height:16px;font-weight:500;color:var(--cx-secondary);
  padding-bottom:10px;display:inline-block}
.cx-bread .devider{font-size:12px;line-height:16px;font-weight:500;color:var(--cx-secondary);padding-bottom:10px}
.cx-bread .bread-drop{position:relative}
.cx-bread .bread-drop-head{display:flex;align-items:center;gap:4px}
.cx-bread .bread-drop-head svg{transition:transform var(--cx-transition);transform:rotate(180deg);margin-bottom:10px}
.cx-bread .bread-drop-head svg path{stroke:rgba(49,45,43,.5)}
.cx-bread .drop-content{position:absolute;top:24px;left:0;z-index:10;display:none;flex-direction:column;
  width:220px;padding:8px;border-radius:16px;border:1px solid var(--cx-border-soft);
  background:var(--cx-white);box-shadow:var(--cx-shadow)}
.cx-bread .drop-content a{padding:8px;font-size:12px;line-height:16px;color:var(--cx-ink);border-radius:8px}
@media (hover:hover){
  .cx-bread .breadcrumbs26 a:hover{color:var(--cx-accent)}
  .cx-bread .bread-drop:hover .drop-content{display:flex}
  .cx-bread .bread-drop:hover .bread-drop-head svg{transform:rotate(0deg)}
  .cx-bread .bread-drop-head:hover a{color:var(--cx-accent)}
  .cx-bread .bread-drop-head:hover svg path{stroke:var(--cx-accent)}
  .cx-bread .drop-content a:hover{background:var(--cx-hover)}
}

/* ---------- HERO ---------- */
.cx-hero{padding:16px 0 0}
.cx-hero-art{display:inline-flex;align-self:flex-start;font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cx-secondary);background:var(--cx-sunken);
  padding:4px 12px;border-radius:999px}
.cx-hero-title{font-size:32px;line-height:40px;font-weight:500;letter-spacing:-.01em;color:var(--cx-ink)}
.cx-hero-sub{font-size:18px;line-height:28px;color:var(--cx-secondary)}
.cx-hero-price{font-size:28px;line-height:36px;color:var(--cx-accent);white-space:nowrap}

/* три блока: слева галерея на всю высоту, справа заголовок с кнопками и баннер */
/* левая колонка — по ширине галереи: 76 превью + 8 зазор + 440 кадр */
/* строка баннера — по содержимому: лишнюю высоту от галереи забирает карточка */
.cx-hero-grid{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;
  gap:16px;align-items:stretch}
.cx-hero-card{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:32px;
  background:var(--cx-white);border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);
  box-shadow:var(--cx-shadow)}
.cx-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* кнопка корзины в hero — по содержимому, а не во всю строку (вес с запасом:
   общее .cx-root .orange-link лежит ниже по файлу) */
.cx-root .cx-hero-actions .orange-link{width:auto}
/* min-width:0 — иначе лента превью распирает колонку своей шириной вместо прокрутки */
.cx-hero-photo{grid-column:1;grid-row:1/span 2;min-width:0}
/* промо-баннера у товара может не быть — тогда галерея занимает одну строку, а не две */
.cx-hero-grid:not(:has(.cx-promo)) .cx-hero-photo{grid-row:1}

/* ---------- ГАЛЕРЕЯ В HERO ---------- */
/* размеры от карточки 116: превью шириной 76, зазор 8; кадр 440 */
.cx-gal{display:flex;gap:8px}
.cx-gal__thumbs-wrap{position:relative;isolation:isolate;flex:0 0 76px;max-width:76px}
.cx-gal__thumbs{position:relative;display:flex;flex-direction:column;gap:8px;max-height:440px;
  overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.cx-gal__thumbs::-webkit-scrollbar{display:none}
/* край ленты притемняем, пока в ту сторону есть кадры — намёк на прокрутку */
.cx-gal__thumbs-wrap::before,.cx-gal__thumbs-wrap::after{content:"";position:absolute;left:0;right:0;
  height:56px;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--cx-transition)}
.cx-gal__thumbs-wrap::before{top:0;background:linear-gradient(rgba(49,45,43,.45),rgba(49,45,43,0))}
.cx-gal__thumbs-wrap::after{bottom:0;background:linear-gradient(rgba(49,45,43,0),rgba(49,45,43,.45))}
.cx-gal__thumbs-wrap.is-more-start::before,.cx-gal__thumbs-wrap.is-more-end::after{opacity:1}
/* превью не вписываем в квадрат: ширина зафиксирована, высота — по пропорции кадра */
.cx-gal__thumb{flex:0 0 auto;width:76px;border-radius:5px;overflow:hidden;
  background:var(--cx-white);border:1px solid transparent;transition:.15s}
.cx-gal__thumb img{width:100%;height:auto}
.cx-gal__thumb.is-active{border-color:var(--cx-accent);box-shadow:var(--cx-ring),var(--cx-shadow)}
.cx-gal__nav{position:absolute;z-index:3;left:0;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--cx-accent);color:#fff;
  opacity:0;transition:var(--cx-transition)}
.cx-gal__nav[hidden]{display:none}
.cx-gal__nav--prev{top:0}
.cx-gal__nav--next{bottom:0}
@media (hover:hover){
  .cx-gal:hover .cx-gal__nav{opacity:1}
  .cx-gal__nav:hover{background:var(--cx-accent-hover)}
}
/* ширина слота задана явно: кадры внутри абсолютные, своей ширины у слота нет —
   на auto-колонке hero он схлопнулся бы в ноль */
.cx-gal__main{position:relative;width:440px;max-width:100%;align-self:flex-start;
  aspect-ratio:1/1;overflow:hidden;border-radius:var(--cx-radius-lg);background:var(--cx-white);
  box-shadow:var(--cx-shadow)}
/* кадры лежат стопкой — показан только активный, но лайтбоксу видны все */
.cx-gal__main .cx-shot{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  border-radius:0;background:none;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.cx-gal__main .cx-shot.is-active{opacity:1;visibility:visible}
.cx-gal__main .cx-shot img{object-fit:contain}

/* ---------- ПРОМО-БАННЕР ---------- */
.cx-promo{grid-column:2;grid-row:2;padding:8px;border-radius:var(--cx-radius-lg);
  background:var(--cx-accent-tint);border:1px solid rgba(254,93,38,.08)}
/* isolation — слои баннера (паттерн, картинка, текст) остаются внутри него:
   без этого его z-index'ы всплывали в корень и накрывали всплывашку цен */
.cx-promo__inner{position:relative;isolation:isolate;overflow:hidden;padding:16px 24px;border-radius:var(--cx-radius-img);
  background:#FFEAE2;border:1px solid rgba(254,93,38,.08);color:#66250F}
.cx-promo__bg{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
/* Картинку баннера грузят любой пропорции — вписываем по высоте плашки,
   ширина считается сама, поэтому квадратный кадр её больше не распирает */
.cx-promo__img{position:absolute;z-index:2;right:24px;top:50%;transform:translateY(-50%);
  height:calc(100% - 16px);width:auto;max-width:40%;object-fit:contain}
.cx-promo__t{position:relative;z-index:3;font-size:20px;line-height:28px;font-weight:500}
.cx-promo__p{position:relative;z-index:3;font-size:16px;line-height:24px;opacity:.7}

/* ---------- лента с прокруткой (общий приём) ---------- */
.cx-lane{display:grid;grid-auto-flow:column;overflow-x:auto;scroll-snap-type:x mandatory;
  gap:16px;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.cx-lane::-webkit-scrollbar{display:none}
.cx-lane>*{scroll-snap-align:start}
.cx-lane[data-cx-drag]{cursor:grab}
.cx-lane--drag{cursor:grabbing;user-select:none}
.cx-lane-bar{position:relative;height:4px;margin-top:24px;border-radius:2px;background:var(--cx-border);cursor:pointer}
.cx-lane-bar__thumb{position:absolute;top:0;height:100%;border-radius:2px;background:var(--cx-accent);transition:left .1s ease;cursor:grab}
.cx-lane-bar__thumb:active{cursor:grabbing;transition:none}

/* ---------- кадр с лайтбоксом (общий приём) ---------- */
.cx-shot{border:none;padding:0;border-radius:var(--cx-radius-img);overflow:hidden;background:var(--cx-placeholder);
  aspect-ratio:4/3;display:block;width:100%}
.cx-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
@media (hover:hover){.cx-shot:hover img{transform:scale(1.04)}}

/* ---------- ВИДЕО-ПОЛОСА (вспомогательный блок) ---------- */
.cx-video-row{background:var(--cx-white);border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);
  box-shadow:var(--cx-shadow);padding:16px;display:grid;grid-template-columns:400px minmax(0,1fr);gap:24px;align-items:center}
.cx-video-prev{position:relative;border-radius:var(--cx-radius-img);overflow:hidden;aspect-ratio:16/9;
  background:var(--cx-placeholder);border:none;padding:0;width:100%;display:block}
.cx-video-prev video,.cx-video-prev img{width:100%;height:100%;object-fit:cover;display:block}
.cx-video-prev::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);transition:background var(--cx-transition)}
.cx-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--cx-ink)}
.cx-video-dur{position:absolute;right:12px;bottom:12px;z-index:1;font-size:12px;line-height:16px;font-weight:600;
  color:#fff;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:4px 10px;border-radius:999px}
.cx-video-label{display:inline-flex;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cx-accent);background:var(--cx-accent-tint);padding:4px 12px;border-radius:999px}
.cx-video-title{font-size:24px;line-height:32px;font-weight:600;color:var(--cx-ink);margin-top:12px}
.cx-video-text{font-size:16px;line-height:24px;color:var(--cx-secondary);margin-top:8px;max-width:560px}
.cx-video-body .cx-btn{margin-top:20px}
@media (hover:hover){.cx-video-prev:hover::after{background:rgba(0,0,0,.04)}}

/* ---------- ИНТРО ---------- */
.cx-intro-card{background:var(--cx-white);border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);
  box-shadow:var(--cx-shadow);padding:32px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px;align-items:center}
.cx-intro-card h2{font-size:32px;line-height:40px;font-weight:500;color:var(--cx-ink);letter-spacing:-.01em}
.cx-intro-card p{font-size:16px;line-height:24px;color:var(--cx-text)}

/* ---------- ЦЕННОСТИ ---------- */
.cx-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cx-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* 3 карточки — стандарт; 4 и 7 идут по четыре в ряд, 5-6 остаются по три */
.cx-grid-auto{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (min-width:992px){
  .cx-grid-auto:has(>:nth-child(4):last-child),
  .cx-grid-auto:has(>:nth-child(7)){grid-template-columns:repeat(4,1fr)}
}
.cx-card{background:var(--cx-white);border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);
  box-shadow:var(--cx-shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--cx-transition),box-shadow var(--cx-transition)}
.cx-card__img{aspect-ratio:4/3;background:var(--cx-placeholder);overflow:hidden;margin:16px 16px 0;border-radius:var(--cx-radius-img)}
.cx-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cx-card__body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.cx-card__title{font-size:18px;line-height:26px;font-weight:600;color:var(--cx-ink)}
.cx-card__text{font-size:14px;line-height:20px;color:var(--cx-secondary)}
@media (hover:hover){
  .cx-card:hover{transform:translateY(-4px);box-shadow:var(--cx-shadow-hover)}
  .cx-card:hover .cx-card__img img{transform:scale(1.04)}
}

/* ---------- ЭТАПЫ ИГРЫ ---------- */
.cx-steps,.cx-feats{background:var(--cx-white);border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);
  box-shadow:var(--cx-shadow);padding:32px}
.cx-steps-lane{display:flex;align-items:flex-start;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding-top:4px}
.cx-steps-lane::-webkit-scrollbar{display:none}
.cx-step{flex:1 1 0;min-width:104px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
/* иконки этапов залиты белым — на светлом кружке инвертируем их в тёмно-серый */
.cx-step__ic{width:64px;height:64px;border-radius:50%;background:var(--cx-placeholder);
  display:flex;align-items:center;justify-content:center;position:relative}
.cx-step__ic img{width:32px;height:32px;object-fit:contain;filter:invert(1);opacity:.8}
.cx-step__n{position:absolute;right:-2px;top:-2px;width:22px;height:22px;border-radius:50%;
  background:var(--cx-accent);color:#fff;font-size:11px;line-height:22px;font-weight:600;text-align:center}
.cx-step__t{font-size:14px;line-height:20px;font-weight:500;color:var(--cx-ink)}
.cx-step-arrow{flex:0 0 auto;align-self:center;margin-top:-24px;color:rgba(49,45,43,.2);padding:0 4px}

/* ---------- ОСОБЕННОСТИ (та же иконка, без стрелок и номеров) ---------- */
.cx-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px 16px}
.cx-feat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.cx-feat__ic{width:64px;height:64px;border-radius:50%;background:var(--cx-placeholder);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cx-feat__ic img{width:32px;height:32px;object-fit:contain;filter:invert(1);opacity:.8}
.cx-feat__t{font-size:14px;line-height:20px;font-weight:500;color:var(--cx-ink)}

/* ---------- СТОИМОСТЬ ---------- */
/* сетка как в «Как это работает»: 3 — стандарт, 4 и 7 идут по четыре */
.cx-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (min-width:992px){
  .cx-prices:has(>:nth-child(4):last-child),
  .cx-prices:has(>:nth-child(7)){grid-template-columns:repeat(4,1fr)}
}
/* ховер ловит неподвижный слот, а крутится карточка внутри: если вешать ховер
   на саму карточку, её кликабельная область уезжает вместе с поворотом,
   курсор выпадает и карточка начинает мигать */
.cx-price-slot{display:flex;perspective:1200px;min-width:0}
.cx-price{--cx-price-pad:24px;flex:1 1 auto;background:var(--cx-white);border:1px solid var(--cx-border);
  border-radius:var(--cx-radius-lg);box-shadow:var(--cx-shadow);padding:var(--cx-price-pad);
  display:flex;flex-direction:column;min-width:0;perspective:1000px}
.cx-price__stage{flex:1 1 auto;display:flex;flex-direction:column;gap:16px;min-width:0;position:relative}
.cx-price--pick{border-color:var(--cx-accent);box-shadow:var(--cx-ring),var(--cx-shadow)}
.cx-price__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cx-price__name{font-size:20px;line-height:28px;font-weight:600;color:var(--cx-ink)}
.cx-price__mark{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--cx-accent);padding:4px 12px;border-radius:999px;flex:0 0 auto}
.cx-price__specs{display:flex;flex-direction:column}
.cx-price__spec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:14px;line-height:20px;padding:10px 0;border-bottom:1px solid var(--cx-border-soft)}
.cx-price__spec:last-child{border-bottom:none}
.cx-price__spec dt{color:var(--cx-secondary)}
.cx-price__spec dd{color:var(--cx-ink);font-weight:500;text-align:right}
/* [orange]/[bold] из старой карточки — та же строка, только тёмная:
   полужирный серым читался плохо */
.cx-price__spec--accent dt{color:var(--cx-ink)}
.cx-price__sum{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cx-price__label{font-size:13px;line-height:18px;color:var(--cx-secondary)}
.cx-price__amount{font-size:28px;line-height:36px;font-weight:500;color:var(--cx-ink);letter-spacing:-.01em}
.cx-price__unit{font-size:13px;line-height:18px;color:var(--cx-secondary)}
.cx-price__extra{background:var(--cx-sunken);border-radius:var(--cx-radius-md);padding:12px 16px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;line-height:20px}
.cx-price__extra b{font-size:16px;line-height:24px;font-weight:500;color:var(--cx-ink)}
.cx-price__btns{margin-top:auto;display:flex;flex-direction:column;gap:8px}

/* фото комплекта: по наведению переворачиваем содержимое карточки,
   кнопки в переворот не входят — до них надо дотянуться курсором */
.cx-price__flip{perspective:1000px;flex:1 1 auto;min-height:0}
.cx-price__flip-inner{position:relative;height:100%;transition:transform .5s ease;transform-style:preserve-3d}
.cx-price__face{display:flex;flex-direction:column;gap:16px;height:100%;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.cx-price__face--back{position:absolute;inset:0;transform:rotateY(180deg);
  border-radius:var(--cx-radius-img);overflow:hidden;background:var(--cx-white);
  display:flex;align-items:center;justify-content:center}
/* Кадр вписываем целиком: на снимках комплектов по краям бывают подписи, и
   обрезка по месту срезала как раз их. Размеры не растягиваем — иначе бокс
   картинки шире самого кадра и его скругление не совпадает с краями. */
.cx-price__face--back img{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:8px}

/* Карточка без характеристик низкая: переворачивать нечего — в полоске кадр не
   рассмотреть, а переворот всей карточки уносит кнопки. Показываем всплывашкой
   над карточкой, кнопки остаются на месте. Класс вешает js/cx-card.js. */
/* Плашка сдвинута вправо и с указателем вниз: ровно над карточкой её принимали
   за часть соседней сверху. Содержимое в этом режиме не переворачиваем —
   название и цена должны оставаться на виду. */
.cx-price-slot--pop > .cx-price__face--back{position:absolute;left:32px;right:-32px;top:auto;
  bottom:calc(100% + 12px);height:220px;padding:8px;transform:translateY(6px);
  border-radius:var(--cx-radius-img);border:1px solid var(--cx-border);background:var(--cx-white);
  box-shadow:var(--cx-shadow-hover);pointer-events:none;z-index:5;opacity:0;visibility:hidden;
  transition:opacity var(--cx-transition),transform var(--cx-transition),visibility var(--cx-transition)}
.cx-price-slot--pop > .cx-price__face--back::after{content:"";position:absolute;left:24px;top:100%;
  border:8px solid transparent;border-top-color:var(--cx-white)}
.cx-price-slot--pop > .cx-price__face--back img{max-width:100%;max-height:100%}
.cx-price-slot--pop .cx-price__flip-inner{transform:none}
@media (hover:hover){
  .cx-price-slot:not(.cx-price-slot--pop) .cx-price:hover .cx-price__flip-inner{transform:rotateY(180deg)}
  .cx-price-slot--pop:hover > .cx-price__face--back{opacity:1;visibility:visible;transform:none}
}

/* ---------- КОМАНДА ---------- */
.cx-team{grid-auto-columns:calc((100% - 32px)/3)}
.cx-person{background:var(--cx-white);border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);
  box-shadow:var(--cx-shadow);overflow:hidden;display:flex;flex-direction:column}
.cx-person__img{aspect-ratio:1/1;background:var(--cx-placeholder);overflow:hidden;margin:16px 16px 0;border-radius:var(--cx-radius-img)}
.cx-person__img img{width:100%;height:100%;object-fit:cover}
.cx-person__body{padding:16px;display:flex;flex-direction:column;gap:8px}
.cx-person__name{font-size:18px;line-height:26px;font-weight:600;color:var(--cx-ink)}
.cx-person__text{font-size:14px;line-height:20px;color:var(--cx-secondary)}

/* ---------- ЗАДАНИЯ (табы) ---------- */
.cx-tabs{display:flex;gap:8px;flex-wrap:wrap}
.cx-tab{font-size:14px;line-height:20px;font-weight:500;padding:8px 18px;border-radius:999px;
  background:var(--cx-white);border:1px solid var(--cx-border);color:var(--cx-ink);
  transition:background-color var(--cx-transition),color var(--cx-transition),border-color var(--cx-transition)}
.cx-tab[aria-selected="true"]{background:var(--cx-accent);border-color:var(--cx-accent);color:#fff}
@media (hover:hover){.cx-tab:not([aria-selected="true"]):hover{border-color:var(--cx-accent-soft);color:var(--cx-accent)}}
/* у сворачивающихся табов — шеврон: вниз значит раскроет, вверх — свернёт */
.cx-tabs[data-cx-collapse] .cx-tab{display:inline-flex;align-items:center;gap:8px}
.cx-tabs[data-cx-collapse] .cx-tab::after{content:"";width:6px;height:6px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform var(--cx-transition)}
.cx-tabs[data-cx-collapse] .cx-tab[aria-selected="true"]::after{margin-top:3px;transform:rotate(-135deg)}
.cx-task[hidden]{display:none}
.cx-more{display:flex;justify-content:center;margin-top:24px}
/* display:flex перебивал бы [hidden] — прячем явно, когда показывать нечего */
.cx-more[hidden]{display:none}

/* ---------- ДОПЫ (опции товара) ----------
   «Часто добавляют» — лента, «Дополнительные услуги» — сетка с фильтром
   по категориям. Карточка одна и та же: кадр, название, цена и корзина. */
.cx-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
/* свёрнутый список: display:grid перебивал бы атрибут */
.cx-opts[hidden]{display:none}
/* Позиций в «часто добавляют» обычно 3–5 — они помещаются в ряд, поэтому
   сетка, а не лента. Кадры туда грузят баннерные 305×130, отсюда пропорция. */
.cx-opts--banner{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cx-opts--banner .cx-opt__img{aspect-ratio:61/26}
.cx-opt{background:var(--cx-white);border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);
  box-shadow:var(--cx-shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--cx-transition),box-shadow var(--cx-transition)}
.cx-opt[hidden]{display:none}
.cx-opt__img{display:block;width:auto;margin:12px 12px 0;padding:0;border:none;cursor:zoom-in;
  aspect-ratio:4/3;border-radius:var(--cx-radius-img);overflow:hidden;background:var(--cx-placeholder)}
.cx-opt__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cx-opt__body{padding:12px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.cx-opt__name{font-size:16px;line-height:22px;font-weight:500;color:var(--cx-ink)}
.cx-opt__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.cx-opt__price{font-size:18px;line-height:26px;font-weight:500;color:var(--cx-ink);white-space:nowrap}
.cx-opt__price span{font-size:13px;line-height:18px;color:var(--cx-secondary)}
/* Кнопку корзины рисует ItemClass::printCartButton — в карточке допа она
   иконочная. Специфичность с запасом: общее правило .cx-root .orange-link
   лежит ниже по файлу и при равном весе перебивало padding, из-за чего
   иконка внутри сжималась до нуля. */
/* gap:0 — внутри кнопки два svg (корзина и галочка «в корзине»), вторая
   схлопнута в ноль, но зазор между ними сдвигал видимую иконку с центра */
.cx-root .cx-opt__foot .orange-link{flex:0 0 auto;width:44px;height:44px;padding:0;gap:0;
  border-radius:var(--cx-radius-md)}
@media (hover:hover){
  .cx-opt:hover{transform:translateY(-4px);box-shadow:var(--cx-shadow-hover)}
  .cx-opt:hover .cx-opt__img img{transform:scale(1.04)}
}

/* ---------- ДЛЯ ПОГРУЖЕНИЯ ----------
   исходники баннеров всего 305×130 — превью вдвое меньше, чтобы не растягивать */
.cx-addons{background:var(--cx-white);border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);
  box-shadow:var(--cx-shadow);padding:16px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:8px 16px}
.cx-addon{display:flex;align-items:center;gap:16px;padding:8px;border-radius:var(--cx-radius-img);
  transition:background-color var(--cx-transition)}
.cx-addon__img{position:relative;flex:0 0 auto;width:152px;aspect-ratio:61/26;
  border-radius:var(--cx-radius-img);overflow:hidden;background:var(--cx-placeholder)}
.cx-addon__img img{width:100%;height:100%;object-fit:cover}
/* обводка поверх картинки — иначе кадр со светлым фоном сливается с карточкой */
.cx-addon__img::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(49,45,43,.16)}
.cx-addon__t{font-size:16px;line-height:22px;font-weight:500;color:var(--cx-ink);
  transition:color var(--cx-transition)}
@media (hover:hover){
  .cx-addon:hover{background:var(--cx-hover)}
  .cx-addon:hover .cx-addon__t{color:var(--cx-accent)}
}

/* ---------- О НАС ---------- */
.cx-about{display:flex;align-items:stretch;gap:16px}
.cx-about__video{flex:1 1 auto;min-width:0;display:block;padding:8px;
  background:var(--cx-white);border:1px solid var(--cx-border-soft);border-radius:var(--cx-radius-img);
  box-shadow:var(--cx-shadow)}
.cx-about__poster{position:relative;display:block;border-radius:8px;overflow:hidden}
.cx-about__poster img{width:100%;height:100%;object-fit:cover}
.cx-about__poster svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.cx-about__poster svg rect,.cx-about__poster svg path{transition:fill var(--cx-transition)}
.cx-about__boxes{flex:0 0 246px;display:flex;flex-direction:column;gap:16px}
.cx-about__box{flex:1;background:var(--cx-white);border:1px solid var(--cx-border-soft);
  border-radius:var(--cx-radius-img);box-shadow:var(--cx-shadow);padding:24px}
.cx-about__num{font-size:32px;line-height:40px;font-weight:500;color:var(--cx-ink);margin-bottom:8px}
.cx-about__cap{font-size:16px;line-height:24px;color:var(--cx-secondary)}
@media (hover:hover){
  .cx-about__video:hover svg rect{fill:#fff}
  .cx-about__video:hover svg path{fill:var(--cx-accent)}
}

/* ---------- КЕЙСЫ ---------- */
.cx-cases{display:flex;gap:16px}
.cx-cases__list{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
.cx-case{position:relative;display:block;background:var(--cx-white);border:1px solid var(--cx-border);
  border-radius:var(--cx-radius-img);box-shadow:var(--cx-shadow)}
.cx-case__go{position:absolute;z-index:1;top:-20px;right:-20px;opacity:0;
  width:40px;height:40px;border-radius:50%;background:var(--cx-white);color:var(--cx-ink);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--cx-shadow);
  transition:top var(--cx-transition),right var(--cx-transition),opacity var(--cx-transition)}
.cx-case__img{display:block;overflow:hidden;border-radius:8px;background:var(--cx-placeholder);aspect-ratio:16/9}
.cx-case__img img{width:100%;height:100%;object-fit:cover;display:block}
.cx-case__t{font-size:16px;line-height:24px;font-weight:500;color:var(--cx-ink)}
/* баблы с параметрами события — как в блоке кейсов 116 */
.cx-case__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.cx-case__tag{font-size:12px;line-height:16px;font-weight:500;color:var(--cx-ink);
  background:var(--cx-sunken);border-radius:999px;padding:4px 10px}

.cx-case--big{flex:1 1 0;min-width:0;overflow:hidden}
.cx-case--big .cx-case__img{margin:8px}
/* пока кейсы в два столбца — большая картинка тянется по высоте правой колонки */
@media (min-width:992px){
  .cx-case--big{display:flex;flex-direction:column}
  .cx-case--big .cx-case__img{flex:1 1 auto;min-height:0;aspect-ratio:auto}
}
.cx-case--big .cx-case__body{display:block;padding:8px 24px 24px}

.cx-cases__list .cx-case{display:flex;gap:16px;padding:8px;overflow:hidden}
.cx-cases__list .cx-case__img{flex:1 1 0;max-width:227px;aspect-ratio:16/9}
.cx-cases__list .cx-case__body{flex:1 1 auto;max-width:332px;padding:8px 0}

@media (hover:hover){
  .cx-case--big:hover .cx-case__go{top:24px;right:24px;opacity:1}
  .cx-cases__list .cx-case:hover .cx-case__go{top:12px;right:12px;opacity:1}
}

/* ---------- ОБЪЕДИНЁННАЯ ФОРМА ---------- */
/* ---------- ЗАЯВКА ---------- */
.cx-request{display:flex;justify-content:space-between;gap:20px;padding:48px;border-radius:32px;
  background:var(--cx-accent) url(cx-request-bg.svg) center/cover;box-shadow:var(--cx-shadow)}
.cx-request__content{width:100%;max-width:491px}
.cx-request__t{font-size:32px;line-height:40px;font-weight:500;color:#fff;margin-bottom:24px}
.cx-request__p{font-size:20px;line-height:28px;font-weight:500;color:rgba(255,255,255,.6)}
.cx-request__form{width:100%;max-width:517px}
.cx-request__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.cx-request__submit{margin-top:24px;max-width:220px;width:100%;white-space:nowrap;
  background:var(--cx-white);color:var(--cx-ink)}
.cx-request__form.is-done form{display:none}
.cx-request__form.is-done .cx-form__done{display:block}
.cx-request__form .cx-form__done b{color:#fff}
.cx-request__form .cx-form__done span{color:rgba(255,255,255,.6)}
@media (hover:hover){.cx-request__submit:hover{background:var(--cx-ink);color:#fff}}
.cx-form{background:var(--cx-white);border-radius:var(--cx-radius-lg);box-shadow:var(--cx-shadow);padding:24px;
  display:flex;flex-direction:column;gap:12px}
.cx-field{width:100%;height:48px;padding:12px 14px;border:1px solid var(--cx-border);border-radius:var(--cx-radius-sm);
  font-family:inherit;font-size:16px;line-height:24px;color:var(--cx-ink);background:var(--cx-white);
  transition:border-color var(--cx-transition),box-shadow var(--cx-transition)}
textarea.cx-field{height:auto;min-height:80px;resize:vertical}
.cx-field::placeholder{color:var(--cx-secondary)}
.cx-field:focus{outline:none;border-color:var(--cx-accent);box-shadow:var(--cx-ring),var(--cx-shadow)}
.cx-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:18px;color:var(--cx-secondary);cursor:pointer}
.cx-consent input{position:absolute;opacity:0;width:0;height:0}
.cx-consent-box{flex:0 0 auto;width:18px;height:18px;border-radius:4px;border:1px solid var(--cx-border);
  background:var(--cx-white);display:flex;align-items:center;justify-content:center;margin-top:1px;transition:background-color var(--cx-transition),border-color var(--cx-transition)}
.cx-consent-box svg{opacity:0;transition:opacity var(--cx-transition)}
.cx-consent input:checked+.cx-consent-box{background:var(--cx-accent);border-color:var(--cx-accent)}
.cx-consent input:checked+.cx-consent-box svg{opacity:1}
.cx-consent input:focus-visible+.cx-consent-box{box-shadow:var(--cx-ring)}
/* на оранжевом квадратик полупрозрачный белый, а не тёмный */
.cx-consent--onaccent{color:#fff}
.cx-consent--onaccent .cx-consent-box,
.cx-consent--onaccent input:checked+.cx-consent-box{width:20px;height:20px;border-radius:6px;
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.1)}
.cx-form__done{display:none;text-align:center;padding:24px 0}
.cx-form__done b{display:block;font-size:20px;line-height:28px;font-weight:600;color:var(--cx-ink)}
.cx-form__done span{display:block;font-size:14px;line-height:20px;color:var(--cx-secondary);margin-top:8px}
.cx-form.is-done form{display:none}
.cx-form.is-done .cx-form__done{display:block}

/* ---------- ССЫЛКИ ---------- */
.cx-links{display:flex;flex-wrap:wrap;gap:8px}
.cx-link{font-size:14px;line-height:20px;padding:8px 18px;border-radius:999px;background:var(--cx-white);
  border:1px solid var(--cx-border);color:var(--cx-ink);transition:border-color var(--cx-transition),color var(--cx-transition)}
@media (hover:hover){.cx-link:hover{border-color:var(--cx-accent);color:var(--cx-accent)}}

/* ---------- SEO ---------- */
.cx-seo{background:var(--cx-white);border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);padding:32px}
.cx-seo h2{font-size:24px;line-height:32px;font-weight:600;color:var(--cx-ink)}
.cx-seo h3{font-size:20px;line-height:28px;font-weight:600;color:var(--cx-ink);margin-top:24px}
.cx-seo p{font-size:16px;line-height:24px;margin-top:12px}
.cx-seo__body{max-height:300px;overflow:hidden;position:relative;transition:max-height .3s ease}
.cx-seo__body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 100%);pointer-events:none}
.cx-seo.is-open .cx-seo__body{max-height:none}
.cx-seo.is-open .cx-seo__body::after{display:none}
.cx-seo__toggle{margin-top:16px;font-size:14px;line-height:20px;font-weight:500;color:var(--cx-accent)}

/* ---------- БАННЕР ПЛОЩАДКИ ---------- */
.cx-venue{position:relative;border-radius:var(--cx-radius-lg);overflow:hidden;background:var(--cx-ink);
  padding:40px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:220px;justify-content:center}
.cx-venue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.cx-venue::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(49,45,43,.92) 20%,rgba(49,45,43,.35) 100%)}
.cx-venue>*{position:relative;z-index:1}
.cx-venue__t{font-size:32px;line-height:40px;font-weight:500;color:#fff;letter-spacing:-.01em;max-width:600px}
.cx-venue__p{font-size:16px;line-height:24px;color:rgba(255,255,255,.6)}

/* ---------- МОДАЛКИ ---------- */
.cx-modal{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;padding:16px}
.cx-modal.is-open{display:flex}
.cx-modal__scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.cx-modal__card{position:relative;background:var(--cx-white);border-radius:var(--cx-radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.45);padding:32px;width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow-y:auto}
.cx-modal__close{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--cx-ink);transition:background-color var(--cx-transition),transform var(--cx-transition)}
@media (hover:hover){.cx-modal__close:hover{background:var(--cx-hover);transform:rotate(90deg)}}
.cx-modal__t{font-size:24px;line-height:32px;font-weight:600;color:var(--cx-ink)}
.cx-modal__sub{font-size:14px;line-height:20px;color:var(--cx-secondary);margin-top:8px;margin-bottom:20px}
.cx-modal .cx-form{padding:0;box-shadow:none;border-radius:0}

/* видео и лайтбокс — на плотном скриме */
/* ---------- СОСТАВ КОМПЛЕКТА ----------
   HTML списка пишут руками в поле комплекта: .zagolovok в <b> на раздел,
   .popup-row со .popup-name/.popup-price на строку, <br> вместо отбивок.
   Простынёй такой список не читается — раскладываем в две колонки, отбивку
   задаём отступами, а авторские <br> гасим. */
.cx-modal--wide .cx-modal__card{max-width:860px}
.cx-menu{margin-top:16px;font-size:14px;line-height:20px;color:var(--cx-ink)}
.cx-menu br{display:none}
.cx-menu b{font-weight:600}
/* верхняя сводка («стоимость на персону», «выход гр/мл») — во всю ширину */
.cx-menu b:first-of-type{display:block;column-span:all;margin-bottom:16px;
  padding-bottom:16px;border-bottom:1px solid var(--cx-border)}
.cx-menu .zagolovok{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cx-accent);margin:16px 0 4px;break-after:avoid}
.cx-menu .first-zag{margin-top:0}
.cx-menu .popup-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--cx-border-soft);break-inside:avoid}
.cx-menu .popup-price{color:var(--cx-secondary);white-space:nowrap}
@media (min-width:768px){.cx-menu{columns:2;column-gap:32px}}

.cx-modal--media .cx-modal__scrim{background:rgba(0,0,0,.92)}
.cx-modal--media .cx-modal__card{background:none;box-shadow:none;padding:0;max-width:1100px;overflow:visible}
.cx-modal--media .cx-modal__close{right:-4px;top:-52px;color:#fff;background:rgba(255,255,255,.12)}
.cx-modal--media video,.cx-modal--media img{width:100%;max-height:calc(100vh - 140px);object-fit:contain;
  border-radius:var(--cx-radius-img);background:#000;display:block}
.cx-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
.cx-lb-nav--prev{left:-64px}
.cx-lb-nav--next{right:-64px}
.cx-lb-count{text-align:center;color:rgba(255,255,255,.6);font-size:13px;line-height:18px;margin-top:12px}

/* ============================================================
   ПЛАНШЕТ
   ============================================================ */
@media (max-width:991px){
  .cx-hero-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .cx-hero-card,.cx-hero-photo,.cx-promo{grid-column:1;grid-row:auto}
  /* на узких экранах крупный кадр во всю ширину, лента превью — под ним */
  .cx-gal{flex-direction:column-reverse}
  .cx-gal__main{width:auto;align-self:stretch}
  .cx-gal__thumbs-wrap{flex:0 0 auto;max-width:none;min-width:0}
  .cx-gal__thumbs{flex-direction:row;max-height:none}
  /* лента легла горизонтально — фиксируем превью по высоте, ширину даёт кадр */
  .cx-gal__thumb{width:auto;height:76px}
  .cx-gal__thumb img{width:auto;height:100%;max-width:none}
  .cx-gal__thumbs-wrap::before,.cx-gal__thumbs-wrap::after{top:0;bottom:0;height:auto;width:56px}
  .cx-gal__thumbs-wrap::before{right:auto;background:linear-gradient(to right,rgba(49,45,43,.45),rgba(49,45,43,0))}
  .cx-gal__thumbs-wrap::after{left:auto;background:linear-gradient(to left,rgba(49,45,43,.45),rgba(49,45,43,0))}
  .cx-gal__nav{display:none}
  .cx-video-row{grid-template-columns:1fr}
  .cx-intro-card{grid-template-columns:1fr;gap:16px;padding:24px}
  .cx-grid-4{grid-template-columns:repeat(2,1fr)}
  .cx-grid-3{grid-template-columns:repeat(2,1fr)}
  .cx-grid-auto{grid-template-columns:repeat(2,1fr)}
  .cx-team{grid-auto-columns:calc((100% - 16px)/2)}
  .cx-prices{grid-template-columns:repeat(2,1fr)}
  .cx-cases{flex-direction:column}
  .cx-case--big{flex:0 0 auto}
  .cx-case--big,.cx-cases__list .cx-case__img,.cx-cases__list .cx-case__body{max-width:none}
  .cx-about{flex-direction:column}
  .cx-about__video{max-width:none}
  .cx-about__boxes{max-width:none;flex-flow:row wrap;gap:8px}
  .cx-about__box{flex:1 1 calc(50% - 4px);min-width:140px}
  .cx-request{flex-direction:column;padding:24px;border-radius:var(--cx-radius-lg)}
  .cx-request__submit{max-width:none}
  .cx-lb-nav--prev{left:8px}
  .cx-lb-nav--next{right:8px}
  .cx-modal--media .cx-modal__close{right:8px;top:-52px}
}

/* ============================================================
   МОБИЛЬНЫЙ
   ============================================================ */
@media (max-width:768px){
  .cx-root{--cx-rhythm:60px}
  .cx-head{flex-direction:column;align-items:flex-start;gap:12px}
  .cx-head__t{font-size:24px;line-height:32px}
  .cx-head__sub{font-size:14px;line-height:20px}
  .cx-head__aside{display:none}

  .cx-hero{padding:12px 0 0}
  .cx-hero-grid{gap:12px}
  .cx-hero-card{padding:16px;border-radius:var(--cx-radius-img)}
  .cx-promo{border-radius:var(--cx-radius-img)}
  .cx-promo__inner{padding:16px}
  .cx-gal__main{border-radius:var(--cx-radius-img)}
  .cx-hero-title{font-size:24px;line-height:32px}
  .cx-hero-price{font-size:24px;line-height:30px}
  .cx-hero-sub{font-size:16px;line-height:24px}
  .cx-hero-actions .cx-btn{width:100%}


  .cx-video-row{padding:12px;gap:16px;border-radius:var(--cx-radius-img)}
  .cx-video-title{font-size:20px;line-height:28px}
  .cx-video-text{font-size:14px;line-height:20px}
  .cx-video-body .cx-btn{width:100%}

  .cx-intro-card h2{font-size:24px;line-height:32px}

  .cx-grid-4,.cx-grid-3,.cx-grid-auto{grid-template-columns:1fr}
  .cx-team{grid-auto-columns:88%}
  .cx-opts{grid-template-columns:repeat(2,1fr);gap:8px}
  /* «часто добавляют» на узком — свайп-лента: пальцем удобнее, чем длинная
     колонка из широких карточек. Стрелок не нужно, скролл нативный. */
  .cx-opts--banner{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:88%;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
  .cx-opts--banner::-webkit-scrollbar{display:none}
  .cx-opts--banner>*{scroll-snap-align:start}

  .cx-steps,.cx-feats{padding:16px;border-radius:var(--cx-radius-img)}
  .cx-steps-lane{flex-direction:column;align-items:stretch;gap:0}
  .cx-step{flex-direction:row;align-items:center;text-align:left;gap:16px;min-width:0}
  .cx-step__ic{width:48px;height:48px;flex:0 0 auto}
  .cx-step__ic img{width:24px;height:24px}
  .cx-step-arrow{margin:4px 0 4px 23px;align-self:flex-start;transform:rotate(90deg);padding:0}

  .cx-prices{grid-template-columns:1fr}
  .cx-price{--cx-price-pad:16px}
  /* на узком экране 28px смотрятся грубо */
  .cx-price__amount{font-size:24px;line-height:32px}

  .cx-addon__img{width:120px}

  .cx-promo__img{display:none}
  .cx-promo__inner{padding:16px;text-align:left}
  .cx-promo__t{font-size:16px;line-height:24px}
  .cx-promo__p{font-size:14px;line-height:20px}
  .cx-request__t{font-size:24px;line-height:32px}
  .cx-request__p{font-size:14px;line-height:20px}
  .cx-request__row{grid-template-columns:1fr}
  .cx-about__num{font-size:24px;line-height:32px}
  .cx-cases__list .cx-case{flex-direction:column}
  .cx-cases__list .cx-case__img{flex:0 0 auto;width:100%}
  .cx-form{padding:16px}

  .cx-seo{padding:20px;border-radius:var(--cx-radius-img)}
  .cx-seo h2{font-size:20px;line-height:28px}
  .cx-seo h3{font-size:18px;line-height:26px}

  .cx-venue{padding:24px;min-height:0;border-radius:var(--cx-radius-img)}
  .cx-venue__t{font-size:24px;line-height:32px}
  .cx-venue::after{background:linear-gradient(180deg,rgba(49,45,43,.6) 0%,rgba(49,45,43,.92) 100%)}

  .cx-modal__card{padding:20px}
  .cx-modal__t{font-size:20px;line-height:28px}
}

@media (max-width:480px){
  .cx-hero-title{font-size:22px;line-height:30px}
  .cx-btn{padding:12px 20px}
}

@media (prefers-reduced-motion:reduce){
  .cx-root *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- кнопка корзины сайта ----------
   Разметку отдаёт ItemClass::printCartButton (.orange-link.add_to_cart), клик ловит
   общий обработчик в js/2024/add.js — поэтому кнопку не переписываем, а причёсываем. */
/* width/height в style.css заданы фиксированными (153×40) — сбрасываем,
   иначе кнопка ниже соседней «Заказать в 1 клик» */
.cx-root .orange-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:auto;
  font-size:16px;line-height:24px;font-weight:500;padding:12px 28px;border-radius:var(--cx-radius-md);
  border:1px solid transparent;background:var(--cx-accent);color:#fff;text-align:center;cursor:pointer;
  transition:background-color var(--cx-transition)}
/* цвет в style.css стоит с !important (.orange-link.add_to_cart — светлый #FF926C),
   поэтому перебиваем тем же весом — в редизайне основная кнопка брендовая */
.cx-root .orange-link svg{flex:0 0 auto}
.cx-root .orange-link.add_to_cart{background-color:var(--cx-accent) !important}
.cx-root .orange-link.add_to_cart_active{background-color:var(--cx-ink) !important}
@media (hover:hover){
  .cx-root .orange-link.add_to_cart:hover{background-color:var(--cx-accent-hover) !important}
  .cx-root .orange-link.add_to_cart_active:hover{background-color:var(--cx-ink) !important}
}