/* ════════════════════════════════════════════════════════════
   TOP Cosmetics — Redesign main page
   Source: layout.html (premium-cosmetic.ru/layout.html)
   Image paths use absolute /img/ from web root
   ════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}

body.page-redesign{font-family:'Montserrat','Inter',system-ui,sans-serif;color:#1a1a2e;background:#F8FAFD}
body.page-redesign a{text-decoration:none;color:inherit}
body.page-redesign img{max-width:100%;display:block}
body.page-redesign ul{list-style:none}
body.page-redesign button{cursor:pointer;border:none;background:none;font-family:inherit}

:root{
  --blue:#0059B9;
  /* Правка №69: убираем градиентные заливки кнопок/элементов ВЕЗДЕ, кроме футера.
     --grad-blue используется повсеместно (кнопки, активные состояния, 3px-акценты) →
     делаем его ПЛОСКИМ одноцветным «градиентом»: визуально сплошной синий, но остаётся
     background-image, поэтому трюк `background:var(--grad-blue) .../3px ... no-repeat`
     (тонкие акцент-полоски) продолжает работать. Футер держит градиент литералом
     (см. .site-footer), а НЕ через эту переменную — поэтому там он сохраняется. */
  --grad-blue:linear-gradient(var(--blue),var(--blue));
  --blue-2:#3d8fe0;
  --blue-light:#89c2ff;
  --text:#1a1a2e;
  --gray:#6b7280;
  --border:#e5e7eb;
  --star:#f59e0b;
  --r-hero:20px;
  --r-card:12px;
  --r-feature:10px;
  --container:1284px;
  --hero-h:720px;
}

/* ── HERO CARD ───────────────────────────────────────────── */
.hero-section{
  position:relative;
  max-width:var(--container);
  height:clamp(480px, 56vw, 720px);
  margin:clamp(16px, 1.5vw, 20px) auto 0;
  border-radius:var(--r-hero);
  overflow:hidden;
  background:#e8edf6;   /* фон-заглушка, пока грузится первый слайд */
}

/* ── HERO-карусель баннеров ─────────────────────────────────
   Track из слайдов (5 + клон первого), сдвигается transform'ом — бесшовно,
   один слайд «уезжает», следующий вплотную «выплывает». JS: redesign-ui.js. */
.hero-track{
  display:flex;
  height:100%;
  will-change:transform;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.hero-track.no-anim{transition:none}          /* мгновенный прыжок на клоне (петля) */
/* position:relative — чтобы текстовый оверлей intro-слайда (.slide-content, absolute)
   позиционировался ВНУТРИ своего слайда и ехал вместе с ним, а не висел поверх карусели. */
.hero-slide{flex:0 0 100%;height:100%;position:relative}
.hero-slide picture{display:block;width:100%;height:100%}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}

/* ── HEADER (floats over hero) ───────────────────────────── */
.site-header{
  position:absolute;
  top:20px;left:20px;right:20px;
  height:80px;
  z-index:10;
}
.header-inner{
  height:100%;
  background:#fff;
  border-radius:20px;
  padding:0 16px;
  display:flex;align-items:center;gap:0;
}

.h-logo{flex-shrink:0;display:flex;align-items:center}
.h-logo img{height:29px;width:auto;object-fit:contain}

.menu-btn{
  flex-shrink:0;
  display:none;align-items:center;justify-content:center;gap:5px;
  width:97px;height:40px;
  padding:8px 12px;
  background:var(--blue);color:#fff;
  border-radius:50px;
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:400;line-height:1;
  transition:background .2s;
}
.menu-btn:hover{background:#004fa6}
.menu-btn img{width:17px;height:13px;display:block}

/* overflow тут был ради семи пунктов, из которых четыре были чужими подразделами.
   Пунктов теперь четыре (корни каталога), а подразделы выпадают панелью — её обрезать нельзя. */
.site-nav{flex:1;display:flex;align-items:center;justify-content:center;gap:24px;min-width:0}
.site-nav a{
  color:var(--text);
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:400;line-height:1;
  white-space:nowrap;padding:6px 10px;border-radius:8px;
  transition:background .28s ease,color .25s ease;
}
.site-nav a:hover{background:#f0f4ff;color:var(--blue)}

.h-icons{display:flex;align-items:center;gap:2px;flex-shrink:0}
.h-icon{
  position:relative;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;
  border:none;background:transparent;cursor:pointer;
}
.h-icon:hover{background:#f0f4ff}
.h-icon img{width:22px;height:22px;object-fit:contain;transition:transform .25s ease}
.h-icon:hover img{transform:scale(1.06)}

/* Поиск-дропдаун в шапке.
   Места по горизонтали мало → форма выпадает ВНИЗ под header'ом,
   выровнена по правому краю кнопки лупы. Анимация — slide-down + scale-Y. */
.h-search{display:flex;align-items:center}
/* Форма выпадает по центру под header'ом, ширина под экран.
   Позиционируется относительно .site-header (он absolute, ближайший positioned предок). */
.h-search-form{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  width:clamp(320px,65vw,720px);
  max-width:calc(100% - 32px);
  height:48px;
  display:flex;align-items:center;
  background:#fff;
  border:1px solid #CAD5F0;
  border-radius:24px;
  padding:0 6px 0 20px;
  box-shadow:0 10px 28px rgba(0,30,80,.16);
  opacity:0;
  transform-origin:top center;
  transform:translateX(-50%) translateY(-6px) scaleY(.6);
  pointer-events:none;
  transition:opacity .22s ease,transform .3s cubic-bezier(.22,.75,.25,1);
  z-index:11;
}
.h-search.is-open .h-search-form{
  opacity:1;
  transform:translateX(-50%) translateY(0) scaleY(1);
  pointer-events:auto;
}
.h-search-form input{
  flex:1;min-width:0;
  border:none;outline:none;background:transparent;
  font:400 14px 'Montserrat',sans-serif;color:var(--text);
  padding:0;
}
.h-search-form input::placeholder{color:#8FA0C2}
.h-search-form button[type="submit"]{
  flex-shrink:0;
  width:36px;height:36px;border-radius:50%;
  border:none;background:var(--blue);cursor:pointer;
  padding:0;margin-left:8px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  transition:background .2s ease,transform .2s ease;
}
.h-search-form button[type="submit"]:hover{background:#004fa6;transform:scale(1.05)}
.h-search-form button[type="submit"] svg{width:16px;height:16px}
.h-search [data-search-toggle]{position:relative;z-index:2}
.h-search.is-open [data-search-toggle]{background:#f0f4ff}
.h-badge{
  position:absolute;top:-3px;right:-3px;
  width:16px;height:16px;padding:0;
  background:var(--blue);color:#fff;
  border-radius:50%;
  font-family:'Montserrat',sans-serif;
  font-size:9px;font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid #fff;
  box-sizing:content-box;
  pointer-events:none;
}
.h-badge[hidden]{display:none}

/* ── HERO SLIDE CONTENT ──────────────────────────────────── */
.slide-content{
  position:absolute;
  top:170px;left:12.6%;
  z-index:5;
  max-width:500px;
}
.slide-sub{
  color:#FFFFFFCC;
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:500;line-height:1.2;letter-spacing:-0.01em;
  margin-bottom:12px;
}
.slide-title{
  color:#FFFFFFCC;
  font-family:'Montserrat',sans-serif;
  font-size:60px;font-weight:500;line-height:1;letter-spacing:0;
  margin-bottom:18px;
}
.slide-disc{
  display:inline-block;color:#E1F0FF;
  font-family:'Montserrat',sans-serif;
  font-size:82px;font-weight:400;line-height:1;letter-spacing:0;
  padding:22px 50px;
  margin:0 0 18px -16px;
  background:url('/img/hero-slider-deco.svg') center/100% 100% no-repeat;
}
.slide-note{
  color:#FFFFFFCC;
  font-family:'Montserrat',sans-serif;
  font-size:18px;font-weight:500;line-height:1;
  margin-bottom:28px;
}
.slide-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  width:216px;height:60px;
  padding:0 30px;
  background:var(--blue);color:#fff;
  border-radius:10px;
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:500;line-height:1;
  transition:background .2s;
}
.slide-btn:hover{background:#004fa6}
.slide-btn img{width:14px;height:14px;display:block}

/* ── SLIDER ARROWS ───────────────────────────────────────── */
.s-arrow{
  position:absolute;top:50%;margin-top:-30px;z-index:10;
  width:60px;height:60px;border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  transition:background .2s;
}
.s-arrow:hover{background:rgba(255,255,255,.38)}
.s-arrow svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s-arrow.prev{left:20px}
.s-arrow.next{right:20px}

.s-dots{
  position:absolute;bottom:28px;left:0;right:0;
  display:flex;justify-content:center;align-items:center;gap:8px;z-index:10;
}
/* .hero-section-префикс обязателен: точки стали <button>, а глобальный ресет
   body.page-redesign button{background:none} иначе перебивает фон по специфичности. */
.hero-section .s-dot{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.75);
  border:0;padding:0;
  /* тень-контур: баннеры бывают со светлыми зонами, где белые точки сливались */
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  cursor:pointer;transition:width .25s ease,background .25s,border-radius .25s;
}
.hero-section .s-dot.on{
  width:28px;height:9px;
  border-radius:6px;
  background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}

/* CTA поверх карусели. Слева снизу, но с отступом «к центру» — попадает под текстовый
   блок баннеров и не лезет ни в точки (по центру), ни в cookie-плашку (справа). */
.hero-cta{
  position:absolute;z-index:15;
  /* Проценты, а не px: у hero постоянное соотношение сторон (ширина min(1284,100vw),
     высота 56vw с потолком 720), поэтому процент держит кнопку на одном месте
     относительно рисунка баннера на любой ширине. 12.5% — левый край плашек,
     нарисованных на баннерах. */
  bottom:26%;left:12.5%;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 26px;
  background:var(--blue);color:#fff;
  border-radius:10px;
  font-family:'Montserrat',sans-serif;
  font-size:16px;font-weight:500;line-height:1;
  box-shadow:0 8px 22px rgba(16,24,40,.22);
  transition:background .2s,transform .2s;
}
.hero-cta:hover{background:#004fa6;transform:translateY(-2px)}
.hero-cta img{width:12px;height:12px;display:block}
/* Кнопка физически не внутри ленты, поэтому при смене слайда «подъезжает» вместе с
   ним — иначе весь баннер уезжает, а кнопка стоит. Тайминг тот же, что у .hero-track. */
@keyframes heroCtaInR{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:translateX(0)}}
@keyframes heroCtaInL{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:translateX(0)}}
.hero-cta.is-swing-r{animation:heroCtaInR .6s cubic-bezier(.4,0,.2,1) both}
.hero-cta.is-swing-l{animation:heroCtaInL .6s cubic-bezier(.4,0,.2,1) both}
/* глобальный ресет ссылок в редизайне снимает цвет — возвращаем явно */
body.page-redesign .hero-cta{color:#fff}

.cookie-box{
  position:absolute;bottom:20px;right:30px;z-index:20;
  width:362px;height:116px;
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(34px);
  -webkit-backdrop-filter:blur(34px);
  border-radius:10px;padding:20px;
  display:flex;gap:20px;align-items:center;
}
.cookie-text{
  color:#fff;flex:1;
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:500;line-height:1;letter-spacing:-0.01em;
}
.cookie-ok{
  flex-shrink:0;
  background:#fff;color:var(--text);
  border-radius:8px;padding:10px 16px;
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:500;line-height:1.2;letter-spacing:-0.01em;
  text-align:center;
  transition:background .15s;
}
.cookie-ok:hover{background:#f3f4f6}

/* ── MAIN WRAP ───────────────────────────────────────────── */
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(12px,2vw,24px)}

/* ── ADVANTAGES ─────────────────────────────────────────── */
.advantages{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(12px,1.5vw,24px);
  margin-top:24px;
  margin-bottom:32px;
}
.adv{
  background:#fff;
  border-radius:var(--r-feature);
  padding:30px;
  min-height:201px;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
}
.adv-icon{margin-bottom:18px;display:flex;align-items:center}
.adv-icon img{width:30px;height:30px;object-fit:contain}
.adv h3{
  font-family:'Montserrat',sans-serif;
  font-size:20px;font-weight:500;line-height:1;
  margin-bottom:14px;
}
.adv p{
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:500;line-height:1.35;
  color:var(--gray);
}

/* ── SECTION HEAD ─────────────────────────────────────── */
.sec-head{display:flex;align-items:flex-end;gap:20px;margin-bottom:24px}
.sec-title{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(26px,4vw,50px);font-weight:500;line-height:1;letter-spacing:0;
}
.sec-sub{
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:500;line-height:1;
  color:var(--gray);
  padding-bottom:6px;
}

/* ── PRODUCTS — DESKTOP GRID 4 cols / MOBILE slider ─────── */
.prod-section{margin-top:56px;position:relative}
.prod-wrap{position:relative}
.prod-track{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  background:#fff;
  border-radius:20px;
  border:1px solid #CAD5F0;
  overflow:hidden;
}
.s-btn{display:none}

.p-card{
  position:relative;
  background:transparent;
  padding:0;
  /* было 459 — минус строка со звёздами (14px) и её gap (12px) */
  height:433px;
  display:flex;flex-direction:column;
  border-right:1px solid #CAD5F0;
}
.p-card:last-child{border-right:none}

.card-img{
  position:relative;flex:1;width:100%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  color:#cbd5e1;font-size:12px;
}
.card-img img{max-width:100%;max-height:100%;object-fit:contain}

.card-bottom{
  background:#F8FAFD;
  padding:16px 20px 20px;
  display:flex;flex-direction:column;gap:12px;
}

.p-badge{
  position:absolute;top:16px;left:16px;z-index:2;
  display:flex;flex-direction:column;gap:2px;
  font-family:'Montserrat',sans-serif;
  color:var(--blue);
  pointer-events:none;
}
.p-badge .b-disc{font-size:16px;font-weight:600;line-height:1;color:#C86700CC}
.p-badge .b-tag{font-size:11px;font-weight:500;line-height:1;color:#475886}

.p-badge-top{
  flex-direction:row;align-items:center;gap:4px;
  background:transparent;color:var(--blue);
  border-radius:0;padding:0;
  font-family:'Montserrat',sans-serif;
  font-size:12px;font-weight:500;line-height:1;
  height:fit-content;
}
.p-badge-top::before{content:'★';color:var(--blue);font-size:1.15em;line-height:1}

.fav-btn{
  position:absolute;top:14px;right:14px;z-index:2;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;cursor:pointer;padding:0;
  border-radius:50%;
  transition:transform .22s cubic-bezier(.2,.7,.2,1);
  overflow:visible;
}
/* Заливка-сердечко через mask — растёт радиально из центра.
   Видна на hover и в активном состоянии. */
.fav-btn::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:22px;height:22px;
  margin:-11px 0 0 -11px;
  background:#E62D32;
  -webkit-mask:url('/img/heart-filled.svg') center/contain no-repeat;
          mask:url('/img/heart-filled.svg') center/contain no-repeat;
  clip-path:circle(0% at 50% 50%);
  opacity:0;
  transition:clip-path .35s cubic-bezier(.22,.75,.25,1),opacity .2s ease;
  pointer-events:none;
  z-index:1;
}
.fav-btn.is-active::before{
  opacity:1;
  clip-path:circle(75% at 50% 50%);
}
.fav-btn:active{transform:scale(.92)}
.fav-btn img{
  width:22px;height:22px;object-fit:contain;
  position:relative;z-index:0;
  transition:opacity .2s ease;
}
/* Когда заливка покрывает иконку — прячем серый контур, чтобы не темнил цвет. */
.fav-btn.is-active img{opacity:0}
/* Hover-визуал — только на устройствах с курсором (мышь/трекпад).
   На тачах sticky-hover после тапа удерживал «залитое» состояние и мешал
   увидеть результат снятия like'a. */
@media(hover:hover) and (pointer:fine){
  .fav-btn:hover::before{opacity:1;clip-path:circle(75% at 50% 50%)}
  .fav-btn:hover img{opacity:0}
  .fav-btn:hover{transform:scale(1.06)}
}

/* Клик — pop сердечка + красный burst-пульс (растушеванный для эффекта пульсации).
   JS навешивает .fav-pop на 600ms. */
.fav-btn.fav-pop::before{animation:favPop .55s cubic-bezier(.34,1.56,.64,1)}
.fav-btn.fav-pop::after{
  content:'';
  position:absolute;inset:-14px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(230,30,40,.55) 0%, rgba(230,30,40,0) 62%);
  animation:favBurst .55s ease-out forwards;
  pointer-events:none;
  z-index:0;
}
@keyframes favPop{
  0%  {transform:scale(1)}
  35% {transform:scale(1.4)}
  65% {transform:scale(.9)}
  100%{transform:scale(1)}
}
@keyframes favBurst{
  0%  {opacity:.95;transform:scale(.35)}
  100%{opacity:0;transform:scale(1.7)}
}

/* Обычное состояние — белая кнопка с синей обводкой и синей корзиной.
   Синий фон означает «товар уже в корзине» (класс is-added ниже). */
.add-btn{
  position:absolute;right:0;bottom:0;z-index:3;
  width:44px;height:44px;
  border-radius:12px 0 0 0!important;
  background:#fff!important;color:var(--blue);
  display:flex!important;align-items:center;justify-content:center;
  border:none!important;padding:0!important;
  box-shadow:inset 0 0 0 1.5px var(--blue);
  transition:background .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease;
  opacity:1!important;visibility:visible!important;
}
.add-btn:hover{
  background:#fff!important;
  box-shadow:inset 0 0 0 1.5px var(--blue),0 6px 16px rgba(0,30,80,.22);
}
/* Синяя корзина — маской по basket.svg, псевдоэлементом самой кнопки.
   Не JS-слоем: обычное состояние должно быть верным сразу, ещё до скриптов. */
.add-btn::after{
  content:'';position:absolute;left:50%;top:50%;
  width:16px;height:21px;transform:translate(-50%,-50%);
  background:var(--blue);pointer-events:none;
  -webkit-mask:url(/img/basket.svg) center/contain no-repeat;
          mask:url(/img/basket.svg) center/contain no-repeat;
  opacity:1;transition:opacity .22s ease;
}
/* Белая корзина из <img> нужна только для синего состояния. */
.add-btn img{
  width:16px;height:21px;display:block;
  filter:brightness(0) invert(1);object-fit:contain;
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .22s ease;
}
.add-btn:hover::after{transform:translate(-50%,-50%) scale(1.12)}
.add-btn:hover img{transform:scale(1.12)}

.card-name{
  font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:500;line-height:1.4;
  color:var(--text);
  /* Ровно три строки, а не «не меньше трёх»: наименования из 1С длинные и разной
     длины, при min-height карточки в ряду разъезжались на доли строки, и цены
     вставали на разной высоте. flex:none — чтобы блок не сжимала колонка. */
  height:calc(1.4em * 3);flex:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.card-price{display:flex;align-items:baseline;gap:2px 8px;flex-wrap:wrap}
.c-price{
  font-family:'Montserrat',sans-serif;
  font-size:20px;font-weight:600;line-height:1;color:var(--text);
}
.c-old{
  font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:400;line-height:1;
  color:var(--gray);text-decoration:line-through;
}
/* «за 1 шт» в плитке — инлайн-лейбл у цены по НИЗУ строки (как в quick-view, правка №76):
   не отдельной строкой, а рядом с ценой, прижат к низу. align-self:flex-end. */
.c-per{
  align-self:flex-end;
  font-family:'Montserrat',sans-serif;
  font-size:11px;font-weight:400;line-height:1;color:var(--gray);
}

/* ── BANNERS ─────────────────────────────────────────── */
.banners{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,3vw,40px);
  margin-top:56px;
}
.banner{
  border-radius:20px;overflow:hidden;position:relative;
  min-height:clamp(280px,28vw,398px);
  /* Бренд-баннеры от владельцев. Исходники — квадрат 1592², под блок нарезаны в те же
     1500×960, что были у прежних баннеров (пропорции самой картинки не тронуты, взято
     окно нужной формы со сдвигом вниз — иначе в кадр не попадали и логотип, и товары).
     На мобиле блок квадратный, там подставляется исходный квадрат — см. медиазапрос. */
  background:url('/img/klapp-banner.webp') center/cover no-repeat;
  /* Кнопка держится выравниванием, а не координатами: по вертикали — центр блока
     (там же, где на макетах заканчивается логотип), по горизонтали — отступ 6%
     ширины, ровно с той доли начинается логотип на обеих картинках (замерено).
     Раньше высоту кнопке задавал текст над ней — заголовок, плашка скидки,
     подпись; текстов больше нет, и место ей задаёт сам блок. */
  /* padding-bottom поднимает кнопку над центром: центрирование считается по
     свободному месту, поэтому нижний отступ смещает её вверх на свою половину. */
  display:flex;align-items:center;padding:0 0 32px calc(6% - 5px);
}
.b-content{max-width:60%}
.banner-2{background:url('/img/bouticle-banner.webp') center/cover no-repeat}
/* У Bouticle низ слева синий — синяя кнопка на нём слилась бы. */
.banner-2 .b-btn{background:#fff;color:var(--blue)}
.banner-2 .b-btn:hover{background:#f0f4ff}
.banner-2 .b-btn img{content:url('/img/arrow-right-up-blue.svg')}
.b-content{position:relative;z-index:2;max-width:50%;display:flex;flex-direction:column;align-items:flex-start}

.b-title{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(24px,3.5vw,36px);font-weight:500;line-height:1.05;color:#fff;
  margin-bottom:14px;
}

.banner .b-disc, .banner .b-new{
  display:inline-block;color:#fff;
  font-family:'Montserrat',sans-serif;
  font-weight:400;line-height:1;
  background:url('/img/hero-slider-deco.svg') center/100% 100% no-repeat;
  margin-bottom:14px;
}
.banner .b-disc{font-size:clamp(34px,5vw,54px);padding:clamp(10px,1.5vw,16px) clamp(22px,3vw,36px)}
.banner .b-new{font-size:clamp(18px,2.5vw,24px);padding:clamp(6px,1vw,10px) clamp(16px,2.5vw,26px);font-weight:500}

.b-note{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(13px,1.5vw,14px);font-weight:500;line-height:1;
  color:rgba(255,255,255,.92);
  margin-bottom:24px;
}
.b-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  height:clamp(42px,4vw,48px);padding:0 clamp(20px,2.5vw,24px);
  background:var(--blue);color:#fff;
  border-radius:10px;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(15px,1.7vw,17px);font-weight:500;line-height:1;
  transition:background .2s;
}
.b-btn:hover{background:#004fa6}
.b-btn img{width:12px;height:12px;display:block}
/* Ekseption-баннер (только .banner, НЕ .banner-2): текст кнопки всегда белый.
   :not(.banner-2) — чтобы не задеть светлый баннер Findive (.banner.banner-2), где текст синий на белом. */
body.page-redesign .banner:not(.banner-2) .b-btn{color:#fff!important}

/* ── FOOTER ─────────────────────────────────────────── */
.site-footer{
  position:relative;
  background:linear-gradient(104.83deg,#2268B9 39.53%,#89C2FF 89.38%);
  color:#fff;
  padding:60px 0 32px;margin-top:87px;
  border-radius:24px 24px 0 0;
  overflow:hidden;
  display:block;width:100%;
  max-width:none;
}
/* На страницах каталога main_content max-width:1284 не должен сужать footer (footer вне main_content в DOM) */
body.page-redesign > footer.site-footer,
body.page-redesign footer.site-footer{
  width:100%!important;max-width:none!important;
}
.site-footer .wrap{position:relative;z-index:1}

.foot-logo{margin-bottom:20px}
.foot-logo img{width:228px;height:auto;display:block;opacity:.85}
.foot-mobile-logo{display:none}

.foot-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:60px;
  padding-bottom:40px;
  margin-bottom:24px;
}
.foot-phone{
  font-family:'Montserrat',sans-serif;
  font-size:22px;font-weight:600;margin-bottom:18px;
}
.foot-call{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--text);
  border-radius:10px;padding:12px 20px;
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:500;margin-bottom:24px;
  transition:background .2s;
}
.foot-call:hover{background:#f0f4ff}

.foot-socials{display:flex;gap:14px}
.soc{display:inline-flex;align-items:center;transition:opacity .2s}
.soc:hover{opacity:.7}
.soc img{width:33px;height:33px;object-fit:contain}

.foot-col-title{
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:500;color:rgba(255,255,255,.6);
  margin-bottom:20px;
}
.foot-nav{display:flex;flex-direction:column;gap:14px}
.foot-nav a{
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:500;color:#fff;
  transition:opacity .15s;
}
.foot-nav a:hover{opacity:.75}

.foot-pays{display:flex;flex-direction:column;gap:14px}
.pay-badge{display:inline-flex;align-items:center;width:fit-content}
.pay-badge img{height:30px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.5}
.pay-badge.pay-mir img{width:71px;height:19px;opacity:.5}
.pay-badge.pay-sbp img{width:83px;height:43px;opacity:.5}

.foot-up{
  width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s;
  border:none;padding:0;
  align-self:flex-end;
}
.foot-up:hover{background:rgba(255,255,255,.32)}
.foot-up img{
  width:12px;height:12px;
  transform:rotate(90deg);
  filter:brightness(0) invert(1);
  object-fit:contain;
}
.foot-pays-col{display:flex;flex-direction:column;position:relative}
.foot-pays-col .foot-up{position:absolute;top:0;right:0}

.foot-bottom{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  position:relative;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.15);
  font-family:'Montserrat',sans-serif;
  font-size:13px;color:rgba(255,255,255,.5);
}
.foot-bottom a{color:rgba(255,255,255,.5);transition:color .15s}
.foot-bottom a:hover{color:#fff}
/* Юр-ссылки — по центру, между ними точки-разделители (на ВСЕХ экранах); копирайт
   отдельной строкой под ними по центру (см. gap колонки .foot-bottom). */
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 0}
.foot-legal a{position:relative}
.foot-legal a:not(:first-child)::before{
  content:'•';margin:0 9px;color:rgba(255,255,255,.35);font-size:11px;
}
.foot-bottom > span{width:100%;text-align:center}

/* ── MOBILE LAYOUT SWITCH ─────────────────────────────────── */
@media(max-width:768px){
  .hero-section{
    margin:16px 16px 0;
    border-radius:28px; /* = радиус плашки хедера (20) + отступ (8) → ровная рамка в углу */
    /* Только от ширины: в Safari все единицы высоты (svh/lvh/dvh) гуляют при скролле. */
    height:min(139vw, 640px);
    aspect-ratio:auto;
    background:url('/img/hero-slide-1-mobile.webp') center 25%/cover no-repeat;
  }
  .hero-slide img{object-position:center 25%}

  /* Хедер образует с hero тонкую равномерную рамку (макет): меньший отступ, выше плашка */
  .site-header{top:8px;left:8px;right:8px;height:64px}
  .header-inner{border-radius:20px}
  .site-nav{display:none}
  .header-inner{padding:0 12px;gap:0;border-radius:18px}
  .h-logo img{height:29px} /* лого одного размера на hero и синем хедере */
  .menu-btn{
    display:inline-flex;
    width:36px;height:36px;padding:0;margin:0;
    background:transparent;
    order:99;
  }
  /* Бургер — две черты по макету (#475886). На синем инверсном хедере тот же файл
     перекрашивается в белый фильтром (см. .site-header--inverted .menu-btn img, ~6313). */
  .menu-btn img{content:url('/img/menu-lines.svg');width:22px;height:22px}
  .menu-text{display:none}
  .h-icons{gap:2px;order:50;margin-left:auto}
  .h-icon{width:30px;height:30px}
  .h-icon img{width:18px;height:18px}

  .slide-content{
    top:62%;bottom:auto;left:50%;transform:translateX(-50%);
    max-width:90%;width:90%;
    text-align:center;
    display:flex;flex-direction:column;align-items:center;
  }
  .slide-sub{font-size:clamp(16px,4vw,20px);font-weight:500;margin-bottom:10px;font-family:'Montserrat',sans-serif;letter-spacing:0}
  .slide-title{font-size:clamp(36px,10.5vw,48px);font-weight:500;line-height:1;margin-bottom:8px}
  .slide-disc{font-size:clamp(42px,13vw,58px);font-weight:400;line-height:1;padding:clamp(10px,3vw,14px) clamp(24px,7vw,32px);margin:0 0 14px;background-size:100% 100%}
  .slide-note{font-size:clamp(16px,4vw,20px);font-weight:500;margin-bottom:14px;display:block}
  .slide-btn{
    width:177px;height:44px;padding:0;
    font-size:13px;font-weight:500;line-height:1;white-space:nowrap;
    border-radius:10px;gap:6px;
  }
  .slide-btn img{width:9px;height:9px}

  .cookie-box{display:none}

  .s-arrow{width:48px;height:48px;top:50%;margin-top:-24px;transform:none}
  .s-arrow.prev{left:12px}
  .s-arrow.next{right:12px}
  .s-dots{display:none}

  /* CTA — внизу по центру. Центрируем через left/right/margin, а не transform:
     transform занят подъёмом на :hover, иначе они перебивали бы друг друга. */
  .hero-cta{
    left:0;right:0;margin:0 auto;width:fit-content;
    /* 14% минус собственная высота; max — чтобы на низком экране (hero обрезан по
       высоте) кнопка не прижималась к самому краю */
    bottom:max(20px, calc(14% - 48px));height:48px;padding:0 22px;font-size:15px;
  }

  .wrap{padding:0 16px}

  .advantages{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
  .adv{padding:20px;min-height:auto;border-radius:14px}
  .adv h3{font-size:16px}
  .adv p{font-size:13px}

  .sec-head{gap:14px;margin-bottom:20px;align-items:flex-end}
  .sec-sub{font-size:12px;padding-bottom:4px}

  .prod-section{margin-top:40px;padding-bottom:140px}
  .prod-wrap{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin:0 -16px;
    padding:0 16px;
  }
  .prod-wrap::-webkit-scrollbar{display:none}
  .prod-track{
    display:flex;gap:0;
    width:max-content;
    background:#fff;
    border:1px solid #CAD5F0;
    border-radius:14px;
    grid-template-columns:none;
  }
  .p-card{
    flex:0 0 280px;
    scroll-snap-align:start;min-width:0;
    background:transparent;
    border:none;
    border-right:1px solid #CAD5F0;
    border-radius:0;
    height:auto;
    overflow:hidden;
  }
  /* Явная ширина: Safari меряет max-content трека по содержимому, игнорируя flex-basis. */
  .prod-track .p-card{width:280px}
  .p-card:last-child{border-right:none}
  .p-card .card-bottom{background:transparent;border-radius:0}
  .p-card .card-img{flex:none;height:300px}
  .s-btn{
    display:flex;
    position:absolute;bottom:60px;z-index:5;
    width:60px;height:60px;border-radius:40px;
    background:#000A2414;border:none;padding:10px;
    align-items:center;justify-content:center;
    transition:background .15s;
    transform:none;top:auto;
  }
  .s-btn:hover{background:#000A2424}
  .s-btn img{width:12px;height:12px;object-fit:contain}
  .s-btn.next img{transform:rotate(180deg)}
  .s-btn.prev{left:50%;margin-left:-68px}
  .s-btn.next{left:50%;margin-left:8px}

  .banners{grid-template-columns:1fr;margin-top:0;gap:10px}
  .banner{
    aspect-ratio:1;min-height:auto;height:auto;
    border-radius:20px;padding:0;
    /* Блок здесь квадратный — берём исходный квадрат макета, а не десктопную нарезку:
       у неё пришлось бы срезать бока, вместе с товарами справа. */
    background:url('/img/klapp-banner-sq.webp') center/cover no-repeat;
  }
  /* В квадратном кадре кнопка садится ровно по центру — там же заканчивается
     логотип. Нижний отступ десктопа тут не нужен, левый — тот же. */
  .banner{padding:0 0 0 calc(6% - 5px)}
  .banner.banner-2{background:url('/img/bouticle-banner-sq.webp') center/cover no-repeat}
  .banner .b-content{max-width:100%}
  .banner .b-title{font-size:36.85px;line-height:1;margin-bottom:10px}
  .banner .b-disc{font-size:50.36px;line-height:1;padding:10px 24px;margin-bottom:14px;background-size:100% 100%}
  .banner .b-new{font-size:30px;line-height:1;padding:8px 22px;margin-bottom:10px;background-size:100% 100%}
  .b-note{font-size:11.06px;line-height:1;margin-bottom:18px}
  .b-btn{
    width:auto;height:36.85px;padding:0 16px;
    font-size:12px;font-weight:500;line-height:1;
    border-radius:6.14px;gap:5px;
    white-space:nowrap;
  }
  .b-btn img{width:8px;height:8px}

  .site-footer{padding:30px 0 20px;margin-top:80px}
  .foot-brand .foot-logo{display:none}
  .foot-mobile-logo{
    display:block;
    grid-column:1/-1;
    width:100%;max-width:398px;
    height:auto;
    opacity:1;
    margin:0 0 28px;
  }
  .foot-grid{
    grid-template-columns:1fr 1fr;
    gap:14px 40px;padding-bottom:16px;margin-bottom:14px;
  }
  .foot-brand{
    grid-column:1/-1;
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px;
    margin:0 0 14px;
    position:relative;z-index:2;
  }
  .foot-brand .foot-phone{font-size:20px;margin-bottom:0;flex:0 0 auto}
  .foot-brand .foot-call{margin-bottom:0}
  .foot-brand .foot-socials{flex-basis:100%;margin-top:6px}
  .foot-brand .foot-socials .soc img{width:20px;height:20px}

  .foot-pays-col{
    grid-column:1/-1;
    position:static;
    display:flex;flex-direction:row;align-items:center;
    flex-wrap:wrap;gap:14px 32px;
    margin-top:14px;
  }
  .foot-pays-col .foot-col-title{margin-bottom:0;flex-shrink:0}
  .foot-pays-col .foot-pays{flex-direction:row;align-items:center;gap:20px}
  .foot-pays-col .foot-up-break{flex-basis:100%;height:0}
  .foot-pays-col .foot-up{
    position:static;
    flex:0 0 54px;
    width:54px;height:54px;
    margin:14px 0 0;
  }

  /* центр + точки-разделители + копирайт снизу теперь в базе (.foot-bottom); тут только моб-твик отступов */
  .foot-bottom{gap:10px;padding-top:14px}
}

/* ── DESKTOP-ONLY: цвет кнопок под фон баннера ───────────────
   Правило писалось под прежние тёмные баннеры, где синяя кнопка читалась на обоих.
   На новых макетах у Bouticle нижний левый угол — сплошная синяя заливка, и синяя
   кнопка на ней пропадала; там кнопка белая. У Klapp угол светлый — остаётся синей. */
@media(min-width:769px){
  .banner .b-btn{background:var(--blue);color:#fff}
  .banner .b-btn:hover{background:#004fa6}
  .banner .b-btn img{content:normal}
  .banner-2 .b-btn{background:#fff;color:var(--blue)}
  .banner-2 .b-btn:hover{background:#f0f4ff}
  .banner-2 .b-btn img{content:url('/img/arrow-right-up-blue.svg')}
}

/* ── HOVER POLISH ────────────────────────────────────────── */
.slide-btn,.b-btn,.foot-call,.menu-btn,.cookie-ok{transition:background .28s ease,color .25s ease,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.slide-btn:hover,.b-btn:hover,.foot-call:hover,.menu-btn:hover,.cookie-ok:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,30,80,.15)}
.slide-btn:active,.b-btn:active,.foot-call:active,.menu-btn:active,.cookie-ok:active{transform:translateY(0);box-shadow:none}

/* .add-btn (корзина) — основные стили выше; transition/hover уже выставлены там.
   Этот блок оставляем только под :active для тактильного отклика. */
.add-btn:active{transform:scale(.94)}

.p-card{transition:transform .28s cubic-bezier(.2,.7,.2,1),background .15s ease,box-shadow .25s ease}
.p-card:hover{transform:translateY(-4px)}
/* Плавный мини-зум фото при hover карточки. .card-img уже overflow:hidden. */
.p-card .card-img > img{
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.p-card:hover .card-img > img{transform:scale(1.06)}

/* Появление карточек после скелета / пагинации.
   JS навешивает .cards-revealing на контейнер сразу после AJAX-вставки,
   снимает через ~600ms. Лёгкий стаггер для первых карточек ряда. */
@keyframes pcReveal{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:none}
}
.cards-revealing > .p-card,
.cards-revealing .p-card,
.p-card.is-fresh{
  animation:pcReveal .42s cubic-bezier(.2,.75,.25,1) both;
}
.cards-revealing .p-card:nth-child(1){animation-delay:0ms}
.cards-revealing .p-card:nth-child(2){animation-delay:40ms}
.cards-revealing .p-card:nth-child(3){animation-delay:80ms}
.cards-revealing .p-card:nth-child(4){animation-delay:110ms}
.cards-revealing .p-card:nth-child(5){animation-delay:135ms}
.cards-revealing .p-card:nth-child(6){animation-delay:155ms}
.cards-revealing .p-card:nth-child(n+7){animation-delay:170ms}

.h-icon{transition:background .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.h-icon:hover{transform:translateY(-2px)}

/* hover/scale теперь определён в основном блоке .fav-btn выше с radial glow */

.soc{transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
.soc:hover{transform:translateY(-3px)}

.foot-up,.s-btn{transition:background .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.foot-up:hover,.s-btn:hover{transform:scale(1.08)}
.foot-up:active,.s-btn:active{transform:scale(.94)}

.foot-nav a,.site-nav a{transition:opacity .25s ease,background .25s ease,color .25s ease}
/* hover на ссылках навигации — без сдвига, только цвет/фон (см. конкретные правила ниже). */

a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

/* ════════════════════════════════════════════════════════════
   TABLET PORTRAIT (769-1199px) — iPad mini/Air/Pro portrait:
   навигация в бургер (справа, как на мобиле). Hero фон остаётся
   десктопный, корректируем только размеры текста для портретной
   ширины и увеличиваем стрелки/точки слайдера.
   ════════════════════════════════════════════════════════════ */
/* ─── Общее для всех планшетов в портрете (769-1199): бургер вместо nav ─── */
@media(min-width:769px) and (max-width:1199px){
  .site-nav{display:none!important}
  .menu-btn{
    display:inline-flex!important;
    width:44px;height:44px;padding:0;margin:0 0 0 4px;
    background:transparent;
    align-items:center;justify-content:center;
    order:99;
  }
  .menu-btn img{content:url('/img/menu-lines.svg');width:22px;height:22px}
  .menu-text{display:none}
  .header-inner{padding:0 18px;gap:8px}
  .h-icons{order:50;margin-left:auto}

  /* Стрелки + точки слайдера — больше площадь для тапа */
  .s-arrow{width:54px;height:54px;top:50%;margin-top:-27px;transform:none}
  .s-arrow.prev{left:24px}
  .s-arrow.next{right:24px}
  .s-dots{bottom:24px}

  /* Features — 2 в ряд под портрет */
  .advantages{grid-template-columns:repeat(2,1fr);gap:16px}
  .adv{padding:24px;min-height:auto}
  .adv h3{font-size:18px}
  .adv p{font-size:13px}
}

/* ─── iPad mini / Air portrait (769-899) — агрессивная сборка контента ─── */
@media(min-width:769px) and (max-width:899px){
  .hero-section{height:clamp(600px,80vw,820px)}
  .slide-content{top:clamp(180px,23vw,260px);left:14%;max-width:60%}
  .slide-sub{font-size:clamp(14px,1.6vw,18px);margin-bottom:14px}
  .slide-title{font-size:clamp(36px,4.6vw,52px);line-height:1.02;margin-bottom:18px}
  .slide-disc{font-size:clamp(42px,5.6vw,62px);line-height:1;padding:16px 36px;margin:0 0 20px -12px}
  .slide-note{font-size:clamp(15px,1.8vw,19px);margin-bottom:28px}
  .slide-btn{width:auto;min-width:0;height:52px;padding:0 24px;font-size:14px;white-space:nowrap}

  .cookie-box{
    width:clamp(260px,38vw,320px);
    height:auto;min-height:auto;
    right:20px;bottom:60px;
    padding:14px 16px;
  }
  .cookie-text{font-size:12px;line-height:1.4}
  .cookie-ok{flex-shrink:0}
}

/* ─── iPad Pro portrait (900-1199) — лёгкая полировка, layout оставляем ─── */
@media(min-width:900px) and (max-width:1199px){
  /* Шрифты чуть меньше, отступы плотнее. Позиция/высота hero — десктопные. */
  .slide-sub{font-size:13px;margin-bottom:10px}
  .slide-title{font-size:52px;line-height:1;margin-bottom:14px}
  .slide-disc{font-size:70px;padding:18px 40px;margin:0 0 14px -14px}
  .slide-note{font-size:16px;margin-bottom:22px}
  .slide-btn{width:auto;height:54px;padding:0 26px;font-size:14px;white-space:nowrap}
}

/* prefers-reduced-motion.
   Раньше здесь стояла глушилка на всё (*{transition-duration:.01ms}) и полсотни
   исключений к ней. Настройка часто оказывается включённой не намеренно (пресет
   «наилучшее быстродействие» в Windows гасит анимации системы, и браузер отдаёт
   reduce), и тогда магазин превращался в набор мгновенных переключений, а каждая
   новая анимация умирала молча, пока её не впишешь в список.
   Теперь гасим только движение, которое происходит САМО и крупно. Микро-
   взаимодействия в ответ на действие пользователя играют всегда.
   Автопрокрутка hero останавливается в footer.php — там же, где живёт таймер. */
@media(prefers-reduced-motion:reduce){
  /* Пачка карточек каталога, выезжающая снизу после загрузки/фильтра */
  .cards-revealing > .p-card,
  .cards-revealing .p-card,
  .p-card.is-fresh{ animation:none!important }
}

/* ════════════════════════════════════════════════════════════
   ВНУТРЕННИЕ СТРАНИЦЫ — body.page-redesign .site-header--inverted
   На внутренних header — не absolute поверх hero, а обычным блоком сверху
   с синим фоном и белыми иконками/лого/текстом
   ════════════════════════════════════════════════════════════ */

body.page-inner{background:#F8FAFD}

body.page-redesign .site-header--inverted{
  position:relative!important;
  top:auto!important;left:auto!important;right:auto!important;
  height:auto!important;
  max-width:var(--container);
  margin:16px auto 24px!important;
  padding:0 clamp(12px,2vw,24px);
  background:transparent!important;
}
/* Правка №69: синий хедер внутренних страниц → БЕЛЫЙ, как на главной.
   Чтобы не сливался со светлым фоном страницы — мягкая растушёванная тень
   (как у плавающей плашки хедера главной). Лого/иконки/навигация — тёмные. */
body.page-redesign .site-header--inverted .header-inner{
  background:#fff!important;
  border-radius:20px!important;
  height:80px;
  padding:0 24px;
  box-shadow:0 14px 34px -14px rgba(0,30,80,.20), 0 5px 14px -7px rgba(0,30,80,.12)!important;
}
body.page-redesign .site-header--inverted .h-logo img{
  filter:none!important;
}
body.page-redesign .site-header--inverted .h-icon{
  border-radius:50%;
}
body.page-redesign .site-header--inverted .h-icon img{
  filter:none!important;
}
body.page-redesign .site-header--inverted .h-icon:hover{
  background:#f0f4ff!important;
}
body.page-redesign .site-header--inverted .site-nav a{
  color:var(--text)!important;
  font-weight:400!important;
}
body.page-redesign .site-header--inverted .site-nav a:hover{
  background:#f0f4ff!important;
}
body.page-redesign .site-header--inverted .h-badge{
  background:var(--blue)!important;
  color:#fff!important;
  border-color:var(--blue)!important;
}
@media(max-width:768px){
  /* горизонтальный margin = 0 → плашка хедера идёт по тому же gutter (padding .site-header--inverted),
     что и .main_content → хедер, крошки и контент на одной линии */
  body.page-redesign .site-header--inverted{
    margin:8px 0 16px!important;
  }
  body.page-redesign .site-header--inverted .header-inner{
    height:56px;padding:0 14px;
  }
}

/* main_content и wrapper-inner — Bitrix-обёртки, дадим им минимальное оформление */
body.page-redesign .main_content{
  min-height:50vh;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(12px,2vw,24px);
}
body.page-redesign .wrapper-inner{
  max-width:100%;
}
/* ЕДИНАЯ КОЛОНКА (сетка). Контейнер один — .main_content (max-width + gutter). Вложенные
   легаси-контейнеры (.wrapper-inner: template_styles.css:9349 padding:0 15px; .wrap: свой
   padding+max-width) НЕ добавляют свой отступ/ширину, иначе двойной-тройной gutter и контент
   уезжает правее хедера/крошек. Ровняет хедер/крошки/контент/карточки в одну линию во всём проекте. */
body.page-redesign .main_content .wrapper-inner,
body.page-redesign .main_content .wrap{
  padding-left:0!important;
  padding-right:0!important;
  max-width:none!important;
}
/* Глобальный override капса от template_styles.css (20+ правил text-transform:uppercase) */
body.page-redesign,
body.page-redesign *,
body.page-redesign *::before,
body.page-redesign *::after{
  text-transform:none!important;
}

body.page-redesign .breadcrumbs{
  margin-top:16px;
  margin-bottom:14px;
  font-family:'Montserrat',sans-serif;
  font-size:13px;color:var(--gray);
  background:transparent;
}

/* ── МИНИМАЛИСТИЧНЫЕ крошки: простой текст + разделитель «/», без пилюль ──
   Строка в одну линию (nowrap), длинная цепочка скроллится по горизонтали;
   каждый пункт обрезается по символам с «…» (см. --crumb-max). */
:root{ --crumb-max:14ch; }
body.page-redesign .breadcrumbs .breadcrumbs_item{
  display:inline-flex!important;
  align-items:baseline!important;
  padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;
  vertical-align:middle;
}
/* Пункт-ссылка и пункт-текст — единый минималистичный вид, обрезка по символам */
body.page-redesign .breadcrumbs .breadcrumbs_item .breadcrumbs_item-link,
body.page-redesign .breadcrumbs .breadcrumbs_item.item > span,
body.page-redesign .breadcrumbs .breadcrumbs_item > span{
  display:inline-block!important;
  max-width:var(--crumb-max);
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  vertical-align:bottom!important;
  padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:13px!important;font-weight:400!important;
  color:#8493b0!important;
  text-decoration:none!important;text-transform:none!important;letter-spacing:0!important;
  transition:color .18s ease;
}
body.page-redesign .breadcrumbs .breadcrumbs_item .breadcrumbs_item-link:hover{ color:var(--blue)!important; }
body.page-redesign .breadcrumbs .breadcrumbs_item .breadcrumbs_item-link span{ color:inherit!important;background:transparent!important; }
/* Текущая страница (последний item) — темнее и чуть плотнее, без пилюли */
body.page-redesign .breadcrumbs .breadcrumbs_item.item > span,
body.page-redesign .breadcrumbs .breadcrumbs_item:last-child > span,
body.page-redesign .breadcrumbs .breadcrumbs_item:last-child .breadcrumbs_item-link{
  color:#1a2540!important;font-weight:500!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
/* Разделитель «/» между пунктами */
body.page-redesign .breadcrumbs .breadcrumbs_item:after{
  content:'/'!important;
  display:inline-block!important;
  width:auto!important;height:auto!important;
  margin:0 8px!important;padding:0!important;
  background:transparent!important;border-radius:0!important;
  color:#c3ccdd!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:13px!important;font-weight:400!important;
  line-height:1;vertical-align:baseline;opacity:1!important;
}
body.page-redesign .breadcrumbs .breadcrumbs_item:last-child:after,
body.page-redesign .breadcrumbs .breadcrumbs_item.item:after{ display:none!important; }
/* Строка крошек — одна линия без переноса, длинная цепочка скроллится (скролл скрыт) */
body.page-redesign .breadcrumbs > .wrapper-inner{
  white-space:nowrap!important;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
body.page-redesign .breadcrumbs > .wrapper-inner::-webkit-scrollbar{ display:none; }

/* Заголовок "Товары X в нашем магазине" над каталогом бренда — выровнен
   с h1 в title_box ниже (общий контейнер .catalog__list). */
body.page-redesign .brand-listing-title{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(16px,1.8vw,22px);font-weight:600;
  color:var(--text);
  margin:12px 0 6px;padding:0;
  background:transparent;
}
/* базовый сброс ссылок крошек — вид задаётся минималистичным блоком выше */
body.page-redesign .breadcrumbs a{
  font-family:'Montserrat',sans-serif!important;
  text-decoration:none!important;letter-spacing:0!important;
}
body.page-redesign .breadcrumbs a:hover{color:var(--blue)!important}

/* Заголовок страницы каталога (h1 "Для лица" и др.) — стиль как у .sec-title на главной.
   Исключение — h1 внутри .product_card__title (страница товара): там длинное имя,
   нужно word-wrap и меньший размер — стилизуется отдельным блоком ниже. */
body.page-redesign .title_box h1,
body.page-redesign .catalog__list h1,
body.page-redesign .main_content > h1,
body.page-redesign .main_content > .title_box h1{
  font-family:'Montserrat',sans-serif!important;
  font-size:clamp(24px,3.2vw,46px)!important;
  font-weight:500!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  text-transform:none!important;
  /* Был nowrap: длинные названия разделов вылезали за экран на телефонах и
     выдавливали сортировку на десктопе. Одну строку держим шириной по контенту
     (см. .title_box h1 ниже), а перенос разрешаем, когда контент шире колонки. */
  overflow-wrap:break-word;
  color:var(--text)!important;
  margin:0 0 24px!important;
}
body.page-redesign .crumb-back-wrap{
  display:block;margin:0 0 14px;
}
body.page-redesign .crumb-back{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--grad-blue);color:#fff!important;
  padding:8px 16px;border-radius:12px;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;
  text-decoration:none!important;
  transition:transform .15s ease,box-shadow .15s ease;
}
body.page-redesign .crumb-back:hover{
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,30,80,.15);
}

/* Animsition opacity:0 скрывает контент пока JS не отработает — отключаем */
body.page-redesign .animsition,
body.page-redesign .wrapper-inner.animsition{
  opacity:1!important;
  visibility:visible!important;
  animation:none!important;
}


/* ════════════════════════════════════════════════════════════
   BITRIX OVERRIDES — пишем с .page-index префиксом и !important
   чтобы перебить общие стили из template_styles.css/bootstrap_v4.css
   ════════════════════════════════════════════════════════════ */

/* CTA на слайде hero — белый текст, размер стрелки 8.2px, gap 9 */
body.page-redesign .slide-btn{
  color:#fff!important;
  background:var(--blue)!important;
  gap:9px!important;
}
body.page-redesign .slide-btn img{
  width:8.2px!important;height:8.2px!important;
  filter:none!important;
}

/* Cookie OK — белая капсула */
body.page-redesign .cookie-ok{
  background:#fff!important;color:var(--text)!important;
  border:none!important;
}

/* Стрелки навигации hero — видимый полупрозрачный фон */
body.page-redesign .s-arrow{background:rgba(255,255,255,.22)!important;color:#fff!important}
body.page-redesign .s-arrow:hover{background:rgba(255,255,255,.38)!important}
body.page-redesign .s-arrow svg{stroke:#fff!important;fill:none!important}

/* Кнопки навигации слайдера — desktop белые сбоку, mobile тёмные внизу */
body.page-redesign .s-btn{
  background:#fff!important;
  border:1px solid #CAD5F0!important;
  color:#000A24!important;
}
body.page-redesign .s-btn:hover{background:#f0f4ff!important}
body.page-redesign .s-btn img{filter:none!important}

@media(max-width:768px){
  body.page-redesign .s-btn{
    background:#000A2414!important;
    border:none!important;
  }
  body.page-redesign .s-btn:hover{background:#000A2424!important}
}

/* Header иконки — без borders/teзм */
body.page-redesign .h-icon,body.page-redesign .fav-btn,body.page-redesign .menu-btn,body.page-redesign .cookie-ok,body.page-redesign .add-btn,body.page-redesign .foot-up,body.page-redesign .s-btn{
  border:none!important;outline:none!important;
}

/* Footer call button — белая капсула с тёмным текстом */
body.page-redesign .foot-call{
  background:#fff!important;color:var(--text)!important;
  border:none!important;
}

/* Footer лого внутри foot-brand (desktop) — обычная prozr */
body.page-redesign .foot-brand .foot-logo img{
  filter:none!important;width:228px!important;height:auto!important;
}

/* Скрыть mobile-лого на desktop (template имеет img display rules) */
body.page-redesign .foot-mobile-logo{display:none!important}
@media(max-width:768px){
  body.page-redesign .foot-brand .foot-logo{display:none!important}
  body.page-redesign .foot-mobile-logo{display:block!important}
}

/* Footer back-to-top — STICKY в правом нижнем углу (desktop) / левом (mobile)
   убираем из flex-grid, делаем fixed */
body.page-redesign .foot-pays-col .foot-up{
  position:fixed!important;
  right:24px!important;bottom:24px!important;
  top:auto!important;left:auto!important;
  z-index:50!important;
  width:54px!important;height:54px!important;
  background:var(--blue)!important;
  box-shadow:0 4px 16px rgba(0,30,80,.25)!important;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .2s ease,background .2s ease!important;
}
body.page-redesign .foot-pays-col .foot-up.is-visible{opacity:1;pointer-events:auto}
body.page-redesign .foot-pays-col .foot-up:hover{background:#004fa6!important;transform:scale(1.06)}
body.page-redesign .foot-pays-col .foot-up img{filter:brightness(0) invert(1)!important}

@media(max-width:768px){
  body.page-redesign .foot-pays-col .foot-up{
    right:16px!important;left:auto!important;bottom:16px!important;
  }
  /* отключаем break-element и flex layout для up button — он fixed */
  body.page-redesign .foot-pays-col .foot-up-break{display:none!important}
}

/* Footer pay-badges — оригинальный цвет SVG (svg сам содержит правильный fill) */
body.page-redesign .pay-badge img{filter:brightness(0) invert(1)!important;opacity:.5!important}

/* Card add-btn — белая иконка корзины */
body.page-redesign .add-btn img{filter:brightness(0) invert(1)!important}

/* Header — белая плашка поверх hero, никаких затемнений (НЕ применять к inverted) */
body.page-redesign .site-header:not(.site-header--inverted) .header-inner{background:#fff!important;border-radius:20px!important}
body.page-redesign .site-header:not(.site-header--inverted) .h-logo img{filter:none!important;height:29px!important}

/* Site-nav links — тёмный текст, hover синий tint (НЕ применять к inverted) */
body.page-redesign .site-header:not(.site-header--inverted) .site-nav a{color:var(--text)!important;font-weight:400!important}
body.page-redesign .site-header:not(.site-header--inverted) .site-nav a:hover{background:#f0f4ff!important}

/* ─────────── Quick view modal ─────────── */
.quick-view{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  pointer-events:none;
  font-family:'Montserrat',sans-serif;
}
.quick-view[hidden]{display:none}
.quick-view.is-open{pointer-events:auto}
.qv-overlay{
  position:absolute;inset:0;
  background:rgba(0,30,80,.45);
  opacity:0;transition:opacity .25s ease;
  cursor:pointer;
}
.quick-view.is-open .qv-overlay{opacity:1}
.qv-drawer{
  --qv-tx:0px;--qv-ty:0px;
  position:relative;
  width:min(960px,100%);
  height:min(720px,calc(100vh - 48px));
  background:#fff;
  border-radius:32px;
  display:flex;flex-direction:column;
  /* Появление "из карточки": translate к центру карточки + мини-масштаб.
     JS на старте проставляет --qv-tx/--qv-ty = (центр карточки) - (центр окна). */
  transform:translate(var(--qv-tx),var(--qv-ty)) scale(.18);
  opacity:0;
  transform-origin:center center;
  transition:transform .34s cubic-bezier(.22,.75,.25,1),opacity .22s ease-out;
  box-shadow:0 24px 60px rgba(0,30,80,.25);
  overflow:hidden;
  padding-bottom:20px;
}
.quick-view.is-open .qv-drawer{transform:translate(0,0) scale(1);opacity:1}
/* Закрытие (десктоп): быстрый fade. Mobile-правила ниже переопределяют на slide-down. */
.quick-view.is-closing .qv-drawer{
  transition:transform .18s ease-in,opacity .18s ease-in;
  transform:scale(.96);opacity:0;
}
.quick-view.is-closing .qv-overlay{transition:opacity .18s ease-in;opacity:0}

/* ── Шапка модалки: фирменный синий градиент, кнопки 44×44 ──
   padding-right увеличен (28px), чтобы кнопки уютно сидели под скруглением 32px. */
.qv-header{
  flex:0 0 auto;
  height:72px;
  background:var(--grad-blue);
  display:flex;align-items:center;justify-content:flex-end;
  gap:10px;padding:0 15px 0 40px;
  border-radius:32px 32px 0 0;
  position:relative;z-index:5;
}
.qv-share,
.qv-fav,
.qv-close{
  width:44px!important;height:44px!important;border-radius:50%!important;
  background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  color:#fff!important;
  display:flex!important;align-items:center;justify-content:center;
  padding:0!important;cursor:pointer;
  box-shadow:none!important;
  appearance:none;-webkit-appearance:none;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .15s,transform .15s,color .15s;
}
.qv-share:hover,
.qv-fav:hover,
.qv-close:hover{
  background:rgba(255,255,255,.32)!important;transform:scale(1.06);
}
.qv-close{font-size:24px;line-height:1}
.qv-share svg,.qv-fav svg{width:20px;height:20px}
/* quick-view ♥ — анимация и отметка как на карточке (.fav-btn): красное залитое сердце + pop + красный burst, контур прячется */
.qv-fav{position:relative!important;overflow:visible!important}
.qv-fav::before{
  content:'';position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  background:#E62D32;
  -webkit-mask:url('/img/heart-filled.svg') center/contain no-repeat;
          mask:url('/img/heart-filled.svg') center/contain no-repeat;
  clip-path:circle(0% at 50% 50%);opacity:0;
  transition:clip-path .35s cubic-bezier(.22,.75,.25,1),opacity .2s ease;
  pointer-events:none;z-index:2;
}
.qv-fav.is-active{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.35)!important}
.qv-fav.is-active::before{opacity:1;clip-path:circle(75% at 50% 50%)}
.qv-fav.is-active svg{opacity:0!important}
.qv-fav.fav-pop::before{animation:favPop .55s cubic-bezier(.34,1.56,.64,1)}
.qv-fav.fav-pop::after{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle, rgba(230,30,40,.55) 0%, rgba(230,30,40,0) 62%);
  animation:favBurst .55s ease-out forwards;pointer-events:none;z-index:1;
}
@media(hover:hover) and (pointer:fine){
  .qv-fav:hover::before{opacity:1;clip-path:circle(75% at 50% 50%)}
  .qv-fav:hover svg{opacity:0}
}

.qv-body{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,30,80,.22) transparent;
  border-radius:0 0 32px 32px;
}
.qv-body::-webkit-scrollbar{width:6px}
.qv-body::-webkit-scrollbar-thumb{
  background:rgba(0,30,80,.22);border-radius:3px;
}
.qv-body::-webkit-scrollbar-track{background:transparent}

/* Нижний край модалки: индикатор "можно скроллить ниже" — fade в белый +
   плавно качающийся шеврон. Показывается только если есть overflow и пока
   юзер не докрутил до низа. */
.qv-scroll-hint{
  position:absolute;left:1px;right:1px;bottom:1px;
  height:110px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.4) 35%,
    rgba(255,255,255,.85) 75%,
    rgba(255,255,255,1) 100%);
  border-radius:0 0 31px 31px;
  pointer-events:none;
  z-index:6;
  opacity:0;
  transition:opacity .3s ease;
}
.qv-scroll-hint.is-show{opacity:1}
.qv-scroll-hint::after{
  content:'';
  position:absolute;left:50%;bottom:22px;
  width:26px;height:14px;margin-left:-13px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='%230059B9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 2 14 12 26 2'/></svg>") center/contain no-repeat;
  opacity:.7;
  animation:qv-chevron 1.6s ease-in-out infinite;
}
.qv-loader,.qv-err{
  text-align:center;color:var(--gray);padding:60px 24px;font-size:14px;
}

/* ═══════════════════════════════════════════════════════════════════
   SKELETON LOADER — переиспользуемый. Применяется в quick-view, может
   быть использован и в каталоге (после "Показать ещё" / пагинации).
   ═══════════════════════════════════════════════════════════════════ */
.skeleton{
  background:#E8EDF6;
  background-image:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%);
  background-repeat:no-repeat;
  background-size:200% 100%;
  background-position:-100% 0;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius:8px;
  pointer-events:none;
}
@keyframes skeleton-shimmer{
  0%   { background-position: -100% 0; }
  100% { background-position:  100% 0; }
}
/* (исключения reduced-motion для скелетов — выше в общем media-блоке) */

/* Утилиты для скелетного текста — разная ширина строк */
.skeleton-line{height:14px;border-radius:6px}
.skeleton-line.is-short{width:40%}
.skeleton-line.is-mid{width:65%}
.skeleton-line.is-long{width:90%}
.skeleton-circle{border-radius:50%}

/* ────── Скелет карточки каталога — имитирует .p-card структуру ────── */
.p-card-skeleton{
  height:433px;
  background:#fff;
  border-right:1px solid #CAD5F0;
  border-bottom:1px solid #CAD5F0;
  display:flex;flex-direction:column;
  padding:0;
  overflow:hidden;
}
.p-card-skeleton .sk-img{
  flex:1;
  background:#E8EDF6;
  background-image:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%);
  background-repeat:no-repeat;background-size:200% 100%;background-position:-100% 0;
  animation:skeleton-shimmer 1.8s ease-in-out infinite;
}
.p-card-skeleton .sk-bottom{
  background:#F8FAFD;
  padding:16px 20px 20px;
  display:flex;flex-direction:column;gap:10px;
}
.p-card-skeleton .skeleton-line{
  background:#E8EDF6;
  background-image:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%);
  background-repeat:no-repeat;background-size:200% 100%;background-position:-100% 0;
  animation:skeleton-shimmer 1.8s ease-in-out infinite;
  height:12px;border-radius:6px;
}
.p-card-skeleton .sk-name{height:14px;width:85%}
.p-card-skeleton .sk-name-2{height:14px;width:55%}
.p-card-skeleton .sk-price{height:20px;width:35%}
.p-card-skeleton .sk-stars{height:11px;width:45%}
.cat-grid .p-card-skeleton:nth-child(3n){border-right:none}
@media(max-width:900px){
  .cat-grid .p-card-skeleton:nth-child(3n){border-right:1px solid #CAD5F0}
  .cat-grid .p-card-skeleton:nth-child(2n){border-right:none}
}
@media(max-width:480px){
  .cat-grid .p-card-skeleton:nth-child(2n){border-right:1px solid #CAD5F0}
  .cat-grid .p-card-skeleton{border-right:none!important}
}

/* ────── Скелет quick-view модалки ────── */
.qv-skeleton{
  display:flex;flex-direction:column;
}
.qv-sk-main{
  display:grid;grid-template-columns:minmax(260px,0.9fr) minmax(0,1fr);
  gap:32px;padding:28px 80px 24px;
}
.qv-sk-img{aspect-ratio:1/1;align-self:start}
.qv-sk-info{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0}
.qv-sk-info-top{display:flex;flex-direction:column;gap:10px}
.qv-sk-info-top .skeleton-line:first-child{height:12px;width:35%}
.qv-sk-info-top .skeleton-line:nth-child(2){height:22px;width:90%}
.qv-sk-info-top .skeleton-line:nth-child(3){height:22px;width:60%}
.qv-sk-info-bottom{display:flex;flex-direction:column;gap:12px}
.qv-sk-info-bottom .skeleton-line.price{height:28px;width:45%}
.qv-sk-info-bottom .skeleton-line.btn-cart{height:52px;width:100%;border-radius:10px}
.qv-sk-info-bottom .skeleton-line.btn-detail{height:44px;width:100%;border-radius:10px}
.qv-sk-section{
  margin:0 80px 16px;
  background:#F8FAFD;border:1px solid #E5EAF5;border-radius:25px;
  padding:24px 28px;
}
.qv-sk-section .skeleton-line.title{height:16px;width:25%;margin-bottom:14px}
.qv-sk-section .skeleton-line + .skeleton-line{margin-top:8px}
.qv-sk-slider{padding:24px 0 8px 80px}
.qv-sk-slider .skeleton-line.title{height:16px;width:18%;margin-bottom:16px}
.qv-sk-slider-row{display:flex;gap:16px}
.qv-sk-card{
  flex:0 0 240px;width:240px;height:360px;border-radius:14px;
  background:#E8EDF6;
  background-image:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%);
  background-repeat:no-repeat;background-size:200% 100%;
  background-position:-100% 0;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
}
.qv-err{color:#c84d4d}
.qv-retry{
  display:inline-block;margin-left:8px;padding:6px 14px;
  background:var(--blue);color:#fff;border:none;border-radius:8px;
  font:inherit;cursor:pointer;
}

/* Карточка модалки */
.qv-card{display:flex;flex-direction:column;min-height:100%}

.qv-main{
  display:grid;grid-template-columns:minmax(260px,0.9fr) minmax(0,1fr);
  gap:32px;padding:28px 80px 24px;
}
.qv-imgwrap{
  position:relative;
  background:#fff;border:1px solid #E5EAF5;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;overflow:hidden;
  align-self:start;
}
.qv-imgwrap .qv-img-el{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
}
.qv-img-ph{color:var(--gray);font-size:13px}
.qv-badge{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:1}
.qv-badge .b-disc{
  background:#FF5252;color:#fff;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:999px;
}

/* Правая колонка: текстовый блок сверху, цена + кнопки прижаты вниз */
.qv-info{
  display:flex;flex-direction:column;justify-content:space-between;
  min-width:0;gap:16px;
}
.qv-info-top{display:flex;flex-direction:column;gap:8px}
.qv-info-bottom{display:flex;flex-direction:column;gap:12px}
.qv-info .qv-brand{
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--blue);text-transform:uppercase;
  margin:0;
}
.qv-info .qv-name{
  font:500 22px/1.3 'Montserrat',sans-serif;
  color:var(--text);margin:12px 0 0;
}
.qv-info .qv-price{
  display:flex;align-items:baseline;gap:0 8px;flex-wrap:wrap;
  margin:0;justify-content:flex-start;
  padding:0;
}
/* «за 1 шт» в быстром просмотре — НЕ отдельной строкой (иначе кривой вертикальный отступ),
   а мелким инлайн-лейблом у цены, прижатым к НИЗУ строки (правка №76). Сетка ровная,
   замеры не нужны. align-self:flex-end = по низу строки цены. */
.qv-cper{
  align-self:flex-end;
  font-family:'Montserrat',sans-serif;
  font-size:12px;font-weight:400;line-height:1;color:var(--gray);
}
/* Правка №72: цена и значок ₽ в быстром просмотре наследовали глобальный GothamPro
   (местами не подгружался) — принудительно Montserrat, как везде в redesign. */
.qv-cprice{font-family:'Montserrat',sans-serif;font-size:28px;font-weight:600;line-height:1;color:var(--text)}
.qv-cold{font-family:'Montserrat',sans-serif;font-size:15px;color:var(--gray);text-decoration:line-through}
.qv-cta{display:flex;flex-direction:column;gap:10px}
.qv-card .qv-cart,
button.qv-cart{
  display:flex!important;align-items:center;justify-content:center;gap:10px;
  width:100%;height:52px;padding:0 20px;
  background:var(--grad-blue)!important;color:#fff!important;
  border:none!important;border-radius:10px!important;
  font:500 15px/1 'Montserrat',sans-serif!important;
  cursor:pointer;
  opacity:1!important;
  box-shadow:none!important;text-transform:none!important;
  transition:filter .15s,transform .15s;
}
.qv-card .qv-cart .qv-cart-ico{
  width:18px;height:18px;
  filter:brightness(0) invert(1);
}
.qv-card .qv-cart:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* Зелёного здесь больше нет. Цвет не меняем: по новому языку интерфейса синий
   и означает «в корзине», а факт добавления в шторке проговаривает сам текст
   кнопки — «Добавлено ✓». */
.qv-card .qv-cart:disabled{opacity:.85!important;cursor:default;transform:none}
.qv-detail{
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:44px;
  color:var(--blue);font-weight:500;font-size:14px;
  border:1px solid #CAD5F0;border-radius:10px;
  text-decoration:none;
  transition:background .15s;
}
.qv-detail:hover{background:#f0f4ff}
.qv-detail img{width:11px;height:11px;vertical-align:baseline}

/* Секции:
   — Текстовые (описание, состав) — оформлены как карточки: border, radius 25px,
     bg #F8FAFD. Outer-margin 80px по бокам — "колонка воздуха".
   — Слайдеры — без оформления, заголовок выровнен по левому краю карточки описания
     (margin-left = 80 outer + 28 inner padding = 108px), карточки уходят за правый край. */
.qv-section{position:relative;margin:0 80px;padding:24px 28px}
.qv-text-section{
  background:#F8FAFD;
  border:1px solid #E5EAF5;
  border-radius:25px;
  margin-bottom:16px;
  padding-right:8px; /* меньше правого паддинга на карточке — scrollbar ближе к border'у */
}
.qv-slider-section{
  margin:0;padding:24px 0 24px 80px;
  background:transparent;border:none;border-radius:0;
}
.qv-main{position:relative;margin-bottom:8px}
.qv-section-title{
  font:600 16px/1.2 'Montserrat',sans-serif;
  color:var(--text);
  margin:0 0 12px;
}
.qv-section-body{
  font:400 14px/1.55 'Montserrat',sans-serif;
  color:#454e6a;
}
.qv-section-body p{margin:0 0 6px}
.qv-section-body p:last-child{margin-bottom:0}
/* Подзаголовки внутри описания (Назначение / Действие / Применение / Состав) */
.qv-section-body .qv-sub{
  font:600 13px/1.3 'Montserrat',sans-serif;
  color:var(--text);
  text-transform:uppercase;letter-spacing:.04em;
  margin:14px 0 6px;
}
.qv-section-body .qv-sub:first-child{margin-top:0}

/* Скролл-зона: scrollbar близко к правому краю карточки */
.qv-scroll{
  position:relative;
  max-height:180px;overflow-y:auto;
  padding-right:14px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,30,80,.25) transparent;
}
.qv-scroll::-webkit-scrollbar{width:6px}
.qv-scroll::-webkit-scrollbar-thumb{background:rgba(0,30,80,.25);border-radius:3px}
.qv-scroll::-webkit-scrollbar-track{background:transparent}

/* Индикатор «можно скроллить ниже»: градиентное затухание + пульсирующий шеврон.
   Накладывается на нижнюю часть scroll-зоны, не перекрывая взаимодействие. */
.qv-text-section{position:relative}
.qv-text-section::after{
  content:'';
  position:absolute;left:1px;right:1px;bottom:1px;
  height:90px;
  background:linear-gradient(to bottom,
    rgba(248,250,253,0) 0%,
    rgba(248,250,253,.35) 30%,
    rgba(248,250,253,.8) 70%,
    rgba(248,250,253,1) 100%);
  border-radius:0 0 24px 24px;
  pointer-events:none;
  opacity:0;transition:opacity .2s;
}
.qv-text-section[data-has-overflow="1"]::after{opacity:1}
/* Шеврон: широкий V-образный SVG (полилиния, толстый stroke).
   Анимация всегда бежит, видимость управляется opacity (без рестарта keyframes). */
.qv-text-section::before{
  content:'';
  position:absolute;left:50%;bottom:14px;
  width:26px;height:14px;
  margin-left:-13px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='%230059B9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 2 14 12 26 2'/></svg>") center/contain no-repeat;
  pointer-events:none;
  opacity:0;
  z-index:1;
  animation:qv-chevron 1.6s ease-in-out infinite;
  transition:opacity .3s ease;
}
.qv-text-section[data-has-overflow="1"]::before{opacity:.7}
@keyframes qv-chevron{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Слайдеры — "Похожие" / "Вам также понравится".
   Edge-to-edge: справа уходят за край модалки. Стрелки убраны — навигация
   только точками + горизонтальным свайпом/драгом. */
.qv-slider-wrap{position:relative;padding:0;isolation:isolate}
/* Стрелки слайдера — скрыты по умолчанию. Показываем только на устройствах
   с реальным курсором (мышь/трекпад). На тач-устройствах работает свайп. */
.qv-arrow{display:none!important}
@media(hover:hover) and (pointer:fine){
  .qv-arrow{display:flex!important}
}
.qv-slider{
  position:relative;z-index:1;
  display:flex;gap:16px;
  overflow-x:auto;overflow-y:visible;
  padding:14px 0 16px;
  scroll-behavior:auto;
  touch-action:pan-x;
  /* Скрыть scrollbar — навигация через точки и свайп */
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.qv-slider::-webkit-scrollbar{display:none;width:0;height:0}
.qv-slider > .p-card{
  flex:0 0 240px!important;width:240px!important;height:360px!important;
  border:1px solid #CAD5F0!important;border-radius:14px!important;
  background:#fff;
  display:flex;flex-direction:column;
  cursor:pointer;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .25s ease,box-shadow .25s ease;
  position:relative;
}
.qv-slider > .p-card:hover{
  transform:translateY(-4px);
  border-color:var(--blue)!important;
  z-index:1;
}
.qv-slider > .p-card::after{display:none!important}
/* Фото-зона как в каталоге: белый фон, картинка с max и object-fit:contain */
.qv-slider > .p-card .card-img{
  flex:1 1 auto;min-height:0;height:auto!important;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.qv-slider > .p-card .card-img > img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;padding:14px;
}
/* Инфо-зона фиксированной высоты — карточки выравниваются по низу */
.qv-slider > .p-card .card-bottom{
  flex:0 0 84px;
  padding:12px 16px 14px;background:#F8FAFD;
  display:flex;flex-direction:column;gap:6px;justify-content:center;
}
.qv-slider > .p-card .card-name{
  font-size:13px;line-height:1.35;color:var(--text);margin:0;
  height:calc(1.35em * 2);flex:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.qv-slider > .p-card .card-price{display:flex;align-items:baseline;gap:8px;margin:0}
.qv-slider > .p-card .c-price{font-size:15px;font-weight:600;color:var(--text)}
.qv-slider > .p-card .c-old{font-size:12px;color:var(--gray);text-decoration:line-through}
/* fav/add — НЕ override, наследуем стили из основного .add-btn / .fav-btn (catalog) */

/* Стрелки prev/next — pill-форма, по бокам от точек пагинации под слайдером.
   Не упираются в углы модалки, разнесены по краям. */
.qv-arrow{
  position:absolute;
  width:56px;height:34px;border-radius:999px;
  background:#fff;border:1px solid #CAD5F0;color:var(--text);
  align-items:center;justify-content:center;
  cursor:pointer;z-index:30;padding:0;
  box-shadow:0 3px 10px rgba(0,30,80,.10);
  transition:background .15s,color .15s,border-color .15s,opacity .15s,transform .12s;
}
.qv-arrow:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px)}
.qv-arrow:disabled{opacity:.35;cursor:default;background:#fff;color:var(--text);transform:none}
/* Под слайдером, парой по бокам от точек пагинации — ближе к центру. */
/* Стрелки навигации — парой над слайдером справа, чуть сдвинутые от края к
   центру, на уровне заголовка секции. Заголовок короткий и сидит слева —
   не пересекается. */
.qv-arrow-prev{left:auto !important;right:144px !important;top:-44px !important;bottom:auto !important}
.qv-arrow-next{left:auto !important;right:76px !important;top:-44px !important;bottom:auto !important}
.qv-arrow svg{width:16px;height:16px}

/* «Вам также может понравиться» — JS извлекает данные из bootstrap_v4 карточек
   на странице товара и строит чистые .p-card как в нашем "Похожих" слайдере.
   Никакие отдельные стили не нужны — карточки идентичны. */
.qv-also-section{position:relative}

/* ═══════════════════════════════════════════════════════════════
   Слайдеры на странице товара (.slider.recommend / .slider.similar)
   — используют наш шаблон "qv-slider" → .qv-slider > .p-card.
   Этот блок обёртывает qv-slider в адекватный для страницы заголовок,
   убирает legacy padding/margin от template_styles.css и снимает с
   .qv-slider-wrap modal-специфичный 80px-отступ слева.
   ═══════════════════════════════════════════════════════════════ */
body.page-redesign .slider.recommend,
body.page-redesign .slider.similar,
body.page-redesign .viewed-slider-wrap{
  position:relative;
  max-width:var(--container);
  margin:36px auto 28px;
  padding:0 clamp(12px,2vw,24px);
  background:transparent;border:none;
}
body.page-redesign .slider.recommend > h2,
body.page-redesign .slider.similar > h2,
body.page-redesign .viewed-slider-wrap > h2,
body.page-redesign .viewed-slider-wrap > .detail-slider-title{
  font:600 clamp(20px,2.4vw,28px)/1.2 'Montserrat',sans-serif!important;
  color:var(--text)!important;
  margin:0 0 16px!important;padding:0!important;
  background:transparent!important;border:none!important;
  text-transform:none!important;
}
body.page-redesign .slider.recommend .slider__wrapper,
body.page-redesign .slider.similar .slider__wrapper{
  position:relative;padding:0;margin:0;background:transparent;border:none;
}
/* qv-slider на странице товара — без modal-специфичного 80px-отступа. */
body.page-redesign .slider.recommend .qv-slider-wrap,
body.page-redesign .slider.similar .qv-slider-wrap,
body.page-redesign .viewed-slider-wrap .qv-slider-wrap{
  padding:0;margin:0;
}
/* Slider сам — горизонтальный скролл, как в quick-view.
   scroll-snap не используем: конфликтует с animateScrollLeft (JS-плавный
   скролл fight'ит с snap-форсом, получается рывками). */

/* Градиентное затухание на правом краю slider'a — подсказка "скрольни ещё".
   Mask-image: видимая зона ~95%, последние 5% уплывают в transparent.
   Аналогично индикаторам с шевронами в quick-view модалках. */
body.page-redesign .slider.recommend .qv-slider,
body.page-redesign .slider.similar .qv-slider,
body.page-redesign .viewed-slider-wrap .qv-slider{
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
          mask-image:linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
}

/* Точки пагинации */
/* Окно точек: сама лента едет внутри, наружу торчит несколько ближайших.
   Ширина подобрана под активную «пилюлю» плюс шесть обычных точек; края
   растворяются маской — видно, что список продолжается, без обрыва по линейке.
   Когда страниц мало и лента уже окна, она просто центрируется — вид прежний. */
.qv-dots{
  /* НЕ center: лента шире окна центрируется «с двух сторон», и её начало
     оказывается за левым краем — активная точка уезжала из виду. Прижимаем
     к началу, а центрирование короткой ленты делает margin:auto у самой ленты
     (у flex-элемента при переполнении auto-margin схлопывается в ноль). */
  display:flex;justify-content:flex-start;align-items:center;
  padding:6px 0 0;
  max-width:132px;margin-left:auto;margin-right:auto;
  overflow:hidden;
  /* Растворяем край только с той стороны, где лента продолжается: иначе в начале
     списка активная «пилюля» стоит первой и выглядит полупрозрачной.
     Классы at-start / at-end ставит updateUI. */
  --fade-l:14px;--fade-r:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
}
.qv-dots.at-start{--fade-l:0px}
.qv-dots.at-end{--fade-r:0px}
.qv-dots__track{
  display:flex;align-items:center;gap:8px;
  margin:0 auto;
  /* position — чтобы offsetLeft точек считался от ленты, а не от дальнего
     позиционированного предка: по нему JS вычисляет сдвиг окна. */
  position:relative;
  transition:transform .3s cubic-bezier(.22,.75,.25,1);
}
.qv-dots .qv-dot,
button.qv-dot{
  width:8px;height:8px;border-radius:50%;
  background:#9BBEEA!important;
  border:none!important;padding:0!important;
  box-shadow:none!important;
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
  transition:background .15s,width .15s;
}
.qv-dots .qv-dot:hover,
button.qv-dot:hover{background:#6FA0DC!important}
.qv-dots .qv-dot.is-active,
button.qv-dot.is-active{background:var(--blue)!important;width:22px;border-radius:4px}

/* Toast */
.qv-toast{
  position:absolute;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(10px);
  background:rgba(0,10,36,.92);color:#fff;
  padding:10px 18px;border-radius:999px;font-size:14px;
  opacity:0;transition:opacity .2s,transform .2s;
  pointer-events:none;z-index:10;white-space:nowrap;
}
.qv-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.qv-toast[hidden]{display:none}

/* Мобильная адаптация — bottom sheet */
@media(max-width:768px){
  .quick-view{align-items:flex-end;padding:0}
  .qv-drawer{
    width:100%;height:auto;max-height:96dvh;
    border-radius:24px 24px 0 0;
    transform:translateY(100%);opacity:1;
    box-shadow:0 -8px 32px rgba(0,30,80,.15);
    padding-bottom:12px;
    transition:transform .32s cubic-bezier(.22,.75,.25,1);
  }
  .quick-view.is-open .qv-drawer{transform:translateY(0)}
  /* Закрытие на мобильных — slide down (без fade, без scale). */
  .quick-view.is-closing .qv-drawer{
    transition:transform .28s ease-in;
    transform:translateY(100%);opacity:1;
  }

  /* Шапка чуть компактнее, кнопки 40×40 */
  .qv-header{height:60px;padding:0 14px;border-radius:24px 24px 0 0;gap:8px}
  .qv-share,.qv-fav,.qv-close{width:40px!important;height:40px!important}
  .qv-share svg,.qv-fav svg{width:18px;height:18px}

  /* Main: одна колонка, фото сверху квадрат, инфо снизу */
  .qv-main{grid-template-columns:1fr;gap:16px;padding:20px 18px 18px}
  .qv-imgwrap{aspect-ratio:1/1;max-height:60vw}
  .qv-info{gap:14px}
  .qv-info .qv-name{font:500 17px/1.3 'Montserrat',sans-serif;margin-top:6px}
  .qv-info .qv-brand{font-size:12px}
  .qv-cprice{font-size:22px}
  .qv-cold{font-size:13px}
  .qv-cart{height:48px!important}
  .qv-detail{height:42px}

  /* Текстовые секции — меньше отступы */
  .qv-section{margin:0 16px 12px;padding:18px 18px;border-radius:20px}
  .qv-section + .qv-section::before{display:none}
  .qv-main::after{display:none}
  .qv-scroll{max-height:160px;padding-right:10px}

  /* Слайдеры — заголовки слева на 18px, карточки уходят за край */
  .qv-slider-section{padding:18px 0 18px 18px}
  .qv-slider > .p-card{flex-basis:170px!important;width:170px!important;height:270px!important}

  /* Скелет — те же мобильные отступы что и реальная модалка */
  .qv-sk-main{grid-template-columns:1fr;gap:16px;padding:20px 18px 18px}
  .qv-sk-img{aspect-ratio:1/1;max-height:60vw}
  .qv-sk-section{margin:0 16px 12px;padding:18px 18px;border-radius:20px}
  .qv-sk-slider{padding:18px 0 8px 18px}
  .qv-sk-card{flex-basis:170px;width:170px;height:270px}

  /* Шевроны и hint адаптируем под меньшие радиусы */
  .qv-scroll-hint{border-radius:0 0 23px 23px}
  .qv-text-section::after{border-radius:0 0 19px 19px}
  .qv-slider > .p-card .card-bottom{flex-basis:72px}
  .qv-section + .qv-section::before{left:18px;right:18px}
  .qv-main::after{left:18px;right:18px}
}

/* Header-inner — relative для абс центровки nav */
body.page-redesign .header-inner{position:relative!important}

/* Nav — точно по центру header (не в flex-остатке) */
/* Навигация — absolute по центру header'а (поиск выпадает под header,
   так что освобождать место в строке не нужно). */
/* Высота — во всю шапку (не по контенту): выпадающие списки подразделов отсчитывают
   свой верх от низа шапки (top:100%), иначе пришлось бы подгонять зазор пикселями
   под каждую высоту хедера (80px на десктопе, 56 на мобиле, сжатие при скролле). */
body.page-redesign .site-nav{
  position:absolute!important;
  left:50%!important;top:0!important;height:100%!important;
  transform:translateX(-50%)!important;
  flex:none!important;width:auto!important;
}
/* Иконки header — справа (т.к. nav absolute, без spacer'а иконки уезжают влево) */
body.page-redesign .h-icons{margin-left:auto!important}

@media(max-width:768px){
  body.page-redesign .site-nav{display:none!important}
}

/* ════════════════════════════════════════════════════════════
   КАТАЛОГ — слитная grid-сетка карточек (.cat-grid)
   3 в ряд @1440, 4 в ряд @1920 (с расширением контейнера), 2 на планшете
   ════════════════════════════════════════════════════════════ */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#fff;
  border:1px solid #CAD5F0;
  border-radius:16px;
  overflow:hidden;
  margin:0;
}
/* Обёртка под .catalog__content — содержит "Показать ещё" + пагинацию.
   Вынесена из .catalog__list, чтобы sticky-sidebar не тянулся вниз. */
.catalog__after{
  margin-top:64px;
  display:flex;flex-direction:column;align-items:stretch;gap:40px;
}
/* "Показать ещё" центрирована по плитке (.cat-grid), не по всей ширине:
   на десктопе сайдбар занимает 312+32=344px → сдвигаем влево padding'ом блока. */
.catalog__after .show-more-btn{margin:0 auto;align-self:center;display:flex}
@media(min-width:901px){
  .catalog__after{padding-left:344px}
}
.catalog__after .bx_pagination_bottom{margin:0;width:100%;align-self:center}
@media(min-width:901px){
  /* Пагинация должна остаться по центру всей ширины (как было) — компенсируем padding-left */
  .catalog__after .bx_pagination_bottom{margin-left:-344px;width:calc(100% + 344px)}
}
.cat-grid .p-card{
  height:433px;
  background:#fff;
  border:none!important;
  border-right:1px solid #CAD5F0!important;
  border-bottom:1px solid #CAD5F0!important;
  border-radius:0;
  display:flex;flex-direction:column;
  cursor:pointer;
  transition:background .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease;
  position:relative;
}
.cat-grid .p-card:hover{
  background:#F8FAFD;
  transform:none;
  box-shadow:inset 0 0 0 2px var(--blue);
  z-index:1;
}
.cat-grid .p-card:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--blue);
  z-index:1;
}
/* Подсказка-индикатор «развернуть карточку» — постоянно видна как лёгкий хинт,
   на hover/focus карточки усиливается. */
.cat-grid .p-card::after{
  content:'';
  position:absolute;
  top:12px;left:12px;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.85) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005FCC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 3 21 3 21 9'/><polyline points='9 21 3 21 3 15'/><line x1='21' y1='3' x2='14' y2='10'/><line x1='3' y1='21' x2='10' y2='14'/></svg>") center/14px no-repeat;
  border:1px solid #CAD5F0;
  opacity:.55;
  transition:opacity .15s,transform .15s,background-color .15s;
  pointer-events:none;
  z-index:2;
}
.cat-grid .p-card:hover::after,
.cat-grid .p-card:focus-visible::after{
  opacity:1;
  transform:scale(1.08);
  background-color:#fff;
}
.cat-grid .p-card .card-img{
  flex:1;height:auto;
  background:#fff;
}
.cat-grid .p-card .card-bottom{
  flex:0 0 auto;
  padding:18px 20px 22px;
  background:#F8FAFD;
}
.cat-grid .p-card .card-name{
  height:calc(1.4em * 2);flex:none;
  -webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;
  overflow:hidden;
}
/* Убрать border у крайних в ряду и нижних */
.cat-grid .p-card:nth-child(3n){border-right:none!important}
.cat-grid .p-card:nth-last-child(-n+3):nth-child(3n+1),
.cat-grid .p-card:nth-last-child(-n+3):nth-child(3n+1) ~ .p-card{border-bottom:none!important}

/* На всех экранах — 3 в ряд (единая ширина контейнера) */
@media(max-width:900px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid .p-card .card-img{height:220px}
  .cat-grid .p-card:nth-child(3n){border-right:1px solid #CAD5F0!important}
  .cat-grid .p-card:nth-child(2n){border-right:none!important}
}
@media(max-width:480px){
  .cat-grid{grid-template-columns:1fr}
  .cat-grid .p-card .card-img{height:280px}
  .cat-grid .p-card{border-right:none!important}
}

/* ════════════════════════════════════════════════════════════
   КАТАЛОГ — SMART FILTER (sidebar в стиле редизайна)
   Перебиваем bx-filter из bitrix:catalog.smart.filter
   ════════════════════════════════════════════════════════════ */

/* Заголовок "Фильтр" и кнопка Очистить */
body.page-redesign .catalog__filter .title{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Montserrat',sans-serif;
  font-size:18px;font-weight:600;color:var(--text);
  padding:0 0 16px;margin:0 0 16px;
  border-bottom:1px solid #CAD5F0;
}
body.page-redesign .catalog__filter .title .del_filter{
  background:transparent!important;border:none!important;
  color:var(--gray);font-size:13px;font-weight:400;
  cursor:pointer;padding:0;
  text-decoration:underline;text-underline-offset:3px;
}
body.page-redesign .catalog__filter .title .del_filter:hover{color:var(--blue)}
body.page-redesign .catalog__filter .open_list{display:none!important}

/* Контейнер фильтра — убираем bootstrap-овский background */
body.page-redesign .bx-filter{
  width:100%;background:transparent!important;
  border:none!important;box-shadow:none!important;
  padding:0!important;margin:0!important;
  min-width:0!important;
  font-family:'Montserrat',sans-serif!important;
}
body.page-redesign .bx-filter .bx-filter-section{
  padding:0!important;background:transparent!important;border:none!important;
}
/* Скрываем дубль заголовка "Фильтр" внутри bx-filter (у нас свой выше) */
body.page-redesign .bx-filter .bx-filter-title{display:none!important}

/* Блок параметра (Цена / Бренд и т.д.) */
body.page-redesign .bx-filter-parameters-box{
  background:transparent!important;
  border:none!important;
  border-bottom:1px solid #CAD5F0!important;
  border-radius:0!important;
  padding:14px 0!important;margin:0!important;
  width:100%!important;max-width:none!important;flex:none!important;
}
body.page-redesign .bx-filter-parameters-box:last-child{border-bottom:none!important}
body.page-redesign .bx-filter-container-modef{display:none!important}

/* Заголовок секции (с аккордеоном) */
body.page-redesign .bx-filter-parameters-box-title{
  background:transparent!important;
  padding:0!important;margin:0!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:600!important;
  color:var(--text)!important;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  text-transform:none!important;
}
body.page-redesign .bx-filter-parameters-box-title:before,
body.page-redesign .bx-filter-parameters-box-title:after{display:none!important}
body.page-redesign .bx-filter-parameters-box-title span{
  background:transparent!important;color:var(--text)!important;
  padding:0!important;
}
body.page-redesign .bx-filter-parameters-box-hint{
  display:flex!important;align-items:center;justify-content:space-between;
  width:100%;
}
body.page-redesign .bx-filter-parameters-box-title .fa-angle-down{
  transition:transform .2s ease;
  font-size:14px;color:var(--gray);
}
body.page-redesign .bx-filter-parameters-box.bx-active .bx-filter-parameters-box-title .fa-angle-down{
  transform:rotate(180deg);
}

/* Блок со значениями (раскрывающийся) */
body.page-redesign .bx-filter-block{
  padding:14px 0 0!important;
  background:transparent!important;
  border:none!important;box-shadow:none!important;
}
body.page-redesign .bx-filter-parameters-box-container{
  display:flex!important;flex-wrap:wrap;gap:8px 0;
  margin:0!important;
}

/* Инпуты "От" / "До" для цены */
body.page-redesign .bx-filter .bx-filter-input-container{
  padding:0!important;background:transparent!important;border:none!important;
}
body.page-redesign .bx-filter .bx-filter-input-container input{
  width:100%;height:38px;
  border:1px solid #CAD5F0!important;border-radius:10px!important;
  background:#fff!important;
  padding:0 12px!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:13px!important;color:var(--text)!important;
  box-shadow:none!important;
}
body.page-redesign .bx-filter .bx-filter-input-container input:focus{
  border-color:var(--blue)!important;outline:none!important;
}
body.page-redesign .bx-filter .bx-ft-sub{
  font-family:'Montserrat',sans-serif!important;
  font-size:11px!important;color:var(--gray)!important;
  font-style:normal!important;text-transform:lowercase!important;
  display:block;margin:0 0 4px;
}
body.page-redesign .bx-filter .bx-filter-parameters-box-container-block.bx-left,
body.page-redesign .bx-filter .bx-filter-parameters-box-container-block.bx-right{
  flex:1!important;max-width:none!important;width:auto!important;padding:0!important;
}
body.page-redesign .bx-filter .price-separator{
  flex:0 0 28px!important;max-width:28px!important;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 10px!important;
  height:auto!important;margin:0!important;
}
/* Скрываем bitrix-овский псевдо-разделитель (полоска), заменяем своим тире */
body.page-redesign .bx-filter .price-separator:before{
  content:"—"!important;
  color:var(--gray)!important;font-size:14px!important;
  background:transparent!important;
  width:auto!important;height:auto!important;
  display:block!important;
  position:static!important;
}

/* Range slider (цена) */
body.page-redesign .bx-ui-slider-track-container{
  width:100%!important;max-width:none!important;flex:1 0 100%!important;
  padding:18px 8px 8px!important;margin:0!important;
}
body.page-redesign .bx-ui-slider-track{
  position:relative;height:4px;background:#E5EAF5!important;border-radius:2px!important;
  border:none!important;box-shadow:none!important;
}
body.page-redesign .bx-ui-slider-part{display:none!important}
body.page-redesign .bx-ui-slider-pricebar-vd,
body.page-redesign .bx-ui-slider-pricebar-vn{display:none!important}
body.page-redesign .bx-ui-slider-pricebar-v{
  background:var(--blue)!important;height:4px!important;border-radius:2px!important;
}
body.page-redesign .bx-ui-slider-range{height:4px!important;background:transparent!important;border:none!important}
body.page-redesign .bx-ui-slider-handle{
  width:18px!important;height:18px!important;border-radius:50%!important;
  background:#fff!important;border:2px solid var(--blue)!important;
  box-shadow:0 2px 8px rgba(0,30,80,.15)!important;
  top:-7px!important;cursor:pointer;
}
body.page-redesign .bx-ui-slider-handle:hover{background:var(--blue)!important}
body.page-redesign .bx-ui-slider-handle.left:before,
body.page-redesign .bx-ui-slider-handle.right:before{display:none!important}

/* Чекбоксы значений (бренд и др.) */
body.page-redesign .bx-filter .checkbox.bx-filter-input-checkbox{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:8px 0;margin:0;
  cursor:pointer;
  border:none!important;background:transparent!important;
}
/* Все чекбоксы в редизайне — custom стиль (синий с белой галочкой) */
body.page-redesign input[type=checkbox]{
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  width:18px!important;height:18px!important;
  border:1.5px solid #CAD5F0!important;border-radius:5px!important;
  background:#fff!important;background-image:none!important;
  cursor:pointer;position:relative!important;flex-shrink:0!important;
  margin:0!important;padding:0!important;
  box-shadow:none!important;accent-color:auto!important;
  vertical-align:middle;
}
body.page-redesign input[type=checkbox]:checked{
  background:var(--blue)!important;border-color:var(--blue)!important;
}
body.page-redesign input[type=checkbox]:checked::after{
  content:""!important;position:absolute!important;
  left:5.5px!important;top:2px!important;width:5px!important;height:10px!important;
  border:solid #fff!important;border-width:0 2px 2px 0!important;
  transform:rotate(45deg)!important;
  background:transparent!important;display:block!important;
}
/* Кастомный чекбокс — в фильтре И в drawer (teleport вынимает из .bx-filter) */
body.page-redesign .bx-filter .bx-filter-input-checkbox input[type=checkbox],
body.page-redesign .m-drawer-slots input[type=checkbox],
body.page-redesign .bx-filter-parameters-box input[type=checkbox]{
  width:18px!important;height:18px!important;
  appearance:none!important;-webkit-appearance:none!important;
  border:1.5px solid #CAD5F0!important;border-radius:5px!important;
  background:#fff!important;cursor:pointer;
  position:relative!important;flex-shrink:0!important;margin:0!important;
  padding:0!important;
  transition:all .15s ease;
  box-shadow:none!important;
}
body.page-redesign .bx-filter .bx-filter-input-checkbox input[type=checkbox]:checked,
body.page-redesign .m-drawer-slots input[type=checkbox]:checked,
body.page-redesign .bx-filter-parameters-box input[type=checkbox]:checked{
  background:var(--blue)!important;border-color:var(--blue)!important;
}
body.page-redesign .bx-filter .bx-filter-input-checkbox input[type=checkbox]:checked:after,
body.page-redesign .m-drawer-slots input[type=checkbox]:checked:after,
body.page-redesign .bx-filter-parameters-box input[type=checkbox]:checked:after{
  content:""!important;position:absolute!important;
  left:5.5px;top:2px;width:5px;height:10px;
  border:solid #fff!important;border-width:0 2px 2px 0!important;
  transform:rotate(45deg);
  background:transparent!important;
}
body.page-redesign .bx-filter .bx-filter-param-label{
  display:flex;align-items:center;gap:10px;
  font-family:'Montserrat',sans-serif!important;
  font-size:13px!important;color:var(--text)!important;
  cursor:pointer;padding:6px 0;
  background:transparent!important;border:none!important;
}
body.page-redesign .bx-filter .bx-filter-param-label:hover{color:var(--blue)!important}
body.page-redesign .bx-filter .bx-filter-param-text{
  font-family:'Montserrat',sans-serif!important;
  font-size:13px!important;color:var(--text)!important;
  background:transparent!important;
}
body.page-redesign .bx-filter .bx-filter-param-text small,
body.page-redesign .bx-filter .bx-filter-input-checkbox-count{
  color:var(--gray)!important;font-size:11px!important;margin-left:4px;
}

/* Кнопки "Применить" / "Сбросить" фильтра */
body.page-redesign .bx-filter-button-box,
body.page-redesign .bx-filter-popup-result{
  background:transparent!important;border:none!important;padding:16px 0 0!important;
}
body.page-redesign .bx-filter input[type=submit]{
  width:100%;height:44px;
  background:var(--blue)!important;color:#fff!important;
  border:none!important;border-radius:12px!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:14px!important;font-weight:600!important;
  cursor:pointer;
  transition:background .15s;
}
body.page-redesign .bx-filter input[type=submit]:hover{background:#004fa6!important}

/* Скрываем колоночные обёртки катосекции (catalog.section.list section-menu) */
body.page-redesign .catalog__filter .bx-section-desc-post{display:none}

/* Sidebar layout — Фильтр сверху, Разделы под ним. Убираем bitrix-овский padding */
body.page-redesign .catalog__filter{
  display:flex!important;flex-direction:column!important;
  gap:0;
  padding:0 24px 0 0!important;
  padding-top:0!important;
}
body.page-redesign .catalog__filter .catalog__section-list,
body.page-redesign .catalog__filter .catalog__section-filter{
  padding:0!important;margin:0;
}
/* Унификация секционных заголовков (Фильтр / Разделы) */
body.page-redesign .catalog__filter .title{
  display:flex!important;align-items:center;justify-content:space-between;
  font-family:'Montserrat',sans-serif!important;
  font-size:18px!important;font-weight:700!important;color:var(--text)!important;
  margin:0!important;padding:0 0 16px!important;
  border-bottom:1px solid #CAD5F0!important;
  text-transform:none!important;
}
body.page-redesign .catalog__filter .title span{
  font-family:'Montserrat',sans-serif!important;
  font-size:18px!important;font-weight:700!important;color:var(--text)!important;
  text-transform:none!important;
  padding:0!important;background:transparent!important;
}
/* Контейнер блоков под заголовком */
body.page-redesign .catalog__filter .catalog__section-list,
body.page-redesign .catalog__filter .catalog__section-filter{
  width:100%;
}
/* "Разделы" — order 0 (сверху), затем фильтр с Брендом и Ценой */
body.page-redesign .catalog__filter .catalog__section-list{
  order:0!important;margin-top:0!important;
}
body.page-redesign .catalog__filter .catalog__section-filter{
  order:1!important;
}


/* "Разделы" аккордеон: свёрнут по умолчанию, разворачивается кликом на заголовок */
body.page-redesign .catalog__section-list .title{
  cursor:pointer;
}
body.page-redesign .catalog__section-list .title:after{
  content:"";
  width:10px;height:10px;
  border-right:2px solid var(--gray);
  border-bottom:2px solid var(--gray);
  transform:rotate(-45deg);
  transition:transform .2s ease;
  margin-left:auto;flex-shrink:0;
}
body.page-redesign .catalog__section-list.is-open .title:after{
  transform:rotate(45deg);
}
/* Группы внутри «Разделов»: верхний уровень каталога, затем подразделы */
body.page-redesign .section__list-group + .section__list-group{
  border-top:1px solid #CAD5F0;margin-top:10px;padding-top:4px;
}
body.page-redesign .section__list-group-title{
  font-family:'Montserrat',sans-serif;
  font-size:11px;font-weight:600;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gray);
  padding:14px 16px 8px;
}
body.page-redesign .m-drawer .section__list-group-title{padding-left:18px;padding-right:14px}
/* Пункты списка разделов: слева жёлоб под точку-маркер активного пункта,
   иначе точка (a::before, left:10px) ложится на текст. */
body.page-redesign .section__list-wrapper li a{padding-left:26px}
body.page-redesign .section__list-wrapper li a::before{left:11px}
/* (Old max-height transition removed — теперь анимация через grid-template-rows у .hidden_list) */

/* ════════════════════════════════════════════════════════════
   MOBILE FILTER BAR + DRAWER
   ════════════════════════════════════════════════════════════ */
.m-filter-bar{display:none}
@media(max-width:900px){
  body.page-redesign .m-filter-bar{
    display:flex;gap:10px;margin:0 0 20px;
    /* Sticky — прилегает к верхнему краю viewport'а при скролле списка */
    position:sticky;top:0;z-index:30;
    background:rgba(244,247,253,.92);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    padding:10px 0;
  }
  body.page-redesign .m-filter-bar .m-fbtn{
    flex:1;height:46px;
    display:inline-flex;align-items:center;justify-content:center;
    background:#fff;color:var(--text);
    border:1px solid #CAD5F0;border-radius:14px;
    font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;
    cursor:pointer;padding:0 18px;
  }
  body.page-redesign .m-filter-bar .m-fbtn-primary{
    background:var(--grad-blue);color:#fff;
    border:0!important;outline:0!important;box-shadow:none!important;
  }
  body.page-redesign .m-filter-bar .m-fbtn-primary:active{transform:scale(.98)}
  body.page-redesign .m-filter-bar .m-fbtn-clear{
    flex:0 0 auto;width:auto;color:var(--gray);font-weight:500;
  }
  /* На мобиле скрываем десктопный sidebar и top-sorting */
  body.page-redesign .catalog__content > .catalog__filter{display:none!important}
  body.page-redesign .title_box .sorting_box{display:none!important}
}
/* Избранное: drawer'а/мобильного фильтра нет — раскладкой title_box управляем сами.
   Телефоны (<768): заголовок и сортировка СЛЕВА, столбиком (без центрирования). */
@media(max-width:767px){
  body.page-redesign .favorite-element-container .title_box{
    display:flex!important;flex-direction:column!important;
    align-items:flex-start!important;justify-content:flex-start!important;
    gap:14px;text-align:left!important;
  }
  body.page-redesign .favorite-element-container .title_box h1{margin:0!important;line-height:1!important;text-align:left!important}
  body.page-redesign .favorite-element-container .title_box .sorting_box{
    display:inline-flex!important;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  /* поджимаем сегменты, чтобы пилюля влезала на телефоны (≥360px) */
  body.page-redesign .favorite-element-container .sorting_item a{padding-left:11px!important;padding-right:11px!important}
}
/* mini(768)/air(820) и выше: заголовок СЛЕВА, сортировка СПРАВА в одну строку (как на десктопе).
   Блок ИДЁТ ПОСЛЕ телефонного — на границе 768px выигрывает row. line-height:1 у h1 убирает
   leading, иначе центр заголовка и пилюли расходятся. */
@media(min-width:768px){
  body.page-redesign .favorite-element-container .title_box{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    align-items:center!important;justify-content:space-between!important;
    gap:24px;text-align:left!important;
  }
  body.page-redesign .favorite-element-container .title_box h1{margin:0!important;line-height:1!important;text-align:left!important}
  body.page-redesign .favorite-element-container .title_box .sorting_box{
    display:inline-flex!important;margin-left:auto!important;flex:0 0 auto;
  }
}
/* На mini-диапазоне (768–800) центр заголовка стабильно выше центра пилюли на ~15px
   (флекс-центрирование тут не помогает; на 800+ совпадает). Точечно опускаем h1. */
@media(min-width:768px) and (max-width:800px){
  body.page-redesign .favorite-element-container .title_box h1{transform:translateY(14px)}
}
body.page-redesign .m-drawer{
  position:fixed !important;
  top:0 !important;left:0 !important;width:100vw !important;
  height:100vh;height:100dvh !important;
  z-index:1000;
  opacity:0 !important;pointer-events:none !important;
  transition:opacity .6s cubic-bezier(.4,0,.2,1) !important;
}
body.page-redesign .m-drawer.is-open{opacity:1 !important;pointer-events:auto !important}
body.page-redesign .m-drawer-overlay{
  position:absolute;inset:0;background:rgba(0,30,80,.45);
}
body.page-redesign .m-drawer-body{
  position:absolute;left:0;top:0;bottom:0;
  width:min(92vw,440px);
  background:#fff;
  display:flex;flex-direction:column;
  transform:translateX(-100%) !important;
  transition:transform .6s cubic-bezier(.4,0,.2,1) !important;
  border-radius:0 18px 18px 0;
  overflow:hidden;
  will-change:transform;
}
body.page-redesign .m-drawer.is-open .m-drawer-body{transform:translateX(0) !important}
body.page-redesign .m-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:max(16px, env(safe-area-inset-top, 16px)) 20px 16px;border-bottom:1px solid #CAD5F0;
  flex:0 0 auto;
}
body.page-redesign .m-drawer-title{
  font-family:'Montserrat',sans-serif;
  font-size:18px;font-weight:700;color:var(--text);
}
/* Drawer-head — теперь содержит "Очистить" слева от крестика */
body.page-redesign .m-drawer-head{
  gap:10px;
}
body.page-redesign .m-drawer-head .m-drawer-head-actions{
  display:flex;align-items:center;gap:8px;margin-left:auto;
}
body.page-redesign .m-drawer-close{
  width:36px;height:36px;border-radius:50%;
  background:#fff!important;
  border:1px solid #CAD5F0!important;outline:0!important;box-shadow:none!important;
  color:var(--gray)!important;cursor:pointer;
  display:inline-flex!important;align-items:center;justify-content:center;
  padding:0!important;margin:0;
  transition:transform .15s ease,border-color .15s ease,color .15s ease;
  box-sizing:border-box;
}
body.page-redesign .m-drawer-close svg{display:block;width:14px;height:14px}
body.page-redesign .m-drawer-close:hover{border-color:var(--blue);color:var(--blue)}
body.page-redesign .m-drawer-clear{
  background:transparent;border:1px solid #CAD5F0;
  color:var(--text);
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;
  height:34px;padding:0 14px;border-radius:10px;cursor:pointer;
}
body.page-redesign .m-drawer-clear:hover{background:#F8FAFD;color:var(--blue);border-color:var(--blue)}
/* Старая sticky-top — скрыта (кнопка переехала в head) */
body.page-redesign .m-drawer-sticky-top{display:none!important}

/* Скроллируемая зона drawer */
body.page-redesign .m-drawer-scroll{
  flex:1 1 auto;overflow-y:auto;
  padding:18px 0 12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,30,80,.25) transparent;
}
body.page-redesign .m-drawer-scroll .m-sort{
  padding-left:20px;padding-right:20px;
}
body.page-redesign .m-drawer-slots > .catalog__section-list > .title,
body.page-redesign .m-drawer-slots > .bx-filter-parameters-box > .bx-filter-parameters-box-title{
  padding-left:20px!important;padding-right:20px!important;
}
body.page-redesign .m-drawer .bx-filter-block .checkbox.bx-filter-input-checkbox{
  padding-left:0!important;padding-right:0!important;
}
/* Разделы — ul имеет horizontal padding 20px (как у .bx-filter-block Бренда),
   li внутри занимает ul-inner-width, divider шириной с этот контент */
body.page-redesign .m-drawer .section__list-wrapper{
  margin-left:0!important;margin-right:0!important;
  display:block!important;width:100%!important;
  box-sizing:border-box;
}
body.page-redesign .m-drawer ul#vertical-multilevel-menu,
body.page-redesign .m-drawer #vertical-multilevel-menu ul,
body.page-redesign .m-drawer .section__list-wrapper ul{
  padding:0 !important;margin:0!important;
  list-style:none!important;
  display:block!important;width:100%!important;
  box-sizing:border-box;
}
body.page-redesign .m-drawer #vertical-multilevel-menu li,
body.page-redesign .m-drawer .section__list-wrapper li{
  padding-left:0!important;margin-left:0!important;list-style:none!important;
  display:block!important;width:100%!important;
  box-sizing:border-box;
}
body.page-redesign .m-drawer-scroll::-webkit-scrollbar{width:6px}
body.page-redesign .m-drawer-scroll::-webkit-scrollbar-track{background:transparent}
body.page-redesign .m-drawer-scroll::-webkit-scrollbar-thumb{
  background:rgba(0,30,80,.2);border-radius:3px;
}

/* ── Подсказка «зона прокручивается» для фильтров ───────────────────────────
   Скроллятся не сами аккордеоны, а зона: .m-drawer-scroll (моб.) и
   .catalog__filter (десктоп, sticky + max-height). Тот же паттерн, что у
   quick view / реквизитов / корзины: градиентное затухание + пульсирующий
   шеврон (@keyframes qv-chevron).

   position:sticky + height:0 — последним ребёнком скролл-контейнера: липнет к
   нижней кромке видимой области и не занимает места в потоке. Псевдоэлементы
   растут вверх от неё. Обёртка не нужна — работает и в drawer, и в сайдбаре.
   --fsh-bg = цвет, в который затухает градиент (белый drawer / #F8FAFD страница). */
body.page-redesign .filter-scroll-hint{
  --fsh-bg:#fff;
  position:sticky;bottom:0;z-index:6;
  /* Сайдбар — flex-колонка с order у блоков («Разделы» 0, «Фильтр» 1). Без order
     подсказка получала 0 и вставала между блоками, а не в самый низ зоны. */
  order:99;
  height:0;flex:0 0 auto;
  pointer-events:none;
  opacity:0;transition:opacity .3s ease;
}
body.page-redesign .filter-scroll-hint.is-show{opacity:1}
body.page-redesign .filter-scroll-hint::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:76px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    color-mix(in srgb, var(--fsh-bg) 85%, transparent) 60%,
    var(--fsh-bg) 100%);
}
body.page-redesign .filter-scroll-hint::after{
  content:'';position:absolute;left:50%;bottom:10px;
  width:24px;height:13px;margin-left:-12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='%230059B9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 2 14 12 26 2'/></svg>") center/contain no-repeat;
  opacity:.75;animation:qv-chevron 1.6s ease-in-out infinite;
}
/* Шеврон — информативная анимация (показывает, что зона листается), поэтому он внесён
   в список исключений reduced-motion выше, рядом с qv/реквизитами/корзиной. Своего
   отключения тут быть НЕ должно — иначе на машинах с «уменьшить анимацию» шеврон замирает. */

/* Sticky ограничен content-box родителя, а у .m-drawer-scroll снизу padding 12px →
   без компенсации подсказка висит на 12px выше настоящего низа зоны. */
body.page-redesign .m-drawer-scroll > .filter-scroll-hint{bottom:-12px}
/* То же самое в меню-шторке: там снизу padding 6px. */
body.page-redesign .nav-drawer__nav > .filter-scroll-hint{bottom:-6px}

/* Sorting блок внутри drawer */
body.page-redesign .m-sort{
  display:flex;flex-direction:column;gap:8px;margin:0 0 14px;
  padding-bottom:20px;border-bottom:1px solid #CAD5F0;
}
body.page-redesign .m-sort-row{display:flex;gap:8px;align-items:center}
body.page-redesign .m-sort-popular{flex:1}
body.page-redesign .m-sort-cat{
  flex:1;height:40px;padding:0 10px;
  background:#fff;color:var(--text);
  border:1px solid #CAD5F0;border-radius:12px;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;white-space:nowrap;
  transition:all .15s ease;
}
body.page-redesign .m-sort-cat:hover{border-color:var(--blue);color:var(--blue)}
body.page-redesign .m-sort-cat.is-active{
  background:#fff!important;color:var(--blue)!important;
  border:2px solid var(--blue)!important;outline:0!important;box-shadow:none!important;
  font-weight:600;box-sizing:border-box;
}
body.page-redesign .m-sort-dir{
  flex:0 0 40px;width:40px;height:40px;
  background:#fff;color:var(--text);
  border:1px solid #CAD5F0;border-radius:50%;
  cursor:pointer;
  display:inline-flex!important;align-items:center;justify-content:center;
  transition:all .15s ease;
  padding:0!important;margin:0;
  box-sizing:border-box;
}
body.page-redesign .m-sort-dir svg{display:block;width:14px;height:14px}
body.page-redesign .m-sort-dir:hover{border-color:var(--blue);color:var(--blue)}
body.page-redesign .m-sort-dir.is-active{
  background:#fff;color:var(--blue);
  border:2px solid var(--blue)!important;outline:0!important;box-shadow:none!important;
}

/* Слоты для teleport-нутых параметров фильтра (Бренд и др.) */
body.page-redesign .m-drawer-slots{display:flex;flex-direction:column;gap:0}
body.page-redesign .m-drawer-slots .bx-filter-parameters-box{
  border-bottom:1px solid #CAD5F0!important;
  border-top:none!important;
  padding:14px 0!important;
}
body.page-redesign .m-drawer-slots .bx-filter-parameters-box:last-child{border-bottom:none!important}

/* Foot — фиксированный с ценой и кнопкой */
body.page-redesign .m-drawer-foot{
  flex:0 0 auto;
  padding:22px 20px max(18px, env(safe-area-inset-bottom, 18px));border-top:1px solid #CAD5F0;
  background:#fff;
  display:flex;flex-direction:column;gap:26px;
}
body.page-redesign .m-drawer-price-slot:empty{display:none}
body.page-redesign .m-drawer-price-slot .filter-price-block{
  padding:0!important;border:none!important;
}
body.page-redesign .m-drawer-price-slot .bx-filter-parameters-box-title{
  font-size:14px!important;font-weight:600!important;margin-bottom:8px!important;
  padding-bottom:0!important;
}
body.page-redesign .m-drawer-apply{
  width:100%;height:48px;
  background:var(--grad-blue);color:#fff;
  border:0!important;outline:0!important;box-shadow:none!important;
  border-radius:14px;
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
body.page-redesign .m-drawer-apply:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,30,80,.2)}

/* Drawer: Разделы — внутри drawer показываем всегда, аккордеон работает */
body.page-redesign .m-drawer .catalog__section-list{display:block}
body.page-redesign .m-drawer .catalog__section-list .hidden_list{
  display:grid !important;
  grid-template-rows:0fr !important;
  overflow:hidden !important;
  transition:grid-template-rows .6s cubic-bezier(.4,0,.2,1) !important;
}
body.page-redesign .m-drawer .catalog__section-list .hidden_list > *{
  min-height:0 !important;overflow:hidden !important;
}
body.page-redesign .m-drawer .catalog__section-list.is-open .hidden_list{
  grid-template-rows:1fr !important;
}

/* Drawer: Бренд и др. — плавное раскрытие через grid-template-rows */
body.page-redesign .m-drawer-slots .bx-filter-parameters-box .bx-filter-block{
  display:grid !important;
  grid-template-rows:0fr !important;
  overflow:hidden !important;
  transition:grid-template-rows .6s cubic-bezier(.4,0,.2,1) !important;
}
body.page-redesign .m-drawer-slots .bx-filter-parameters-box .bx-filter-block > *{
  min-height:0 !important;overflow:hidden !important;
}
body.page-redesign .m-drawer-slots .bx-filter-parameters-box.bx-active .bx-filter-block{
  grid-template-rows:1fr !important;
}

/* Drawer: Price block — повторяем desktop, без "От/До", с тире и круглыми ручками */
body.page-redesign .m-drawer-price-slot .filter-price-block{
  padding:0!important;border:none!important;margin:0!important;
}
body.page-redesign .m-drawer-price-slot .bx-filter-parameters-box-title{
  font-size:15px!important;font-weight:600!important;color:var(--text)!important;
  padding:0 0 12px!important;border:none!important;margin:0!important;
}
body.page-redesign .m-drawer-price-slot .bx-filter-block{
  padding:0!important;display:block!important;
}
body.page-redesign .m-drawer-price-slot .bx-filter-parameters-box-container{
  display:flex!important;flex-wrap:wrap;gap:0;align-items:center;
  padding:0!important;justify-content:center;
}
body.page-redesign .m-drawer-price-slot .bx-filter-parameters-box-container-block.bx-left,
body.page-redesign .m-drawer-price-slot .bx-filter-parameters-box-container-block.bx-right{
  flex:1!important;min-width:0;padding:0!important;
}
body.page-redesign .m-drawer-price-slot .price-separator{
  flex:0 0 28px!important;max-width:28px!important;padding:0!important;
  display:flex!important;align-items:center;justify-content:center;
  height:auto!important;margin:0!important;
}
body.page-redesign .m-drawer-price-slot .price-separator:before{
  content:"—"!important;color:var(--gray)!important;font-size:14px!important;
  background:transparent!important;width:auto!important;height:auto!important;
  position:static!important;display:block!important;
}
body.page-redesign .m-drawer-price-slot .bx-ui-slider-track-container{
  flex:1 0 100%!important;margin-top:18px!important;padding:8px 0 4px!important;
}
body.page-redesign .m-drawer-price-slot .bx-ft-sub{display:none!important}
body.page-redesign .m-drawer-price-slot .bx-filter-input-container input{
  width:100%!important;height:42px!important;
  border:1px solid #CAD5F0!important;border-radius:12px!important;
  background:#fff!important;
  padding:0 14px!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:14px!important;color:var(--text)!important;
  text-align:center!important;
}
body.page-redesign .m-drawer-price-slot .bx-ui-slider-track{
  height:4px!important;background:#E5EAF5!important;border-radius:2px!important;
  position:relative!important;
}
body.page-redesign .m-drawer-price-slot .bx-ui-slider-pricebar-vd,
body.page-redesign .m-drawer-price-slot .bx-ui-slider-pricebar-vn{
  display:none!important;
}
body.page-redesign .m-drawer-price-slot .bx-ui-slider-pricebar-v{
  background:var(--blue)!important;height:4px!important;
  position:absolute!important;top:0!important;
  border:none!important;border-radius:2px!important;
}
body.page-redesign .m-drawer-price-slot .bx-ui-slider-range{
  background:transparent!important;height:4px!important;
  position:absolute!important;top:0!important;
  border:none!important;
}
body.page-redesign .m-drawer-price-slot .bx-ui-slider-handle{
  width:18px!important;height:18px!important;border-radius:50%!important;
  background:#fff!important;border:2px solid var(--blue)!important;
  box-shadow:0 2px 8px rgba(0,30,80,.15)!important;
  top:-7px!important;
}

/* ════════════════════════════════════════════════════════════
   Унификация аккордеонов — единый шеврон ":after", без fa-angle-down
   ════════════════════════════════════════════════════════════ */
body.page-redesign .m-drawer-slots .fa-angle-down,
body.page-redesign .catalog__filter .fa-angle-down{display:none!important}

/* Аккордеон-заголовок: синий блок с белым текстом и SVG-шевроном */
body.page-redesign .m-drawer-slots .bx-filter-parameters-box-title,
body.page-redesign .m-drawer-slots .catalog__section-list .title,
body.page-redesign .catalog__filter .bx-filter-parameters-box-title,
body.page-redesign .catalog__section-list .title{
  position:relative;
  display:flex!important;align-items:center;justify-content:space-between;
  cursor:pointer;
}
body.page-redesign .m-drawer-slots .catalog__section-list > .title,
body.page-redesign .m-drawer-slots > .bx-filter-parameters-box > .bx-filter-parameters-box-title{
  background:#fff!important;color:var(--text)!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:600!important;
  padding:14px 18px!important;margin:0!important;
  border:1px solid #CAD5F0!important;border-radius:12px!important;
  text-transform:none!important;
  transition:border-radius .2s ease,border-color .2s ease;
}
/* При раскрытом — плоский низ заголовка (стыкуется с телом) */
body.page-redesign .m-drawer-slots .catalog__section-list.is-open > .title,
body.page-redesign .m-drawer-slots > .bx-filter-parameters-box.bx-active > .bx-filter-parameters-box-title{
  border-radius:12px 12px 0 0!important;
}
/* Тело аккордеона — рамка с скруглением только снизу, только при раскрытом */
/* Рамка тела аккордеона — ВСЕГДА (прозрачная при close), цвет плавно анимируется синхронно с раскрытием */
body.page-redesign .m-drawer-slots > .catalog__section-list > .section__list-wrapper,
body.page-redesign .m-drawer-slots > .bx-filter-parameters-box > .bx-filter-block{
  border:1px solid transparent !important;
  border-top:none !important;
  border-radius:0 0 12px 12px !important;
  background:transparent;
  padding:0 !important;margin:0 !important;
  transition:border-color .6s cubic-bezier(.4,0,.2,1),background-color .6s cubic-bezier(.4,0,.2,1),grid-template-rows .6s cubic-bezier(.4,0,.2,1) !important;
}
body.page-redesign .m-drawer-slots > .catalog__section-list.is-open > .section__list-wrapper,
body.page-redesign .m-drawer-slots > .bx-filter-parameters-box.bx-active > .bx-filter-block{
  border-color:#CAD5F0 !important;
  background:#fff;
}
/* Внутренний padding у inner-content тела аккордеона — divider'ы и текст отступают от рамки */
body.page-redesign .m-drawer-slots > .catalog__section-list .hidden_list > *,
body.page-redesign .m-drawer-slots > .bx-filter-parameters-box .bx-filter-block > *{
  padding-left:14px !important;padding-right:14px !important;
}
body.page-redesign .m-drawer-slots .catalog__section-list > .title span,
body.page-redesign .m-drawer-slots > .bx-filter-parameters-box > .bx-filter-parameters-box-title span,
body.page-redesign .m-drawer-slots > .bx-filter-parameters-box > .bx-filter-parameters-box-title .bx-filter-parameters-box-hint{
  color:var(--text)!important;font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:600!important;
  background:transparent!important;padding:0!important;
}
/* Цена в foot — заголовок минимал (белый + бордер, без градиента) */
body.page-redesign .m-drawer-price-slot .bx-filter-parameters-box-title{
  background:#fff!important;color:var(--text)!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:600!important;
  padding:14px 18px!important;
  border:1px solid #CAD5F0!important;
  border-radius:12px 12px 0 0!important;margin:0!important;
  text-transform:none!important;
}
body.page-redesign .m-drawer-price-slot .bx-filter-block{
  border:1px solid #CAD5F0!important;
  border-top:none!important;
  border-radius:0 0 12px 12px!important;
  padding:18px 16px!important;
  background:#fff;
}
body.page-redesign .m-drawer-price-slot .bx-filter-parameters-box-title span{
  color:var(--text)!important;font-weight:600!important;
}
/* SVG-шеврон (через mask) */
body.page-redesign .m-drawer-slots .bx-filter-parameters-box-title:after,
body.page-redesign .m-drawer-slots .catalog__section-list .title:after,
body.page-redesign .catalog__filter .bx-filter-parameters-box-title:after,
body.page-redesign .catalog__section-list .title:after{
  content:""!important;
  width:14px;height:14px;
  background-color:var(--gray)!important;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  border:none!important;
  padding:0!important;margin:0 0 0 auto!important;
  position:static!important;
  display:inline-block!important;
  transform:rotate(0deg);
  transition:transform .2s ease;
  flex-shrink:0;
}
body.page-redesign .m-drawer-slots .bx-filter-parameters-box.bx-active .bx-filter-parameters-box-title:after,
body.page-redesign .m-drawer-slots .catalog__section-list.is-open .title:after,
body.page-redesign .catalog__filter .bx-filter-parameters-box.bx-active .bx-filter-parameters-box-title:after,
body.page-redesign .catalog__section-list.is-open .title:after{
  transform:rotate(180deg);
}
/* "ФИЛЬТР" (.catalog__section-filter .title) — без шеврона */
body.page-redesign .catalog__filter .catalog__section-filter > .title:after{display:none!important}
/* Между аккордеонами в drawer — gap */
body.page-redesign .m-drawer-slots{
  display:flex!important;flex-direction:column;gap:11px!important;
  padding:0 14px!important;
}
/* Убираем border у блоков-обёрток аккордеонов (но НЕ у их раскрытых тел) */
body.page-redesign .m-drawer-slots > .catalog__section-list,
body.page-redesign .m-drawer-slots > .bx-filter-parameters-box{
  border:0!important;padding:0!important;box-shadow:none!important;
  background:transparent!important;
}

/* Разделы — стилизация списка пунктов (Гели, Декоративная и т.д.) */
body.page-redesign .m-drawer .section__list-wrapper ul,
body.page-redesign .m-drawer .section__list-wrapper ol,
body.page-redesign .catalog__section-list .section__list-wrapper ul,
body.page-redesign .catalog__section-list .section__list-wrapper ol{
  list-style:none!important;
  padding:0!important;margin:0!important;
  background:#fff!important;
}
body.page-redesign .m-drawer .section__list-wrapper li,
body.page-redesign .catalog__section-list .section__list-wrapper li{
  list-style:none!important;
  border:none!important;
  margin:0!important;padding:0!important;
  background:transparent!important;
  width:100%!important;
  box-shadow:none!important;
}
body.page-redesign .m-drawer .section__list-wrapper li:last-child,
body.page-redesign .catalog__section-list .section__list-wrapper li:last-child{
  border-bottom:none!important;
}
body.page-redesign .m-drawer .section__list-wrapper li a,
body.page-redesign .catalog__section-list .section__list-wrapper li a{
  display:block !important;
  padding:14px 6px 14px 22px !important;margin:0 !important;
  font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:500!important;
  color:var(--text)!important;
  text-decoration:none!important;
  background:transparent!important;
  text-transform:none!important;
  width:100%!important;
  line-height:1.3!important;
  box-sizing:border-box;
  border:0!important;box-shadow:none!important;
}
/* Выбранный раздел в drawer (на "Готово" перейдём) */
body.page-redesign .m-drawer .section__list-wrapper a.m-selected{
  color:var(--blue)!important;font-weight:600!important;
}
body.page-redesign .m-drawer .section__list-wrapper li a:hover,
body.page-redesign .catalog__section-list .section__list-wrapper li a:hover{
  color:var(--blue)!important;
  background:transparent!important;
}
/* Активный пункт (текущий раздел) */
body.page-redesign .m-drawer .section__list-wrapper li.item-selected a,
body.page-redesign .m-drawer .section__list-wrapper li.sub-item-selected a,
body.page-redesign .catalog__section-list .section__list-wrapper li.item-selected a,
body.page-redesign .catalog__section-list .section__list-wrapper li.sub-item-selected a{
  color:var(--blue)!important;font-weight:600!important;
}

/* Бренд — divider'ы между чекбоксами + активный стиль чекбокса */
body.page-redesign .m-drawer-slots .bx-filter-parameters-box .bx-filter-block .checkbox.bx-filter-input-checkbox,
body.page-redesign .catalog__filter .bx-filter-parameters-box .bx-filter-block .checkbox.bx-filter-input-checkbox{
  display:flex !important;align-items:center;gap:10px;
  padding:14px 0 14px 14px !important;margin:0 !important;
  border-bottom:none !important;
  background:transparent;
  box-sizing:border-box;
}
body.page-redesign .m-drawer-slots .bx-filter-parameters-box .bx-filter-block .checkbox.bx-filter-input-checkbox:last-child,
body.page-redesign .catalog__filter .bx-filter-parameters-box .bx-filter-block .checkbox.bx-filter-input-checkbox:last-child{
  border-bottom:none!important;
}
/* Drawer: пункты тела аккордеонов выровнены по отступу текста шапки (18px) —
   dividers убраны, держать их правее незачем. Обнуляем промежуточные отступы (в т.ч. bootstrap .col-*). */
body.page-redesign .m-drawer-slots > .catalog__section-list .section__list-wrapper ul,
body.page-redesign .m-drawer-slots > .catalog__section-list .hidden_list,
body.page-redesign .m-drawer-slots > .catalog__section-list .hidden_list > *,
body.page-redesign .m-drawer-slots > .bx-filter-parameters-box .bx-filter-block > *,
body.page-redesign .m-drawer-slots [class*="col-"]{
  padding-left:0!important;padding-right:0!important;
}
body.page-redesign .m-drawer-slots > .catalog__section-list .section__list-wrapper li a{
  padding-left:26px!important;padding-right:14px!important;
}
body.page-redesign .m-drawer-slots .bx-filter-parameters-box .bx-filter-block .checkbox.bx-filter-input-checkbox{
  padding-left:18px!important;
}

body.page-redesign .bx-filter .bx-filter-param-label,
body.page-redesign .bx-filter .bx-filter-param-text{
  font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:500!important;
  line-height:1.3!important;
}
/* Активный стиль label при checked */
body.page-redesign .bx-filter .checkbox.bx-filter-input-checkbox:has(input[type=checkbox]:checked) .bx-filter-param-label,
body.page-redesign .bx-filter .checkbox.bx-filter-input-checkbox:has(input[type=checkbox]:checked) .bx-filter-param-text{
  color:var(--blue)!important;font-weight:600!important;
}

/* Ползунок цены в drawer — усиленная специфичность */
body.page-redesign .m-drawer .m-drawer-price-slot .bx-ui-slider-handle,
body.page-redesign .m-drawer .m-drawer-price-slot .bx-ui-slider-handle.left,
body.page-redesign .m-drawer .m-drawer-price-slot .bx-ui-slider-handle.right{
  width:18px!important;height:18px!important;
  border-radius:50%!important;
  background:#fff!important;background-image:none!important;
  border:2px solid var(--blue)!important;
  box-shadow:0 2px 8px rgba(0,30,80,.15)!important;
  top:-7px!important;
  position:absolute!important;
}
body.page-redesign .m-drawer .m-drawer-price-slot .bx-ui-slider-handle:before,
body.page-redesign .m-drawer .m-drawer-price-slot .bx-ui-slider-handle:after{
  content:none!important;display:none!important;background:none!important;
}

/* ════════════════════════════════════════════════════════════
   SORTING — единый segmented-pill: популярность / цена / алфавит,
   разделители — вертикальные палочки между сегментами.
   Активный сегмент сохраняет тот же синий градиент + повтор клика
   меняет направление сортировки.
   ════════════════════════════════════════════════════════════ */
body.page-redesign .sorting_box{
  display:inline-flex;align-items:center;
}
body.page-redesign .sorting{
  display:inline-flex;align-items:stretch;
  background:#fff;
  /* Outline-вариант рамки — рисуется СНАРУЖИ контента (через box-shadow без
     offset), поэтому фон активного сегмента доходит до самой круглой границы. */
  box-shadow:0 0 0 1px #CAD5F0;
  border-radius:999px;
  overflow:hidden;
  padding:0;gap:0;flex-wrap:nowrap;
  /* Отступ от обводки чтобы соседние элементы не упирались */
  margin:1px;
}
body.page-redesign .sorting_item{
  list-style:none;margin:0!important;padding:0;display:flex;position:relative;
}
/* Вертикальные дивайдеры между сегментами (по 1px между соседями) */
body.page-redesign .sorting_item + .sorting_item::before{
  content:'';
  position:absolute;left:0;top:6px;bottom:6px;
  width:1px;background:#CAD5F0;
  pointer-events:none;
  z-index:1;
}
body.page-redesign .sorting_item a{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;
  color:var(--gray);
  border:none;border-radius:0;
  background:transparent;
  text-decoration:none;
  white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
body.page-redesign .sorting_item a:hover{color:var(--blue)}
/* Активный сегмент — минимал: синий текст + утолщённая синяя рамка (чип) через ::before,
   без градиентной заливки. ::before перекрывает divider-псевдо того же элемента. */
body.page-redesign .sorting_item.active{z-index:2}
body.page-redesign .sorting_item.active::before{
  content:''!important;
  display:block!important;
  position:absolute!important;inset:2px!important;
  width:auto!important;height:auto!important;
  background:transparent!important;
  border:2px solid var(--blue)!important;
  border-radius:999px!important;
  z-index:1!important;
  pointer-events:none;
}
body.page-redesign .sorting_item.active a{
  color:var(--blue)!important;
  background:transparent!important;font-weight:600;
  position:relative;z-index:2;
}
/* Соседний divider (тот, что справа от активного) тоже скрываем */
body.page-redesign .sorting_item.active + .sorting_item::before{display:none}
body.page-redesign .sorting_item.active .srt-arrow{color:var(--blue)!important}
body.page-redesign .sorting_item .srt-arrow{
  display:inline-block;font-size:14px;line-height:1;
  color:var(--blue);font-weight:700;
}
body.page-redesign .sorting_item:not(.active) .srt-arrow{display:none}
/* Подсказка над активной сортировкой: повтор клика → смена направления */
body.page-redesign .sorting_item.active:after{
  content:"клик ↻ направление";
  position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--gray);font-family:'Montserrat',sans-serif;
  white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .15s ease;
  z-index:3;
}
body.page-redesign .sorting_item.active:hover:after{opacity:1}

/* Пустой каталог — fallback с серой корзиной */
.cat-grid:has(.catalog-empty){
  display:flex;justify-content:center;align-items:center;
  min-height:420px;
  background:#EFF3F8;
  border:1px solid #CAD5F0;
  border-radius:16px;
}
.catalog-empty{
  display:flex;flex-direction:column;align-items:center;gap:28px;
  padding:56px 24px;
  text-align:center;
  width:100%;max-width:600px;
}
.catalog-empty__icon{
  width:160px;height:160px;
  display:flex;align-items:center;justify-content:center;
}
.catalog-empty__icon img{
  width:100%;height:100%;
  opacity:.22;
  filter:brightness(0) saturate(100%);
}
.catalog-empty__text{
  margin:0;width:100%;
  font-family:'Montserrat',sans-serif;
  font-size:22px;font-weight:500;line-height:1.4;
  color:rgba(0,30,80,.5);
}

/* ════════════════════════════════════════════════════════════
   ПАГИНАЦИЯ — "Показать еще" + страницы 1/2/3 в редизайне
   ════════════════════════════════════════════════════════════ */
body.page-redesign .p-card.p-card-hidden{display:none!important}
body.page-redesign .show-more-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:24px auto 18px;
  height:50px;padding:0 32px;
  background:var(--grad-blue);color:#fff;
  border:0;border-radius:14px;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;
  transition:transform .15s ease,box-shadow .15s ease;
}
body.page-redesign .show-more-btn:hover{
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,30,80,.2);
}
body.page-redesign .show-more-btn:disabled{opacity:.5;cursor:default;transform:none}
body.page-redesign .show-more-btn .smb-count{opacity:.85;font-weight:500}

/* Bitrix pagination — стилизация под редизайн */
body.page-redesign .bx_pagination_bottom{
  margin:8px 0 32px;
  font-family:'Montserrat',sans-serif;
}
body.page-redesign .bx_pagination_section_two{
  text-align:center;color:var(--gray);font-size:13px;
  margin-bottom:12px;
}
body.page-redesign .bx_pg_show_col{padding:0!important}
body.page-redesign .bx_pagination_section_one{display:flex;justify-content:center}
body.page-redesign .bx_pagination_page{display:flex;justify-content:center;width:100%}
body.page-redesign .bx_pagination_page_list{
  display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%;
}
body.page-redesign .bx_pagination_page_list_num{
  display:inline-flex;list-style:none;padding:0!important;margin:0!important;gap:6px;
  align-items:center;background:transparent!important;
}
body.page-redesign .bx_pagination_page_list_num li{
  list-style:none;margin:0;padding:0;
  background:transparent!important;border:0!important;border-radius:0!important;
}
body.page-redesign .bx_pagination_page_list_num li a,
body.page-redesign .bx_pagination_page_list_num li span{
  display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;
  color:var(--text);text-decoration:none;
  background:#fff;border:1px solid #CAD5F0;border-radius:999px!important;
  transition:all .15s ease;box-sizing:border-box;
}
body.page-redesign .bx_pagination_page_list_num li a:hover{
  color:var(--blue);border-color:var(--blue);background:#F8FAFD;
}
body.page-redesign .bx_pagination_page_list_num li.bx_active span{
  background:var(--grad-blue);color:#fff;border:0!important;font-weight:600;
}

/* "Предыдущая" / "Следующая" — pill со скруглением только с одной стороны */
body.page-redesign .nav-text{
  display:inline-flex!important;align-items:center;margin:0!important;
  border:0!important;width:auto!important;height:auto!important;line-height:1!important;
  background:transparent!important;
}
body.page-redesign .bx_pagination_bottom .bx_pagination_page li{border:0!important}
body.page-redesign .nav-text a{
  display:inline-flex!important;align-items:center;gap:6px;
  height:38px;padding:0 18px;
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;
  color:var(--text)!important;text-decoration:none!important;
  background:#fff!important;border:1px solid #CAD5F0!important;
  transition:all .15s ease;box-sizing:border-box;
}
body.page-redesign .nav-prev-title a{
  border-top-left-radius:999px!important;border-bottom-left-radius:999px!important;
  border-top-right-radius:0!important;border-bottom-right-radius:0!important;
}
body.page-redesign .nav-next-title a{
  border-top-right-radius:999px!important;border-bottom-right-radius:999px!important;
  border-top-left-radius:0!important;border-bottom-left-radius:0!important;
}
body.page-redesign .nav-text a:hover{color:var(--blue)!important;border-color:var(--blue)!important;background:#F8FAFD!important}
body.page-redesign .nav-text.disabled{display:none!important}
/* Font-awesome chevron → Unicode (если font-awesome не загружен — отображается knochenflag) */
body.page-redesign .nav-text .fa-angle-left:before{content:"‹"!important;font:18px/1 'Montserrat',sans-serif!important;font-style:normal!important}
body.page-redesign .nav-text .fa-angle-right:before{content:"›"!important;font:18px/1 'Montserrat',sans-serif!important;font-style:normal!important}

/* ════════════════════════════════════════════════════════════
   DESKTOP SIDEBAR — полировка стиля
   ════════════════════════════════════════════════════════════ */
@media(min-width:901px){
  /* === ПОЛИРОВКА (вставлено в этот @media-блок) === */
  /* Иконка sliders перед "Фильтр" */
  body.page-redesign .catalog__filter .catalog__section-filter > .title > span:first-child::before{
    content:""!important;
    display:inline-block!important;
    width:18px;height:18px;margin-right:8px;
    vertical-align:-3px;
    background-color:var(--blue);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="13" y2="6"/><line x1="17" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="9" y2="12"/><line x1="13" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="15" y2="18"/><line x1="19" y1="18" x2="20" y2="18"/><circle cx="15" cy="6" r="2"/><circle cx="11" cy="12" r="2"/><circle cx="17" cy="18" r="2"/></svg>') center/contain no-repeat;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="13" y2="6"/><line x1="17" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="9" y2="12"/><line x1="13" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="15" y2="18"/><line x1="19" y1="18" x2="20" y2="18"/><circle cx="15" cy="6" r="2"/><circle cx="11" cy="12" r="2"/><circle cx="17" cy="18" r="2"/></svg>') center/contain no-repeat;
  }

  /* Заголовки аккордеонов: hover translateY + тень */
  body.page-redesign .catalog__filter .catalog__section-list > .title,
  body.page-redesign .catalog__filter .bx-filter-parameters-box > .bx-filter-parameters-box-title{
    box-shadow:0 2px 8px rgba(0,30,80,.10);
    transition:transform .2s ease,box-shadow .2s ease,border-radius .2s ease!important;
  }
  body.page-redesign .catalog__filter .catalog__section-list > .title:hover,
  body.page-redesign .catalog__filter .bx-filter-parameters-box > .bx-filter-parameters-box-title:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(0,30,80,.18);
  }
  body.page-redesign .catalog__filter .filter-price-block > .bx-filter-parameters-box-title{
    box-shadow:0 2px 8px rgba(0,30,80,.10);
  }

  /* Пункты Разделов: hover тинт, точка-маркер у активного */
  body.page-redesign .catalog__filter .section__list-wrapper li a{
    transition:background .15s ease,color .15s ease,padding-left .15s ease;
    position:relative;
  }
  body.page-redesign .catalog__filter .section__list-wrapper li a:hover{
    background:#F0F5FF!important;color:var(--blue)!important;
  }
  body.page-redesign .catalog__filter .section__list-wrapper li.item-selected a,
  body.page-redesign .catalog__filter .section__list-wrapper li.sub-item-selected a{
    background:#F0F5FF!important;
  }
  body.page-redesign .catalog__filter .section__list-wrapper li.item-selected a::before,
  body.page-redesign .catalog__filter .section__list-wrapper li.sub-item-selected a::before{
    content:"";
    position:absolute;left:10px;top:50%;transform:translateY(-50%);
    width:6px;height:6px;border-radius:50%;
    background:var(--blue);
  }

  /* Чекбоксы — расширенная hit-зона (весь label кликабелен) */
  body.page-redesign .catalog__filter .bx-filter-input-checkbox{cursor:pointer}
  body.page-redesign .catalog__filter .bx-filter-input-checkbox:hover{background:#F0F5FF!important}
  body.page-redesign .catalog__filter .bx-filter-param-label,
  body.page-redesign .catalog__filter .bx-filter-param-text{
    flex:1!important;cursor:pointer;
  }

  /* Ручки слайдера цены — 20px */
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-handle,
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-handle.left,
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-handle.right{
    width:20px!important;height:20px!important;top:-8px!important;
  }

  /* Chips активных фильтров под заголовком "Фильтр" */
  body.page-redesign .catalog__filter .active-filter-chips{
    display:flex!important;flex-wrap:wrap;gap:6px;margin:8px 0 4px;
  }
  body.page-redesign .catalog__filter .active-filter-chips:empty{display:none!important}
  body.page-redesign .catalog__filter .active-filter-chip{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;border-radius:8px;
    background:var(--grad-blue);color:#fff;
    font-family:'Montserrat',sans-serif;font-size:12px;font-weight:500;
    cursor:pointer;border:0;
    transition:transform .15s ease,box-shadow .15s ease;
  }
  body.page-redesign .catalog__filter .active-filter-chip:hover{
    transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,30,80,.18);
  }
  body.page-redesign .catalog__filter .active-filter-chip .chip-x{font-size:14px;line-height:1}
}
@media(min-width:901px){
  /* Layout: sidebar 300px слева, контент flex:1 справа */
  body.page-redesign .catalog__content{
    display:flex!important;align-items:flex-start;gap:32px;
  }
  body.page-redesign .catalog__content > .catalog__list{flex:1!important;min-width:0!important;width:auto!important}
  /* h1 слева + сортировка справа в одной строке + поднимаем выше.
     Sticky — title_box остаётся видимым при скролле, прилегая к верху viewport'а. */
  body.page-redesign .title_box{
    display:flex!important;align-items:center;justify-content:space-between;gap:24px;
    flex-wrap:wrap;row-gap:14px;
    margin-top:-32px;margin-bottom:18px;
    padding:14px 0;
  }
  /* width:max-content + wrap: пока заголовок и сортировка влезают — одна строка;
     не влезают — сортировка уходит строкой ниже, заголовок остаётся в одну строку;
     шире колонки — переносится сам (max-width:100%). */
  body.page-redesign .title_box h1{width:max-content;max-width:100%;flex:0 1 auto;min-width:0}
  body.page-redesign .title_box .sorting_box{flex:0 0 auto;margin-left:auto}
  /* Sticky + фон/затухание — ТОЛЬКО на каталоге (где есть листинг + сортировка в одной строке).
     На остальных страницах (чек-аут, статика) заголовок липнуть не должен — просто заголовок. */
  body.page-redesign:has(.catalog__list) .title_box{
    position:sticky;top:0;z-index:20;
    background:rgba(244,247,253,.92);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  body.page-redesign:has(.catalog__list) .title_box::after{
    content:'';position:absolute;left:0;right:0;top:100%;
    height:24px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(244,247,253,.92) 0%,rgba(244,247,253,0) 100%);
  }
  /* Если перед title_box стоит наш brand-listing-title (страница бренда) —
     убираем отрицательный margin-top, чтобы h2 не наезжал на h1. */
  body.page-redesign .brand-listing-title + .title_box{
    margin-top:8px!important;
  }
  body.page-redesign .title_box h1{margin:0!important}
  body.page-redesign .title_box .sorting_box{margin-left:auto}
  /* Sidebar — sticky при скролле, с touch-scroll и отступом для scrollbar */
  body.page-redesign .catalog__filter{
    width:312px!important;flex:0 0 312px!important;
    /* padding-top сдвигает содержимое зоны вниз: в исходном положении ползунок цены
       уходит за нижнюю кромку и не проступает сквозь градиент подсказки. */
    padding:28px 12px 0 0!important;margin-top:60px!important;
    display:flex;flex-direction:column;gap:11px;
    position:sticky;top:20px;
    align-self:flex-start;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,30,80,.2) transparent;
  }
  /* Подсказка прокрутки в сайдбаре: затухание в фон СТРАНИЦЫ (не в белый, как в drawer),
     margin-top гасит flex-gap:11px — подсказка height:0 и места занимать не должна.
     Правее на 12px — на ширину padding-right сайдбара (иначе градиент лезет под скроллбар). */
  body.page-redesign .catalog__filter > .filter-scroll-hint{
    --fsh-bg:#F8FAFD;
    margin-top:-11px;
  }
  /* ── Координация липких элементов десктоп-каталога с авто-хайд хедером ──
     Заголовок+сортировка (title_box) и сайдбар фильтров прилипают ПОД хедером (top:var(--hh)),
     а при скрытом хедере — к верху. Подложка заголовка тянется ВВЕРХ (::before) до верха экрана,
     закрывая зазор между хедером и панелью — тот же приём, что на мобилке. */
  body.page-redesign:has(.catalog__list) .title_box{
    top:var(--hh)!important; transition:top .24s ease;
  }
  body.page-redesign.header-hidden:has(.catalog__list) .title_box{ top:0!important; }
  body.page-redesign.header-scrolled:not(.header-hidden):has(.catalog__list) .title_box::before{
    content:'';position:absolute;left:0;right:0;bottom:100%;height:var(--hh);
    background:rgba(244,247,253,.92);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    pointer-events:none;
  }
  /* max-height обязан следовать за top, иначе при видимом хедере сайдбар сдвинут
     вниз, а высота прежняя — низ зоны (и подсказка скролла) уезжает под экран. */
  body.page-redesign .catalog__filter{
    top:calc(var(--hh) + 8px)!important;
    max-height:calc(100vh - var(--hh) - 28px)!important;
    transition:top .24s ease, max-height .24s ease;
  }
  body.page-redesign.header-hidden .catalog__filter{
    top:20px!important;
    max-height:calc(100vh - 40px)!important;
  }
  /* Убираем bitrix-овский серый divider под Ценой и другими параметрами фильтра */
  body.page-redesign .catalog__filter .bx-filter-block,
  body.page-redesign .catalog__filter .bx-filter-parameters-box,
  body.page-redesign .catalog__filter .filter-price-block,
  body.page-redesign .catalog__filter .bx-filter-section,
  body.page-redesign .catalog__filter .bx-filter-section-form,
  body.page-redesign .catalog__filter .smartfilter,
  body.page-redesign .catalog__filter .bx-filter{
    border-bottom:0!important;border-bottom-color:transparent!important;
  }
  body.page-redesign .catalog__filter::-webkit-scrollbar{width:8px}
  body.page-redesign .catalog__filter::-webkit-scrollbar-track{background:transparent}
  body.page-redesign .catalog__filter::-webkit-scrollbar-thumb{background:rgba(0,30,80,.2);border-radius:4px}
  body.page-redesign .catalog__filter::-webkit-scrollbar-thumb:hover{background:rgba(0,30,80,.35)}
  /* .catalog__section-filter становится display:contents — дети попадают в flex .catalog__filter */
  body.page-redesign .catalog__filter .catalog__section-filter{display:contents!important}
  /* Effective order: Фильтр заголовок → Разделы → Бренд + Цена */
  body.page-redesign .catalog__filter .catalog__section-filter > .title{order:0!important;margin:0 0 6px!important}
  body.page-redesign .catalog__filter .catalog__section-list{order:1!important;margin:0!important}
  body.page-redesign .catalog__filter .catalog__section-filter > .section__filter-wrapper{
    order:2!important;display:flex!important;flex-direction:column!important;gap:11px;
  }
  /* "ФИЛЬТР" заголовок + Очистить */
  body.page-redesign .catalog__filter .catalog__section-filter > .title{
    background:transparent!important;color:var(--text)!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:18px!important;font-weight:700!important;
    padding:0 0 16px!important;margin:0 0 14px!important;
    border-bottom:1px solid #CAD5F0!important;
    display:flex;align-items:center;justify-content:space-between;
  }
  body.page-redesign .catalog__filter .catalog__section-filter > .title:after{display:none!important}
  /* del_filter — компактнее */
  body.page-redesign .catalog__filter .title .del_filter,
  body.page-redesign .catalog__filter .del_filter{
    background:transparent!important;background-image:none!important;
    border:1px solid #CAD5F0!important;outline:0!important;box-shadow:none!important;
    color:var(--text)!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:13px!important;font-weight:500!important;
    height:34px!important;padding:0 14px!important;border-radius:10px!important;cursor:pointer;
    text-transform:none!important;
    text-decoration:none!important;
    transition:background .15s,color .15s,border-color .15s;
    -webkit-appearance:none;appearance:none;
  }
  body.page-redesign .catalog__filter .title .del_filter:hover,
  body.page-redesign .catalog__filter .del_filter:hover{
    background:#F8FAFD!important;color:var(--blue)!important;border-color:var(--blue)!important;
  }

  /* Между группами фильтров — без разделителя (каждый аккордеон = самостоятельная бордер-плашка);
     отступы даёт gap:11px у .catalog__filter / .section__filter-wrapper */
  body.page-redesign .catalog__filter .bx-filter-parameters-box{
    border-bottom:none!important;padding:0!important;
  }

  /* Заголовки аккордеонов (Разделы, Бренд, Цена) — минимализм: белый фон + бордер, без градиента */
  body.page-redesign .catalog__filter .catalog__section-list > .title,
  body.page-redesign .catalog__filter .bx-filter-parameters-box > .bx-filter-parameters-box-title{
    background:#fff!important;color:var(--text)!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:14px!important;font-weight:600!important;
    padding:12px 16px!important;margin:0!important;
    border:1px solid #CAD5F0!important;border-radius:12px!important;
    text-transform:none!important;
    cursor:pointer;
    display:flex!important;align-items:center;justify-content:space-between;
    transition:border-radius .2s ease,border-color .2s ease;
  }
  /* Раскрытый: у шапки скругляем только верх, низ смыкается с телом (бордер остаётся на обоих) */
  body.page-redesign .catalog__filter .catalog__section-list.is-open > .title,
  body.page-redesign .catalog__filter .bx-filter-parameters-box.bx-active > .bx-filter-parameters-box-title{
    border-radius:12px 12px 0 0!important;
  }
  body.page-redesign .catalog__filter .catalog__section-list > .title span,
  body.page-redesign .catalog__filter .bx-filter-parameters-box > .bx-filter-parameters-box-title span,
  body.page-redesign .catalog__filter .bx-filter-parameters-box > .bx-filter-parameters-box-title .bx-filter-parameters-box-hint{
    color:var(--text)!important;font-family:'Montserrat',sans-serif!important;
    font-size:14px!important;font-weight:600!important;
    background:transparent!important;padding:0!important;
  }
  /* SVG шеврон у заголовков — тёмный (под минимал-стиль) */
  body.page-redesign .catalog__filter .catalog__section-list > .title:after,
  body.page-redesign .catalog__filter .bx-filter-parameters-box > .bx-filter-parameters-box-title:after{
    content:""!important;
    width:14px;height:14px;
    background-color:var(--gray)!important;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
    border:none!important;
    padding:0!important;margin:0 0 0 auto!important;
    position:static!important;
    display:inline-block!important;
    transform:rotate(0deg);
    transition:transform .2s ease;
    flex-shrink:0;
  }
  body.page-redesign .catalog__filter .catalog__section-list.is-open > .title:after,
  body.page-redesign .catalog__filter .bx-filter-parameters-box.bx-active > .bx-filter-parameters-box-title:after{
    transform:rotate(180deg);
  }

  /* Тело аккордеона: рамка #74AFF1 (плавно при раскрытии), grid-rows анимация */
  body.page-redesign .catalog__filter .catalog__section-list > .section__list-wrapper,
  body.page-redesign .catalog__filter .bx-filter-parameters-box > .bx-filter-block{
    border:1px solid transparent!important;
    border-top:none!important;
    border-radius:0 0 12px 12px!important;
    background:transparent;
    padding:0!important;margin:0!important;
    display:grid!important;
    grid-template-rows:0fr!important;
    overflow:hidden!important;
    transition:border-color .6s cubic-bezier(.4,0,.2,1),background-color .6s cubic-bezier(.4,0,.2,1),grid-template-rows .6s cubic-bezier(.4,0,.2,1)!important;
  }
  body.page-redesign .catalog__filter .catalog__section-list > .section__list-wrapper > *,
  body.page-redesign .catalog__filter .bx-filter-parameters-box > .bx-filter-block > *{
    min-height:0!important;overflow:hidden!important;
  }
  body.page-redesign .catalog__filter .catalog__section-list.is-open > .section__list-wrapper,
  body.page-redesign .catalog__filter .bx-filter-parameters-box.bx-active > .bx-filter-block{
    border-color:#CAD5F0!important;
    background:#fff;
    grid-template-rows:1fr!important;
  }

  /* Разделы список — стиль как в drawer */
  body.page-redesign .catalog__filter ul#vertical-multilevel-menu,
  body.page-redesign .catalog__filter .section__list-wrapper ul{
    padding:0 16px!important;margin:0!important;
    list-style:none!important;
    display:block!important;width:100%!important;
  }
  body.page-redesign .catalog__filter .section__list-wrapper li{
    border-bottom:none!important;
    list-style:none!important;width:100%!important;
  }
  /* Пункты выровнены по отступу текста шапки (нет dividers — нет нужды в центровке) */
  body.page-redesign .catalog__filter .section__list-wrapper li a{
    display:block!important;
    /* слева жёлоб под точку активного пункта */
    padding:12px 0 12px 26px!important;margin:0!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:14px!important;font-weight:500!important;
    color:var(--text)!important;
    text-decoration:none!important;
    background:transparent!important;
    text-transform:none!important;
  }
  body.page-redesign .catalog__filter .section__list-wrapper li a:hover{color:var(--blue)!important}
  body.page-redesign .catalog__filter .section__list-wrapper li.item-selected a,
  body.page-redesign .catalog__filter .section__list-wrapper li.sub-item-selected a{
    color:var(--blue)!important;font-weight:600!important;
  }

  /* Inner padding у тела Бренда: слева 0 (чекбокс выровнен по шапке), справа — воздух */
  body.page-redesign .catalog__filter .bx-filter-parameters-box.bx-active > .bx-filter-block > *{
    padding-left:0!important;padding-right:14px!important;
  }
  /* Чекбоксы Бренда — выровнены по отступу шапки, компактный зазор чекбокс↔лейбл */
  body.page-redesign .catalog__filter .bx-filter-parameters-box .bx-filter-block .checkbox.bx-filter-input-checkbox{
    display:flex!important;align-items:center;gap:8px;
    padding:12px 0 12px 16px!important;margin:0!important;
    border-bottom:none!important;
    background:transparent!important;box-sizing:border-box;
  }
  /* Custom checkbox в desktop sidebar (увеличенная специфичность) */
  body.page-redesign .catalog__filter .bx-filter-input-checkbox input[type=checkbox],
  body.page-redesign .catalog__filter .checkbox input[type=checkbox],
  body.page-redesign .catalog__filter input.checkbox[type=checkbox],
  body.page-redesign .catalog__filter input[type=checkbox]{
    width:18px!important;height:18px!important;
    appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;
    border:1.5px solid #CAD5F0!important;border-radius:5px!important;
    background:#fff!important;background-image:none!important;
    cursor:pointer;
    position:relative!important;flex-shrink:0!important;margin:0!important;
    padding:0!important;box-shadow:none!important;
    accent-color:auto!important;
  }
  body.page-redesign .catalog__filter input[type=checkbox]:checked{
    background:var(--blue)!important;border-color:var(--blue)!important;
  }
  body.page-redesign .catalog__filter input[type=checkbox]:checked:after,
  body.page-redesign .catalog__filter input[type=checkbox]:checked::after{
    content:""!important;position:absolute!important;
    left:5.5px!important;top:2px!important;width:5px!important;height:10px!important;
    border:solid #fff!important;border-width:0 2px 2px 0!important;
    transform:rotate(45deg)!important;
    background:transparent!important;
    display:block!important;
  }

  /* Цена inputs/слайдер — оставляем уже стилизованное в drawer (рамки/инпуты/handles наследуются) */

  /* Порядок блоков: Разделы (сверху) → Фильтр (заголовок + Бренд + Цена) */
  body.page-redesign .catalog__filter .catalog__section-list{order:0;margin:0!important;width:100%!important}
  body.page-redesign .catalog__filter .catalog__section-filter{order:1;display:flex;flex-direction:column;gap:11px}

  /* Внутри секции фильтра — Бренд сверху, Цена внизу через flex-column + order */
  body.page-redesign .catalog__filter .bx-filter .bx-filter-section{padding:0!important;background:transparent!important}
  body.page-redesign .catalog__filter form.smartfilter > .row{
    display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
    gap:11px;margin:0!important;padding:0!important;
  }
  body.page-redesign .catalog__filter form.smartfilter > .row > .bx-filter-parameters-box{
    order:2;width:100%!important;max-width:none!important;flex:none!important;padding:0!important;margin:0!important;
  }
  body.page-redesign .catalog__filter form.smartfilter > .row > .filter-price-block{
    order:99;width:100%!important;max-width:none!important;flex:none!important;padding:0!important;margin:0!important;
  }
  /* Bootstrap negative margin/padding у .row и .col-* — обнуляем */
  body.page-redesign .catalog__filter .row{margin-left:0!important;margin-right:0!important}
  body.page-redesign .catalog__filter [class*="col-"]{padding-left:0!important;padding-right:0!important}
  body.page-redesign .catalog__filter .bx-filter .bx-filter-section > .row > .bx-filter-title{display:none!important}

  /* Цена — НЕ аккордеон, всегда раскрыта. Полностью отменяем grid */
  body.page-redesign .catalog__filter .filter-price-block > .bx-filter-block{
    display:block!important;
    grid-template-rows:none!important;grid-template-columns:none!important;
    max-height:none!important;height:auto!important;overflow:visible!important;
    padding:14px 14px 22px!important;
    border:1px solid #CAD5F0!important;border-top:none!important;
    border-radius:0 0 12px 12px!important;
    background:#fff!important;
    transition:none!important;
  }
  body.page-redesign .catalog__filter .filter-price-block > .bx-filter-block > *{
    min-height:auto!important;overflow:visible!important;
  }
  /* Цена заголовок — синий, не кликабельный, без шеврона */
  body.page-redesign .catalog__filter .filter-price-block > .bx-filter-parameters-box-title{
    cursor:default!important;
    border-radius:12px 12px 0 0!important;
  }
  body.page-redesign .catalog__filter .filter-price-block > .bx-filter-parameters-box-title:after{display:none!important}
  body.page-redesign .catalog__filter .filter-price-block .bx-filter-parameters-box-container{
    display:flex!important;flex-wrap:wrap;gap:0;align-items:center;
    padding:0!important;margin:0!important;
  }
  body.page-redesign .catalog__filter .filter-price-block .bx-filter-parameters-box-container-block.bx-left,
  body.page-redesign .catalog__filter .filter-price-block .bx-filter-parameters-box-container-block.bx-right{
    flex:1!important;min-width:0!important;max-width:none!important;padding:0!important;
  }
  body.page-redesign .catalog__filter .filter-price-block .price-separator{
    flex:0 0 28px!important;max-width:28px!important;padding:0!important;
    display:flex!important;align-items:center;justify-content:center;height:auto!important;margin:0!important;
  }
  body.page-redesign .catalog__filter .filter-price-block .price-separator:before{
    content:"—"!important;color:var(--gray)!important;font-size:14px!important;
    background:transparent!important;width:auto!important;height:auto!important;
    position:static!important;display:block!important;
  }
  body.page-redesign .catalog__filter .filter-price-block .bx-ft-sub{display:none!important}
  body.page-redesign .catalog__filter .filter-price-block .bx-filter-input-container{padding:0!important}
  body.page-redesign .catalog__filter .filter-price-block .bx-filter-input-container input{
    width:100%!important;height:38px!important;
    border:1px solid #CAD5F0!important;border-radius:10px!important;
    background:#fff!important;padding:0 10px!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:13px!important;color:var(--text)!important;
    text-align:center!important;
  }
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-track-container{
    flex:1 0 100%!important;margin-top:16px!important;padding:8px 10px 4px!important;
  }
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-track{
    height:4px!important;background:#E5EAF5!important;border-radius:2px!important;position:relative!important;
  }
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-part{display:none!important}
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-pricebar-vd,
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-pricebar-vn{display:none!important}
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-pricebar-v{
    background:var(--blue)!important;height:4px!important;border-radius:2px!important;
    position:absolute!important;top:0!important;
  }
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-range{
    background:transparent!important;height:4px!important;
    position:absolute!important;top:0!important;border:none!important;
  }
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-handle,
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-handle.left,
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-handle.right{
    width:18px!important;height:18px!important;border-radius:50%!important;
    background:#fff!important;background-image:none!important;
    border:2px solid var(--blue)!important;
    box-shadow:0 2px 8px rgba(0,30,80,.15)!important;
    top:-7px!important;position:absolute!important;
  }
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-handle:before,
  body.page-redesign .catalog__filter .filter-price-block .bx-ui-slider-handle:after{
    content:none!important;display:none!important;
  }
}

/* ════════════════════════════════════════════════════════════
   СТРАНИЦА ТОВАРА — приводим bootstrap_v4 шаблон к нашему дизайну.
   Корневой контейнер контента у Bitrix: .product-detail-info-top.
   ════════════════════════════════════════════════════════════ */

/* Заголовок — без nowrap (длинные имена корректно переносятся), фирменный шрифт */
body.page-redesign .product_card__title{
  border-bottom:1px solid #E5EAF5!important;
  padding:0 0 14px!important;
  margin:0 0 18px!important;
}
body.page-redesign .product_card__title h1{
  font-family:'Montserrat',sans-serif!important;
  font-size:clamp(22px,2.3vw,32px)!important;
  font-weight:600!important;
  line-height:1.2!important;
  letter-spacing:-.005em!important;
  color:var(--text)!important;
  white-space:normal!important;
  margin:0 0 8px!important;
  text-transform:none!important;
}
body.page-redesign .product_card__title .name{
  font-family:'Montserrat',sans-serif!important;
  font-size:13px;font-weight:500;
  color:var(--gray);opacity:1!important;
  margin:0 0 6px!important;
}
body.page-redesign .product_card__title > span{
  display:inline-block;
  font-family:'Montserrat',sans-serif;
  font-size:12px;color:var(--gray);
  padding:4px 10px;background:#F0F4FF;border-radius:8px;
}

/* Контент-обёртка (правая колонка) */
body.page-redesign .product-item-detail-content,
body.page-redesign .product-detail-content-wrapper,
body.page-redesign .product-detail-descriptions{
  font-family:'Montserrat',sans-serif!important;
}
body.page-redesign .product-detail-content-wrapper{margin-top:6px}

/* Табы Описание/Состав — каждый таб standalone-капсулой (без общей белой обёртки).
   Активный — заливка градиентом, неактивные — outline. */
body.page-redesign .product-detail-descriptions .nav-tabs{
  display:flex;flex-wrap:wrap;gap:8px;
  background:transparent!important;border:0!important;
  border-bottom:0!important;
  padding:0;margin:0 0 18px!important;
  list-style:none;
}
body.page-redesign .product-detail-descriptions .nav-tabs .nav-item,
body.page-redesign .product-detail-descriptions .nav-tabs > li{
  display:block;margin:0!important;
}
body.page-redesign .product-detail-descriptions .nav-tabs > li > a{
  display:inline-flex;align-items:center;
  padding:9px 22px!important;border-radius:999px!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:13px!important;font-weight:600!important;line-height:1!important;
  color:var(--text)!important;
  background:#fff!important;
  border:1px solid #CAD5F0!important;border-bottom:1px solid #CAD5F0!important;
  text-decoration:none!important;text-transform:none!important;
  transition:background .28s ease,color .25s ease,border-color .28s ease,box-shadow .28s ease;
}
body.page-redesign .product-detail-descriptions .nav-tabs > li > a:hover{
  background:#F0F4FF!important;color:var(--blue)!important;
  border:1px solid var(--blue)!important;border-bottom:1px solid var(--blue)!important;
}
body.page-redesign .product-detail-descriptions .nav-tabs > li.active > a,
body.page-redesign .product-detail-descriptions .nav-tabs > li > a.active{
  background:var(--grad-blue)!important;color:#fff!important;
  border:0!important;border-bottom:0!important;
  box-shadow:0 4px 14px rgba(0,30,80,.15);
}

/* Контент таба */
body.page-redesign .product-detail-descriptions .tab-content{
  font-family:'Montserrat',sans-serif;
  font-size:14px;line-height:1.6;color:#454e6a;
}
body.page-redesign .product-detail-descriptions .tab-content p{margin:0 0 12px}
body.page-redesign .product-detail-descriptions .tab-content b,
body.page-redesign .product-detail-descriptions .tab-content strong{
  display:block;
  font-size:12px;font-weight:700;
  color:var(--text);
  margin:14px 0 4px;
  text-transform:uppercase;letter-spacing:.04em;
}

/* Pay-блок: цена + кнопки. !important на flex-direction чтобы перебить
   legacy @media(max-width:1024) .product-detail-pay-block{flex-direction:column} */
body.page-redesign .product-detail-pay-block{
  display:flex!important;flex-direction:row!important;flex-wrap:wrap;
  align-items:center;justify-content:flex-start!important;
  gap:18px;
  margin:24px 0 12px!important;padding:0!important;
  background:transparent!important;border:0!important;
  text-align:left!important;
}
body.page-redesign .product-detail-pay-item.product-detail-pay-item{
  width:auto!important;margin:0!important;
}
body.page-redesign .product-item-detail-price-current{
  font-family:'Montserrat',sans-serif!important;
  font-size:clamp(24px,2.4vw,32px)!important;font-weight:700!important;
  color:var(--text)!important;line-height:1!important;
  margin:0!important;
}
body.page-redesign .product-item-detail-price-old{
  font-family:'Montserrat',sans-serif!important;
  font-size:14px!important;color:var(--gray)!important;
  text-decoration:line-through;margin:0!important;
}
/* Купить — синяя капсула как наш primary. width:auto!important бьёт legacy
   @media(max-width:1024) .product-detail-pay-item .product-detail-buy-button{width:200px;margin:auto} */
body.page-redesign .product-detail-buy-button,
body.page-redesign .product-item-detail-buy-button,
body.page-redesign .product-detail-pay-item .product-detail-buy-button{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:auto!important;
  height:54px;padding:0 36px!important;
  margin:0!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:600!important;line-height:1!important;
  color:#fff!important;text-decoration:none!important;text-transform:none!important;
  background:var(--blue)!important;background-image:none!important;
  border:0!important;border-radius:16px!important;
  box-shadow:none!important;
  cursor:pointer;
  transition:background .25s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;
}
body.page-redesign .product-detail-buy-button:hover,
body.page-redesign .product-item-detail-buy-button:hover{
  background:#004fa6!important;color:#fff!important;
  transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,30,80,.18);
}
body.page-redesign .product-detail-buy-button:active{transform:translateY(0);box-shadow:none}
/* Состояние "нет в наличии" — серое */
body.page-redesign .btn-green-border.product-item-detail-buy-button{
  background:#fff!important;color:var(--gray)!important;
  border:1px solid #CAD5F0!important;
}

/* Сердечко (избранное) на странице товара — то же что .fav-btn в каталоге,
   только крупнее (54×54 чтобы соответствовать высоте Buy-кнопки).
   Прячем legacy inline-svg внутри .to_favorites, рисуем заливку через mask. */
body.page-redesign .product-detail-pay-block .to_favorites,
body.page-redesign .product-detail-pay-block .product_add-favour{
  position:relative;
  width:54px;height:54px;border-radius:16px;
  background:#fff;border:1px solid #CAD5F0;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  overflow:visible;
  transition:background .25s ease,border-color .25s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;
}
/* Outline-контур: legacy inline-svg.heart перерисовываем через CSS-color на path.
   .heart.active (filled-blue) скрываем — используем наш ::before/::after. */
body.page-redesign .product-detail-pay-block .to_favorites > svg.heart.active{
  display:none!important;
}
body.page-redesign .product-detail-pay-block .to_favorites > svg.heart{
  display:block!important;width:26px!important;height:26px!important;
  position:relative;z-index:1;
  transition:opacity .25s ease;
}
body.page-redesign .product-detail-pay-block .to_favorites > svg.heart path{
  fill:#475886;transition:fill .25s ease;
}
/* Красная заливка (наш heart-filled.svg через mask) — растёт радиально на hover/is-active */
body.page-redesign .product-detail-pay-block .to_favorites::before{
  content:'';
  position:absolute;left:50%;top:50%;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  background:#E62D32;
  -webkit-mask:url('/img/heart-filled.svg') center/contain no-repeat;
          mask:url('/img/heart-filled.svg') center/contain no-repeat;
  clip-path:circle(0% at 50% 50%);opacity:0;
  transition:clip-path .35s cubic-bezier(.22,.75,.25,1),opacity .2s ease;
  pointer-events:none;z-index:2;
}
/* Burst-пульс при клике — растушеванный radial-gradient */
body.page-redesign .product-detail-pay-block .to_favorites::after{
  content:'';
  position:absolute;inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(230,30,40,.55) 0%, rgba(230,30,40,0) 60%);
  opacity:0;
  pointer-events:none;z-index:0;
}
body.page-redesign .product-detail-pay-block .to_favorites.fav-pop::after{
  animation:favBurst .55s ease-out forwards;
}
body.page-redesign .product-detail-pay-block .to_favorites.fav-pop::before{
  animation:favPop .55s cubic-bezier(.34,1.56,.64,1);
}

/* is-active: красная заливка постоянно, outline скрыт */
body.page-redesign .product-detail-pay-block .to_favorites.is-active::before{
  opacity:1;clip-path:circle(75% at 50% 50%);
}
body.page-redesign .product-detail-pay-block .to_favorites.is-active > svg.heart{opacity:0}

body.page-redesign .product-detail-pay-block .to_favorites:active{
  transform:translateY(0) scale(.96);
}
/* Hover — только на устройствах с курсором (sticky-hover на тачах не цепляется) */
@media(hover:hover) and (pointer:fine){
  body.page-redesign .product-detail-pay-block .to_favorites:hover::before{
    opacity:1;clip-path:circle(75% at 50% 50%);
  }
  body.page-redesign .product-detail-pay-block .to_favorites:hover > svg.heart{opacity:0}
  body.page-redesign .product-detail-pay-block .to_favorites:hover{
    border-color:var(--blue);transform:translateY(-2px);
    box-shadow:0 4px 14px rgba(0,30,80,.12);
  }
}

/* Свойства товара (.product-item-detail-properties) */
body.page-redesign .product-item-detail-properties{
  list-style:none;padding:0!important;margin:14px 0!important;
  display:flex;flex-direction:column;gap:6px;
}
body.page-redesign .product-item-detail-properties-item{
  display:flex;gap:10px;flex-wrap:wrap;
  font-family:'Montserrat',sans-serif;
  font-size:13px;color:#454e6a;
}
body.page-redesign .product-item-detail-properties-name{
  font-weight:500;color:var(--gray)!important;
}
body.page-redesign .product-item-detail-properties-value{
  font-weight:600;color:var(--text);
}

/* Галерея слева — главное фото в скруглённый блок, растягивается по высоте
   контента справа (align-items:stretch у родительского flex'a). */
body.page-redesign .product-item-detail-gallery{
  display:flex;flex-direction:column;
}
body.page-redesign .product-item-detail-slider-container{
  background:#fff;border:1px solid #E5EAF5!important;border-radius:18px!important;
  overflow:hidden;
  padding:24px!important;margin:0!important;
  flex:1 1 auto;min-height:480px;
  display:flex!important;align-items:center;justify-content:center;
  position:relative;
  width:100%!important;
}
/* Legacy .product-item-detail-slider-block задаёт fixed height 558 и width:calc(100% - 140px),
   ломая нашу flex-растяжку. Бьём — на нашем layout без боковой превью-стрипы. */
body.page-redesign .product-item-detail-slider-block{
  background:transparent!important;border:0!important;border-radius:0!important;
  width:100%!important;height:100%!important;min-height:0!important;
  padding:0!important;
  display:flex!important;align-items:center;justify-content:center;
}
body.page-redesign .product-item-detail-slider-images-container{
  width:100%!important;height:100%!important;
  display:flex!important;align-items:center;justify-content:center;
  position:relative!important;
}
body.page-redesign .product-item-detail-slider-image{
  width:100%!important;height:100%!important;
  display:flex!important;align-items:center;justify-content:center;
  position:absolute;inset:0;
}
body.page-redesign .product-item-detail-slider-image:not(.active){display:none!important}
body.page-redesign .product-item-detail-slider-image img{
  max-width:100%!important;max-height:100%!important;
  width:auto!important;height:auto!important;
  object-fit:contain!important;
}

/* Превью-стрипа: миниатюры — скрываем когда фото одно (одна swiper-slide). */
body.page-redesign .product-item-detail-slider-controls-block:has(.swiper-slide:only-child){
  display:none!important;
}
body.page-redesign .product-item-detail-slider-controls-image{
  width:64px;height:64px;border-radius:10px!important;
  border:1px solid #E5EAF5!important;
  overflow:hidden;cursor:pointer;
  transition:border-color .2s ease,transform .2s ease;
}
body.page-redesign .product-item-detail-slider-controls-image:hover{
  border-color:var(--blue)!important;transform:translateY(-2px);
}
body.page-redesign .product-item-detail-slider-controls-image.active{
  border-color:var(--blue)!important;
  box-shadow:0 0 0 2px rgba(0,95,204,.15);
}

/* Layout: gallery слева 50%, контент справа 50%, stretch — равная высота.
   Брейкпойнт 769px (iPad Air portrait 820 → flex-side-by-side, не стек). */
@media(min-width:769px){
  body.page-redesign .product-detail-info-top.row{
    display:flex!important;gap:48px;
    align-items:stretch;
    max-width:100%;width:100%;
    margin:0 auto!important;
    padding:0;
  }
  body.page-redesign .product-item-detail-gallery,
  body.page-redesign .product-item-detail-content{
    flex:1 1 0;width:auto;max-width:none;padding:0;
    display:flex;flex-direction:column;
  }
  body.page-redesign .product-item-detail-content > .product-detail-content-wrapper{
    flex:1 1 auto;display:flex;flex-direction:column;
  }
  body.page-redesign .product-detail-pay-block{
    margin-top:auto!important;
  }
  /* Фото-зона выше — под "обычные пропорции карточек" (3:4 портрет) */
  body.page-redesign .product-item-detail-slider-container{
    min-height:680px!important;
    padding:32px!important;
  }
}
/* Override legacy tablet-mobile хаки в template_styles.css @media(max-width:1024):
   legacy прячет .product-detail-pay-block .to_favorites и выводит .mobile-fav
   в top-left фото-зоны. Наш дизайн — сердце в pay-block рядом с Купить. */
@media(min-width:769px) and (max-width:1199px){
  body.page-redesign .product_card_wrapper .product-detail-pay-block .to_favorites{
    display:inline-flex!important;
  }
  body.page-redesign .product_card_wrapper .to_favorites.mobile-fav{
    display:none!important;
  }
  /* Slider container legacy фиксированной высоты 350 и column-reverse — отменяем */
  body.page-redesign .product-item-detail-slider-container{
    flex-direction:row!important;
    height:auto!important;
  }
  body.page-redesign .product-item-detail-slider-block{
    height:auto!important;min-height:0!important;
  }
}
/* Мобила (≤768) — стек, кнопка full-width, pay-block в столбик */
@media(max-width:768px){
  body.page-redesign .product-detail-info-top.row{display:block}
  body.page-redesign .product-item-detail-gallery,
  body.page-redesign .product-item-detail-content{
    width:100%;max-width:100%;padding:0;margin-bottom:18px;
  }
  body.page-redesign .product-item-detail-slider-container{min-height:420px}
  body.page-redesign .product-detail-buy-button{width:100%;padding:0 18px!important}
  body.page-redesign .product-detail-pay-block{flex-direction:column;align-items:flex-start;gap:14px}
  /* На мобиле тоже наш стиль сердца в pay-block, mobile-fav скрыт */
  body.page-redesign .product_card_wrapper .product-detail-pay-block .to_favorites{
    display:inline-flex!important;
  }
  body.page-redesign .product_card_wrapper .to_favorites.mobile-fav{
    display:none!important;
  }
}

/* ════════════════════════════════════════════════════════════
   СТРАНИЦА /brands/ — листинг брендов.
   bitrix:news.list "brands" рендерит .brands_container > .brands_wrapper.row >
   .brand_item.col-md-3 (bootstrap grid) > .brand_item_wrapper > [img + h3].
   Стилизуем CSS'ом — без правки шаблона.
   ════════════════════════════════════════════════════════════ */

/* Outer wrapper */
body.page-redesign .brands_page{
  max-width:1240px;
  margin:24px auto 48px;
  font-family:'Montserrat',sans-serif;
  color:#454e6a;
  position:relative;
}

/* Top panel — title_box + text_box визуально склеены как ОДНА белая ПОЛНОСТЬЮ скруглённая карточка.
   Выше по z-index, физически перекрывает верх контейнера с карточками внизу. */
body.page-redesign .brands_page > .title_box,
body.page-redesign .brands_page > .text_box{
  background:#fff!important;
  border-left:1px solid rgba(0,89,185,.22)!important;
  border-right:1px solid rgba(0,89,185,.22)!important;
  padding:0 clamp(28px,4vw,48px)!important;
  margin:0!important;
  position:relative;
  z-index:2;
}
body.page-redesign .brands_page > .title_box{
  border-top:1px solid rgba(0,89,185,.22)!important;
  border-radius:18px 18px 0 0!important;
  padding-top:clamp(28px,4vw,48px)!important;
  padding-bottom:18px!important;
}
body.page-redesign .brands_page > .text_box{
  border-bottom:1px solid rgba(0,89,185,.22)!important;
  border-radius:0 0 18px 18px!important;
  padding-bottom:clamp(24px,3vw,32px)!important;
  font-size:15px;line-height:1.6;color:#454e6a;
  max-width:none;
}
body.page-redesign .brands_page > .text_box:empty{display:none}
/* Если text_box отсутствует/пуст — title_box полностью скруглён, с border снизу */
body.page-redesign .brands_page > .title_box:not(:has(+ .text_box)),
body.page-redesign .brands_page > .title_box:has(+ .text_box:empty){
  border-bottom:1px solid rgba(0,89,185,.22)!important;
  border-radius:18px!important;
  padding-bottom:clamp(28px,4vw,48px)!important;
}

/* Bottom panel — контейнер карточек ФИЗИЧЕСКИ уходит ВВЕРХ под top panel.
   z-index ниже, top panel перекрывает зону overlap'а. */
body.page-redesign .brands_page > .brands_container{
  position:relative;
  z-index:1;
  background:transparent;
  border:1px solid rgba(0,89,185,.22);
  border-radius:18px!important;
  /* Уходим на 32px вверх под top panel */
  margin-top:-32px!important;
  /* padding-top компенсирует overlap, чтобы карточки не попали в скрытую зону */
  padding:calc(32px + clamp(24px,3vw,36px)) clamp(24px,3vw,36px) clamp(24px,3vw,36px)!important;
}

/* H1 «Бренды» с градиент-underline */
body.page-redesign .brands_page > .title_box h1{
  font-family:'Montserrat',sans-serif!important;
  font-size:clamp(28px,3.6vw,46px)!important;
  font-weight:500!important;line-height:1.1!important;
  color:var(--text)!important;
  margin:0 0 16px!important;padding:0 0 14px!important;
  text-transform:none!important;letter-spacing:0!important;
  position:relative;border:0!important;
}
body.page-redesign .brands_page > .title_box h1::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  height:3px;border-radius:2px;background:var(--grad-blue);
}

/* Сетка брендов — auto-fit */
body.page-redesign .brands_container .brands_wrapper.row{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(16px,2vw,22px)!important;
  margin:0!important;
  padding:0!important;
}

/* Карточка бренда — 1:1 как product-card на главной: прозрачный фон, border-right как разделитель */
body.page-redesign .brands_container .brand_item{
  width:auto!important;max-width:none!important;flex:none!important;
  padding:0!important;margin:0!important;
  background:transparent!important;
  border:0!important;
  border-right:1px solid #CAD5F0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
body.page-redesign .brands_container .brand_item:last-child{
  border-right:0!important;
}
body.page-redesign .brands_container .brand_item:hover{
  transform:translateY(-4px);
}

/* Wrapper — flex колонка: квадратная фото-зона + текст+кнопка снизу */
body.page-redesign .brands_container .brand_item .brand_item_wrapper{
  display:flex;flex-direction:column;align-items:center;
  width:100%;height:100%;
  padding:clamp(8px,1vw,14px)!important;
  text-align:center;
  text-decoration:none!important;
  color:inherit;
  gap:10px;
}

/* Логотип-зона — КВАДРАТНАЯ (aspect-ratio 1:1) */
body.page-redesign .brands_container .brand_item .brand_item_image{
  display:flex!important;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1/1;height:auto;
  padding:0!important;
  background:transparent!important;
  line-height:1!important;
}
body.page-redesign .brands_container .brand_item .brand_item_image img{
  display:block!important;
  max-width:90%!important;max-height:90%!important;
  width:90%!important;height:90%!important;
  object-fit:contain;
  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
/* Yu.R SVG крупный по своим внутренним пропорциям — уменьшаем сильнее */
body.page-redesign .brands_container .brand_item .brand_item_image img[src*="YuR"]{
  max-width:55%!important;max-height:55%!important;
  width:55%!important;height:55%!important;
}
body.page-redesign .brands_container .brand_item:hover .brand_item_image img{
  transform:scale(1.05);
}

/* Бренд без логотипа — имя словесным знаком в той же квадратной зоне.
   Держит высоту карточки, иначе ряд сетки съезжает.
   Цвет подобран под соседей: все SVG-логотипы лежат в <g opacity="0.2">,
   поэтому чёрный текст в полную силу выбивался бы из ряда. */
body.page-redesign .brands_container .brand_item .brand_item_image--text span{
  font:600 clamp(18px,2.2vw,26px)/1.15 'Montserrat',sans-serif;
  letter-spacing:.02em;
  color:rgba(16,24,40,.25);
  text-transform:uppercase;
  padding:0 8px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
body.page-redesign .brands_container .brand_item:hover .brand_item_image--text span{
  transform:scale(1.05);
}

/* Название бренда */
body.page-redesign .brands_container .brand_item .brand_item_name{
  margin:0!important;padding:0!important;
  background:transparent!important;
  border:0!important;
  font:600 15px/1.3 'Montserrat',sans-serif!important;
  color:var(--text)!important;
  text-align:center!important;
  text-transform:none!important;
  letter-spacing:0!important;
}

/* Кнопка "В каталог" — pill в нашем gradient blue */
body.page-redesign .brand_item_btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;
  background:var(--grad-blue);color:#fff;
  border-radius:999px;
  font:600 12px/1 'Montserrat',sans-serif;
  letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(0,30,80,.12);
  transition:transform .25s ease,box-shadow .25s ease;
}
body.page-redesign .brands_container .brand_item:hover .brand_item_btn{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,30,80,.2);
}
body.page-redesign .brand_item_btn svg{flex-shrink:0;}

/* Пагинация под брендами */
body.page-redesign .brands_container .bx_pagination_bottom,
body.page-redesign .brands_container .bx-pagination{
  margin-top:32px;
}


/* ════════════════════════════════════════════════════════════
   КОРЕНЬ КАТАЛОГА — /catalog/ (catalog.section.list bootstrap_v4)
   Категории-карточки с фирменными фотками (4hair/4face/4body).
   Структура: .catalog_section_list > .row.bx_catalog_tile_ul >
     .col-sm-6.col-md-6.col-lg-4.catalog-section-list-item >
       .catalog-section-list-item-wrapper > a >
         .catalog-section-list-tile-img-container > .catalog-section-list-item-img
         .catalog-section-list-item-inner > h3.catalog-section-list-item-title + span.counter
   ════════════════════════════════════════════════════════════ */

/* Сетка категорий — один блок с вертикальными divider'ами между секциями.
   Контейнер — белая капсула с border, внутри колонки-ячейки разделены 1px-линией. */
body.page-redesign .catalog_section_list > .row{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0!important;
  width:100%!important;max-width:none!important; /* на средних ширинах .row зажимался до 460 — форсим на всю ширину контейнера */
  margin:0 0 32px!important;
  background:#fff;
  border:1px solid #E5EAF5;
  border-radius:24px;
  overflow:hidden;
}

/* Карточка-колонка — без своих рамок, разделена вертикальным divider'ом справа.
   padding:0!important бьёт legacy @media(max-width:1024){.catalog-section-list-item{padding-top:15;padding-bottom:15}} */
body.page-redesign .catalog-section-list-item,
body.page-redesign .catalog_section_list .catalog-section-list-item{
  width:auto!important;max-width:none!important;flex:none!important;
  padding:0!important;margin:0!important;
  position:relative;
  border-right:1px solid #E5EAF5;
}
body.page-redesign .catalog-section-list-item:last-child{
  border-right:0;
}
/* На узких viewport'ах сетка свернётся в 1 колонку — тогда вертикальные
   divider'ы становятся не нужны, а нужны горизонтальные между строками. */
@media(max-width:600px){
  body.page-redesign .catalog-section-list-item{
    border-right:0!important;
    border-bottom:1px solid #E5EAF5!important;
  }
  body.page-redesign .catalog-section-list-item:last-child{
    border-bottom:0!important;
  }
}

/* Линк-обёртка — занимает всю колонку, прячем подчёркивание.
   Legacy задаёт width:90%, height:100% — бьём всё. */
body.page-redesign .catalog-section-list-item-wrapper{
  margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;
  width:100%!important;height:auto!important;
  position:static!important;overflow:visible!important;
  box-shadow:none!important;
}
body.page-redesign .catalog-section-list-item-wrapper > a{
  display:flex!important;flex-direction:column;
  position:relative;overflow:hidden;
  background:transparent;
  border:0;
  border-radius:0;
  text-decoration:none!important;
  color:inherit!important;
  transition:background .28s ease;
}

/* Hover-эффект на ВЕСЬ ряд: соседние ячейки затемняются, наведённая
   остаётся яркой. brightness() — фактически темнит всё (фото + текст),
   в отличие от opacity которое разбавляет фоном страницы (выходило светлее). */
body.page-redesign .catalog-section-list-item{
  transition:filter .28s ease;
}
body.page-redesign .catalog_section_list > .row:has(.catalog-section-list-item:hover) .catalog-section-list-item{
  filter:brightness(.55);
}
body.page-redesign .catalog_section_list > .row:has(.catalog-section-list-item:hover) .catalog-section-list-item:hover{
  filter:brightness(1);
}

/* Фото-зона: aspect-ratio задаём на контейнере, не на img-элементе.
   Legacy использует padding-top:75% для 4:3 landscape — переопределяем
   современным aspect-ratio для 3:4 портрет под наши вертикальные фотки. */
body.page-redesign .catalog-section-list-tile-img-container{
  padding:0!important;padding-top:0!important;margin:0!important;
  background:#F8FAFD;
  position:relative!important;overflow:hidden;
  aspect-ratio:3/4;
  width:100%;height:auto;
}
body.page-redesign .catalog-section-list-item-img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-color:#F8FAFD!important;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
body.page-redesign .catalog-section-list-item-wrapper > a:hover .catalog-section-list-item-img{
  transform:scale(1.05);
}

/* Подставляем нашу фотку под нужный раздел через прямой класс .cat-sect-<ID>
   (шаблон bootstrap_v4 рендерит его на .catalog-section-list-item).
   Раньше использовали :has(a[href]) — отказался: при загрузке инлайн-стиля
   background-image:url('tile-empty.png') и одновременном CSS-override через :has()
   некоторые браузеры (видимо при кеш-перевыкладывании при смене viewport'a в
   DevTools) показывали legacy-картинку. Прямой класс работает стабильно. */
body.page-redesign .cat-sect-169 .catalog-section-list-item-img{
  background-image:url('/img/4hair.webp')!important;
}
body.page-redesign .cat-sect-182 .catalog-section-list-item-img{
  background-image:url('/img/4face.webp')!important;
}
body.page-redesign .cat-sect-194 .catalog-section-list-item-img{
  background-image:url('/img/4body.webp')!important;
}

/* Низ колонки с названием — нормальный flow под фоткой, без border-top
   (вертикальные divider'ы уже на parent'е, горизонтального разделителя не надо). */
body.page-redesign .catalog-section-list-item-inner{
  position:static!important;
  top:auto!important;margin-top:0!important;
  width:100%!important;height:auto!important;
  padding:18px 24px 24px!important;
  background:transparent!important;
  border:0!important;
  text-align:center;
  display:block!important;
  transition:none!important;
}
body.page-redesign .catalog-section-list-item-title{
  font:600 18px/1.25 'Montserrat',sans-serif!important;
  color:var(--text)!important;
  margin:0!important;padding:0!important;
  text-transform:none!important;letter-spacing:0!important;
  display:inline-flex;align-items:baseline;gap:8px;
  flex-wrap:wrap;justify-content:center;
}
body.page-redesign .catalog-section-list-item-counter{
  font:500 14px/1 'Montserrat',sans-serif;
  color:var(--gray);
}
body.page-redesign .catalog-section-list-item-description{
  font:400 13px/1.5 'Montserrat',sans-serif;
  color:#454e6a;margin-top:6px;
}
body.page-redesign .catalog-section-list-item-wrapper > a:hover .catalog-section-list-item-title{
  color:var(--blue)!important;
}


/* ════════════════════════════════════════════════════════════
   ПОВТОР КРИТИЧНЫХ ПРАВИЛ ДЛЯ УЗКИХ VIEWPORT'ОВ.
   На главной/каталоге мы изначально писали правила внутри @media —
   они выигрывают cascade у legacy media-scoped rules. На продукте,
   брендах и корне каталога сначала рулили глобально и каскад им
   на узких viewport'ах проигрывал ИЗ-ЗА того что мы тут пишем правила
   ВНЕ @media, а legacy ВНУТРИ @media — при тех же specificity+importance
   побеждает тот, кто загружен позже. Дублируем правила в @media чтобы
   они находились в том же cascade-контексте и победили по специфичности
   и !important.
   ════════════════════════════════════════════════════════════ */
@media(max-width:1199px){
  /* ========== СТРАНИЦА ТОВАРА ========== */
  body.page-redesign .product_card__title{
    border-bottom:1px solid #E5EAF5!important;
    padding:0 0 14px!important;margin:0 0 18px!important;
  }
  body.page-redesign .product_card__title h1{
    font-family:'Montserrat',sans-serif!important;
    font-size:clamp(22px,2.3vw,32px)!important;
    font-weight:600!important;line-height:1.2!important;
    white-space:normal!important;margin:0 0 8px!important;
    text-transform:none!important;color:var(--text)!important;
  }
  body.page-redesign .product_card__title > span{
    display:inline-block!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:12px!important;color:var(--gray)!important;
    padding:4px 10px!important;background:#F0F4FF!important;
    border-radius:8px!important;
  }
  body.page-redesign .product-detail-descriptions .nav-tabs{
    display:flex!important;flex-wrap:wrap;gap:8px;
    background:transparent!important;border:0!important;
    border-bottom:0!important;padding:0!important;
    margin:0 0 18px!important;list-style:none;
  }
  body.page-redesign .product-detail-descriptions .nav-tabs > li > a{
    display:inline-flex!important;align-items:center;
    padding:9px 22px!important;border-radius:999px!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:13px!important;font-weight:600!important;line-height:1!important;
    color:var(--text)!important;background:#fff!important;
    border:1px solid #CAD5F0!important;border-bottom:1px solid #CAD5F0!important;
    text-decoration:none!important;text-transform:none!important;
  }
  body.page-redesign .product-detail-descriptions .nav-tabs > li.active > a,
  body.page-redesign .product-detail-descriptions .nav-tabs > li > a.active{
    background:var(--grad-blue)!important;color:#fff!important;
    border:0!important;border-bottom:0!important;
  }
  body.page-redesign .product-detail-pay-block{
    display:flex!important;flex-direction:row!important;flex-wrap:wrap;
    align-items:center;justify-content:flex-start!important;gap:18px;
    margin:24px 0 12px!important;padding:0!important;
    background:transparent!important;border:0!important;text-align:left!important;
  }
  body.page-redesign .product-item-detail-price-current{
    font-family:'Montserrat',sans-serif!important;
    font-size:clamp(24px,2.4vw,32px)!important;font-weight:700!important;
    color:var(--text)!important;line-height:1!important;margin:0!important;
  }
  body.page-redesign .product-detail-buy-button,
  body.page-redesign .product-item-detail-buy-button,
  body.page-redesign .product-detail-pay-item .product-detail-buy-button{
    display:inline-flex!important;align-items:center;justify-content:center;
    width:auto!important;height:54px!important;padding:0 36px!important;margin:0!important;
    font-family:'Montserrat',sans-serif!important;
    font-size:15px!important;font-weight:600!important;line-height:1!important;
    color:#fff!important;text-decoration:none!important;text-transform:none!important;
    background:var(--blue)!important;background-image:none!important;
    border:0!important;border-radius:16px!important;box-shadow:none!important;
  }
  body.page-redesign .product_card_wrapper .product-detail-pay-block .to_favorites{
    display:inline-flex!important;
    width:54px!important;height:54px!important;
    border-radius:16px!important;
    background:#fff!important;border:1px solid #CAD5F0!important;
    position:relative!important;padding:0!important;
    align-items:center!important;justify-content:center!important;
  }
  body.page-redesign .product_card_wrapper .to_favorites.mobile-fav{display:none!important}

  /* Layout side-by-side (gallery+content) на iPad Air/Pro portrait (>=769) */
  body.page-redesign .product-detail-info-top.row{
    display:flex!important;gap:48px;align-items:stretch;
  }
  body.page-redesign .product-item-detail-gallery,
  body.page-redesign .product-item-detail-content{
    flex:1 1 0!important;width:auto!important;max-width:none!important;padding:0!important;
    display:flex!important;flex-direction:column!important;
  }
  body.page-redesign .product-item-detail-slider-container{
    min-height:680px!important;padding:32px!important;
    background:#fff!important;border:1px solid #E5EAF5!important;
    border-radius:18px!important;
    flex:1 1 auto!important;
    display:flex!important;align-items:center;justify-content:center;
    flex-direction:row!important;height:auto!important;
  }
  body.page-redesign .product-item-detail-slider-block{
    background:transparent!important;border:0!important;
    width:100%!important;height:100%!important;min-height:0!important;
    padding:0!important;display:flex!important;
    align-items:center;justify-content:center;
  }
  body.page-redesign .product-item-detail-slider-image img{
    max-width:100%!important;max-height:100%!important;
    width:auto!important;height:auto!important;object-fit:contain!important;
  }

  /* ========== БРЕНДЫ — карточки с кнопкой "В каталог" ========== */
  body.page-redesign .brands_container .brands_wrapper.row{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
    gap:clamp(14px,2vw,20px)!important;margin:0!important;padding:0!important;
  }
  body.page-redesign .brands_container .brand_item{
    width:auto!important;max-width:none!important;flex:none!important;
    padding:0!important;margin:0!important;
    background:transparent!important;
    border:0!important;
    border-right:1px solid #CAD5F0!important;
    border-radius:0!important;
    overflow:visible;
  }
  body.page-redesign .brands_container .brand_item:last-child{
    border-right:0!important;
  }
  body.page-redesign .brands_container .brand_item .brand_item_wrapper{
    display:flex!important;flex-direction:column;align-items:center;
    width:100%!important;height:100%!important;
    padding:clamp(16px,2.5vw,22px) clamp(14px,2vw,18px)!important;
    text-align:center;gap:12px;
    text-decoration:none!important;color:inherit!important;
  }
  body.page-redesign .brands_container .brand_item .brand_item_image{
    display:flex!important;align-items:center;justify-content:center;
    background:transparent!important;
    width:100%!important;aspect-ratio:1/1!important;height:auto!important;
    padding:0!important;overflow:hidden;
  }
  body.page-redesign .brands_container .brand_item .brand_item_image img{
    max-width:90%!important;max-height:90%!important;
    width:90%!important;height:90%!important;
    object-fit:contain;filter:none!important;opacity:1!important;
  }
  body.page-redesign .brands_container .brand_item .brand_item_image img[src*="YuR"]{
    max-width:55%!important;max-height:55%!important;
    width:55%!important;height:55%!important;
  }
  body.page-redesign .brands_container .brand_item .brand_item_name{
    margin:0!important;padding:0!important;
    background:transparent!important;border:0!important;
    font:600 14px/1.3 'Montserrat',sans-serif!important;
    color:var(--text)!important;text-align:center!important;
    text-transform:none!important;letter-spacing:0!important;
  }
  body.page-redesign .brand_item_btn{
    padding:7px 14px;font-size:11px;
  }

  /* ========== КОРЕНЬ КАТАЛОГА ========== */
  body.page-redesign .catalog_section_list > .row{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
    gap:0!important;margin:0 0 32px!important;
    background:#fff!important;border:1px solid #E5EAF5!important;
    border-radius:24px!important;overflow:hidden;
  }
  body.page-redesign .catalog-section-list-item{
    width:auto!important;max-width:none!important;flex:none!important;
    padding:0!important;margin:0!important;position:relative;
    border-right:1px solid #E5EAF5!important;
  }
  body.page-redesign .catalog-section-list-item:last-child{border-right:0!important}
  body.page-redesign .catalog-section-list-item-wrapper{
    margin:0!important;padding:0!important;
    background:transparent!important;border:0!important;
    width:100%!important;height:auto!important;
    position:static!important;overflow:visible!important;box-shadow:none!important;
  }
  body.page-redesign .catalog-section-list-item-wrapper > a{
    display:flex!important;flex-direction:column!important;
    position:relative!important;overflow:hidden!important;
    background:transparent!important;border:0!important;border-radius:0!important;
    text-decoration:none!important;color:inherit!important;
  }
  body.page-redesign .catalog-section-list-tile-img-container{
    padding:0!important;padding-top:0!important;margin:0!important;
    background:#F8FAFD!important;position:relative!important;overflow:hidden!important;
    aspect-ratio:3/4!important;width:100%!important;height:auto!important;
  }
  body.page-redesign .catalog-section-list-item-img{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;
    background-size:cover!important;background-position:center center!important;
    background-repeat:no-repeat!important;background-color:#F8FAFD!important;
  }
  body.page-redesign .cat-sect-169 .catalog-section-list-item-img{
    background-image:url('/img/4hair.webp')!important;
  }
  body.page-redesign .cat-sect-182 .catalog-section-list-item-img{
    background-image:url('/img/4face.webp')!important;
  }
  body.page-redesign .cat-sect-194 .catalog-section-list-item-img{
    background-image:url('/img/4body.webp')!important;
  }
  body.page-redesign .catalog-section-list-item-inner{
    position:static!important;top:auto!important;margin-top:0!important;
    width:100%!important;height:auto!important;
    padding:18px 24px 24px!important;
    background:transparent!important;border:0!important;
    text-align:center!important;display:block!important;
  }
  body.page-redesign .catalog-section-list-item-title{
    font:600 18px/1.25 'Montserrat',sans-serif!important;
    color:var(--text)!important;margin:0!important;padding:0!important;
    text-transform:none!important;letter-spacing:0!important;
  }
  body.page-redesign .catalog-section-list-item-counter{
    font:500 14px/1 'Montserrat',sans-serif!important;color:var(--gray)!important;
  }
}
/* iPad mini/Air портрет (≤900) — корень брендов 2 в ряд (вместо 3+1).
   Корень каталога — сразу одна колонка (вместо тесных 2 в ряд). */
@media(max-width:900px){
  body.page-redesign .brands_container .brands_wrapper.row{
    grid-template-columns:repeat(2,1fr)!important;
    gap:0!important;
  }
  /* На 2-колоночной сетке — cross-dividers (vertical + horizontal) между карточками.
     gap:0 чтобы border'ы соседних карточек смыкались в крест без пробелов. */
  body.page-redesign .brands_container .brand_item{
    border-right:1px solid #CAD5F0!important;
    border-bottom:1px solid #CAD5F0!important;
  }
  /* Правая колонка (чётные) — без правого border'а */
  body.page-redesign .brands_container .brand_item:nth-child(2n){
    border-right:0!important;
  }
  /* Последняя строка — без нижнего border'а.
     Для чётного количества (наш случай 4 бренда) последние 2 элемента. */
  body.page-redesign .brands_container .brand_item:nth-last-child(-n+2){
    border-bottom:0!important;
  }
  /* Edge-case: если количество нечётное и последний один в строке (nth-last-child(1) + nth-child(odd)),
     то предыдущий не должен терять border-bottom — обрабатываем явно для last-child только. */
  body.page-redesign .brands_container .brand_item:last-child{
    border-bottom:0!important;border-right:0!important;
  }
  /* Pay-block: цена на отдельной строке (flex-basis:100%) уже с iPad Air портрета,
     не только с мобилки. Тоньше gap'ы — цену поднимаем ближе к описанию. */
  body.page-redesign .product-detail-pay-block{
    margin-top:8px!important;
    gap:10px!important;
  }
  body.page-redesign .product-detail-pay-block .product-detail-pay-item.price__block{
    flex:0 0 100%!important;width:100%!important;margin:0!important;
    text-align:left!important;
  }
  body.page-redesign .product-detail-pay-block .product-item-detail-price-current{
    text-align:left!important;
  }
  /* Описание — меньше нижнего отступа на узких */
  body.page-redesign .product-detail-descriptions{
    margin:0 0 8px!important;
  }
  body.page-redesign .product-detail-descriptions .tab-content{
    padding:8px 0 0!important;
  }
  /* Корень каталога — одна колонка, ужимаем по ширине чтобы не громоздилось,
     оставляем воздух по бокам. clamp(280, 60vw, 460) масштабируется с viewport. */
  body.page-redesign .catalog_section_list > .row{
    grid-template-columns:1fr!important;
    max-width:none!important;
    margin:0 0 32px!important;
  }
  /* При 1 колонке divider горизонтальный, не вертикальный */
  body.page-redesign .catalog-section-list-item{
    border-right:0!important;border-bottom:1px solid #E5EAF5!important;
  }
  body.page-redesign .catalog-section-list-item:last-child{
    border-bottom:0!important;
  }
  /* На корне каталога (где есть .catalog_section_list) хлебные крошки и
     заголовок — во всю ширину контента, прижаты к левому краю (как сетка). */
  body.page-redesign:has(.catalog_section_list) .breadcrumbs,
  body.page-redesign:has(.catalog_section_list) .title_box{
    max-width:none!important;
    margin-left:0!important;margin-right:0!important;
  }
}

/* Мобила (≤768) — стек: gallery сверху, контент снизу.
   Pay-block остаётся flex-row чтобы цена/Купить/сердце были в одну строку. */
@media(max-width:768px){
  body.page-redesign .product-detail-info-top.row{display:block!important}
  /* Карточка товара уезжала вбок на телефоне: bootstrap задаёт .row отрицательные
     margin −15px в расчёте на контейнер с padding 15px, а у нас .main_content даёт
     12px — ряд вылезал на 3px за оба края, страница получала горизонтальную
     прокрутку, и левый край заголовка с описанием оказывался срезан.
     Колонкам padding снят правилом ниже, так что компенсировать нечего. */
  body.page-redesign .product_card_wrapper .row{margin-left:0!important;margin-right:0!important}
  body.page-redesign .product-item-detail-gallery,
  body.page-redesign .product-item-detail-content{
    width:100%!important;max-width:100%!important;padding:0!important;margin-bottom:18px!important;
  }
  /* Slider-container: явная высота + aspect-ratio, чтобы фото видно было.
     В стек-режиме контейнер без flex-stretch'a получает 0 высоту, картинка
     position:absolute не растягивается. Задаём explicit. */
  body.page-redesign .product-item-detail-slider-container{
    min-height:0!important;height:auto!important;
    aspect-ratio:1/1!important;padding:20px!important;
    display:flex!important;align-items:center;justify-content:center;
  }
  body.page-redesign .product-detail-buy-button{
    width:auto!important;padding:0 24px!important;
  }
  /* Pay-block layout: price на отдельной строке (flex-basis:100%),
     Купить + сердце вместе на следующей строке. */
  body.page-redesign .product-detail-pay-block{
    display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;
    align-items:center!important;justify-content:flex-start!important;
    gap:14px!important;text-align:left!important;
  }
  body.page-redesign .product-detail-pay-block .product-detail-pay-item.price__block{
    flex:0 0 100%!important;width:100%!important;margin:0!important;
    text-align:left!important;
  }
  body.page-redesign .product-detail-pay-block .product-item-detail-price-current{
    text-align:left!important;
  }
}

/* ════════════════════════════════════════════════════════════
   СТАТИЧНЫЕ СТРАНИЦЫ — /about/, /delivery_and_pay/, /stock/, /contacts/
   Базовые селекторы: .static_page (about, delivery_and_pay),
   .sales_wrapper (stock), .contacts_wrapper (contacts).
   Текст рендерится сырым HTML — стилизуем типографику, списки,
   highlight-блок .select_text_green.
   ════════════════════════════════════════════════════════════ */

/* Общий контейнер — белый «лист» на фоне страницы с тенью и скруглением.
   Создаёт ощущение содержательной панели вместо плоского текста. */
body.page-redesign .static_page,
body.page-redesign .sales_wrapper,
body.page-redesign .contacts_wrapper{
  font-family:'Montserrat',sans-serif!important;
  font-size:15px;line-height:1.6;color:#454e6a;
  max-width:1240px;
  margin:24px auto 48px;
  padding:clamp(28px,4vw,56px) clamp(24px,3.5vw,48px);
  background:#fff;
  border:1px solid #E5EAF5;
  border-radius:28px;
  box-shadow:0 4px 24px rgba(0,30,80,.04);
  position:relative;overflow:hidden;
}

/* [УДАЛЕНО при унификации сетки] Старое правило вешало на крошки статичных страниц
   padding-left:clamp(24,3.5vw,48) под левый край КОНТЕНТА панели — после сведения всего
   к единому gutter .main_content оно двигало крошки вправо (моб. 36 vs хедер 12; десктоп 143 vs 95).
   Теперь крошки статики выравниваются по общему gutter, как на каталоге/бренде. */
body.page-redesign:has(.static_page) .breadcrumbs > .wrapper-inner,
body.page-redesign:has(.sales_wrapper) .breadcrumbs > .wrapper-inner,
body.page-redesign:has(.contacts_wrapper) .breadcrumbs > .wrapper-inner{
  padding-left:0!important;padding-right:0!important;
  margin-left:0!important;margin-right:0!important;
  max-width:none!important;
}
/* На контактах h1 сидит в ПРОЗРАЧНОЙ .contacts_wrapper (без panel-padding),
   поэтому крошки без padding-left чтобы выровняться с h1 «Контакты».
   Используем простой :has без вложенности (для надёжности кросс-браузерной). */
body.page-redesign:has(.contacts_wrapper) .breadcrumbs{
  padding-left:0!important;
  padding-right:0!important;
}
/* template_styles.css при ≤1440px вешает на .wrapper-inner padding:0 2% —
   это сдвигает заголовок и панели контента вправо на ~24px, тогда как крошки
   (прямой ребёнок .main_content, без этого padding'а) остаются у левого края →
   визуальный рассинхрон, видимый на всех разрешениях ниже 1920. Касается ВСЕХ
   статичных страниц (about/delivery/stock/contacts). Обнуляем этот padding,
   чтобы заголовок/контент/крошки лежали по одному левому краю на любой ширине
   (как и происходит при ≥1920, где этого padding'а уже нет). */
body.page-redesign:has(.static_page) .wrapper-inner.animsition,
body.page-redesign:has(.sales_wrapper) .wrapper-inner.animsition,
body.page-redesign:has(.contacts_wrapper) .wrapper-inner.animsition{
  padding-left:0!important;
  padding-right:0!important;
}

/* Заголовок страницы (h1) — divider под ним сам по себе ГРАДИЕНТ
   на всю ширину, и при первом входе на страницу анимированно «рисуется»
   слева направо подчёркивая заголовок. */
body.page-redesign .static_page .title_box h1,
body.page-redesign .static_page .title_box .title,
body.page-redesign .sales_wrapper .title_box h1,
body.page-redesign .contacts_wrapper .title_box h1,
body.page-redesign .contacts_wrapper .title_box .title{
  font-family:'Montserrat',sans-serif!important;
  font-size:clamp(28px,3.6vw,46px)!important;
  font-weight:500!important;line-height:1.1!important;
  color:var(--text)!important;
  margin:0 0 32px!important;padding:0 0 20px!important;
  text-transform:none!important;letter-spacing:0!important;
  white-space:normal!important;
  position:relative;
  border:0!important;
}
/* Градиентная линия-подчёркивание под h1, рисуется L→R при загрузке */
body.page-redesign .static_page .title_box h1::after,
body.page-redesign .static_page .title_box .title::after,
body.page-redesign .sales_wrapper .title_box h1::after,
body.page-redesign .contacts_wrapper .title_box h1::after,
body.page-redesign .contacts_wrapper .title_box .title::after{
  content:'';
  position:absolute;left:0;bottom:0;right:0;
  height:3px;border-radius:2px;
  background:var(--grad-blue);
  transform-origin:left center;
  animation:staticTitleUnderline .9s cubic-bezier(.22,.75,.25,1) .15s both;
}
@keyframes staticTitleUnderline{
  from{transform:scaleX(0)}
  to  {transform:scaleX(1)}
}
/* H2 — секционный подзаголовок */
body.page-redesign .static_page .title_box h2,
body.page-redesign .static_page h2,
body.page-redesign .sales_wrapper h2{
  font-family:'Montserrat',sans-serif!important;
  font-size:clamp(20px,2.2vw,26px)!important;
  font-weight:600!important;line-height:1.25!important;
  color:var(--text)!important;
  margin:0 0 14px!important;padding:0!important;
  text-transform:none!important;letter-spacing:0!important;
  border:0!important;
}
/* Сбрасываем legacy-стили title_box ТОЛЬКО когда внутри h1 (страничный
   заголовок). Title_box с h2 — это секция-карточка, ей нужны bg/padding. */
body.page-redesign .static_page .title_box:has(> h1){
  margin:0!important;padding:0!important;background:transparent!important;
  border:0!important;position:static!important;
}

/* Каждый блок-обёртка с h2 внутри становится визуальной 2-колоночной
   карточкой: h2 слева как «лейбл», весь остальной контент справа.
   ИСКЛЮЧАЕМ контейнеры со списком — "Кто мы сегодня?" имеет <ul>,
   ему другая обработка. */
body.page-redesign .static_page > div:has(> h2):not(:has(> ul)){
  display:grid!important;
  grid-template-columns:minmax(160px,230px) 1fr;
  gap:clamp(24px,3vw,40px);
  align-items:start;
  padding:clamp(22px,3vw,32px)!important;
  margin:20px 0!important;
  background:#F5F8FD;
  border:1px solid #E5EAF5;
  border-radius:18px;
  position:relative;
}
/* H2 — в первой колонке как «лейбл», синий. Доп. селектор с .title_box
   нужен для специфичности (legacy `.static_page .title_box h2` = 0,3,2,
   а наш с :has = 0,2,5, легаси выигрывает по второй цифре). */
body.page-redesign .static_page > .title_box:has(> h2):not(:has(> ul)) > h2,
body.page-redesign .static_page > div:has(> h2):not(:has(> ul)) > h2{
  grid-column:1;
  align-self:start;
  font-size:clamp(18px,1.8vw,22px)!important;
  color:var(--blue)!important;
  margin:0!important;
  padding-left:22px!important;
  border:0!important;
  background:var(--grad-blue) left center/3px 80% no-repeat;
}
/* Всё что не h2 — во вторую колонку */
body.page-redesign .static_page > .title_box:has(> h2):not(:has(> ul)) > *:not(h2),
body.page-redesign .static_page > div:has(> h2):not(:has(> ul)) > *:not(h2){
  grid-column:2;margin-top:0!important;
}
body.page-redesign .static_page > .title_box:has(> h2):not(:has(> ul)) > p:first-of-type,
body.page-redesign .static_page > div:has(> h2):not(:has(> ul)) > p:first-of-type{margin-top:0!important}
/* На узких viewport'ах — стек: h2 сверху, контент снизу */
@media(max-width:700px){
  body.page-redesign .static_page > .title_box:has(> h2):not(:has(> ul)),
  body.page-redesign .static_page > div:has(> h2):not(:has(> ul)){
    grid-template-columns:1fr!important;gap:12px;
  }
  body.page-redesign .static_page > .title_box:has(> h2):not(:has(> ul)) > h2,
  body.page-redesign .static_page > div:has(> h2):not(:has(> ul)) > h2,
  body.page-redesign .static_page > .title_box:has(> h2):not(:has(> ul)) > *:not(h2),
  body.page-redesign .static_page > div:has(> h2):not(:has(> ul)) > *:not(h2){
    grid-column:1!important;
  }
}

/* «Кто мы сегодня?» и подобные блоки с h2 + ul — 3-колонная сетка:
   col1 — h2 как лейбл (как в других карточках),
   col2 — параграфы (стекаются),
   col3 — список (стоит справа отдельной зоной).
   Стиль панели: белый фон + чёткая рамка (вместо gradient'a). */
body.page-redesign .static_page > .title_box:has(> h2):has(> ul),
body.page-redesign .static_page > div:has(> h2):has(> ul){
  display:grid!important;
  grid-template-columns:minmax(170px,220px) minmax(0,1.4fr) minmax(220px,0.95fr);
  grid-template-rows:auto auto;
  gap:14px clamp(24px,2.5vw,36px);
  align-items:start;
  padding:clamp(26px,3vw,36px) clamp(28px,3.5vw,40px)!important;
  margin:20px 0!important;
  background:#fff!important;
  border:1px solid #CAD5F0;
  border-radius:18px;
}
body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > h2,
body.page-redesign .static_page > div:has(> h2):has(> ul) > h2{
  grid-column:1;grid-row:1 / -1;align-self:center;
  font-size:clamp(24px,2.4vw,34px)!important;
  line-height:1.15!important;
  color:#1a1a1a!important;
  font-weight:700!important;
  margin:-0.8em 0 0 0!important;padding:0!important;
  border:0!important;
  background:none!important;
}
/* Каждый параграф в col 2 — отдельная карточка в стиле «Онлайн-покупок» (без заголовка) */
body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > p,
body.page-redesign .static_page > div:has(> h2):has(> ul) > p{
  grid-column:2;margin:0!important;
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px)!important;
  background:#F5F8FD;
  border:1px solid rgba(0,89,185,.42);
  border-radius:18px;
}
body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > p:nth-of-type(1),
body.page-redesign .static_page > div:has(> h2):has(> ul) > p:nth-of-type(1){
  grid-row:1;
}
body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > p:nth-of-type(2),
body.page-redesign .static_page > div:has(> h2):has(> ul) > p:nth-of-type(2){
  grid-row:2;align-self:start;
}
body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > ul,
body.page-redesign .static_page > div:has(> h2):has(> ul) > ul{
  grid-column:3;grid-row:1 / -1;margin:0!important;align-self:center;
}
/* Подчёркивание текста в пунктах списка */
body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > ul > li,
body.page-redesign .static_page > div:has(> h2):has(> ul) > ul > li{
  text-decoration:underline;
  text-decoration-color:var(--blue);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
/* Eyebrow «С 2004 года» сверху h2 + deco-полоска снизу — заполняем пустоту вокруг центрированного заголовка */
body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > h2::before,
body.page-redesign .static_page > div:has(> h2):has(> ul) > h2::before{
  content:'С 2004 года';
  display:block;
  font-family:'Montserrat',sans-serif;
  font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);
  margin-bottom:14px;
}
body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > h2::after,
body.page-redesign .static_page > div:has(> h2):has(> ul) > h2::after{
  content:'';
  display:block;
  width:56px;height:3px;border-radius:2px;
  background:var(--grad-blue);
  margin-top:18px;
}
/* На узких — стек: h2 сверху, параграфы, потом список */
@media(max-width:900px){
  body.page-redesign .static_page > .title_box:has(> h2):has(> ul),
  body.page-redesign .static_page > div:has(> h2):has(> ul){
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > h2,
  body.page-redesign .static_page > div:has(> h2):has(> ul) > h2,
  body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > p,
  body.page-redesign .static_page > div:has(> h2):has(> ul) > p,
  body.page-redesign .static_page > .title_box:has(> h2):has(> ul) > ul,
  body.page-redesign .static_page > div:has(> h2):has(> ul) > ul{
    grid-column:1!important;
    /* Сбрасываем grid-row spans десктопа (1/-1 у h2/ul) — на мобилке стек в одну колонку */
    grid-row:auto!important;
    align-self:start!important;
    transform:none!important;
    margin:0 0 6px!important;
  }
}

/* Параграфы */
body.page-redesign .static_page p,
body.page-redesign .sales_wrapper p,
body.page-redesign .contacts_wrapper p{
  margin:0 0 14px!important;
  font-size:15px;line-height:1.6;color:#454e6a;
}
body.page-redesign .static_page p b,
body.page-redesign .static_page p strong{
  color:var(--text);font-weight:600;
}

/* Простой список — фирменные синие маркеры-точки. */
body.page-redesign .static_page ul{
  margin:0 0 18px!important;padding:0!important;
  list-style:none;
}
body.page-redesign .static_page ul > li{
  position:relative;margin:0 0 10px!important;padding:0 0 0 22px!important;
  font-size:15px;line-height:1.55;color:#454e6a;
}
body.page-redesign .static_page ul > li::before{
  content:'';
  position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:50%;
  background:var(--grad-blue);
  box-shadow:0 1px 4px rgba(0,30,80,.15);
}
body.page-redesign .static_page ul > li b,
body.page-redesign .static_page ul > li strong{
  color:var(--text);font-weight:600;
}

/* «Ценности»-список (про более насыщенные пункты с <br> и <b> в начале)
   превращаем в визуальные карточки-плитки с тонкой синей рамкой.
   Сетка адаптивная: мобилка — колонка, tablet portrait — 2+2+1, desktop — 3+2.
   Последний нечётный элемент в 2-кол сетке + items 4-5 в 6-кол сетке всегда заливают всю ширину. */
body.page-redesign .static_page ul:has(> li > b + br),
body.page-redesign .static_page ul:has(> li > strong + br){
  display:grid!important;
  grid-template-columns:1fr;
  gap:14px;
  padding:0!important;
}
@media(min-width:600px){
  body.page-redesign .static_page ul:has(> li > b + br),
  body.page-redesign .static_page ul:has(> li > strong + br){
    grid-template-columns:repeat(2,1fr);
  }
  body.page-redesign .static_page ul:has(> li > b + br) > li:last-child:nth-child(odd),
  body.page-redesign .static_page ul:has(> li > strong + br) > li:last-child:nth-child(odd){
    grid-column:1 / -1;
  }
}
@media(min-width:1000px){
  body.page-redesign .static_page ul:has(> li > b + br),
  body.page-redesign .static_page ul:has(> li > strong + br){
    grid-template-columns:repeat(6,1fr);
  }
  body.page-redesign .static_page ul:has(> li > b + br) > li,
  body.page-redesign .static_page ul:has(> li > strong + br) > li{
    grid-column:span 2;
  }
  body.page-redesign .static_page ul:has(> li > b + br) > li:nth-child(4),
  body.page-redesign .static_page ul:has(> li > b + br) > li:nth-child(5),
  body.page-redesign .static_page ul:has(> li > strong + br) > li:nth-child(4),
  body.page-redesign .static_page ul:has(> li > strong + br) > li:nth-child(5){
    grid-column:span 3;
  }
  /* Перебиваем правило :last-child:nth-child(odd) из 600px-блока (оно при равной специфичности 0,4,6 теряет к последнему из-за порядка, но к 5му элементу применилось бы первым — явный override) */
  body.page-redesign .static_page ul:has(> li > b + br) > li:last-child:nth-child(odd),
  body.page-redesign .static_page ul:has(> li > strong + br) > li:last-child:nth-child(odd){
    grid-column:span 3;
  }
}
body.page-redesign .static_page ul:has(> li > b + br) > li,
body.page-redesign .static_page ul:has(> li > strong + br) > li{
  padding:18px 20px!important;margin:0!important;
  background:#F4F7FD;
  border:1px solid #E5EAF5;
  border-radius:14px;
  font-size:14px;line-height:1.5;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
body.page-redesign .static_page ul:has(> li > b + br) > li:hover,
body.page-redesign .static_page ul:has(> li > strong + br) > li:hover{
  transform:translateY(-2px);
  border-color:var(--blue);
  box-shadow:0 8px 20px rgba(0,30,80,.08);
}
body.page-redesign .static_page ul:has(> li > b + br) > li::before,
body.page-redesign .static_page ul:has(> li > strong + br) > li::before{
  display:none!important;
}
body.page-redesign .static_page ul:has(> li > b + br) > li > b,
body.page-redesign .static_page ul:has(> li > b + br) > li > strong,
body.page-redesign .static_page ul:has(> li > strong + br) > li > b,
body.page-redesign .static_page ul:has(> li > strong + br) > li > strong{
  display:block;
  font-family:'Montserrat',sans-serif;
  font-size:15px;font-weight:700;color:var(--blue);
  margin-bottom:6px;
}

/* Bold-statement параграфы напрямую в .static_page («Мы рады приветствовать», «Забота о Вашей красоте»):
   центрированный mission-like блок с deco-полосками сверху и снизу */
body.page-redesign .static_page > p:has(> b:only-child){
  text-align:center;
  margin:36px 0!important;
  padding:0;
}
/* Слогану «Забота о Вашей красоте» (не первый bold-p) даём больший верхний отступ —
   так визуально симметрично пространству от нижней деко до features-карточек (eyebrow + ul margin + gap). */
body.page-redesign .static_page > p:has(> b:only-child):not(:first-of-type){
  margin-top:clamp(48px,4.5vw,66px)!important;
}
body.page-redesign .static_page > p:has(> b:only-child) > b{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(16px,1.6vw,19px);
  font-weight:600;
  color:var(--blue);
  letter-spacing:.01em;
}
body.page-redesign .static_page > p:has(> b:only-child)::before,
body.page-redesign .static_page > p:has(> b:only-child)::after{
  content:'';
  display:block;
  width:56px;height:3px;border-radius:2px;
  background:var(--grad-blue);
  margin:14px auto;
}
/* ── Юр-страницы (.legal_page: privacy/returns/requisites): плоская минималистичная
   типографика. Гасим mission-центрирование и деко-полоски от .static_page для строк
   вида «<b>Метка:</b> значение» (реквизиты) — они попадают под :has(> b:only-child),
   т.к. <b> — единственный ЭЛЕМЕНТ-ребёнок. Специфичность выше за счёт .static_page.legal_page. */
body.page-redesign .static_page.legal_page > p:has(> b:only-child){
  text-align:left!important;margin:8px 0!important;padding:0!important;
}
body.page-redesign .static_page.legal_page > p:has(> b:only-child)::before,
body.page-redesign .static_page.legal_page > p:has(> b:only-child)::after{
  content:none!important;display:none!important;
}
body.page-redesign .static_page.legal_page > p:has(> b:only-child) > b{
  font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:600!important;color:var(--text)!important;letter-spacing:0!important;
}
body.page-redesign .legal_page p{font-size:15px!important;line-height:1.6!important}
body.page-redesign .legal_page a{color:var(--blue)!important;text-decoration:none}
body.page-redesign .legal_page a:hover{text-decoration:underline}
/* Реквизиты: маленькая кнопка «копировать» в конце строки */
body.page-redesign .legal_page .req-copy{
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:26px;height:26px;margin-left:8px;flex-shrink:0;
  background:#fff;border:1px solid #CAD5F0;border-radius:7px;
  color:var(--blue);cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .15s ease;
}
body.page-redesign .legal_page .req-copy:hover{background:var(--blue);color:#fff}
body.page-redesign .legal_page .req-copy:active{transform:scale(.92)}

/* «Ценности «TOP Cosmetics»:» — eyebrow-label над карточками ценностей.
   Селектор: div, который содержит ul с li-карточками (b + br pattern). Без вложенного :has — Chrome его не всегда корректно резолвит. */
body.page-redesign .static_page > div:has(> ul > li > b + br) > p:first-child,
body.page-redesign .static_page > div:has(> ul > li > strong + br) > p:first-child{
  font-family:'Montserrat',sans-serif!important;
  font-size:12px!important;font-weight:700!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
  color:var(--blue)!important;
  margin:0 0 14px!important;
}
body.page-redesign .static_page > div:has(> ul > li > b + br) > p:first-child > b,
body.page-redesign .static_page > div:has(> ul > li > strong + br) > p:first-child > b{
  font-weight:700!important;color:var(--blue)!important;
}

/* Финальный callout «Связаться с нами» — последний div в .static_page с почтовой ссылкой.
   Селектор :has(> div > a[href^="mailto:"]) ловит именно эту структуру (intro p + inner div с mailto) */
body.page-redesign .static_page > div:has(> div > a[href^="mailto:"]):not(.select_text_green){
  margin-top:28px!important;
  padding:clamp(22px,2.5vw,28px) clamp(24px,2.8vw,32px)!important;
  background:#F5F8FD;
  border:1px solid rgba(0,89,185,.42);
  border-radius:18px;
}
body.page-redesign .static_page > div:has(> div > a[href^="mailto:"]):not(.select_text_green)::before{
  content:'Связаться с нами';
  display:block;
  font-family:'Montserrat',sans-serif;
  font-size:15px;font-weight:700;
  color:var(--blue);
  margin-bottom:8px;
}
body.page-redesign .static_page > div:has(> div > a[href^="mailto:"]):not(.select_text_green) > p{
  margin:0 0 16px!important;
  font-size:14px;line-height:1.6;
  color:#454e6a;
}
body.page-redesign .static_page > div:has(> div > a[href^="mailto:"]):not(.select_text_green) > div{
  margin-top:0!important;
  align-items:center;
  gap:12px;flex-wrap:wrap;
}
body.page-redesign .static_page > div:has(> div > a[href^="mailto:"]):not(.select_text_green) > div > b{
  font-family:'Montserrat',sans-serif;
  color:var(--text);font-weight:600;font-size:14px;
}
/* Email-pill: gradient blue + envelope SVG + shadow + hover-lift */
body.page-redesign .static_page > div:has(> div > a[href^="mailto:"]):not(.select_text_green) > div > a[href^="mailto:"]{
  display:inline-flex!important;align-items:center;gap:8px;
  padding:9px 20px!important;
  border-radius:999px!important;
  background:var(--grad-blue);
  color:#fff!important;
  font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:600;line-height:1;
  text-decoration:none!important;
  box-shadow:0 4px 14px rgba(0,30,80,.15);
  transition:transform .25s ease,box-shadow .25s ease;
}
body.page-redesign .static_page > div:has(> div > a[href^="mailto:"]):not(.select_text_green) > div > a[href^="mailto:"]:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,30,80,.22);
  text-decoration:none!important;
}
body.page-redesign .static_page > div:has(> div > a[href^="mailto:"]):not(.select_text_green) > div > a[href^="mailto:"]::before{
  content:'';
  width:16px;height:16px;flex-shrink:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m2 7 10 6 10-6'/></svg>") center/contain no-repeat;
}

/* Помеченный блок — info-card с фирменным градиентом и закругленной формой */
body.page-redesign .select_text_green{
  display:block;position:relative;
  margin:28px 0!important;padding:24px 28px 24px 56px!important;
  background:#EDF2FD;
  border:1px solid #CFD9F1;
  border-radius:16px;
  font-size:14px;line-height:1.6;color:#454e6a;
  box-shadow:0 4px 16px rgba(0,30,80,.05);
}
/* Декоративная «i»-иконка слева */
body.page-redesign .select_text_green::before{
  content:'i';
  position:absolute;left:18px;top:24px;
  width:26px;height:26px;border-radius:50%;
  background:var(--grad-blue);color:#fff;
  font:700 14px/26px 'Montserrat',sans-serif;
  text-align:center;
  font-style:italic;
  box-shadow:0 2px 8px rgba(0,30,80,.18);
}
body.page-redesign .select_text_green p{margin:0 0 10px!important}
body.page-redesign .select_text_green p:last-child{margin:0!important}
body.page-redesign .select_text_green b{color:var(--text)}
body.page-redesign .select_text_green a{
  color:var(--blue);text-decoration:none;font-weight:600;
}
body.page-redesign .select_text_green a:hover{text-decoration:underline}
body.page-redesign .select_text_green .sr-d-flex{
  margin-top:14px;flex-wrap:wrap;gap:16px;
}
body.page-redesign .select_text_green .sr-d-flex a{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:10px;
  background:#fff;border:1px solid #CFD9F1;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
body.page-redesign .select_text_green .sr-d-flex a:hover{
  text-decoration:none;
  border-color:var(--blue);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,30,80,.1);
}

/* ── delivery_and_pay: .dp-section — header-badge СВЕРХУ info-фрейма (overlap).
   .dp-section position:relative; header абсолютно позиционирован сверху-слева;
   body имеет padding-top больше высоты header'а — контент сидит под ним. */
body.page-redesign .static_page .dp-section{
  position:relative;
  margin:36px 0!important;
}
/* Header — badge поверх body, на всю ширину, position:absolute, z-index выше */
body.page-redesign .static_page .dp-section > .title_box{
  position:absolute;
  top:0;left:0;right:0;
  z-index:2;
  margin:0!important;
  padding:clamp(22px,2.8vw,32px) clamp(20px,2.6vw,28px)!important;
  background:#EDF2FD!important;
  border:1px solid rgba(0,89,185,.28)!important;
  border-radius:14px!important;
}
body.page-redesign .static_page .dp-section > .title_box::before{
  content:'';
  position:absolute;left:clamp(10px,1.2vw,14px);top:50%;transform:translateY(-50%);
  width:3px;height:60%;
  background:var(--grad-blue);
  border-radius:2px;
}
body.page-redesign .static_page .dp-section > .title_box h2{
  margin:0!important;padding:0 0 0 clamp(10px,1.2vw,14px)!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:clamp(20px,2.2vw,26px)!important;
  font-weight:600!important;line-height:1.25!important;
  color:var(--blue)!important;
  text-transform:none!important;letter-spacing:0!important;
  border:0!important;
  white-space:nowrap;
}
/* Body — фрейм начинается с того же top, padding-top компенсирует высоту header'а */
body.page-redesign .static_page .dp-section > .dp-section__body{
  position:relative;
  z-index:1;
  background:#fff;
  border:1px solid rgba(0,89,185,.28);
  border-radius:14px;
  padding:clamp(108px,12vw,130px) clamp(22px,3vw,32px) clamp(22px,3vw,28px)!important;
}
body.page-redesign .static_page .dp-section > .dp-section__body > *:first-child{margin-top:0!important}
body.page-redesign .static_page .dp-section > .dp-section__body > *:last-child{margin-bottom:0!important}

/* ── Способы доставки (delivery_and_pay): SVG-иконки в карточках Самовывоз / Курьерская ── */
body.page-redesign .static_page .delivery-method::before{
  display:block!important;
  content:''!important;
  width:48px!important;height:48px!important;
  margin:0 0 14px!important;padding:0!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  position:static!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.page-redesign .static_page .delivery-method--pickup::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%230059B9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 14h32l-2 6H10z'/><path d='M10 20v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V20'/><path d='M20 42v-10h8v10'/><rect x='13' y='25' width='6' height='6' rx='1'/><circle cx='14' cy='14' r='2'/><circle cx='34' cy='14' r='2'/></svg>")!important;
}
body.page-redesign .static_page .delivery-method--courier::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%230059B9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='14' width='22' height='18' rx='2'/><path d='M26 20h10l6 6v6h-16'/><circle cx='14' cy='36' r='3'/><circle cx='34' cy='36' r='3'/><path d='M17 36h14'/></svg>")!important;
}

/* sr-* margin helper'ы — приводим к нашему ритму */
body.page-redesign .static_page .sr-m-top-10{margin-top:14px!important}
body.page-redesign .static_page .sr-m-top-20{margin-top:24px!important}
body.page-redesign .static_page .sr-m-bottom-10{margin-bottom:8px!important;font-weight:600;color:var(--text)}
body.page-redesign .static_page .sr-d-flex{display:flex;gap:20px;flex-wrap:wrap}
body.page-redesign .static_page .sr-gap-20{gap:20px}
body.page-redesign .static_page a{
  color:var(--blue);text-decoration:none;font-weight:500;
}
body.page-redesign .static_page a:hover{text-decoration:underline}

/* ── /stock/ — карточки акций (bitrix:news, 'sales' шаблон) ────────
   Не знаем точную разметку без рендера, оборачиваем максимально
   универсально — Montserrat везде, синяя ссылка, скруглённые картинки. */
body.page-redesign .sales_wrapper a{color:var(--blue);text-decoration:none}
body.page-redesign .sales_wrapper a:hover{text-decoration:underline}
body.page-redesign .sales_wrapper img{
  border-radius:14px;max-width:100%;height:auto;
}

/* ── /stock/ — конструкция как у dp-section на delivery_and_pay:
   .sales_wrapper становится position:relative обёрткой;
   .title_box — floating header-badge (absolute, на всю ширину);
   .promo-list — info-фрейм (border + radius + padding-top под header).
   Внешняя панель .sales_wrapper отключена — badge+frame создают визуал сами. */
body.page-redesign .sales_wrapper{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
  position:relative;
}
/* Header — badge поверх frame'а, position:absolute, на всю ширину */
body.page-redesign .sales_wrapper > .title_box{
  position:absolute;
  top:0;left:0;right:0;
  z-index:2;
  margin:0!important;
  padding:clamp(22px,2.8vw,32px) clamp(20px,2.6vw,28px)!important;
  background:#EDF2FD!important;
  border:1px solid rgba(0,89,185,.28)!important;
  border-radius:14px!important;
}
body.page-redesign .sales_wrapper > .title_box::before{
  content:'';
  position:absolute;left:clamp(10px,1.2vw,14px);top:50%;transform:translateY(-50%);
  width:3px;height:60%;
  background:var(--grad-blue);
  border-radius:2px;
}
body.page-redesign .sales_wrapper > .title_box h1{
  margin:0!important;padding:0 0 0 clamp(10px,1.2vw,14px)!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:clamp(20px,2.2vw,26px)!important;
  font-weight:600!important;line-height:1.25!important;
  color:var(--blue)!important;
  text-transform:none!important;letter-spacing:0!important;
  border:0!important;
}
/* Убираем legacy градиент-underline у h1 — он не нужен в badge'е */
body.page-redesign .sales_wrapper > .title_box h1::after{display:none!important}

/* Info-фрейм — promo-list с padding-top компенсирующим header.
   Используем 6-кол grid с дефолтным span 2 (=3 в ряд), чтобы при частичном
   заполнении последней строки 2 карточки занимали 3+3 = по полряда каждая. */
body.page-redesign .sales_wrapper .promo-list{
  position:relative;
  z-index:1;
  background:#fff;
  border:1px solid rgba(0,89,185,.28);
  border-radius:14px;
  overflow:hidden;
  display:grid!important;
  grid-template-columns:repeat(6,1fr)!important;
  gap:0!important;
  margin:0!important;
  padding:clamp(108px,12vw,130px) 0 0!important;
}
body.page-redesign .sales_wrapper .promo-list-container{
  grid-column:span 2!important;
  width:auto!important;max-width:none!important;flex:none!important;
  margin:0!important;
  padding:clamp(14px,1.5vw,20px)!important;
  background:transparent!important;
  border:0!important;
  border-right:1px solid #CAD5F0!important;
  border-bottom:1px solid #CAD5F0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
/* Правая колонка нормального ряда (каждая 3-я карточка) — без правого border'а */
body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n){
  border-right:0!important;
}
/* Последняя строка — без нижнего border'а.
   Начало последней строки: :nth-child(3n+1):nth-last-child(-n+3) — итем в первом столбце среди последних 3. */
body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n+1):nth-last-child(-n+3),
body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n+1):nth-last-child(-n+3) ~ .promo-list-container{
  border-bottom:0!important;
}
/* Одинокая последняя карточка (1 в последней строке) — на всю ширину (span 6) */
body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n+1):last-child{
  grid-column:span 6!important;
  border-right:0!important;
}
/* Две карточки в последней строке (3n+1 итем со span 3, и следующий сосед тоже span 3 → 3+3=6) */
body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n+1):nth-last-child(2),
body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n+1):nth-last-child(2) ~ .promo-list-container{
  grid-column:span 3!important;
}
/* Последняя из пары partial-row карточек — без правого border'а */
body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n+1):nth-last-child(2) ~ .promo-list-container{
  border-right:0!important;
}
body.page-redesign .sales_wrapper .promo-list-container:hover{
  transform:translateY(-4px);
}

/* Адаптив grid'а акций — 2 колонки на планшете, 1 на мобиле.
   Также перерасчёт cross-divider'ов под новое число колонок. */
@media(max-width:900px){
  body.page-redesign .sales_wrapper .promo-list{
    grid-template-columns:repeat(2,1fr)!important;
  }
  /* Сброс desktop span:2 — на 2-кол сетке span 1 (одна карточка = одна колонка) */
  body.page-redesign .sales_wrapper .promo-list-container{
    grid-column:span 1!important;
    border-right:1px solid #CAD5F0!important;
    border-bottom:1px solid #CAD5F0!important;
  }
  body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n){
    border-right:1px solid #CAD5F0!important;
  }
  body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n+1):nth-last-child(-n+3),
  body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n+1):nth-last-child(-n+3) ~ .promo-list-container{
    border-bottom:1px solid #CAD5F0!important;
  }
  /* 2-кол правила: чётные — без правого border'а */
  body.page-redesign .sales_wrapper .promo-list-container:nth-child(2n){
    border-right:0!important;
  }
  /* Последняя строка для 2-кол: nth-child(2n+1):nth-last-child(-n+2) + следующие соседи */
  body.page-redesign .sales_wrapper .promo-list-container:nth-child(2n+1):nth-last-child(-n+2),
  body.page-redesign .sales_wrapper .promo-list-container:nth-child(2n+1):nth-last-child(-n+2) ~ .promo-list-container,
  body.page-redesign .sales_wrapper .promo-list-container:last-child{
    border-bottom:0!important;
  }
  /* Одинокая последняя карточка в строке 2-кол grid'а — на всю ширину */
  body.page-redesign .sales_wrapper .promo-list-container:nth-child(2n+1):last-child{
    grid-column:1 / -1!important;
    border-right:0!important;
  }
}
@media(max-width:600px){
  body.page-redesign .sales_wrapper .promo-list{
    grid-template-columns:1fr!important;
  }
  /* 1 кол: span 1, убираем все правые border'ы, нижние между карточками */
  body.page-redesign .sales_wrapper .promo-list-container,
  body.page-redesign .sales_wrapper .promo-list-container:nth-child(3n),
  body.page-redesign .sales_wrapper .promo-list-container:nth-child(2n){
    grid-column:span 1!important;
    border-right:0!important;
    border-bottom:1px solid #CAD5F0!important;
  }
  body.page-redesign .sales_wrapper .promo-list-container:last-child{
    border-bottom:0!important;
  }
}
body.page-redesign .sales_wrapper .promo-list-block{
  padding:0!important;
  display:flex;flex-direction:column;
  height:100%;
  text-align:left;
  gap:0!important;
}

/* Картинка-обложка — прозрачный фон, фото полностью видно (object-fit:contain) */
body.page-redesign .sales_wrapper .promo-list-img{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  height:auto!important;line-height:0!important;
  margin:0 0 12px!important;
  background:transparent!important;
  border-radius:14px;
  overflow:hidden;
}
body.page-redesign .sales_wrapper .promo-list-img img{
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
  object-fit:contain;
  border-radius:0!important;
  display:block;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
body.page-redesign .sales_wrapper .promo-list-container:hover .promo-list-img img{
  transform:scale(1.04);
}

/* Info-зона — заголовок, описание, кнопка делят один gradient bg.
   Чтобы они визуально склеились — gap=0 на блоке, bg на каждом из них, padding по краям. */
body.page-redesign .sales_wrapper .promo-list-title,
body.page-redesign .sales_wrapper .promo-list-content,
body.page-redesign .sales_wrapper .promo-list-more{
  background:#EDF2FD;
  margin:0!important;
}

/* Заголовок акции */
body.page-redesign .sales_wrapper .promo-list-title{
  font-family:'Montserrat',sans-serif!important;
  font-size:clamp(15px,1.6vw,18px)!important;
  font-weight:600!important;line-height:1.3!important;
  color:var(--text)!important;
  padding:14px 16px 8px!important;
  border-radius:14px 14px 0 0;
}
body.page-redesign .sales_wrapper .promo-list-title a{
  color:inherit!important;text-decoration:none!important;
  font-weight:inherit!important;
  transition:color .25s ease;
}
body.page-redesign .sales_wrapper .promo-list-container:hover .promo-list-title a{
  color:var(--blue)!important;
}

/* Текст описания */
body.page-redesign .sales_wrapper .promo-list-content{
  font-size:13px!important;line-height:1.5!important;
  color:#5a6480!important;
  padding:0 16px 10px!important;
  flex:1;
}
body.page-redesign .sales_wrapper .promo-list-content p{
  margin:0 0 6px!important;
}
body.page-redesign .sales_wrapper .promo-list-content p:last-child{margin:0!important}

/* Кнопка «Подробнее» — pill в gradient blue */
body.page-redesign .sales_wrapper .promo-list-more{
  padding:8px 16px 14px!important;
  border-radius:0 0 14px 14px;
}
body.page-redesign .sales_wrapper .promo-more-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;
  background:var(--grad-blue);color:#fff!important;
  border-radius:999px;border:0!important;
  font:600 12px/1 'Montserrat',sans-serif!important;
  text-decoration:none!important;
  box-shadow:0 4px 12px rgba(0,30,80,.12);
  transition:transform .25s ease,box-shadow .25s ease;
}
body.page-redesign .sales_wrapper .promo-more-link::after{
  content:'→';font-size:13px;
}
body.page-redesign .sales_wrapper .promo-list-container:hover .promo-more-link{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,30,80,.2);
}

/* Пагинация */
body.page-redesign .sales_wrapper .bx-pagination,
body.page-redesign .sales_wrapper .bx_pagination_bottom{
  margin-top:32px;
}

/* ── /contacts/ ─────────────────────────────────────────────────────────────
   .contacts_wrapper — небольшая верхняя панель с h1 «Контакты».
   .map_content — основная панель с офисом, формой и картой.
   Обе центрированы 1240px, одинаковая стилистика. */

/* contacts_wrapper с только title_box — отдельная панель не нужна. Делаем прозрачной (h1 как заголовок страницы). */
body.page-redesign .contacts_wrapper:has(> .title_box:only-child){
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:24px auto 8px!important;
  overflow:visible!important;
}
body.page-redesign .contacts_wrapper:has(> .title_box:only-child) .title_box{
  margin-bottom:0!important;
}
body.page-redesign .contacts_wrapper:has(> .title_box:only-child) .title_box h1,
body.page-redesign .contacts_wrapper:has(> .title_box:only-child) .title_box .title{
  margin-bottom:0!important;
}

/* .map_content — полноценная панель в стиле .static_page */
body.page-redesign .map_content{
  max-width:1240px;margin:16px auto 48px;
  padding:clamp(20px,2.5vw,32px) clamp(24px,3.5vw,40px) clamp(28px,4vw,48px);
  background:#fff;
  border:1px solid #E5EAF5;
  border-radius:28px;
  box-shadow:0 4px 24px rgba(0,30,80,.04);
  font-family:'Montserrat',sans-serif;
  font-size:15px;line-height:1.6;color:#454e6a;
  position:relative;overflow:hidden;
}
body.page-redesign .map_content a{
  color:var(--blue);text-decoration:none;font-weight:500;
}
body.page-redesign .map_content a:hover{text-decoration:underline}

/* Header магазина — h2 слева, кнопка «Реквизиты» справа в одной строке */
body.page-redesign .map_content .stores-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 22px;
}
body.page-redesign .map_content .stores-header h2{
  font-family:'Montserrat',sans-serif!important;
  font-size:clamp(20px,2.2vw,28px)!important;
  font-weight:700!important;line-height:1.2!important;
  color:var(--text)!important;
  margin:0!important;padding:0 0 0 18px!important;
  border:0!important;
  background:var(--grad-blue) left center/3px 70% no-repeat;
}
/* «Реквизиты» — outline pill-кнопка с иконкой документа */
body.page-redesign .rekvizit-trigger{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;margin:0;
  border-radius:999px;
  background:var(--grad-blue);
  border:0;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:600;line-height:1;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,30,80,.15);
  transition:transform .25s ease,box-shadow .25s ease;
}
body.page-redesign .rekvizit-trigger:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,30,80,.22);
}
body.page-redesign .rekvizit-trigger svg{flex-shrink:0;}

/* ── Stack: контейнер форма + реквизиты с slide-анимацией ─────────────────── */
/* Убираем bootstrap-gutter — колонки прилегают друг к другу */
body.page-redesign .map_content .stores-list-wrp.row{
  margin-left:0!important;margin-right:0!important;
}
body.page-redesign .map_content .stores-list-wrp > [class*="col-"]{
  padding-left:0!important;padding-right:0!important;
}
/* Колонка контактов поверх — перекрывает левый край формы (эффект «форма под контактами») */
body.page-redesign .map_content .stores-list-wrp > .col-lg-6:first-child{
  position:relative;z-index:2;
}
body.page-redesign .contacts__form{
  display:flex;flex-direction:column;
  position:relative;z-index:1;
}
body.page-redesign .contacts__stack{
  position:relative;
  overflow:hidden;
  flex:1;align-self:stretch;
  /* Уходим на 60px влево под колонку контактов */
  margin-left:-60px;
  width:calc(100% + 60px);
  background:#fff;
  border:1px solid rgba(0,89,185,.22);
  border-left:0;
  border-radius:0 18px 18px 0;
  box-shadow:inset 18px 0 26px -18px rgba(0,30,80,.16);
}
body.page-redesign .contacts__pane{
  /* Левый padding: 60 (overlap) + 24 (визуальный отступ) = контент начинается в 24px от видимого края панели */
  padding:clamp(20px,2.2vw,26px) clamp(20px,2.4vw,28px) clamp(20px,2.2vw,26px) 84px;
}
/* Форма — в потоке, диктует высоту стека и НЕ движется */
body.page-redesign .contacts__pane--form{
  position:relative;
  background:#fff;
}
/* Реквизиты — абсолют поверх формы, выезжают слева направо ПОВЕРХ формы.
   !important на transition: перебиваем глобальный prefers-reduced-motion ресет .01ms (этот переход явно запрошен пользователем).
   pane сам НЕ скроллится; внутри — .rekvizit-scroll wrapper со своим скроллом.
   Тогда hint (absolute внутри pane) держится у нижнего края pane, не двигаясь со скроллом. */
body.page-redesign .contacts__pane--rekvizit{
  position:absolute;top:0;left:0;right:0;bottom:0;
  transform:translateX(-100%);
  transition:transform .5s cubic-bezier(.4,0,.2,1)!important;
  will-change:transform;
  background:#fff;
  z-index:20;
  overflow:hidden;
  padding:0!important;
}
body.page-redesign .rekvizit-scroll{
  position:absolute;top:0;left:0;right:0;bottom:0;
  overflow-y:auto;
  /* padding-left: 84px учитывает 60px overlap панели влево + 24px видимый отступ */
  padding:0 clamp(20px,2.4vw,28px) 60px 84px;
}
body.page-redesign .contacts__pane--rekvizit .rekvizit-list{
  overflow:visible!important;flex:none!important;
}
body.page-redesign .contacts__stack.is-rekvizit .contacts__pane--rekvizit{
  transform:translateX(0)!important;
}

/* Header в форме — title слева, Реквизиты-кнопка справа */
body.page-redesign .contacts-pane__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(0,89,185,.15);
}
body.page-redesign .contacts-pane__title{
  font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);
}
/* Скрываем дублирующий title из feedback-шаблона */
body.page-redesign .contacts__pane--form .title:not(.contacts-pane__title){display:none!important;}

/* Мобильный/планшетный режим — вертикальное сращивание как на десктопе но по Y:
   контакты остаются ПОЛНОСТЬЮ скруглёнными (z-index выше),
   форма физически уходит ВВЕРХ под контакты (negative margin-top + flat-top + inset shadow). */
@media (max-width:991px){
  body.page-redesign .stores-list-wrp{display:block;}
  /* Контакт-карточка — полностью скруглённая, выше по z-index */
  body.page-redesign .map_content .stores-list-wrp > .col-lg-6:first-child{
    position:relative;z-index:2;
  }
  body.page-redesign .map_content .catalog-stores-item{
    border-radius:18px!important;
    border:1px solid rgba(0,89,185,.22)!important;
  }
  /* Форма-колонка — ниже по z-index, физически уходит вверх под контакты */
  body.page-redesign .contacts__form{
    position:relative;z-index:1;
    margin-top:-60px!important;display:block;
  }
  /* Stack: flat top, rounded bottom; padding-top компенсирует overlap чтобы контент был ниже */
  body.page-redesign .contacts__stack{
    margin-left:0!important;
    width:100%!important;
    border:1px solid rgba(0,89,185,.22)!important;
    border-top:0!important;
    border-radius:0 0 18px 18px!important;
    box-shadow:inset 0 14px 24px -18px rgba(0,30,80,.18);
  }
  /* Анимация: вертикальная (сверху вниз) на раскрытие реквизитов */
  body.page-redesign .contacts__pane--rekvizit{
    transform:translateY(-100%);
  }
  body.page-redesign .contacts__stack.is-rekvizit .contacts__pane--rekvizit{
    transform:translateY(0)!important;
  }
  /* В кнопке Скопировать все убираем слово «реквизиты» */
  body.page-redesign .rekvizit-copy-all__long{display:none;}
  /* Стрелка «К форме» — на мобиле реквизиты приезжают сверху вниз поверх формы,
     поэтому возврат «к форме» это ВВЕРХ; крутим стрелку (←) на 90° CW → ↑ */
  body.page-redesign .rekvizit-overlay__close svg{
    transform:rotate(90deg);
  }
  /* Скролл-контейнер начинается с 80px от верха pane (НЕ через padding — иначе контент видим через padding-зону).
     Выше — пустая область pane с белым фоном, контент не может туда заскроллиться. */
  body.page-redesign .rekvizit-scroll{
    top:80px!important;
    padding:0 clamp(14px,3vw,20px) 60px!important;
  }
  /* iPad mini/air portrait: форма col-sm-10 (83%), контакты col-12 (100%) → разная ширина.
     Принудительно 100% для обеих колонок, выглядят одной шириной. */
  body.page-redesign .map_content .stores-list-wrp > .col-lg-6,
  body.page-redesign .map_content .stores-list-wrp > .contacts__form{
    flex:0 0 100%!important;
    max-width:100%!important;
    width:100%!important;
  }

  /* Pane padding: top 80 (для overlap), left/right small (сбрасываем десктоп 84) */
  body.page-redesign .contacts__pane--form{
    padding:80px clamp(14px,3vw,20px) clamp(20px,2.2vw,26px)!important;
  }

  /* Head: title слева, Реквизиты-кнопка справа (как на десктопе) */
  body.page-redesign .contacts-pane__head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  body.page-redesign .contacts-pane__title{
    padding-left:0;
  }
  /* Скрываем слово «сообщение» в title на мобилке */
  body.page-redesign .contacts-pane__title-long{display:none;}
  /* Каждый widget — ограниченный по ширине блок с margin:auto, центрируется в pane.
     !important нужен потому что десктоп-rule с padding-left:18 идёт позже в файле и при равной специфичности перебивает. */
  body.page-redesign .contacts__pane--form .message-form__widget{
    padding:0!important;
    max-width:300px!important;
    margin:0 auto 10px!important;
    display:block!important;
  }
  body.page-redesign .contacts__pane--form .message-form__widget input,
  body.page-redesign .contacts__pane--form .message-form__widget textarea{
    border-radius:999px!important;
    width:100%!important;max-width:100%!important;
    margin:0!important;
  }
  body.page-redesign .contacts__pane--form .message-form__widget textarea{
    border-radius:18px!important;
  }
  /* Капча — те же 300px max-width (наследует от .message-form__widget), items внутри flex-центр */
  body.page-redesign .contacts__pane--form .mf-captcha{
    display:flex!important;justify-content:center!important;align-items:center!important;
    gap:10px!important;flex-wrap:wrap!important;
  }
  body.page-redesign .contacts__pane--form .mf-captcha img{
    border-radius:12px!important;border-left:1px solid rgba(0,89,185,.3)!important;
    width:auto!important;max-width:100%!important;
  }
  body.page-redesign .contacts__pane--form .mf-captcha input{
    max-width:160px!important;min-width:0!important;flex:0 1 auto!important;
  }
  /* Submit-кнопка тоже центрирована */
  body.page-redesign .contacts__pane--form .message-form__controls{
    padding:0!important;
    max-width:300px!important;margin:8px auto 0!important;
    display:flex!important;justify-content:center!important;
  }
}

/* ── Стили формы внутри pane ────────────────────────────────────────────── */
/* «Напишите нам сообщение:» — eyebrow-стиль */
body.page-redesign .contacts__pane--form .title{
  font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:700;line-height:1.2;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);
  margin:0 0 18px;
}
/* Нейтрализуем bootstrap-внутри pane — single-column поток без gutter-ов */
body.page-redesign .contacts__pane--form > .row,
body.page-redesign .contacts__pane--form .message-form__wrapper{margin:0!important;}
body.page-redesign .contacts__pane--form .message-form.form-feedback,
body.page-redesign .contacts__pane--form [class*="col-"]{
  padding:0!important;
  max-width:100%!important;flex:0 0 100%!important;width:100%!important;
}
/* Перебиваем legacy .message-form__widget input/textarea */
body.page-redesign .contacts__pane--form .message-form__widget{
  margin-bottom:10px;
}
/* padding-left:18 нужен только на десктопе для выравнивания с title; на мобилке используется max-width + margin:auto.
   Также на десктопе чуть увеличиваем вертикальные отступы (визуально подзаполняем пустоту без капчи). */
@media (min-width:992px){
  body.page-redesign .contacts__pane--form .message-form__widget{
    padding-left:18px;
    margin-bottom:15px;   /* было 10 → +50% */
  }
  body.page-redesign .contacts__pane--form .message-form__controls{
    padding-left:18px!important;
  }
  /* Head: divider-to-first-input = title-bottom-to-divider (равны 12px, padding-bottom не трогаем) */
  body.page-redesign .contacts__pane--form .contacts-pane__head{
    margin-bottom:12px;
  }
}

/* ── Консент-текст под кнопкой "Отправить" (152-ФЗ: согласие подразумевается кликом submit) ──── */
body.page-redesign .mf-consent{
  padding:0;
  font-family:'Montserrat',sans-serif;
  font-size:12px;line-height:1.4;
  color:#8590A8;
}
body.page-redesign .mf-consent a{
  color:var(--blue);
  text-decoration:none;
  font-weight:500;
}
body.page-redesign .mf-consent a:hover{text-decoration:underline;}

/* На десктопе (≥992) — кнопка слева, текст-колонка слева под кнопкой, выровненный по левому краю с увеличенным отступом */
@media (min-width:992px){
  body.page-redesign .contacts__pane--form .message-form__controls{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:15px;  /* совпадает с margin-bottom widget'ов между textarea и кнопкой */
  }
  body.page-redesign .contacts__pane--form .mf-consent{
    margin:0!important;
    text-align:left;
    max-width:320px;
  }
}

/* На мобилке/планшете (≤991) — кнопка по центру, текст под ней по центру блока формы */
@media (max-width:991px){
  body.page-redesign .contacts__pane--form .message-form__controls{
    flex-direction:column!important;
    align-items:center!important;
    gap:14px;
  }
  body.page-redesign .mf-consent{
    margin:0!important;
    text-align:center;
    max-width:300px;
  }
}
body.page-redesign .contacts__pane--form .message-form__widget input,
body.page-redesign .contacts__pane--form .message-form__widget textarea{
  width:100%;
  max-width:440px;
  background:#fff;
  border:1px solid rgba(0,89,185,.3);
  outline:0;
  color:var(--text);
  font-family:'Montserrat',sans-serif;
  font-size:14px;line-height:1.3;
  padding:0 22px;height:42px;
  /* Асимметрия: плоско слева, скруглено справа */
  border-radius:0 999px 999px 0;
  transition:border-color .2s ease,box-shadow .2s ease;
  display:block;
}
body.page-redesign .contacts__pane--form .message-form__widget textarea{
  max-width:440px;
  height:clamp(120px,18vh,160px)!important;
  min-height:120px!important;
  max-height:200px;
  padding:14px 22px;
  resize:vertical;
  border-radius:0 18px 18px 0;
}
body.page-redesign .contacts__pane--form .message-form__widget input::placeholder,
body.page-redesign .contacts__pane--form .message-form__widget textarea::placeholder{
  color:#8b96b3;
}
body.page-redesign .contacts__pane--form .message-form__widget input:focus,
body.page-redesign .contacts__pane--form .message-form__widget textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,89,185,.12);
}
body.page-redesign .contacts__pane--form .message-form__widget.red-brd input,
body.page-redesign .contacts__pane--form .message-form__widget.red-brd textarea{
  border-color:#e23838;
}
body.page-redesign .contacts__pane--form .mf-error{
  display:block;
  font-size:12px;color:#e23838;
  margin-top:4px;
}

/* Капча — img + текстовое поле в одну строку */
body.page-redesign .contacts__pane--form .mf-captcha{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;
}
body.page-redesign .contacts__pane--form .mf-captcha img{
  display:block;height:44px;width:auto;
  border-radius:0 12px 12px 0;
  border:1px solid rgba(0,89,185,.3);
  border-left:0;
  background:#fff;
  margin:0!important;
}
body.page-redesign .contacts__pane--form .mf-captcha input{
  flex:1;min-width:140px;max-width:220px;
  height:42px!important;
}

/* Submit-кнопка — pill в наш фирменный gradient */
body.page-redesign .contacts__pane--form .message-form__controls{
  margin-top:8px;
}
body.page-redesign .contacts__pane--form .btn-green-gradient{
  background:transparent!important;
  padding:0!important;margin:0!important;
  display:inline-block;
  border:0!important;
}
body.page-redesign .contacts__pane--form .btn-green-gradient::before,
body.page-redesign .contacts__pane--form .btn-green-gradient::after{
  display:none!important;
}
body.page-redesign .contacts__pane--form .message-submit{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 28px!important;
  background:var(--grad-blue)!important;
  color:#fff!important;
  border:0!important;
  border-radius:999px!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:14px!important;font-weight:600!important;
  line-height:1!important;
  text-transform:none!important;letter-spacing:0!important;
  position:static!important;z-index:auto!important;
  width:auto!important;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,30,80,.15);
  transition:transform .25s ease,box-shadow .25s ease;
}
body.page-redesign .contacts__pane--form .message-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,30,80,.22);
}

/* OK-сообщение после отправки */
body.page-redesign .contacts__pane--form .mf-ok-text{
  margin-top:14px;
  padding:14px 18px;
  background:#F5F8FD;
  border:1px solid rgba(0,89,185,.22);
  border-radius:14px;
  color:var(--text);font-size:14px;
}
/* Sticky header реквизитов — copy-all слева, К форме справа.
   Прилипает к верху pane при скролле списка. */
body.page-redesign .rekvizit-overlay__head{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 0 12px;margin:0 0 12px;
  background:#fff!important;
  border-bottom:1px solid #E5EAF5;
}
/* Scroll-hint — absolute у нижнего края pane (НЕ внутри scroll-wrapper).
   Изначально скрыт; JS добавит .is-show когда есть скролл и не докручен до конца. */
body.page-redesign .rekvizit-scroll-hint{
  position:absolute;bottom:0;left:0;right:0;
  height:70px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.7) 50%,
    rgba(255,255,255,1) 100%);
  pointer-events:none;
  z-index:4;
  opacity:0;
  transition:opacity .3s ease;
}
body.page-redesign .rekvizit-scroll-hint.is-show{opacity:1;}

/* Тонкие dividers между пунктами реквизитов (не на всю ширину).
   display:block!important перебивает rekvizit-row::before {display:none} из общего блока. */
body.page-redesign .rekvizit-row{position:relative;}
body.page-redesign .rekvizit-row + .rekvizit-row::before{
  content:'';
  display:block!important;
  position:absolute;top:-4px;
  left:10%;right:10%;
  height:1px;
  background:rgba(0,89,185,.18);
}
body.page-redesign .rekvizit-scroll-hint::after{
  content:'';
  position:absolute;left:50%;bottom:24px;
  width:22px;height:12px;margin-left:-11px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='%230059B9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 2 14 12 26 2'/></svg>") center/contain no-repeat;
  opacity:.75;
  animation:qv-chevron 1.6s ease-in-out infinite;
}
body.page-redesign .rekvizit-overlay__title{
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:700;line-height:1.25;
  color:var(--text);
  margin:0 0 12px;
}
body.page-redesign .rekvizit-overlay__close{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:8px 16px;
  background:var(--grad-blue);
  border:0;
  border-radius:999px;
  color:#fff;
  font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,30,80,.15);
  transition:transform .25s ease,box-shadow .25s ease;
}
body.page-redesign .rekvizit-overlay__close:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,30,80,.22);
}
/* Список реквизитов — скроллится внутри overlay */
body.page-redesign .rekvizit-list{
  list-style:none!important;padding:0!important;margin:0 0 14px!important;
  overflow-y:auto;flex:1;
  display:flex;flex-direction:column;gap:6px;
}
body.page-redesign .rekvizit-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px!important;margin:0!important;
  border-radius:10px;
  transition:background .2s ease;
}
body.page-redesign .rekvizit-row::before{display:none!important;}
body.page-redesign .rekvizit-row:hover{background:#F4F7FD;}
body.page-redesign .rekvizit-row__text{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:1px;
}
body.page-redesign .rekvizit-row__label{
  font-family:'Montserrat',sans-serif;
  font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);
}
body.page-redesign .rekvizit-row__value{
  font-family:'Montserrat',sans-serif;
  font-size:13px;line-height:1.35;color:var(--text);
  word-break:break-word;
}
body.page-redesign .rekvizit-row__copy{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;
  background:#fff;border:1px solid #CAD5F0;border-radius:8px;
  color:var(--blue);cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
body.page-redesign .rekvizit-row__copy:hover{
  background:var(--blue);color:#fff;border-color:var(--blue);
}
body.page-redesign .rekvizit-row__copy:active{transform:scale(.94);}
/* «Скопировать все реквизиты» — primary pill в sticky header */
body.page-redesign .rekvizit-copy-all{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 16px;margin:0;flex-shrink:0;
  background:var(--grad-blue);color:#fff;
  border:0;border-radius:999px;
  font-family:'Montserrat',sans-serif;
  font-size:12px;font-weight:600;line-height:1;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,30,80,.15);
  transition:transform .25s ease,box-shadow .25s ease;
}
body.page-redesign .rekvizit-copy-all:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,30,80,.22);
}

/* Toast «Скопировано» — фиксированный bottom-center */
body.page-redesign .rekvizit-toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,12px);
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;
  background:#fff;
  border:1px solid rgba(0,89,185,.3);
  border-radius:999px;
  color:var(--text);
  font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:600;
  box-shadow:0 10px 28px rgba(0,30,80,.18);
  opacity:0;pointer-events:none;
  z-index:9999;
  transition:opacity .25s ease,transform .25s ease;
}
body.page-redesign .rekvizit-toast[hidden]{display:none!important;}
body.page-redesign .rekvizit-toast--visible{
  opacity:1;transform:translate(-50%,0);
}
body.page-redesign .rekvizit-toast svg{color:#1e9c52;}

/* Карточка офиса (.catalog-stores-item) — полностью скруглённая, форма уходит под неё */
body.page-redesign .map_content .catalog-stores-item{
  padding:clamp(20px,2.5vw,28px);
  background:#F5F8FD;
  border:1px solid rgba(0,89,185,.22);
  border-radius:18px;
}

/* Адрес — с pin-иконкой */
body.page-redesign .map_content .catalog-stores-item-address{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;line-height:1.5;color:var(--text);font-weight:500;
  margin-bottom:12px;
}
body.page-redesign .map_content .catalog-stores-item-address::before{
  content:'';width:18px;height:18px;flex-shrink:0;margin-top:1px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230059B9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") center/contain no-repeat;
}

/* График — с иконкой часов */
body.page-redesign .map_content .catalog-stores-item-schedule .text-muted{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:#5a6480!important;font-weight:500;
  margin-bottom:14px;
}
body.page-redesign .map_content .catalog-stores-item-schedule .text-muted::before{
  content:'';width:18px;height:18px;flex-shrink:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230059B9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") center/contain no-repeat;
}

/* Телефоны — pill-чипы */
body.page-redesign .map_content .catalog-stores-item-phone{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;
}
body.page-redesign .map_content .catalog-stores-item-phone a[href^="tel:"]{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px!important;
  border-radius:999px;
  background:var(--grad-blue)!important;
  color:#fff!important;
  font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:600;line-height:1;
  text-decoration:none!important;
  box-shadow:0 4px 14px rgba(0,30,80,.15);
  transition:transform .25s ease,box-shadow .25s ease;
}
body.page-redesign .map_content .catalog-stores-item-phone a[href^="tel:"]:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,30,80,.22);
  text-decoration:none!important;
}
body.page-redesign .map_content .catalog-stores-item-phone a[href^="tel:"]::before{
  content:'';width:14px;height:14px;flex-shrink:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center/contain no-repeat;
}

/* Описание офиса */
body.page-redesign .map_content .catalog-stores-item-descr{
  margin-bottom:16px;
}
body.page-redesign .map_content .catalog-stores-item-descr p{
  font-size:14px;line-height:1.5;color:#454e6a;
  font-style:italic;margin:0;
}

/* Фото офиса */
body.page-redesign .map_content .catalog-stores-item-image{
  border-radius:14px;max-width:100%;height:auto;
  box-shadow:0 8px 24px rgba(0,30,80,.08);
}

/* Форма обратной связи — соседняя колонка */
body.page-redesign .map_content .contacts__form{
  /* унаследует col-lg-6 — оставляем grid bootstrap */
}

/* Карта — рамка и radius */
body.page-redesign .map_content .map_wrapper{
  margin-top:24px;
  border-radius:18px;overflow:hidden;
  border:1px solid #CAD5F0;
  box-shadow:0 4px 14px rgba(0,30,80,.05);
}

/* Адаптив: на мобилках поджимаем отступы */
@media(max-width:768px){
  body.page-redesign .static_page,
  body.page-redesign .sales_wrapper,
  body.page-redesign .contacts_wrapper,
  body.page-redesign .map_content{
    font-size:14px;
  }
  body.page-redesign .static_page ul > li,
  body.page-redesign .static_page p,
  body.page-redesign .sales_wrapper p,
  body.page-redesign .contacts_wrapper p{
    font-size:14px;
  }
  body.page-redesign .select_text_green{
    padding:18px 16px 16px 48px!important;
  }
  body.page-redesign .select_text_green::before{
    left:14px;top:18px;
    width:22px;height:22px;
    font-size:12px;line-height:22px;
  }
}

/* ════════════════════════════════════════════════════════════
   NAV DRAWER (off-canvas бургер-меню, выезжает СПРАВА)
   Появляется по клику на .menu-btn. Единый инстанс #mobileMenu
   рендерится в header.php на всех страницах.
   Класс .nav-drawer (НЕ .m-drawer — то имя занято фильтр-drawer'ом
   каталога). Анимация переиспользует тайминг каталожного drawer'а
   (.6s cubic-bezier(.4,0,.2,1)), но зеркально — панель из правого края.
   ════════════════════════════════════════════════════════════ */
body.page-redesign .nav-drawer{
  position:fixed;inset:0;z-index:2000;
  overflow:hidden; /* клипаем панель, уехавшую за правый край (translateX(100%)) → нет горизонт. скролла */
  /* НЕ фейдим контейнер: иначе на открытии панель полупрозрачна пока едет и слайд
     читается как fade. Видимость гасим через visibility с отложенным скрытием,
     чтобы анимация закрытия успевала проиграть. Затемнение даёт оверлей, слайд — панель. */
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .6s;
}
body.page-redesign .nav-drawer[hidden]{display:none}
body.page-redesign .nav-drawer.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}

body.page-redesign .nav-drawer__overlay{
  position:absolute;inset:0;
  background:rgba(0,30,80,.45);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;
  /* !important перебивает глобальный prefers-reduced-motion ресет (*{transition-duration:.01ms}) */
  transition:opacity .6s cubic-bezier(.4,0,.2,1)!important;
}
body.page-redesign .nav-drawer.is-open .nav-drawer__overlay{opacity:1}

body.page-redesign .nav-drawer__panel{
  position:absolute;top:0;right:0;
  height:100%;width:min(360px,86vw);
  background:#fff;
  box-shadow:-12px 0 44px rgba(0,30,80,.20);
  border-radius:18px 0 0 18px;
  display:flex;flex-direction:column;
  padding:18px 18px 22px;
  transform:translateX(100%);
  /* !important — тот же reduced-motion override, что и у каталожного .m-drawer-body */
  transition:transform .6s cubic-bezier(.4,0,.2,1)!important;
  /* Скроллится не панель целиком, а список разделов (.nav-drawer__nav) — иначе
     раскрытый аккордеон уводил «Избранное / Корзина / Кабинет» вниз за экран.
     Собственный скролл оставлен как запасной: на низких экранах (320×568) зона
     разделов упирается в свой min-height, и тогда листается уже вся панель —
     иначе нижние ссылки просто обрезались бы. */
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  will-change:transform;
}
body.page-redesign .nav-drawer.is-open .nav-drawer__panel{transform:translateX(0)}

body.page-redesign .nav-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-shrink:0;
}
body.page-redesign .nav-drawer__logo img{height:28px;width:auto}
body.page-redesign .nav-drawer__close{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);background:transparent;border:none;cursor:pointer;
  transition:background .2s ease;
}
@media (hover:hover) and (pointer:fine){
  body.page-redesign .nav-drawer__close:hover{background:#f0f4ff}
}
body.page-redesign .nav-drawer__close:active{background:#f0f4ff}
body.page-redesign .nav-drawer__close svg{width:22px;height:22px}

body.page-redesign .nav-drawer__search{
  display:flex;align-items:center;gap:6px;
  height:46px;flex-shrink:0;
  border:1px solid #CAD5F0;border-radius:24px;
  padding:0 6px 0 18px;margin-bottom:18px;
}
body.page-redesign .nav-drawer__search input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font:400 14px 'Montserrat',sans-serif;color:var(--text);
}
body.page-redesign .nav-drawer__search button{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;
  background:var(--blue);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
@media (hover:hover) and (pointer:fine){
  body.page-redesign .nav-drawer__search button:hover{background:#004fa6}
}
body.page-redesign .nav-drawer__search button:active{background:#004fa6}
body.page-redesign .nav-drawer__search button svg{width:18px;height:18px}

/* Зона прокрутки: раскрытый список подразделов листается внутри неё, а шапка,
   поиск и нижние ссылки стоят на месте. min-height:0 обязателен — без него
   flex-элемент не даёт себя сжать и панель снова начинает расти вниз.
   Подсказку о прокрутке вешает footer.php (общий setup, что и у фильтров). */
body.page-redesign .nav-drawer__nav{
  display:flex;flex-direction:column;gap:2px;
  /* 200px — ровно четыре свёрнутых раздела. Ниже опускать нельзя: пропадёт
     сам список; выше — на экране 360×640 нижние ссылки перестают помещаться. */
  flex:1 1 auto;min-height:200px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* место под градиент подсказки, чтобы последний пункт не оказывался под ним */
  padding-bottom:6px;
}
body.page-redesign .nav-drawer__nav a{
  font:500 16px 'Montserrat',sans-serif;color:var(--text);
  padding:13px 14px;border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .22s ease,color .22s ease;
}
body.page-redesign .nav-drawer__nav a::after{
  content:'';width:7px;height:7px;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);opacity:.3;
}
/* Подсветка по наведению — только там, где есть чем наводить. На тач-экране :hover
   срабатывает от тапа и ЗАЛИПАЕТ до следующего касания: пункт остаётся синим, будто
   выбран, и это единственная реакция, которую видит палец. Нажатие показываем :active. */
@media (hover:hover) and (pointer:fine){
  body.page-redesign .nav-drawer__nav a:hover{background:#f0f4ff;color:var(--blue)}
}
body.page-redesign .nav-drawer__nav a:active{background:#f0f4ff;color:var(--blue)}

body.page-redesign .nav-drawer__links{
  display:flex;flex-direction:column;gap:2px;
  margin-top:auto;padding-top:14px;flex-shrink:0;
}
body.page-redesign .nav-drawer__sep{height:1px;background:var(--border);margin:12px 4px}
body.page-redesign .nav-drawer__links a{
  display:flex;align-items:center;gap:12px;
  font:400 15px 'Montserrat',sans-serif;color:var(--gray);
  padding:11px 14px;border-radius:10px;
  transition:background .2s ease,color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  body.page-redesign .nav-drawer__links a:hover{background:#f7f9fd;color:var(--blue)}
}
body.page-redesign .nav-drawer__links a:active{background:#f7f9fd;color:var(--blue)}
body.page-redesign .nav-drawer__links a img{width:20px;height:20px;opacity:.7;flex-shrink:0}

body.menu-open{overflow:hidden}

/* Бургер во внутреннем хедере: хедер теперь БЕЛЫЙ (правка №69), поэтому бургер
   оставляем в родном тёмном цвете menu-lines.svg (#475886) — как на главной,
   а не перекрашиваем в белый (иначе белый на белом = невидим). */
body.page-redesign .site-header--inverted .menu-btn img{
  filter:none!important;
}

/* ════════════════════════════════════════════════════════════
   КОРЗИНА /basket/ (bitrix:sale.basket.basket, шаблон basket)
   Стилизуем существующую table-разметку + checkout-блок под редизайн.
   Классы basket-* уникальны для корзины → доп-скоупинг не нужен.
   ════════════════════════════════════════════════════════════ */

/* ── Зелёная рамка: общий контейнер корзины (#basket-root.bx-basket) оформляем
   как панель статичных страниц (белый «лист» с рамкой/тенью/скруглением). ── */
body.page-redesign .bx-basket{
  background:#fff!important;
  border:1px solid #E5EAF5!important;
  border-radius:24px!important;
  box-shadow:0 4px 24px rgba(0,30,80,.05)!important;
  padding:clamp(16px,2.2vw,28px)!important;
  margin:0 0 40px!important;
}
/* сокращаем «воздух» между заголовком «Корзина» и блоком корзины */
body.page-redesign:has(.bx-basket) .title_box h1{margin-bottom:12px!important}
/* bootstrap .row внутри рамки имеет negative margins + col-12 padding — обнуляем,
   чтобы контент прилёг к паддингу рамки. */
body.page-redesign .bx-basket > .row{margin-left:0!important;margin-right:0!important}
body.page-redesign .bx-basket > .row > .col-12{padding-left:0!important;padding-right:0!important}

/* Внутренний «поиск по корзине» — лишний, прячем. Счётчик «В корзине N товара» оставляем. */
body.page-redesign .basket-items-search-field{display:none!important}

/* Верхний бар списка — счётчик «В корзине N товара» слева (с отступом рамки) */
body.page-redesign .basket-items-list-header{
  display:flex!important;justify-content:flex-start!important;align-items:center!important;
  padding:2px 0 16px!important;margin:0!important;
  border:0!important;background:transparent!important;
}
body.page-redesign .basket-items-list-header-filter{display:flex!important;gap:0!important}
body.page-redesign .basket-items-list-header-filter-item{
  font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:600!important;color:var(--text)!important;
  text-decoration:none!important;
}

/* Внешние легаси-обёртки списка: убираем бордюр/фон и фикс-высоту (JS вешает
   inline height + класс -height-fixed → пустой провал под товарами). Карточки
   строк теперь сами в рамках. height:auto!important перебивает inline-стиль. */
body.page-redesign .basket-items-list-wrapper,
body.page-redesign .basket-items-list-wrapper-compact,
body.page-redesign .basket-items-list{
  border:0!important;margin:0!important;background:transparent!important;
  height:auto!important;min-height:0!important;overflow:visible!important;
}
/* wrapper — позиционирующий предок для scroll-hint */
body.page-redesign .basket-items-list-wrapper{position:relative!important}
/* СИНИЙ скролл-блок: контейнер списка вмещает до 3 товаров (max-height ставит JS),
   при 4+ — скролл + подсказка. */
body.page-redesign .basket-items-list-container{
  border:0!important;background:transparent!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  padding-right:4px!important;
  scrollbar-width:thin;scrollbar-color:rgba(0,30,80,.22) transparent;
}
body.page-redesign .basket-items-list-container::-webkit-scrollbar{width:6px}
body.page-redesign .basket-items-list-container::-webkit-scrollbar-thumb{background:rgba(0,30,80,.22);border-radius:3px}
body.page-redesign .basket-items-list-container::-webkit-scrollbar-track{background:transparent}

/* Подсказка «прокрутите» — у нижнего края списка (паттерн как у qv/реквизитов) */
body.page-redesign .basket-scroll-hint{
  position:absolute;left:0;right:6px;bottom:0;height:72px;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 60%,#fff 100%);
  border-radius:0 0 16px 16px;pointer-events:none;z-index:6;
  opacity:0;transition:opacity .3s ease;
}
body.page-redesign .basket-scroll-hint.is-show{opacity:1}
/* Верхняя кромка-затухание (top ставит JS = верх скролл-контейнера) — без шеврона */
body.page-redesign .basket-scroll-hint--top{
  position:absolute;left:0;right:6px;height:52px;
  background:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 60%,#fff 100%);
  pointer-events:none;z-index:6;opacity:0;transition:opacity .3s ease;
}
body.page-redesign .basket-scroll-hint--top.is-show{opacity:1}
body.page-redesign .basket-scroll-hint::after{
  content:'';position:absolute;left:50%;bottom:14px;
  width:24px;height:13px;margin-left:-12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='%230059B9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 2 14 12 26 2'/></svg>") center/contain no-repeat;
  opacity:.75;animation:qv-chevron 1.6s ease-in-out infinite;
}

/* Таблица → блочная сетка строк-карточек */
body.page-redesign .basket-items-list-table,
body.page-redesign .basket-items-list-table > tbody{
  display:block!important;width:100%!important;border:0!important;
  background:transparent!important;border-collapse:collapse!important;
}
/* Строка = flex. ВАЖНО: легаси-шаблон вешает на ячейки order (descriptions:1,
   amount:3, price:4), а у remove order не задан (=0) → перебиваем order на всех
   ячейках явно, иначе remove уезжает в начало. */
body.page-redesign .basket-items-list-item-container{
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;
  gap:clamp(10px,1.4vw,20px)!important;
  padding:18px clamp(14px,2vw,24px)!important;
  background:#fff!important;
  border:1px solid #CAD5F0!important;
  border-radius:16px!important;
  margin-bottom:12px!important;position:relative!important;
  transition:box-shadow .25s ease,border-color .25s ease;
}
body.page-redesign .basket-items-list-item-container:hover{
  border-color:rgba(0,89,185,.32)!important;
  box-shadow:0 6px 20px rgba(0,30,80,.07)!important;
}
/* Сброс td → flex-ячейки (убираем легаси float/width/order) */
body.page-redesign .basket-items-list-item-container > td{
  display:flex!important;align-items:center!important;
  padding:0!important;border:0!important;float:none!important;
  width:auto!important;min-width:0!important;vertical-align:middle!important;
  background:transparent!important;position:static!important;
}
body.page-redesign .basket-items-list-item-descriptions{order:1!important;flex:1 1 auto!important;min-width:0!important}
/* Ячейка описания — relative-контейнер для overlap (фото поверх рамки) */
body.page-redesign .basket-items-list-item-container > td.basket-items-list-item-descriptions{
  background:transparent!important;border:0!important;padding:0!important;position:relative!important;
}
body.page-redesign .basket-items-list-item-price-for-one{order:2!important;flex:0 0 112px!important;justify-content:flex-end!important;text-align:right!important}
body.page-redesign .basket-items-list-item-amount{order:3!important;flex:0 0 140px!important;justify-content:center!important}
body.page-redesign .basket-items-list-item-price:not(.basket-items-list-item-price-for-one){order:4!important;flex:0 0 112px!important;justify-content:flex-end!important;text-align:right!important}
body.page-redesign .basket-items-list-item-remove{order:5!important;flex:0 0 44px!important;justify-content:flex-end!important}
/* Название-рамка «растёт» из-под фото вправо (паттерн dp-section: бейдж сверху, тело из-под него).
   Нейтральный фон + рамка; padding-left освобождает место под фото-оверлей. */
body.page-redesign .basket-item-block-info{
  flex:1 1 auto!important;min-width:0!important;
  position:relative!important;z-index:1!important;
  background:#F5F7FA!important;border:1px solid #E5EAF5!important;border-radius:14px!important;
  padding:16px 22px 16px 104px!important;
  min-height:96px!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;
}

/* Описание: контейнер для overlay фото */
body.page-redesign .basket-items-list-item-descriptions-inner{
  display:block!important;position:relative!important;
}
/* Фото — абсолютом поверх левого края рамки, на ВСЮ высоту рамки (top:0/bottom:0),
   квадрат через aspect-ratio → подгоняется под высоту блока названия. */
body.page-redesign .basket-item-image-link{
  position:absolute!important;left:0!important;top:0!important;bottom:0!important;
  aspect-ratio:1!important;
  z-index:2!important;
  display:flex!important;
  padding:0!important;margin:0!important;
}
body.page-redesign .basket-item-block-image{
  width:100%!important;height:100%!important;flex-shrink:0!important;
  border:1px solid var(--border)!important;border-radius:12px!important;
  background:#fff!important;overflow:hidden!important;
  box-shadow:0 4px 14px rgba(0,30,80,.08)!important; /* приподнятость — «бейдж», поверх рамки */
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:6px!important;
}
body.page-redesign .basket-item-image{
  max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;
  object-fit:contain!important;mix-blend-mode:multiply;
}
body.page-redesign .basket-item-info-name{margin:0!important}
body.page-redesign .basket-item-info-name-link,
body.page-redesign .basket-item-info-name-link span{
  font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:500!important;line-height:1.35!important;
  color:var(--text)!important;text-decoration:none!important;text-transform:none!important;
  transition:color .2s ease;
}
body.page-redesign .basket-item-info-name-link:hover span{color:var(--blue)!important}
/* Название — максимум 2 строки с «…» (и на десктопе): держит высоту рамки стабильной,
   чтобы квадрат фото точно совпадал с высотой блока названия. */
body.page-redesign .basket-item-info-name-link span{
  display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;
}
/* Дублирующий «×» в блоке инфо прячем — удаление есть в своей колонке */
body.page-redesign .basket-item-block-info > .basket-item-actions-remove{display:none!important}

/* Цены */
body.page-redesign .basket-item-block-price,
body.page-redesign .basket-item-price-current{
  font-family:'Montserrat',sans-serif!important;
  font-size:17px!important;font-weight:600!important;color:var(--text)!important;
  white-space:nowrap!important;
}
body.page-redesign .basket-items-list-item-price-for-one .basket-item-price-current-text{
  font-size:15px!important;font-weight:500!important;color:#5a6480!important;
}
/* Сумма по товару — pill в стиле НЕактивной крошки (белый фон + синяя рамка + скругление),
   но синим текстом. Сохраняем «ценовую» семантику (₽ внутри). */
body.page-redesign .basket-items-list-item-price:not(.basket-items-list-item-price-for-one) .basket-item-price-current-text{
  display:inline-block!important;
  background:#fff!important;
  border:1px solid rgba(0,89,185,.28)!important;
  border-radius:999px!important;
  padding:8px 18px!important;
  color:var(--blue)!important;font-weight:600!important;font-size:16px!important;
  white-space:nowrap!important;
}
/* «цена за 1 шт» — легаси кладёт её position:absolute поверх цены; ставим в поток под цену */
body.page-redesign .basket-item-price-title{
  position:static!important;
  font-family:'Montserrat',sans-serif!important;
  font-size:11px!important;color:#9aa3b8!important;font-weight:400!important;
  text-align:right!important;margin-top:2px!important;
}
body.page-redesign .basket-items-list-item-price-for-one .basket-item-block-price{text-align:right!important}

/* Степпер количества — pill с круглыми кнопками */
body.page-redesign .basket-item-block-amount{
  display:flex!important;align-items:center!important;gap:0!important;
  border:1px solid #CAD5F0!important;border-radius:999px!important;
  background:#fff!important;padding:3px!important;
}
body.page-redesign .basket-item-amount-btn-minus,
body.page-redesign .basket-item-amount-btn-plus{
  width:30px!important;height:30px!important;flex-shrink:0!important;
  border-radius:50%!important;background:#F2F6FD!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  position:relative!important;cursor:pointer!important;border:0!important;
  transition:background .2s ease!important;
}
body.page-redesign .basket-item-amount-btn-minus:hover,
body.page-redesign .basket-item-amount-btn-plus:hover{background:var(--blue)!important}
/* Глифы +/- легаси уже отцентрованы (минус = :after, плюс = :before+:after) —
   только перекрашиваем в синий, на hover (синяя кнопка) → белый. */
body.page-redesign .basket-item-amount-btn-minus:after,
body.page-redesign .basket-item-amount-btn-plus:before,
body.page-redesign .basket-item-amount-btn-plus:after{background-color:var(--blue)!important}
body.page-redesign .basket-item-amount-btn-minus:hover:after,
body.page-redesign .basket-item-amount-btn-plus:hover:before,
body.page-redesign .basket-item-amount-btn-plus:hover:after{background-color:#fff!important}
body.page-redesign .basket-item-amount-filed-block{margin:0!important;padding:0!important;border:0!important;background:transparent!important}
body.page-redesign .basket-item-amount-filed{
  width:38px!important;border:0!important;background:transparent!important;
  text-align:center!important;font-family:'Montserrat',sans-serif!important;
  font-size:15px!important;font-weight:600!important;color:var(--text)!important;
  -moz-appearance:textfield!important;
}
body.page-redesign .basket-item-amount-field-description{display:none!important}

/* Удаление: дубль в блоке info прячем — оставляем × в своей колонке */
body.page-redesign .basket-item-block-info .basket-item-actions-remove{display:none!important}
/* Легаси держит actions opacity:0 и проявляет на hover строки — показываем всегда */
body.page-redesign .basket-item-block-actions{opacity:1!important}
/* Кнопка × в колонке remove. Легаси уже рисует × через :before/:after (отцентрованы,
   rotate ±45°) — НЕ добавляем свои, только оформляем контейнер и перекрашиваем глифы. */
/* Кнопка удаления — иконка корзины (trash) вместо ×, красноватый кружок (семантика удаления). */
body.page-redesign .basket-items-list-item-remove .basket-item-actions-remove{
  display:inline-block!important;
  width:36px!important;height:36px!important;border-radius:50%!important;
  background-color:#FFECEC!important;border:1px solid #ffc4c4!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e05656' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/></svg>")!important;
  background-position:center!important;background-size:18px!important;background-repeat:no-repeat!important;
  position:relative!important;cursor:pointer!important;
  transition:background-color .2s ease,border-color .2s ease!important;
}
body.page-redesign .basket-items-list-item-remove .basket-item-actions-remove:hover{background-color:#ffdada!important;border-color:#f29c9c!important}
/* убираем легаси/наши ×-глифы */
body.page-redesign .basket-items-list-item-remove .basket-item-actions-remove:before,
body.page-redesign .basket-items-list-item-remove .basket-item-actions-remove:after{content:none!important;display:none!important}

/* ── Удалённый товар (состояние «был удалён + Восстановить») ──
   Строка получает класс -expend и ОДИН td.notification[colspan=5] вместо product-cell'ов.
   Наша grid/flex-раскладка карточки ломает его в узкую колонку — сбрасываем в блок на всю ширину. */
body.page-redesign .basket-items-list-item-container.basket-items-list-item-container-expend{
  display:block!important;
  background:#F8FAFD!important;border:1px dashed #CAD5F0!important;border-radius:16px!important;
  padding:0!important;margin-bottom:12px!important;
}
body.page-redesign .basket-items-list-item-container-expend > td.basket-items-list-item-notification{
  display:block!important;width:100%!important;padding:0!important;border:0!important;
}
/* height-aligner: Bitrix ставит min-height для анимации схлопывания при delete/restore.
   НЕ форсим min-height (даём Bitrix управлять), только transition (с !important — переживает reduced-motion). */
body.page-redesign .basket-items-list-item-notification-inner{
  height:auto!important;
  transition:min-height .35s cubic-bezier(.4,0,.2,1)!important;
}
body.page-redesign .basket-items-list-item-removed-container{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:14px!important;flex-wrap:wrap!important;
  padding:16px 20px!important;
  position:relative!important;overflow:hidden!important;
  /* появление removed-«шторки» — въезжает справа (slideIn), композитно (transform/opacity) */
  animation:basketRemovedIn .42s cubic-bezier(.22,.75,.25,1) both!important;
}
@keyframes basketRemovedIn{
  from{opacity:0;transform:translateX(64px)}
  to{opacity:1;transform:none}
}
/* RESTORE: шторка уезжает ВПРАВО (откуда пришла), затем Bitrix вернёт товар */
body.page-redesign .basket-items-list-item-container.is-restoring-out .basket-items-list-item-removed-container{
  opacity:0!important;transform:translateX(110%)!important;
  transition:transform .36s cubic-bezier(.4,0,.2,1),opacity .3s ease!important;
}
/* Возвращённый товар — въезжает (slideTo), композитно */
body.page-redesign .basket-items-list-item-container.is-restoring{
  animation:basketRestoreIn .42s cubic-bezier(.22,.75,.25,1) both!important;
}
@keyframes basketRestoreIn{
  from{opacity:0;transform:translateX(48px)}
  to{opacity:1;transform:none}
}
body.page-redesign .basket-items-list-item-removed-container > div:first-child{
  flex:1 1 200px!important;min-width:0!important;
  font-family:'Montserrat',sans-serif!important;font-size:14px!important;line-height:1.45!important;color:#8a93a8!important;
}
body.page-redesign .basket-items-list-item-removed-container > div:first-child strong{color:#5a6480!important;font-weight:600!important}
/* кнопки removed-блока — поверх ghost-оверлея Bitrix (z-index:100), чтобы были кликабельны и в полном цвете */
body.page-redesign .basket-items-list-item-removed-block{flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:10px!important;position:relative!important;z-index:101!important}
/* «Восстановить» — заметная синяя кнопка-pill */
body.page-redesign .basket-items-list-item-removed-block a[data-entity="basket-item-restore-button"],
body.page-redesign .basket-items-list-item-removed-anchor{
  display:inline-flex!important;align-items:center!important;
  padding:9px 20px!important;border-radius:999px!important;
  background:var(--blue)!important;color:#fff!important;
  font-family:'Montserrat',sans-serif!important;font-size:14px!important;font-weight:600!important;
  text-decoration:none!important;white-space:nowrap!important;cursor:pointer!important;
  box-shadow:0 4px 12px rgba(0,89,185,.2)!important;
  transition:filter .2s ease,transform .2s ease!important;
}
body.page-redesign .basket-items-list-item-removed-block a[data-entity="basket-item-restore-button"]:hover{filter:brightness(1.08)!important;transform:translateY(-1px)!important;text-decoration:none!important}
/* × (удалить насовсем) — красная trash-иконка в красноватом кружке (как основная кнопка удаления) */
body.page-redesign .basket-items-list-item-clear-btn{
  width:36px!important;height:36px!important;border-radius:50%!important;flex-shrink:0!important;
  background-color:#FFECEC!important;border:1px solid #ffc4c4!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e05656' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/></svg>")!important;
  background-position:center!important;background-size:18px!important;background-repeat:no-repeat!important;
  position:relative!important;cursor:pointer!important;display:inline-block!important;
  transition:background-color .2s ease,border-color .2s ease!important;
}
body.page-redesign .basket-items-list-item-clear-btn:hover{background-color:#ffdada!important;border-color:#f29c9c!important}
body.page-redesign .basket-items-list-item-clear-btn:before,
body.page-redesign .basket-items-list-item-clear-btn:after{content:none!important;display:none!important}

/* Прогресс-бар окна восстановления (6с). Transition в CSS с !important — переживает reduced-motion.
   JS добавляет .is-running после вставки → ширина анимируется 100%→0 за 6с. */
body.page-redesign .basket-removed-progress{
  position:absolute!important;left:0!important;bottom:0!important;height:3px!important;
  width:100%!important;background:var(--blue)!important;opacity:.55!important;
  border-radius:0 3px 0 0!important;
  transition:width 12s linear!important; /* синхронно с WAIT в basket/index.php */
}
body.page-redesign .basket-removed-progress.is-running{width:0%!important}

/* Окончательное схлопывание строки (close/таймаут): JS ставит inline max-height = текущая,
   потом класс .is-collapsing → анимация в 0. */
/* FINAL (удалить/таймаут): шторка уезжает ВЛЕВО за край скролл-зоны, затем строка
   схлопывается по высоте (max-height с задержкой = после слайда). */
body.page-redesign .basket-items-list-item-container.is-collapsing{
  overflow:hidden!important;
  max-height:0!important;margin-top:0!important;margin-bottom:0!important;border-width:0!important;
  transition:max-height .34s cubic-bezier(.4,0,.2,1) .34s,margin .34s ease .34s,border-width .34s ease .34s!important;
}
body.page-redesign .basket-items-list-item-container.is-collapsing .basket-items-list-item-removed-container{
  transform:translateX(-110%)!important;opacity:0!important;
  transition:transform .36s cubic-bezier(.4,0,.2,1),opacity .3s ease!important;
}

/* Loading-состояние кнопки «Оформить заказ» — спиннер при переходе к оформлению */
body.page-redesign .basket-btn-checkout.is-loading,
body.page-redesign .basket-checkout-block-btn .btn-green-gradient.is-loading{
  pointer-events:none!important;position:relative!important;color:transparent!important;
}
body.page-redesign .basket-btn-checkout.is-loading *{color:transparent!important}
body.page-redesign .basket-btn-checkout.is-loading::after,
body.page-redesign .basket-checkout-block-btn .btn-green-gradient.is-loading::after{
  content:''!important;position:absolute!important;left:50%!important;top:50%!important;
  width:22px!important;height:22px!important;margin:-11px 0 0 -11px!important;
  border:2px solid rgba(255,255,255,.45)!important;border-top-color:#fff!important;border-radius:50%!important;
  animation:basketSpin .7s linear infinite!important;
}
@keyframes basketSpin{to{transform:rotate(360deg)}}

/* ── Блок оформления (купон + итог + кнопка) ── */
body.page-redesign .basket-checkout-container{
  display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;
  gap:16px!important;justify-content:space-between!important;
  margin:8px 0 32px!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
}
/* sticky-вариант при скролле — не мешаем, просто прячем легаси-фон */
body.page-redesign .basket-checkout-container.basket-checkout-container-fixed{display:none!important}

/* Купон */
body.page-redesign .basket-coupon-section{
  flex:1 1 320px!important;
  background:#F8FAFD!important;border:1px solid #E5EAF5!important;border-radius:18px!important;
  padding:clamp(20px,2.4vw,30px)!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;
}
/* легаси даёт .basket-coupon-block-field flex:1 → растягивает поле на всю высоту
   блока, контент липнет к верху и justify-content:center секции не работает. */
body.page-redesign .basket-coupon-section .basket-coupon-block-field{flex:0 0 auto!important;min-width:0!important;padding:0!important}
body.page-redesign .basket-coupon-block-field-description{
  font-family:'Montserrat',sans-serif!important;font-size:14px!important;font-weight:500!important;color:#454e6a!important;margin-bottom:14px!important;
}
body.page-redesign .basket-coupon-section .form{width:100%!important}
body.page-redesign .basket-coupon-section .form-group{display:flex!important;align-items:center!important;gap:14px!important;margin:0!important;position:static!important}
body.page-redesign .basket-coupon-section .form-control{
  flex:1 1 auto!important;min-width:0!important;height:50px!important;border:1px solid #CAD5F0!important;border-radius:12px!important;
  padding:0 18px!important;font-family:'Montserrat',sans-serif!important;font-size:14px!important;color:var(--text)!important;
  background:#fff!important;box-shadow:none!important;
}
body.page-redesign .basket-coupon-section .form-control:focus{border-color:var(--blue)!important;outline:none!important}
/* Кнопка → : легаси держит её position:absolute(top/right/margin) — полностью сбрасываем,
   делаем нормальным flex-элементом, выровненным с инпутом по высоте. */
body.page-redesign .basket-coupon-block-coupon-btn{
  position:static!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;margin:0!important;
  flex-shrink:0!important;width:54px!important;height:50px!important;padding:0!important;border-radius:12px!important;
  background:var(--blue)!important;color:#fff!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;border:0!important;
  transform:none!important;font-size:0!important;
  transition:background .2s ease!important;
}
body.page-redesign .basket-coupon-block-coupon-btn:hover{background:#004fa6!important}
/* стрелка → внутри кнопки (сам span пустой) */
body.page-redesign .basket-coupon-block-coupon-btn:before,
body.page-redesign .basket-coupon-block-coupon-btn:after{content:none!important;border:0!important;background:none!important;transform:none!important}
body.page-redesign .basket-coupon-block-coupon-btn:after{
  content:''!important;display:block!important;
  width:9px!important;height:9px!important;
  border-right:2px solid #fff!important;border-top:2px solid #fff!important;
  transform:rotate(45deg)!important;margin-left:-3px!important;
}

/* Итог — светлый фон как у блока промокода, синий текст, сумма в pill */
body.page-redesign .basket-checkout-section{
  flex:1 1 320px!important;
  background:#F8FAFD!important;border:1px solid #E5EAF5!important;border-radius:16px!important;
  padding:clamp(18px,2vw,26px)!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;
}
body.page-redesign .basket-checkout-section-inner{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;flex-wrap:wrap!important}
body.page-redesign .basket-checkout-block-total-title{
  font-family:'Montserrat',sans-serif!important;font-size:18px!important;font-weight:600!important;color:var(--blue)!important;
}
/* Сумма — gradient-pill (как активная крошка), белый текст */
body.page-redesign .basket-coupon-block-total-price-current{
  display:inline-block!important;
  background:var(--grad-blue)!important;background-clip:padding-box!important;
  font-family:'Montserrat',sans-serif!important;font-size:clamp(20px,2.2vw,26px)!important;font-weight:700!important;
  color:#fff!important;white-space:nowrap!important;
  padding:8px 22px!important;border-radius:999px!important;
  box-shadow:0 3px 12px rgba(0,30,80,.18)!important;
}

/* Кнопка «Оформить заказ» — наша gradient-blue pill, перебивает .btn-green-gradient */
body.page-redesign .basket-checkout-block-btn{flex:1 1 100%!important;margin-top:4px!important}
body.page-redesign .basket-btn-checkout,
body.page-redesign .basket-checkout-block-btn .btn-green-gradient{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;height:56px!important;
  background:var(--grad-blue)!important;
  border:0!important;border-radius:14px!important;
  font-family:'Montserrat',sans-serif!important;font-size:16px!important;font-weight:600!important;color:#fff!important;
  cursor:pointer!important;box-shadow:0 6px 18px rgba(0,89,185,.22)!important;
  transition:filter .25s ease,transform .25s ease,box-shadow .25s ease!important;
  text-transform:none!important;
}
body.page-redesign .basket-btn-checkout *{color:#fff!important;text-transform:none!important}
body.page-redesign .basket-btn-checkout:hover,
body.page-redesign .basket-checkout-block-btn .btn-green-gradient:hover{
  filter:brightness(1.07)!important;transform:translateY(-2px)!important;box-shadow:0 10px 26px rgba(0,89,185,.3)!important;
}

/* ── ДЕСКТОП и широкие (>820px = шире iPad Air в портрете): грид-компоновка ──
   Купон слева (на всю высоту), справа единый блок «Итого» + кнопка «Оформить».
   grid-template-areas визуально группирует кнопку (отдельный DOM-сосед) под Итого. */
@media(min-width:821px){
  body.page-redesign .basket-checkout-container{
    display:grid!important;
    grid-template-columns:minmax(0,1.55fr) minmax(380px,1fr)!important;
    grid-template-areas:"coupon total" "coupon btn"!important;
    grid-template-rows:1fr auto!important;
    gap:0 22px!important;
    margin:20px 0 0!important;padding:0!important;align-items:stretch!important;
  }
  body.page-redesign .basket-coupon-section{grid-area:coupon!important;flex:none!important;margin:0!important}
  /* Итого — верх правого блока (скругление только сверху, низ без бордюра → стык с кнопкой) */
  body.page-redesign .basket-checkout-section{
    grid-area:total!important;flex:none!important;margin:0!important;
    border-radius:18px 18px 0 0!important;border-bottom:0!important;
  }
  /* Кнопка — низ правого блока, приклеена к Итого (скругление снизу) → один блок.
     ВАЖНО: у обёртки .basket-checkout-block-btn легаси padding-left:15px → кнопка
     width:100% уже на 15px и сдвинута вправо, слева светится фон («надкус»). Обнуляем. */
  body.page-redesign .basket-checkout-block-btn{grid-area:btn!important;flex:none!important;margin:0!important;width:auto!important;padding:0!important}
  body.page-redesign .basket-checkout-block-btn .basket-btn-checkout,
  body.page-redesign .basket-checkout-block-btn .btn-green-gradient{
    border-radius:0 0 18px 18px!important;height:62px!important;box-shadow:none!important;
    width:100%!important;margin:0!important;padding:0!important;
  }
}

/* ── Планшет/мобайл (≤820): блок оформления в стек ──
   ВАЖНО: легаси при ≤991 делает контейнер колонкой; в колонке flex-basis (320px)
   становится ВЫСОТОЙ → гигантские блоки. Сбрасываем рост → высота по контенту. */
@media(max-width:820px){
  body.page-redesign .basket-checkout-container{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important}
  body.page-redesign .basket-coupon-section,
  body.page-redesign .basket-checkout-section,
  body.page-redesign .basket-checkout-block-btn{flex:0 0 auto!important;width:100%!important}
  body.page-redesign .basket-checkout-section{padding:18px 20px!important;border-radius:16px!important}
  body.page-redesign .basket-checkout-block-btn .basket-btn-checkout,
  body.page-redesign .basket-checkout-block-btn .btn-green-gradient{border-radius:14px!important;height:56px!important}
  /* «Итого:» и сумма-pill — в одну строку (без переноса), по центру по вертикали.
     Дочерние блоки ужимаем до контента (flex:0 0 auto), иначе блок цены раздувается
     и вылезает за вьюпорт → горизонтальный скролл. */
  body.page-redesign .basket-checkout-section-inner{display:flex!important;width:100%!important;flex-wrap:nowrap!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;min-width:0!important}
  body.page-redesign .basket-checkout-section-inner .basket-checkout-block-total,
  body.page-redesign .basket-checkout-section-inner .basket-checkout-block-total-price{flex:0 0 auto!important;width:auto!important;min-width:0!important;padding:0!important;margin:0!important}
  body.page-redesign .basket-coupon-block-field{min-width:0!important;padding:0!important}
  body.page-redesign .basket-coupon-section .form-group{display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;width:100%!important}
  body.page-redesign .basket-coupon-section .form-control{flex:1 1 auto!important;width:auto!important;display:block!important;min-width:0!important}
}

/* ── Планшет/мобайл (≤820, до iPad Air портрет включительно): компактная карточка на гриде ──
   Строка 1: фото+название (на всю ширину, × в правом верхнем углу).
   Строка 2: цена за шт (слева) | степпер (центр) | сумма (справа), всё по центру по верт.
   ВАЖНО: брейкпоинт 820 совпадает с чекаутом — иначе в 769–820 карточки остаются
   десктоп-строкой и название ломается по буквам. */
@media(max-width:820px){
  body.page-redesign .basket-items-list-item-container{
    display:grid!important;
    grid-template-columns:1fr auto 1fr!important;
    grid-template-areas:"desc desc desc" "price amount sum"!important;
    align-items:center!important;
    gap:12px!important;padding:14px!important;position:relative!important;
  }
  /* фото + название */
  body.page-redesign .basket-items-list-item-descriptions{grid-area:desc!important;width:auto!important;padding-right:30px!important}
  body.page-redesign .basket-items-list-item-descriptions-inner{flex-direction:row!important;align-items:center!important;gap:12px!important}
  /* Фото на мобиле — фикс-квадрат 64, по центру по вертикали (не на всю высоту рамки) */
  body.page-redesign .basket-item-image-link{
    position:absolute!important;left:8px!important;top:50%!important;bottom:auto!important;
    transform:translateY(-50%)!important;width:auto!important;height:auto!important;aspect-ratio:auto!important;
  }
  body.page-redesign .basket-item-block-image{width:64px!important;height:64px!important}
  body.page-redesign .basket-item-info-name-link,
  body.page-redesign .basket-item-info-name-link span{font-size:14px!important;line-height:1.35!important}
  /* название — максимум 2 строки с многоточием */
  body.page-redesign .basket-item-info-name-link span{
    display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;
  }
  /* цена за шт — слева, 2-строчный блок (число + подпись) целиком по центру строки
     (вровень по центру со степпером и суммой). */
  body.page-redesign .basket-items-list-item-price-for-one{grid-area:price!important;width:auto!important;align-self:center!important;justify-self:start!important;justify-content:flex-start!important;align-items:center!important;text-align:left!important}
  body.page-redesign .basket-items-list-item-price-for-one .basket-item-block-price{text-align:left!important;align-items:flex-start!important;position:static!important}
  body.page-redesign .basket-items-list-item-price-for-one .basket-item-price-title{position:static!important;text-align:left!important;margin-top:1px!important;white-space:nowrap!important}
  /* количество — центр; степпер компактнее на мобиле */
  body.page-redesign .basket-items-list-item-amount{grid-area:amount!important;width:auto!important;justify-self:center!important;justify-content:center!important}
  body.page-redesign .basket-item-amount-btn-minus,
  body.page-redesign .basket-item-amount-btn-plus{width:26px!important;height:26px!important}
  body.page-redesign .basket-item-amount-filed{width:28px!important;font-size:14px!important}
  /* цена за шт — компактнее */
  body.page-redesign .basket-items-list-item-price-for-one .basket-item-price-current-text{font-size:14px!important}
  body.page-redesign .basket-item-price-title{font-size:10px!important}
  /* сумма — справа, вертикально по центру строки; pill компактнее (помещается в узкую карточку) */
  body.page-redesign .basket-items-list-item-price:not(.basket-items-list-item-price-for-one){grid-area:sum!important;width:auto!important;justify-self:end!important;justify-content:flex-end!important;text-align:right!important}
  body.page-redesign .basket-items-list-item-price:not(.basket-items-list-item-price-for-one) .basket-item-price-current-text{padding:6px 12px!important;font-size:14px!important}
  /* уже зазоры строки 2 */
  body.page-redesign .basket-items-list-item-container{column-gap:8px!important}
  /* блок «цена за шт» и степпер — на пару пикселей ниже (тонкая доводка выравнивания со суммой).
     Селектор через > td.* специфичнее базового `container > td{position:static}`, иначе top:2px не применится. */
  body.page-redesign .basket-items-list-item-container > td.basket-items-list-item-price-for-one,
  body.page-redesign .basket-items-list-item-container > td.basket-items-list-item-amount{position:relative!important;top:3px!important}
  /* Рамка названия на мобиле: меньше отступ слева (фото 64 + ~12 → текст левее), место справа под кнопку */
  body.page-redesign .basket-item-block-info{min-height:80px!important;padding:14px 44px 14px 84px!important}
  /* Кнопка удаления — в правой части плашки названия, по центру по вертикали, чуть левее. */
  body.page-redesign .basket-items-list-item-container > td.basket-items-list-item-remove{
    position:absolute!important;top:14px!important;right:22px!important;left:auto!important;bottom:auto!important;
    height:80px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
    width:auto!important;padding:0!important;z-index:5!important;
  }
  /* без кружка, иконка крупнее */
  body.page-redesign .basket-items-list-item-remove .basket-item-actions-remove{
    background-color:transparent!important;border:0!important;
    width:30px!important;height:30px!important;background-size:24px!important;
  }
}

/* ════════════════════════════════════════════════════════════
   ADD-TO-CART: состояния .add-btn (карточки) + степпер количества
   в quick-view + кнопка пустой корзины
   ════════════════════════════════════════════════════════════ */

/* .add-btn — состояния добавления.
   Зелёного нет: пока идёт запрос, фон радиально перекрашивается из синего в белый,
   поверх рисуется синяя галочка, после чего кнопка остаётся инверсной — белый фон,
   синяя корзина. Это и есть признак «товар уже в корзине».
   Слои (.ab-fill/.ab-check) дорисовывает JS одним местом, чтобы не править
   четыре шаблона карточек. */
.add-btn{overflow:hidden}
.add-btn.is-loading{pointer-events:none}

/* Порядок слоёв задан явно: круг заливки добавляется в разметку ПОСЛЕ <img>,
   поэтому без z-index он перекрывал белую корзину и в синем состоянии кнопка
   оставалась пустой. Снизу вверх: круг → иконки → галочка. */
.add-btn .ab-fill{position:absolute;inset:0;display:block;pointer-events:none;z-index:0}
.add-btn img{position:relative;z-index:1}
.add-btn::after{z-index:1}
.add-btn .ab-check{z-index:2}
/* Круг заведомо больше диагонали кнопки (44px → 62px), растёт transform-ом.
   Через width/height в процентах браузер переход не отыгрывал — уходило рывком. */
.add-btn .ab-fill::before{
  content:'';position:absolute;left:50%;top:50%;
  width:64px;height:64px;border-radius:50%;background:var(--blue);
  transform:translate(-50%,-50%) scale(0);
}
/* Круг остаётся и после анимации: под ним фон кнопки уже синий, но если круг
   убрать, на кадр проступает бывший белый — то самое мигание. */
.add-btn.is-filling .ab-fill::before,
.add-btn.is-added .ab-fill::before{transform:translate(-50%,-50%) scale(1)}
/* Рост с перелётом: быстрый старт, проскок за край, мягкий возврат. */
.add-btn.is-filling .ab-fill::before{animation:abFill .46s cubic-bezier(.22,.75,.25,1)}
@keyframes abFill{
  0%  {transform:translate(-50%,-50%) scale(0)}
  70% {transform:translate(-50%,-50%) scale(1.12)}
  100%{transform:translate(-50%,-50%) scale(1)}
}

/* Сама кнопка коротко поджимается и упруго возвращается — тот же приём,
   что у сердечка избранного (favPop). */
.add-btn.is-filling{animation:abPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes abPop{
  0%  {transform:scale(1)}
  28% {transform:scale(.9)}
  58% {transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* Галочка рисуется штрихом и на пике чуть проскакивает размер — без этого
   прорисовка читается как «просто появилась». */
.add-btn .ab-check{
  position:absolute;left:50%;top:50%;width:25px;height:25px;
  transform:translate(-50%,-50%);
  fill:none;stroke:#fff;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;
  opacity:0;pointer-events:none;
  /* переход объявлен в базовом правиле, иначе галочка гасла рывком:
     при снятии класса вместе с ним пропадала и сама transition */
  transition:opacity .22s ease;
}
.add-btn.is-checking .ab-check{
  opacity:1;stroke-dashoffset:0;
  animation:abCheck .56s cubic-bezier(.3,.8,.3,1) both;
}
@keyframes abCheck{
  0%  {stroke-dashoffset:26;opacity:0;transform:translate(-50%,-50%) scale(.72)}
  18% {opacity:1}
  68% {stroke-dashoffset:0;transform:translate(-50%,-50%) scale(1.16)}
  100%{stroke-dashoffset:0;opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* Синяя корзина уходит, как только пошла заливка; белая въезжает с лёгким
   проскоком размера, а не просто проявляется. */
.add-btn.is-filling::after,
.add-btn.is-added::after{opacity:0}
.add-btn.is-added:not(.is-checking) img{
  opacity:1;
  animation:abIconIn .38s cubic-bezier(.34,1.56,.64,1);
}
@keyframes abIconIn{
  0%  {opacity:0;transform:scale(.55)}
  55% {opacity:1;transform:scale(1.14)}
  100%{opacity:1;transform:scale(1)}
}

/* Добавлено — синий фон без обводки. Фон меняем мгновенно: кнопку в этот момент
   закрывает синий круг заливки, подмена не видна, а с переходом .28s из базового
   правила успевал мелькнуть прежний белый. */
.add-btn.is-added,
.add-btn.is-added:hover{
  background:var(--blue)!important;
  box-shadow:none;
  transition:background 0s,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease;
}
.add-btn.is-added:hover{box-shadow:0 6px 16px rgba(0,30,80,.22)}
.add-btn.is-added{cursor:default}

/* Степпер количества в quick-view */
.qv-card .qv-qty{
  display:inline-flex;align-items:center;align-self:flex-start;
  border:1px solid #CAD5F0;border-radius:999px;background:#fff;padding:3px;
}
.qv-card .qv-qty-btn{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;border:0;
  background:#F2F6FD;color:var(--blue);
  font:600 18px/1 'Montserrat',sans-serif;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.qv-card .qv-qty-btn:hover{background:var(--blue);color:#fff}
.qv-card .qv-qty-input{
  width:46px;border:0;background:transparent;text-align:center;outline:none;
  font:600 15px/1 'Montserrat',sans-serif;color:var(--text);
  -moz-appearance:textfield;
}

/* Кнопка «Перейти в каталог» в пустой корзине — наша синяя pill (была легаси-зелёная) */
body.page-redesign .bx-sbb-empty-cart-container{text-align:center;padding:20px 0 40px}
body.page-redesign .bx-sbb-empty-cart-text{
  font-family:'Montserrat',sans-serif!important;color:#9aa3b8!important;
}
body.page-redesign .bx-sbb-empty-cart-container .btn-green-gradient{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  height:54px!important;padding:0 36px!important;border-radius:14px!important;
  background:var(--blue)!important;background-image:none!important;
  color:#fff!important;font-family:'Montserrat',sans-serif!important;font-size:16px!important;font-weight:600!important;
  box-shadow:0 6px 18px rgba(0,89,185,.22)!important;text-transform:none!important;
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease!important;
}
body.page-redesign .bx-sbb-empty-cart-container .btn-green-gradient span{color:#fff!important;text-transform:none!important}
body.page-redesign .bx-sbb-empty-cart-container .btn-green-gradient:hover{
  background:#004fa6!important;transform:translateY(-2px)!important;box-shadow:0 10px 26px rgba(0,89,185,.3)!important;
}


/* ═══════════════════════════════════════════════════════════════
   ЛИЧНЫЙ КАБИНЕТ — форма входа / регистрации / восстановления
   ═══════════════════════════════════════════════════════════════ */
body.page-redesign .lk-auth{
  display:flex;justify-content:center;
  padding:8px 0 60px;
}
body.page-redesign .lk-auth__card,
body.page-redesign .auth-box{
  width:100%;max-width:440px;
}
body.page-redesign .lk-auth__card{
  background:#fff;border:1px solid #E5EAF5;border-radius:24px;
  box-shadow:0 4px 24px rgba(0,30,80,.05);
  padding:clamp(24px,3vw,40px);
}
body.page-redesign .auth-box__title{
  font-family:'Montserrat',sans-serif!important;font-size:28px!important;font-weight:600!important;
  color:var(--text)!important;margin:0 0 6px!important;line-height:1.1!important;white-space:normal!important;
}
body.page-redesign .auth-box__sub{
  font-family:'Montserrat',sans-serif;font-size:14px;color:var(--gray);margin:0 0 24px;line-height:1.45;
}
body.page-redesign .auth-form{display:flex;flex-direction:column;gap:16px}
body.page-redesign .auth-field{display:flex;flex-direction:column;gap:7px}
body.page-redesign .auth-field__lbl{
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;color:#5a6480;
}
body.page-redesign .auth-input{
  width:100%;height:48px;box-sizing:border-box;
  border:1px solid #CAD5F0;border-radius:12px;background:#fff;
  padding:0 16px;
  font-family:'Montserrat',sans-serif;font-size:15px;color:var(--text);
  transition:border-color .18s ease,box-shadow .18s ease;
}
body.page-redesign .auth-input:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,89,185,.12);
}
body.page-redesign .auth-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:-2px;
}
body.page-redesign .auth-remember{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:13px;color:#5a6480;
}
body.page-redesign .auth-remember input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
body.page-redesign .auth-forgot{
  font-family:'Montserrat',sans-serif;font-size:13px;color:var(--blue);text-decoration:none;
}
body.page-redesign .auth-forgot:hover{text-decoration:underline}
body.page-redesign .auth-submit{
  height:50px;border:0;border-radius:14px;cursor:pointer;
  background:var(--grad-blue);color:#fff;
  font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,89,185,.22);
  transition:filter .2s ease,transform .2s ease,box-shadow .2s ease;
  margin-top:4px;
}
body.page-redesign .auth-submit:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,89,185,.3)}
body.page-redesign .auth-submit--ghost{
  background:#fff;color:var(--blue);border:1px solid #CAD5F0;box-shadow:none;
}
body.page-redesign .auth-submit--ghost:hover{background:#f0f4ff;filter:none}
body.page-redesign .auth-reg{
  text-align:center;font-family:'Montserrat',sans-serif;font-size:14px;color:var(--gray);margin-top:2px;
}
body.page-redesign .auth-reg a{color:var(--blue);text-decoration:none;font-weight:600}
body.page-redesign .auth-reg a:hover{text-decoration:underline}
body.page-redesign .auth-captcha{display:flex;flex-direction:column;gap:10px}
body.page-redesign .auth-captcha img{border-radius:10px;border:1px solid #E5EAF5}
/* Картинка + кнопка «другая картинка». Картинка тянется по ширине карточки (в разметке 260×70,
   пропорция держится через height:auto), кнопка — квадрат по высоте картинки. */
body.page-redesign .auth-captcha__row{display:flex;align-items:stretch;gap:10px}
/* Рамку/фон/скругление держит контейнер, а не сама картинка: у картинки фиксированные
   260×70, а полоса тянется на всю оставшуюся ширину — если рамку вешать на <img>, справа
   остаётся пустая «зона» шире рисунка. min-width:0 позволяет ужиматься на узких экранах,
   не выталкивая кнопку за край карточки. */
body.page-redesign .auth-captcha__box{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;
  height:70px;padding:0 8px;box-sizing:border-box;overflow:hidden;
  background:#fff;border:1px solid #E5EAF5;border-radius:10px;
}
body.page-redesign .auth-captcha__box img{
  display:block;max-width:100%;height:auto;max-height:68px;border:0;border-radius:0;
}
body.page-redesign .auth-captcha__reload{
  flex:0 0 auto;width:52px;border:1px solid #E5EAF5;border-radius:10px;background:#fff;
  color:var(--blue);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease;
}
body.page-redesign .auth-captcha__reload svg{width:20px;height:20px}
body.page-redesign .auth-captcha__reload:hover{background:#f0f4ff;border-color:#C9D8F5}
body.page-redesign .auth-captcha__reload:disabled{opacity:.6;cursor:default}
body.page-redesign .auth-captcha__reload.is-spinning svg{animation:auth-captcha-spin .6s linear infinite}
@keyframes auth-captcha-spin{to{transform:rotate(360deg)}}
body.page-redesign .auth-msg{margin:0 0 16px;font-family:'Montserrat',sans-serif;font-size:14px}

/* соц-вход */
body.page-redesign .auth-social{margin-top:6px}
body.page-redesign .auth-social__lbl{
  display:flex;align-items:center;gap:12px;
  font-family:'Montserrat',sans-serif;font-size:13px;color:var(--gray);margin-bottom:14px;
}
body.page-redesign .auth-social__lbl:before,
body.page-redesign .auth-social__lbl:after{content:'';flex:1;height:1px;background:#E5EAF5}
body.page-redesign .auth-social__btns{display:flex;gap:12px;justify-content:center}
body.page-redesign .ss-btn{
  width:50px;height:50px;border-radius:14px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #E5EAF5;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
body.page-redesign .ss-btn img{width:24px;height:24px;display:block;pointer-events:none}
body.page-redesign .ss-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,30,80,.14);border-color:#CAD5F0}
/* Яндекс — фирменная красная плашка с белой «Я» */
body.page-redesign .ss-btn.ss-yandex{background:#FC3F1D;border-color:#FC3F1D}
body.page-redesign .ss-btn.ss-yandex:hover{background:#e8381a;border-color:#e8381a}
body.page-redesign .ss-btn.ss-yandex img{width:auto;height:25px}
/* VK — фирменная синяя плашка с белым лого */
body.page-redesign .ss-btn.ss-vk{background:#0077FF;border-color:#0077FF}
body.page-redesign .ss-btn.ss-vk:hover{background:#0a6ae0;border-color:#0a6ae0}
/* регистрация/восстановление — доп. элементы */
body.page-redesign .auth-box--wide{max-width:520px}
body.page-redesign .auth-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:540px){body.page-redesign .auth-grid2{grid-template-columns:1fr}}
body.page-redesign .auth-req{color:#e05656;font-style:normal}
body.page-redesign .auth-hint{font-size:12px;color:var(--gray);line-height:1.4;margin-top:2px}
body.page-redesign .auth-hint *{font-size:12px!important;color:var(--gray)!important;margin:0!important}
body.page-redesign .auth-field--prop{display:flex;flex-direction:column;gap:7px}
body.page-redesign .auth-msg--ok{color:#1f9254;background:#e8f8ee;border:1px solid #b6e6c8;border-radius:10px;padding:12px 14px}
body.page-redesign .auth-msg--info{color:#3a4a66;background:#f0f4ff;border:1px solid #d3def5;border-radius:10px;padding:12px 14px}
body.page-redesign .auth-msg--error{color:#c0392b;background:#fdecea;border:1px solid #f5c6c0;border-radius:10px;padding:12px 14px}
body.page-redesign .auth-consent{font-size:13px;color:var(--gray);line-height:1.5}
body.page-redesign .auth-consent a{color:var(--blue)}
/* поля пользовательских свойств / согласия — приводим к виду .auth-input */
body.page-redesign .auth-box .auth-field--prop input[type=text],
body.page-redesign .auth-box .auth-field--prop input[type=email],
body.page-redesign .auth-box .auth-field--prop input[type=tel],
body.page-redesign .auth-box .auth-field--prop select,
body.page-redesign .auth-box .bx-authform-input-container input[type=text]{
  width:100%;height:46px;box-sizing:border-box;border:1px solid #CAD5F0;border-radius:12px;
  padding:0 14px;font-family:'Montserrat',sans-serif;font-size:15px;color:var(--text);background:#fff;
}

/* ═══════════════════════════════════════════════════════════════
   ЛИЧНЫЙ КАБИНЕТ — хаб-плитки + sidebar + разделы
   ═══════════════════════════════════════════════════════════════ */
/* layout: sidebar слева + контент справа (подстраницы) */
@media(min-width:901px){
  body.page-redesign .lk_wrapper{display:flex;align-items:flex-start;gap:28px}
  body.page-redesign .lk__nav-wrap{flex:0 0 250px;width:250px;position:sticky;top:20px}
  body.page-redesign .lk__content{flex:1;min-width:0}
}
/* sidebar-меню */
body.page-redesign .lk__nav{
  list-style:none;margin:0;padding:10px;display:flex;flex-direction:column;gap:6px;
  background:#fff;border:1px solid #E5EAF5;border-radius:18px;box-shadow:0 4px 24px rgba(0,30,80,.05);
}
body.page-redesign .lk__nav_item{margin:0!important;list-style:none;padding:0}
body.page-redesign .lk__nav_item a{
  display:block;padding:12px 16px;border-radius:12px;
  font-family:'Montserrat',sans-serif;font-size:15px;font-weight:500;color:var(--text);text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
body.page-redesign .lk__nav_item a:hover{background:#f0f4ff;color:var(--blue)}
body.page-redesign .lk__nav_item.current a,
body.page-redesign .lk__nav_item.selected a{background:var(--grad-blue);color:#fff!important;box-shadow:0 4px 12px rgba(0,89,185,.2)}
@media(max-width:900px){
  body.page-redesign .lk__nav{flex-direction:row;flex-wrap:wrap;gap:8px;margin-bottom:20px}
  body.page-redesign .lk__nav_item a{padding:10px 14px;font-size:14px}
}
/* хаб-плитки (Профиль/Заказы/История) — белые карточки вместо синих плашек */
body.page-redesign .sale-personal-section-index-block{
  background:#fff!important;border:1px solid #E5EAF5!important;border-radius:20px!important;
  box-shadow:0 4px 24px rgba(0,30,80,.05)!important;margin-bottom:24px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
body.page-redesign .sale-personal-section-index-block:hover{
  transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,30,80,.1)!important;border-color:#CAD5F0!important;
}
body.page-redesign .sale-personal-section-index-block-link{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:40px 20px!important;text-decoration:none!important;min-height:180px;
}
body.page-redesign .sale-personal-section-index-block-ico{
  width:68px!important;height:68px!important;border-radius:50%!important;
  background:#EAF1FC!important;display:flex!important;align-items:center;justify-content:center;margin:0!important;
}
body.page-redesign .sale-personal-section-index-block-ico .fa,
body.page-redesign .sale-personal-section-index-block-ico i{font-size:30px!important;color:var(--blue)!important;line-height:1!important}
body.page-redesign .sale-personal-section-index-block-name{
  font-family:'Montserrat',sans-serif!important;font-size:16px!important;font-weight:600!important;color:var(--text)!important;text-align:center;
}

/* ── ЛК: профиль (поля) ── */
body.page-redesign .lk__content .title_box h1{font-size:28px!important;white-space:normal!important}
body.page-redesign .lk__content .main-profile-block-date-info .small,
body.page-redesign .lk__content .main-profile-block-date-info{font-family:'Montserrat',sans-serif;color:var(--gray)}
body.page-redesign .lk__content .form__widget-label,
body.page-redesign .lk__content .account-form__widget label{
  font-family:'Montserrat',sans-serif!important;font-weight:500!important;color:#5a6480!important;font-size:14px!important;
}
body.page-redesign .lk__content .text-field,
body.page-redesign .lk__content input[type=text],
body.page-redesign .lk__content input[type=password],
body.page-redesign .lk__content input[type=email],
body.page-redesign .lk__content input[type=tel],
body.page-redesign .lk__content select{
  width:100%;max-width:520px;height:46px;box-sizing:border-box;
  border:1px solid #CAD5F0!important;border-radius:12px!important;background:#fff;
  padding:0 14px!important;font-family:'Montserrat',sans-serif;font-size:15px;color:var(--text);
  transition:border-color .18s ease,box-shadow .18s ease;
}
body.page-redesign .lk__content .text-field:focus,
body.page-redesign .lk__content input:focus,
body.page-redesign .lk__content select:focus{outline:none;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(0,89,185,.12)}

/* ── ЛК: заказы — карточки ── */
body.page-redesign .lk__content h2{font-family:'Montserrat',sans-serif!important;font-size:20px!important;font-weight:600!important;color:var(--text)!important;margin:28px 0 14px!important}
body.page-redesign .sale-order-list-title-container{
  background:#F5F7FA!important;border:1px solid #E5EAF5!important;border-radius:16px 16px 0 0!important;
  padding:14px 20px!important;margin:0!important;
}
body.page-redesign .sale-order-list-title-container h3{
  font-family:'Montserrat',sans-serif!important;font-size:16px!important;font-weight:600!important;color:var(--text)!important;margin:0!important;
}
body.page-redesign .sale-order-list-title-container + .row{
  border:1px solid #E5EAF5!important;border-top:0!important;border-radius:0 0 16px 16px!important;
  margin:0 0 24px!important;padding:8px 20px 16px!important;background:#fff!important;
}
body.page-redesign .sale-order-list-inner-title-line-item{
  font-family:'Montserrat',sans-serif!important;font-size:12px!important;font-weight:700!important;
  text-transform:uppercase;letter-spacing:.04em;color:var(--gray)!important;
}
body.page-redesign hr.sale-order-list-inner-title-line{border:0!important;border-top:1px solid #E5EAF5!important;margin:0!important;opacity:1}
/* статус-пилюли */
body.page-redesign .sale-order-list-status-alert{background:#FFECEC!important;color:#e05656!important;border:1px solid #ffc4c4!important;border-radius:999px!important;padding:4px 12px!important;font-size:13px!important;font-weight:600!important;display:inline-block!important}
body.page-redesign .sale-order-list-status-success{background:#e8f8ee!important;color:#1f9254!important;border:1px solid #b6e6c8!important;border-radius:999px!important;padding:4px 12px!important;font-size:13px!important;font-weight:600!important;display:inline-block!important}
body.page-redesign .sale-order-list-status-restricted{background:#FFF4E5!important;color:#c77700!important;border:1px solid #ffd699!important;border-radius:999px!important;padding:4px 12px!important;font-size:13px!important;font-weight:600!important;display:inline-block!important}
body.page-redesign .sale-order-list-shipment-status-item{background:#F0F4FF!important;color:#3a4a66!important;border-radius:8px!important;padding:3px 10px!important;font-size:13px!important}
/* кнопки заказов */
body.page-redesign .lk__content .btn-green-gradient,
body.page-redesign .lk__content a.btn,
body.page-redesign .lk__content button.btn{
  background:var(--grad-blue)!important;color:#fff!important;border:0!important;border-radius:12px!important;
  padding:10px 22px!important;font-family:'Montserrat',sans-serif!important;font-weight:600!important;font-size:14px!important;
  box-shadow:0 6px 16px rgba(0,89,185,.2)!important;text-decoration:none!important;transition:filter .2s,transform .2s;
}
body.page-redesign .lk__content .btn-green-gradient:hover,
body.page-redesign .lk__content a.btn:hover{filter:brightness(1.07)!important;transform:translateY(-1px)!important}

/* ── Страница поиска /search/ ── */
body.page-redesign .search-input-wrapper{margin:8px 0 4px}
body.page-redesign .search-input-wrapper form{display:flex;gap:12px;max-width:660px;flex-wrap:wrap;align-items:center}
body.page-redesign .search-input-wrapper input[type=text]{
  flex:1;min-width:220px;height:50px;box-sizing:border-box;
  border:1px solid #CAD5F0;border-radius:14px;background:#fff;padding:0 16px;
  font-family:'Montserrat',sans-serif;font-size:15px;color:var(--text);
}
body.page-redesign .search-input-wrapper input[type=text]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,89,185,.12)}
body.page-redesign .search-input-wrapper input[type=submit]{
  height:50px;padding:0 28px;border:0;border-radius:14px;cursor:pointer;
  background:var(--grad-blue);color:#fff;font-family:'Montserrat',sans-serif;font-weight:600;font-size:15px;
  box-shadow:0 6px 16px rgba(0,89,185,.2);transition:filter .2s,transform .2s;
}
body.page-redesign .search-input-wrapper input[type=submit]:hover{filter:brightness(1.07);transform:translateY(-1px)}
body.page-redesign .search-language-guess{color:var(--gray);font-family:'Montserrat',sans-serif;font-size:14px;margin:10px 0}
body.page-redesign .search-results{display:flex;flex-direction:column;gap:14px;margin-top:24px}
body.page-redesign .search-result{
  display:block;padding:18px 22px;background:#fff;border:1px solid #E5EAF5;border-radius:16px;
  text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
body.page-redesign .search-result:hover{border-color:#CAD5F0;box-shadow:0 6px 18px rgba(0,30,80,.08);transform:translateY(-2px)}
body.page-redesign .search-result__title{display:block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:16px;color:var(--blue);margin-bottom:6px}
body.page-redesign .search-result__body{display:block;font-family:'Montserrat',sans-serif;color:var(--gray);font-size:14px;line-height:1.5}
body.page-redesign .search-result__body b,body.page-redesign .search-result__title b{color:var(--text)}
body.page-redesign .search-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;
  min-height:340px;padding:48px 24px;background:#fff;border:1px solid #EEF2F9;border-radius:20px;
  box-shadow:0 8px 30px rgba(26,42,80,.05);margin-top:20px;font-family:'Montserrat',sans-serif;
}
body.page-redesign .search-empty__icon{width:120px;height:120px;flex:0 0 auto;filter:drop-shadow(0 10px 22px rgba(0,89,185,.13))}
body.page-redesign .search-empty__text{font-size:16px;color:#4a5a76;line-height:1.6;margin:0;max-width:480px}
body.page-redesign .search-empty__text b{color:#1a1a2e}
body.page-redesign .search-empty__btn{margin-top:4px;text-decoration:none}
/* пагинация результатов поиска (легаси <font class=text> + a + b) */
body.page-redesign .search-nav{margin-top:30px;text-align:center;font-family:'Montserrat',sans-serif;line-height:2.4}
body.page-redesign .search-nav font.text{color:var(--gray);font-size:15px}
body.page-redesign .search-nav font.text:first-child{display:block;color:var(--text);font-weight:600;font-size:14px;margin-bottom:14px;line-height:1.4}
body.page-redesign .search-nav font.text:first-child br{display:none}
body.page-redesign .search-nav a{color:var(--blue);font-weight:600;text-decoration:none;padding:6px 11px;border-radius:9px;transition:.15s;display:inline-block}
body.page-redesign .search-nav a:hover{background:#EAF1FC}
body.page-redesign .search-nav b{color:#fff;background:var(--grad-blue);font-weight:700;padding:7px 13px;border-radius:9px;display:inline-block;box-shadow:0 4px 12px rgba(0,89,185,.2)}


/* ═══════════════════════════════════════════════════════════════
   ОФОРМЛЕНИЕ ЗАКАЗА — стили переехали в css/checkout.css
   (подключается только на /personal/order).
   Здесь был слой поверх мастера из 5 шагов: секции-аккордеон, плитки доставки
   и оплаты, блок итога, кнопка. Он держался на !important, потому что боролся
   с разметкой, которую генерирует order_ajax.js. Мастера больше нет.
   Живыми остались только .pc-addr* / .pc-map-modal* ниже — блок адреса и карта.
   ═══════════════════════════════════════════════════════════════ */
body.page-redesign .sdek_pvzAddr{display:inline-block;margin-top:8px;font-family:'Montserrat',sans-serif;font-size:13px;color:var(--text);background:#EAF1FC;border-radius:8px;padding:6px 12px}

/* ── Курьерский блок адреса ── */
body.page-redesign .pc-addr{margin:16px 0 4px;padding:18px;border:1px solid #E5EAF5;border-radius:16px;background:#F8FAFD}
body.page-redesign .pc-addr__title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:var(--text);margin:0 0 12px}
/* Обе строки — одна сетка из 4 равных колонок, поэтому колонки совпадают по вертикали:
   адрес занимает три колонки, кнопка карты — четвёртую; под адресом три коротких поля
   (кв./подъезд/этаж) ровно в его ширину, домофон — под кнопкой. */
body.page-redesign .pc-addr__row,
body.page-redesign .pc-addr__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
body.page-redesign .pc-addr__grid{margin-top:10px}
body.page-redesign .pc-addr__field{position:relative;grid-column:span 3;min-width:0}
body.page-redesign .pc-addr__map-btn{grid-column:4}
body.page-redesign .pc-addr__main{width:100%;box-sizing:border-box;min-width:0;border:1px solid #CAD5F0!important;border-radius:12px!important;background:#fff!important;padding:12px 14px!important;font-family:'Montserrat',sans-serif!important;font-size:15px!important;color:var(--text)!important}
body.page-redesign .pc-addr__main:focus{outline:none!important;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(0,89,185,.12)!important}
body.page-redesign .pc-addr__map-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;border:1px solid var(--blue);border-radius:12px;background:#fff;color:var(--blue);padding:0 14px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s}
body.page-redesign .pc-addr__map-btn:hover{background:var(--blue);color:#fff}
body.page-redesign .pc-addr__map-btn svg{flex:0 0 auto}
body.page-redesign .pc-addr__sm{width:100%;box-sizing:border-box;border:1px solid #CAD5F0!important;border-radius:12px!important;background:#fff!important;padding:11px 12px!important;font-family:'Montserrat',sans-serif!important;font-size:14px!important;color:var(--text)!important;min-width:0}
body.page-redesign .pc-addr__sm:focus{outline:none!important;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(0,89,185,.12)!important}
body.page-redesign .pc-addr__hint{margin-top:10px;font-family:'Montserrat',sans-serif;font-size:12.5px;color:#8493b0;line-height:1.4}
/* Узкий экран: адрес и кнопка на всю ширину, короткие поля по два в ряд */
@media(max-width:600px){
  body.page-redesign .pc-addr__row,
  body.page-redesign .pc-addr__grid{grid-template-columns:repeat(2,1fr)}
  body.page-redesign .pc-addr__field{grid-column:span 2}
  body.page-redesign .pc-addr__map-btn{grid-column:span 2;padding:12px 18px}
}
body.page-redesign .pc-addr__field .pc-addr__main{width:100%}
/* position:fixed, а не absolute: секция .bx-soa-section имеет overflow:hidden и резала
   выпадашку (замер: список из 6 подсказок вылезал на 118px, нижние пункты не кликались).
   Координаты проставляет JS по полю ввода (positionSuggest в checkout-address.js). */
body.page-redesign .pc-addr__suggest{position:fixed;z-index:99998;background:#fff;border:1px solid #CAD5F0;border-radius:12px;box-shadow:0 12px 28px rgba(16,32,64,.14);max-height:260px;overflow-y:auto;display:none}
body.page-redesign .pc-addr__suggest.is-open{display:block}
body.page-redesign .pc-addr__suggest-item{padding:10px 14px;font-family:'Montserrat',sans-serif;font-size:14px;color:var(--text);cursor:pointer;border-bottom:1px solid #F0F4FB;line-height:1.35}
body.page-redesign .pc-addr__suggest-item:last-child{border-bottom:0}
body.page-redesign .pc-addr__suggest-item:hover{background:#EAF1FC}
/* Поле поиска в модалке карты (+ подсказки под ним) */
/* NB: селекторы модалки ОБЯЗАТЕЛЬНО с префиксом body.page-redesign — иначе глобальный ресет
   `body.page-redesign button{border:none;background:none}` (стр. 14) перебивает их по
   специфичности (0,1,2) > (0,1,0) и кнопки остаются без фона и рамки. */
body.page-redesign .pc-map-modal__search{position:relative;z-index:5;padding:12px 20px 0}
body.page-redesign .pc-map-modal__search input{width:100%;border:1px solid #CAD5F0;border-radius:12px;background:#fff;padding:11px 14px;font-family:'Montserrat',sans-serif;font-size:14px;color:#1a2540;box-sizing:border-box}
body.page-redesign .pc-map-modal__search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,89,185,.12)}
body.page-redesign .pc-map-modal__suggest{position:absolute;left:20px;right:20px;top:calc(100% + 4px);z-index:60;background:#fff;border:1px solid #CAD5F0;border-radius:12px;box-shadow:0 12px 28px rgba(16,32,64,.14);max-height:230px;overflow-y:auto;display:none}
body.page-redesign .pc-map-modal__suggest.is-open{display:block}
body.page-redesign .pc-map-modal__suggest-item{padding:10px 14px;font-family:'Montserrat',sans-serif;font-size:14px;color:#1a2540;cursor:pointer;border-bottom:1px solid #F0F4FB;line-height:1.35}
body.page-redesign .pc-map-modal__suggest-item:last-child{border-bottom:0}
body.page-redesign .pc-map-modal__suggest-item:hover{background:#EAF1FC}

/* ── Модалка карты ── */
body.page-redesign .pc-map-modal{position:fixed;inset:0;z-index:99999;display:none}
body.page-redesign .pc-map-modal.is-open{display:block}
body.page-redesign .pc-map-modal__overlay{position:absolute;inset:0;background:rgba(16,32,64,.55)}
body.page-redesign .pc-map-modal__box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(760px,94vw);max-height:92vh;display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
body.page-redesign .pc-map-modal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:#1a2540;border-bottom:1px solid #EEF2F9}
body.page-redesign .pc-map-modal__close{border:0;background:none;font-size:26px;line-height:1;color:#8493b0;cursor:pointer;padding:0 4px}
body.page-redesign .pc-map-modal__close:hover{color:#1a2540}
body.page-redesign .pc-map-modal__hint{padding:10px 20px 0;font-family:'Montserrat',sans-serif;font-size:13px;color:#8493b0}
body.page-redesign .pc-map-modal__map{position:relative;z-index:1;margin:12px 20px;height:min(50vh,420px);border-radius:12px;overflow:hidden;background:#eef2f9}
body.page-redesign .pc-map-modal__addr{margin:0 20px;padding:12px 14px;background:#F8FAFD;border:1px solid #E5EAF5;border-radius:12px;font-family:'Montserrat',sans-serif;font-size:14px;color:#1a2540;min-height:20px}
body.page-redesign .pc-map-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px}
/* Кнопки — язык сортировки в drawer (.m-sort-cat): без заливки и теней,
   белый фон + рамка; акцент = синяя рамка 2px + синий текст. */
body.page-redesign .pc-map-modal__cancel,
body.page-redesign .pc-map-modal__ok{
  height:40px;padding:0 20px;box-sizing:border-box;
  background:#fff;color:var(--text);
  border:1px solid #CAD5F0;border-radius:12px;
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;white-space:nowrap;box-shadow:none;
  transition:all .15s ease;
}
body.page-redesign .pc-map-modal__cancel:hover,
body.page-redesign .pc-map-modal__ok:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
/* «Готово» активна, когда адрес определён — это и есть акцентное состояние */
body.page-redesign .pc-map-modal__ok:not(:disabled){
  color:var(--blue);border:2px solid var(--blue);font-weight:600;
}
body.page-redesign .pc-map-modal__ok:disabled{opacity:.45;cursor:not-allowed}

/* ── ЛК /personal/private/: правки профиля (вкладка/пол/календарь) ── */
/* активная вкладка sidebar — убрать легаси-рамку, оставить только наш градиент-pill */
body.page-redesign .lk__nav_item,
body.page-redesign .lk__nav_item a{border:0!important;outline:0!important;background-image:none}
body.page-redesign .lk__nav_item.current a,
body.page-redesign .lk__nav_item.selected a{border:0!important;background:var(--grad-blue)!important;color:#fff!important;box-shadow:0 4px 12px rgba(0,89,185,.2)!important}
body.page-redesign .lk__nav_item.current,
body.page-redesign .lk__nav_item.selected{border:0!important;box-shadow:none!important;background:transparent!important}

/* тоггл «Пол» — pill-сегментед как сортировка (активный = синий pill) */
body.page-redesign ul.tabs_gender{
  display:inline-flex!important;list-style:none!important;margin:0!important;padding:4px!important;
  background:#fff!important;border:1px solid #CAD5F0!important;border-radius:999px!important;width:auto!important;
}
body.page-redesign .tabs_gender .tabs__item{margin:0!important;padding:0!important;list-style:none!important;display:flex!important;border:0!important;background:none!important}
body.page-redesign .tabs_gender .tabs__item input{position:absolute!important;opacity:0!important;width:0!important;height:0!important;pointer-events:none!important}
body.page-redesign .tabs_gender .tabs__item-btn{
  display:inline-flex!important;align-items:center;justify-content:center;cursor:pointer;
  padding:8px 24px!important;border-radius:999px!important;border:0!important;background:transparent!important;margin:0!important;
  font-family:'Montserrat',sans-serif!important;font-size:14px!important;font-weight:500!important;color:var(--gray)!important;
  transition:background .2s ease,color .2s ease;
}
body.page-redesign .tabs_gender .tabs__item-btn:hover{color:var(--blue)!important}
body.page-redesign .tabs_gender .tabs__item input:checked + .tabs__item-btn{
  background:var(--grad-blue)!important;color:#fff!important;font-weight:600!important;box-shadow:0 4px 12px rgba(0,89,185,.2)!important;
}
body.page-redesign .tabs_gender .tabs__item input:checked + .tabs__item-btn:hover{color:#fff!important}

/* иконка календаря у «Дата рождения» — 1:1, аккуратная высота */
body.page-redesign .lk__content .calendar-icon{width:22px!important;height:22px!important;object-fit:contain;vertical-align:middle}

/* ── ЛК профиль: иконка календаря 1:1 (инлайн, по центру) + кнопка Сохранить ── */
body.page-redesign .lk__content .form__widget-input:has(.calendar-icon){position:relative!important;max-width:220px}
body.page-redesign .lk__content .form__widget-input:has(.calendar-icon) input{width:100%!important;max-width:220px!important;padding-right:46px!important;box-sizing:border-box}
body.page-redesign .lk__content .calendar-icon{position:absolute!important;right:10px;top:50%;transform:translateY(-50%);width:22px!important;height:22px!important;object-fit:contain;margin:0!important}
/* ── Кнопки профиля (Сохранить/Отмена): легаси-обёртки .btn-form__control / .btn-green-gradient /
   .btn-green-border имели H=34+overflow:hidden (резали input ↑↓), свой градиент и тёмный hover.
   Обнуляем обёртки, делаем кнопками сами input, строку выравниваем flex'ом. */
body.page-redesign .lk__content .form__controls{display:flex!important;align-items:center;gap:14px;height:auto!important;overflow:visible!important}
body.page-redesign .lk__content .form__controls .btn-form__control,
body.page-redesign .lk__content .form__controls .btn-green-gradient,
body.page-redesign .lk__content .form__controls .btn-green-border{
  background:none!important;background-image:none!important;box-shadow:none!important;border:0!important;
  height:auto!important;min-height:0!important;overflow:visible!important;padding:0!important;margin:0!important;border-radius:0!important;display:inline-flex!important;width:auto!important;
}
/* Сохранить — градиент-кнопка */
body.page-redesign .lk__content .main-profile-submit,
body.page-redesign .lk__content input[name="save"]{
  -webkit-appearance:none!important;appearance:none!important;
  height:auto!important;min-height:0!important;width:auto!important;
  padding:13px 30px!important;line-height:1.2!important;overflow:visible!important;text-indent:0!important;
  background:var(--grad-blue)!important;color:#fff!important;border:0!important;border-radius:14px!important;box-sizing:border-box!important;
  font-family:'Montserrat',sans-serif!important;font-weight:600!important;font-size:15px!important;
  box-shadow:0 6px 18px rgba(0,89,185,.22)!important;cursor:pointer;transition:filter .2s,transform .2s;
}
body.page-redesign .lk__content .main-profile-submit:hover,
body.page-redesign .lk__content input[name="save"]:hover{filter:brightness(1.07)!important;transform:translateY(-2px)!important}
/* Отмена — вторичная кнопка (белая, синяя рамка); чужой тёмный hover-градиент заменён */
body.page-redesign .lk__content input.cancel,
body.page-redesign .lk__content .btn-green-border input{
  -webkit-appearance:none!important;appearance:none!important;
  height:auto!important;min-height:0!important;width:auto!important;
  padding:13px 28px!important;line-height:1.2!important;overflow:visible!important;text-indent:0!important;
  background:#fff!important;background-image:none!important;color:var(--blue)!important;border:1px solid #CAD5F0!important;border-radius:14px!important;box-sizing:border-box!important;
  font-family:'Montserrat',sans-serif!important;font-weight:600!important;font-size:15px!important;box-shadow:none!important;cursor:pointer;transition:background .2s,border-color .2s;
}
body.page-redesign .lk__content input.cancel:hover,
body.page-redesign .lk__content .btn-green-border input:hover{
  background:#f0f4ff!important;background-image:none!important;border-color:var(--blue)!important;color:var(--blue)!important;filter:none!important;
}
/* ── ЛК «Мои заказы»: убрать дубль-навигацию + воздух в карточках ── */
/* дубль «История заказов»/«Текущие»/«Отмененные» (есть в сайдбаре). action-ссылки заказа (.sale-order-list-*-link) НЕ трогаем */
body.page-redesign .lk__content .row:has(> .col > a.sale-order-link:not([class*="sale-order-list-"])){display:none!important}
/* больше воздуха в теле карточки */
body.page-redesign .sale-order-list-title-container{padding:16px 24px!important}
body.page-redesign .sale-order-list-title-container + .row{padding:20px 24px 22px!important}
/* секц.лейблы «Оплата»/«Доставка» — без серого бокса, акцентный аптайтл */
body.page-redesign .sale-order-list-inner-title-line-item{background:none!important;color:var(--blue)!important;padding:0!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.05em}
/* «Ожидает обработки» — мягкий pill вместо серого бокса */
body.page-redesign .sale-order-list-shipment-status-block{background:#EAF1FC!important;color:#3a4a66!important;border-radius:8px!important;padding:4px 12px!important;font-weight:500!important;font-size:13px!important}
body.page-redesign .sale-order-list-shipment-status-item{background:none!important;color:var(--gray)!important;padding:0!important;font-size:13px!important}
/* отступы между блоками Счёт/Отгрузка */
body.page-redesign .sale-order-list-payment-element,
body.page-redesign .sale-order-list-shipment-element{margin-bottom:10px}
/* строка действий — отделяем линией сверху, воздух */
body.page-redesign .sale-order-list-about-container{padding-top:6px}
/* «Мои заказы»: заголовок выровнять по верхней кромке сайдбара (убрать каталожный margin-top:-32) */
body.page-redesign .lk__content .title_box{margin-top:0!important;position:static!important;background:none!important;backdrop-filter:none!important;padding-top:0!important}
/* ── «Мои заказы»: action-строка + воздух в карточках ── */
/* строка действий (Подробнее/Повторить/Отменить) — выровнять по центру, отделить линией, воздух */
body.page-redesign .sale-order-list-inner-row:has(.sale-order-list-about-container){
  align-items:center!important;border-top:0!important;min-height:60px;margin:6px 0 0!important;padding:10px 0!important;
}
body.page-redesign .sale-order-list-about-container a,
body.page-redesign .sale-order-list-repeat-container a,
body.page-redesign .sale-order-list-cancel-container a{
  display:inline-flex!important;align-items:center;gap:6px;line-height:1.2!important;vertical-align:middle;
}
/* воздух между строками внутри секций Оплата/Доставка */
body.page-redesign .sale-order-list-inner-container .sale-order-list-payment-element,
body.page-redesign .sale-order-list-inner-container .sale-order-list-shipment-element{line-height:1.8}
body.page-redesign .sale-order-list-payment-title-element,
body.page-redesign .sale-order-list-shipment-id-name{margin-bottom:6px!important}
body.page-redesign .sale-order-list-change-payment{display:inline-block;margin-top:4px}
/* дивайдеры секций (между Оплата и Доставка) — больше воздуха */
body.page-redesign hr.sale-order-list-inner-title-line{margin:16px 0!important}
/* секционные заголовки-строки (Оплата/Доставка) — отступ сверху */
body.page-redesign .sale-order-list-inner-container > .row.mb-3{margin-top:6px}
/* ── «Мои заказы»: pill-кнопки управления + воздух (доп.) ── */
/* Подробнее / Повторить / Отменить + «сменить способ оплаты» → pill-кнопки */
body.page-redesign .sale-order-list-about-link,
body.page-redesign .sale-order-list-repeat-link,
body.page-redesign .sale-order-list-cancel-link,
body.page-redesign .sale-order-list-change-payment{
  display:inline-flex!important;align-items:center;gap:6px;
  padding:9px 18px!important;border-radius:999px!important;border:1px solid #CAD5F0!important;background:#fff!important;
  color:var(--blue)!important;font-weight:600!important;font-size:13px!important;text-decoration:none!important;
  line-height:1!important;white-space:nowrap;box-shadow:none!important;transition:background .2s,border-color .2s,color .2s;
}
body.page-redesign .sale-order-list-about-link:hover,
body.page-redesign .sale-order-list-repeat-link:hover,
body.page-redesign .sale-order-list-change-payment:hover{background:#EAF1FC!important;border-color:var(--blue)!important;color:var(--blue)!important}
/* Отменить — деструктивный красный pill */
body.page-redesign .sale-order-list-cancel-link{color:#E0496B!important;border-color:#F3C9D4!important}
body.page-redesign .sale-order-list-cancel-link:hover{background:#FDEEF1!important;border-color:#E0496B!important;color:#E0496B!important}
/* «сменить способ оплаты» — мельче, вторичное действие внутри блока Оплаты */
body.page-redesign .sale-order-list-change-payment{font-size:12px!important;padding:7px 15px!important;margin-top:10px!important}
/* воздух в Доставке / между секциями / под статусом */
body.page-redesign .sale-order-list-shipment-element{margin-bottom:10px!important}
body.page-redesign .sale-order-list-shipment-status-block{margin:2px 0!important}
body.page-redesign .sale-order-list-inner-container .row.mb-3{margin-bottom:14px!important}
/* ── «Мои заказы»: финальная доводка отступов/кнопок ── */
/* короче отступ заголовок → список заказов */
body.page-redesign .lk__content .title_box{margin-bottom:4px!important;padding-bottom:4px!important}
body.page-redesign .lk__content h2{margin-top:12px!important;margin-bottom:16px!important}
/* «Оплатить» — чуть левее от края карточки */
body.page-redesign .sale-order-list-button-container{padding-right:0!important;margin-right:26px!important}
/* строка кнопок управления — симметричный воздух, центр нижней зоны карточки */
body.page-redesign .sale-order-list-inner-row:has(.sale-order-list-about-container){padding:20px 0!important;min-height:72px}
/* ── «Мои заказы»: доводка #3 (отступы/доставка/payment-селектор) ── */
/* A: вернуть ~12px между заголовком и списком */
body.page-redesign .lk__content .title_box{padding-bottom:12px!important;margin-bottom:6px!important}
body.page-redesign .lk__content h2{margin-top:16px!important}
/* B: убрать пустую «красную» зону над кнопками (min-height её создавал) */
body.page-redesign .sale-order-list-inner-row:has(.sale-order-list-about-container){min-height:0!important;padding:12px 0!important}
/* C: воздух между строками доставки → «Служба доставки» ниже */
body.page-redesign .sale-order-list-shipment-item{margin-top:16px!important;margin-bottom:0!important}
/* D: бейдж статуса отгрузки правее */
body.page-redesign .sale-order-list-shipment-status-block{margin-left:12px!important}

/* E: payment-селектор (раскрытие «сменить способ оплаты») */
body.page-redesign .sale-order-payment-change-pp-list{gap:12px;row-gap:12px}
body.page-redesign .sale-order-payment-change-pp-company{
  cursor:pointer!important;padding:12px 10px!important;border:1.5px solid #E5EAF5!important;border-radius:14px!important;
  background:#fff!important;text-align:center;transition:border-color .2s,background .2s,box-shadow .2s;max-width:150px;
}
body.page-redesign .sale-order-payment-change-pp-company:hover{border-color:#CAD5F0!important;background:#F7FAFF!important}
/* выбранная карточка: либо текущий способ (input[checked]), либо клик (.is-selected) */
body.page-redesign .sale-order-payment-change-pp-company.is-selected,
body.page-redesign .sale-order-payment-change-pp-list:not(:has(.is-selected)) .sale-order-payment-change-pp-company:has(input[checked]){
  border-color:var(--blue)!important;background:#EAF1FC!important;box-shadow:0 4px 14px rgba(0,89,185,.16)!important;
}
body.page-redesign .sale-order-payment-change-pp-company-graf-container{cursor:pointer}
body.page-redesign .sale-order-payment-change-pp-company-image{width:52px!important;height:42px!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;margin:2px auto 8px!important}
body.page-redesign .sale-order-payment-change-pp-company-smalltitle{font-size:13px!important;font-weight:600!important;color:#1a1a2e!important;margin:0!important}
/* бейдж «Не оплачено» в раскрытии → наша пилюля */
body.page-redesign .sale-order-payment-change-status-alert{display:inline-block;background:#FDE7EC!important;color:#E0496B!important;border:0!important;border-radius:999px!important;padding:3px 12px!important;font-size:12px!important;font-weight:600!important;margin-left:10px}
body.page-redesign .sale-order-payment-change-payment-title{font-size:15px!important;margin-bottom:8px!important}
body.page-redesign .sale-order-payment-change-payment-title-element{font-weight:700;margin-left:4px}
/* «← назад» → вторичная pill-кнопка */
body.page-redesign a.sale-order-list-cancel-payment{
  display:inline-flex!important;align-items:center;gap:6px;padding:9px 18px!important;border-radius:999px!important;
  border:1px solid #CAD5F0!important;background:#fff!important;color:var(--blue)!important;font-weight:600!important;font-size:13px!important;
  text-decoration:none!important;margin-top:12px!important;transition:background .2s,border-color .2s;
}
body.page-redesign a.sale-order-list-cancel-payment:hover{background:#EAF1FC!important;border-color:var(--blue)!important}
/* ── «Мои заказы»: ровное выравнивание кнопок управления по вертикали ── */
body.page-redesign .sale-order-list-inner-row:has(.sale-order-list-about-container){display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important}
body.page-redesign .sale-order-list-inner-row:has(.sale-order-list-about-container) > div{display:contents!important}
/* ── «Мои заказы»: поднять кнопки ближе к дивайдеру (был зазор 43px сверху) ── */
body.page-redesign .sale-order-list-inner-container .row.mb-3:has(> .col > hr.sale-order-list-inner-title-line):has(+ .sale-order-list-inner-row){margin-bottom:0!important}
body.page-redesign .sale-order-list-inner-container .row.mb-3:has(> .col > hr.sale-order-list-inner-title-line):has(+ .sale-order-list-inner-row) hr{margin:0!important}
body.page-redesign .sale-order-list-inner-row:has(.sale-order-list-about-container){padding-top:6px!important;margin-top:0!important}
/* ── ЛК: пустое состояние (история/заказы отсутствуют) ── */
body.page-redesign .lk__content .lk-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:clamp(380px,52vh,560px);gap:18px;padding:48px 24px;
  background:#fff;border:1px solid #EEF2F9;border-radius:20px;box-shadow:0 8px 30px rgba(26,42,80,.05);
}
body.page-redesign .lk__content .lk-empty__icon{width:140px;height:140px;flex:0 0 auto;filter:drop-shadow(0 12px 26px rgba(0,89,185,.14))}
body.page-redesign .lk__content .lk-empty__title{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:600;color:#1a1a2e;margin:0}
body.page-redesign .lk__content .lk-empty__btn{margin-top:4px;text-decoration:none}
/* ── Поиск: форму JS'ом (redesign-ui.js) переносим В .breadcrumbs → одна flex-строка с крошками.
   align-items:center даёт идеальное вертикальное выравнивание на ЛЮБОМ брейкпоинте (без магических px).
   Селекторы по `.input-wrapper` (а не `.search-input-wrapper`), т.к. форма уезжает из своего врапера. ── */
body.page-redesign .breadcrumbs > .wrapper-inner:has(.input-wrapper){display:flex!important;align-items:center;flex-wrap:wrap;row-gap:10px}
body.page-redesign .input-wrapper{margin:0 0 0 auto!important;width:min(540px,46vw);border:0!important;background:none!important;padding:0!important}
body.page-redesign .input-wrapper form{display:flex!important;align-items:center;gap:10px!important;max-width:none!important;flex-wrap:nowrap!important;border:0!important;background:none!important;margin:0!important;padding:0!important}
body.page-redesign .input-wrapper input[name=q]{flex:1!important;min-width:0!important;height:48px!important;border:1px solid #CAD5F0!important;border-radius:12px!important;padding:0 16px!important;font-family:'Montserrat',sans-serif;font-size:15px}
body.page-redesign .input-wrapper input[name=q]:focus{outline:none;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(0,89,185,.12)!important}
body.page-redesign .input-wrapper input[type=submit]{
  position:static!important;flex:0 0 48px!important;width:48px!important;height:48px!important;min-width:0!important;padding:0!important;margin:0!important;
  border:0!important;border-radius:12px!important;cursor:pointer;font-size:0!important;color:transparent!important;text-indent:0!important;
  background-color:#0059B9!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:center!important;background-size:22px!important;
  box-shadow:0 6px 16px rgba(0,89,185,.22)!important;transition:filter .2s,transform .2s;
}
body.page-redesign .input-wrapper input[type=submit]:hover{filter:brightness(1.08)!important;transform:translateY(-1px)!important}
/* «Перейти в каталог» (пустое состояние) — новый градиент-pill вместо легаси */
body.page-redesign .search-empty__btn{
  display:inline-flex!important;align-items:center;padding:12px 26px!important;border-radius:14px!important;border:0!important;
  background:var(--grad-blue)!important;color:#fff!important;font-family:'Montserrat',sans-serif!important;font-weight:600!important;font-size:15px!important;
  box-shadow:0 6px 18px rgba(0,89,185,.22)!important;text-decoration:none!important;transition:filter .2s,transform .2s;
}
body.page-redesign .search-empty__btn span{color:#fff!important}
body.page-redesign .search-empty__btn:hover{filter:brightness(1.07)!important;transform:translateY(-2px)!important}
/* Поиск: только на телефонах (≤767) инпут переносится на новую строку под крошками (flex-wrap) на всю ширину.
   На планшетах (iPad Air 820 / mini 768) — остаётся «в строку» с крошками справа. */
@media(max-width:767px){
  body.page-redesign .breadcrumbs .input-wrapper{width:100%!important;margin:14px 0 4px 0!important}
}
/* ════ Чек-аут: товары, плитки, купон, поля ════
   Переехало в css/checkout.css. Кнопка «Продолжить покупки» — тоже (класс .co-continue).
   Ниже остаются ЖИВЫЕ стили виджета локации .bx-sls: город выбирается им, и от его кода
   локации считает доставку. */
/* ════ ЛОКАЦИЯ .bx-sls — МИНИМАЛЬНО (не ломаем нативную раскладку виджета) ════ */
/* единое поле = контейнер: рамка 12px (вместо легаси 2px), белый фон, на всю ширину.
   Иконка поиска, крестик-очистка и их позиционирование остаются как у виджета. */
/* Высоту контейнера и внутреннего инпута держим одинаковой (46px, как у прочих полей).
   Виджет даёт контейнеру 35px, а инпут внутри — 46px и position:absolute: текст
   центрировался по инпуту, а рамка рисовалась по контейнеру, и надпись съезжала вверх. */
body.page-redesign .bx-sls .dropdown-block.bx-ui-sls-input-block{
  border:1px solid #CAD5F0!important;border-radius:12px!important;background:#fff!important;
  width:100%!important;box-sizing:border-box!important;
  height:46px!important;min-height:46px!important;
}
body.page-redesign .bx-sls .bx-ui-sls-fake,
body.page-redesign .bx-sls .bx-ui-sls-route{
  height:46px!important;line-height:46px!important;
  padding-top:0!important;padding-bottom:0!important;
  font-size:15px!important;font-family:'Montserrat',sans-serif!important;
}
/* внутренний видимый инпут + route-оверлей — прозрачные, без своей рамки/скругления (убирает двойную рамку),
   фоны/картинки иконок и крестика НЕ трогаем, размеры им задаёт виджет */
body.page-redesign .bx-sls .bx-ui-sls-fake,
body.page-redesign .bx-sls .bx-ui-sls-route{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none!important}
/* белый fade-оверлей у краёв (давал «зоны» возле иконок) — убрать */
body.page-redesign .bx-sls .dropdown-fade2white{display:none!important}
body.page-redesign .bx-sls:focus-within .dropdown-block.bx-ui-sls-input-block{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(0,89,185,.12)!important}

/* Поле города — ровное белое, как остальные инпуты формы.
   Была серая «зона лупы» 43px с вертикальным разделителем (рисовалась градиентом на фоне) —
   она выбивалась из общего вида полей и читалась как дефект вёрстки. */
body.page-redesign .bx-sls .dropdown-icon{background-color:transparent!important}
/* Лупа и крестик позиционированы абсолютно с жёстким top (10px / 0) — он был рассчитан
   на прежнюю высоту поля 35px. Поле стало 46px, и иконки уехали вверх. Центрируем. */
body.page-redesign .bx-sls .dropdown-icon,
body.page-redesign .bx-sls .bx-ui-sls-clear{
  top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;
}
/* справа: убрать внутренние рамки/скругления у потомков (двойной border у крестика). background/layout не трогаем — иконки целы */
body.page-redesign .bx-sls .dropdown-block.bx-ui-sls-input-block *{border:0!important;border-radius:0!important;box-shadow:none!important}
body.page-redesign .bx-sls .bx-ui-sls-container,
body.page-redesign .bx-sls .bx-ui-sls-clear,
body.page-redesign .bx-sls .bx-ui-sls-loader{background-color:transparent!important}
/* крестик отмены — поверх инпута, чтобы левый край не обрезался (позицию виджета не трогаем) */
body.page-redesign .bx-sls .bx-ui-sls-clear{z-index:5!important}
/* крестик отмены .bx-ui-sls-clear — чистая SVG-иконка по центру (полный контроль, без обрезки) */
body.page-redesign .bx-sls .bx-ui-sls-clear{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23C7CFDD'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-position:center!important;background-repeat:no-repeat!important;background-size:18px 18px!important;
}
/* ════ Страница 404 — баннер под общий стиль ════ */
body.page-redesign .err404{
  display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap;
  min-height:44vh;padding:64px 0 88px;
}
body.page-redesign .err404__num{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:210px;line-height:.85;letter-spacing:-6px;
  background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  flex:0 0 auto;
}
body.page-redesign .err404__info{max-width:440px}
body.page-redesign .err404__title{
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:30px;line-height:1.2;color:var(--text);margin:0 0 14px;
}
body.page-redesign .err404__text{
  font-family:'Montserrat',sans-serif;font-weight:400;font-size:16px;line-height:1.55;color:var(--gray);margin:0 0 30px;
}
body.page-redesign .err404__btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-blue);color:#fff!important;border-radius:50px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:15px;
  padding:15px 34px;text-decoration:none;transition:filter .2s ease,transform .2s ease;
}
body.page-redesign .err404__btn span{color:#fff}
body.page-redesign .err404__btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
@media(max-width:768px){
  body.page-redesign .err404{flex-direction:column;gap:18px;text-align:center;padding:44px 16px 64px}
  body.page-redesign .err404__num{font-size:128px;letter-spacing:-3px}
  body.page-redesign .err404__info{max-width:none}
  body.page-redesign .err404__btn{width:100%;box-sizing:border-box}
}
/* ════ Чек-аут ════
   Стили одностраничного чек-аута переехали в отдельный css/checkout.css
   (подключается только на /personal/order). Здесь был слой костылей под мастер
   из 5 шагов: градиент-pill кнопки, раскладка блока согласия, кликабельные
   заголовки секций и стрелка-индикатор «раскрыть шаг» — всё это потеряло смысл,
   когда шагов не стало. Удалено, чтобы не перебивало новый слой своими !important. */

/* ═══════════ ЛИПКИЙ АВТО-ХАЙД HEADER (вариант B) + снос back-to-top ═══════════ */
:root{ --hh:120px; }
@media(max-width:768px){ :root{ --hh:80px; } }

/* Back-to-top больше не нужен — header липкий */
body.page-redesign .foot-up{ display:none!important; }

/* Внутренние страницы: синий инверсный хедер → fixed, авто-хайд.
   ВАЖНО: !important на top/left/right — перебиваем старые left:auto!important/right:auto!important
   из базового правила (иначе fixed-плашка схлопывается в пилюлю у левого края). Геометрия
   (max-width + margin:auto + padding-gutter) наследуется от базы → плашка ровно та же, что была. */
body.page-redesign .site-header--inverted{
  position:fixed!important; top:0!important; left:0!important; right:0!important; z-index:1000;
  transition:transform .24s ease!important;  /* короткая плавная; !important переживает reduced-motion */
  will-change:transform;
}
/* Авто-хайд (скрытие) — ТОЛЬКО на мобилке. На десктопе header всегда виден (sticky):
   при «всплытии» он бы перекрывал сортировку/заголовок/фильтр. */
/* Авто-хайд (скрытие) — на ВСЕХ ширинах (моб + десктоп). */
body.page-redesign.header-hidden .site-header--inverted{
  transform:translateY(-130%);
}
/* Тень только когда header ВИДЕН и оторван от верха; скрытому тень убираем (чтоб не торчала). */
body.page-redesign.header-scrolled:not(.header-hidden) .site-header--inverted .header-inner{
  box-shadow:0 20px 44px -14px rgba(0,30,80,.28), 0 6px 16px -8px rgba(0,30,80,.14)!important;
}
/* Контент внутренних страниц уходит под фиксированный header */
body.page-redesign.page-inner .main_content{ padding-top:var(--hh)!important; }

/* ── Панель фильтров каталога (мобилка) ──
   header виден → панель под ним (top:var(--hh)); header скрыт → к верху (top:0). */
body.page-redesign .m-filter-bar{
  top:var(--hh)!important;
  transition:top .24s ease!important;
}
body.page-redesign.header-hidden .m-filter-bar{ top:0!important; }
/* Подложка тянется от панели ВВЕРХ до верха экрана (когда прокручено и header виден) —
   закрывает просветы вокруг плавающей плашки. Absolute относительно sticky-панели → привязана
   к каталогу: кончились плитки, панель отлипла — подложка уехала вместе с ней (не висит над
   футером). header плывёт поверх (его z выше). */
body.page-redesign.header-scrolled:not(.header-hidden) .m-filter-bar::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:var(--hh);
  background:rgba(248,250,253,.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  pointer-events:none;
}
/* Градиент-фейд под липкой панелью фильтров */
body.page-redesign .m-filter-bar::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:20px;
  background:linear-gradient(180deg,#F8FAFD 0%,rgba(248,250,253,0) 100%);
  pointer-events:none;
}


/* ─── ГЛАВНАЯ (B1): hero-хедер (белая плашка) → fixed, авто-хайд, floating-pill ───
   На самом верху выглядит как сейчас (плашка на hero), при скролле «отрывается» и
   висит над белым контентом с лёгкой растушёванной тенью. Центрирование десктопа —
   margin:auto (горизонталь), чтобы не конфликтовать с translateY авто-хайда. */
body.page-redesign.page-index .site-header{
  position:fixed!important; z-index:1000;
  transition:transform .24s ease!important;
  will-change:transform;
}
/* Скрытие: раньше был translateY(-135%) — процент считается от ВЫСОТЫ хедера (80px→108px)
   и не учитывал его top-отступ (40px десктоп / 24px моб). На главной 40+80=120px > 108px →
   снизу торчала полоска ~12px (правка №70). calc(-100% - 48px) = вся высота + запас на top. */
body.page-redesign.page-index.header-hidden .site-header{
  transform:translateY(calc(-100% - 48px));
}
/* Тень на белом когда header ВИДЕН и оторван от верха (главная — плашка белая) */
body.page-redesign.page-index.header-scrolled:not(.header-hidden) .site-header .header-inner{
  box-shadow:0 22px 46px -14px rgba(0,30,80,.20), 0 6px 16px -8px rgba(0,30,80,.10)!important;
}
@media(max-width:768px){
  body.page-redesign.page-index .site-header{
    top:24px!important; left:24px!important; right:24px!important;
  }
}
@media(min-width:769px){
  body.page-redesign.page-index .site-header{
    top:40px!important; left:0!important; right:0!important;
    max-width:var(--container)!important;
    margin-left:auto!important; margin-right:auto!important;
    padding:0 20px!important; box-sizing:border-box;
  }
}


/* ─── АДМИН-ПАНЕЛЬ БИТРИКСА ПОД ФИКСИРОВАННЫМ ХЕДЕРОМ ───
   Замер в живом DOM (авторизованный админ, 1440×900): #bx-panel занимает 0–39px
   (position:relative, z-index:995 — из ядра, !important, перебить нельзя), а наш header
   fixed z-index:1000 висел на 16–96px ПОВЕРХ неё: elementFromPoint в центре панели
   возвращал .header-inner → панель кликалась не вся.
   Сдвигаем header вниз ровно на видимую высоту панели. Величина не константа: панель
   в потоке и уезжает при скролле — её меряет JS (redesign-ui.js) и кладёт в --bxpanel.
   Класс .has-bx-panel ставит тот же JS, только когда панель реально в DOM → у покупателей
   ни одно правило ниже не срабатывает. */
body.page-redesign.has-bx-panel .site-header--inverted{
  top:var(--bxpanel,0px)!important;
}
@media(max-width:768px){
  body.page-redesign.page-index.has-bx-panel .site-header{
    top:calc(24px + var(--bxpanel,0px))!important;
  }
}
@media(min-width:769px){
  body.page-redesign.page-index.has-bx-panel .site-header{
    top:calc(40px + var(--bxpanel,0px))!important;
  }
}
/* Липкие элементы каталога прилипают ПОД хедером → тот же сдвиг, иначе уедут ему под низ */
body.page-redesign.has-bx-panel .m-filter-bar{
  top:calc(var(--hh) + var(--bxpanel,0px))!important;
}
body.page-redesign.has-bx-panel.header-hidden .m-filter-bar{ top:var(--bxpanel,0px)!important; }
body.page-redesign.has-bx-panel:has(.catalog__list) .title_box{
  top:calc(var(--hh) + var(--bxpanel,0px))!important;
}
body.page-redesign.has-bx-panel.header-hidden:has(.catalog__list) .title_box{ top:var(--bxpanel,0px)!important; }
body.page-redesign.has-bx-panel .catalog__filter{
  top:calc(var(--hh) + var(--bxpanel,0px) + 8px)!important;
}
body.page-redesign.has-bx-panel.header-hidden .catalog__filter{ top:calc(var(--bxpanel,0px) + 20px)!important; }


/* Пагинация на мобилке: размер кнопок штатный, но окно страниц на одну ведущую короче
   (см. JS redesign-ui.js — прячет элемент перед первым «…»), чтобы ряд влезал по ширине.
   Класс .pg-trim-hide ставит JS. */
body.page-redesign .bx_pagination_page_list_num li.pg-trim-hide{ display:none!important; }
/* Подстраховка: на узких экранах ряд номеров не шире контейнера (если на какой-то странице
   окно всё равно длинное — скроллится внутри, а не расширяет страницу шире header). */
@media(max-width:600px){
  body.page-redesign .bx_pagination_section_one{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
  body.page-redesign .bx_pagination_section_one::-webkit-scrollbar{ display:none; }
}

/* ── Результат оплаты: /personal/order/success.php и /failed.php ──────────────
   Success URL и Fail URL Робокассы. Одна карточка на обе страницы, отличается
   только акцентным цветом (--pr-accent) и иконкой. */
body.page-redesign .pc-payres{
  max-width:var(--container);
  margin:0 auto 60px;padding:0 20px;
  display:flex;justify-content:center;
}
body.page-redesign .pc-payres__card{
  --pr-accent:var(--blue);
  width:100%;max-width:560px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-hero);
  padding:40px 32px;text-align:center;
  box-shadow:0 8px 32px rgba(0,30,80,.06);
}
body.page-redesign .pc-payres__card--ok{ --pr-accent:#16a34a }
body.page-redesign .pc-payres__card--fail{ --pr-accent:#dc2626 }

body.page-redesign .pc-payres__icon{
  width:64px;height:64px;margin:0 auto 20px;color:var(--pr-accent);
}
body.page-redesign .pc-payres__icon svg{width:100%;height:100%;display:block}

body.page-redesign .pc-payres__title{
  margin:0 0 12px;font-size:26px;line-height:1.25;font-weight:700;color:var(--text);
}
body.page-redesign .pc-payres__lead{
  margin:0 0 16px;font-size:17px;line-height:1.5;color:var(--text);
}
body.page-redesign .pc-payres__lead b{font-weight:700;white-space:nowrap}
body.page-redesign .pc-payres__note{
  margin:0 0 28px;font-size:14px;line-height:1.55;color:var(--gray);
}

body.page-redesign .pc-payres__actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
body.page-redesign .pc-payres__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;
  border:1px solid var(--border);border-radius:var(--r-card);
  font-size:15px;font-weight:600;color:var(--text);text-decoration:none;
  background:#fff;transition:border-color .2s ease,color .2s ease,transform .12s ease;
}
body.page-redesign .pc-payres__btn:hover{border-color:var(--blue);color:var(--blue)}
body.page-redesign .pc-payres__btn:active{transform:translateY(1px)}
body.page-redesign .pc-payres__btn--primary{
  background:var(--grad-blue);border-color:transparent;color:#fff;
}
body.page-redesign .pc-payres__btn--primary:hover{color:#fff;opacity:.92}

@media(max-width:600px){
  body.page-redesign .pc-payres__card{padding:32px 20px;border-radius:var(--r-card)}
  body.page-redesign .pc-payres__title{font-size:22px}
  body.page-redesign .pc-payres__lead{font-size:16px}
  body.page-redesign .pc-payres__btn{width:100%}
}

/* НДС в итогах чек-аута — в css/checkout.css (справочная строка, не слагаемое). */

/* ════════════════════════════════════════════════════════════
   КНОПКИ — ОДНА СИСТЕМА НА ВЕСЬ САЙТ (31.07.2026)

   До этого каждый экран заводил свою: .basket-btn-checkout, .co-submit,
   .btn-green-gradient, .oc__btn, .lk-btn — при одинаковом внешнем виде
   и одинаковом смысле. Любая правка вида означала обход всех мест.

   Теперь вид описан ОДИН раз, а точек входа несколько:
     .tc-btn                — база (геометрия, шрифт)
     .tc-btn--primary       — главное действие: синяя заливка
     .tc-btn--ghost         — второстепенное: белая с рамкой
     .tc-btn--lg            — крупная (главный CTA страницы)
     .tc-btn--block         — во всю ширину контейнера

   Чужую разметку, которой класс не поставить (вывод платёжной системы,
   вендорские шаблоны), подключаем СЕЛЕКТОРОМ к тем же правилам —
   ниже по файлу, а не копией стилей.

   Новый код пишем на .tc-btn. Старые классы переезжают сюда по мере
   того, как трогаем соответствующий экран.
   ════════════════════════════════════════════════════════════ */

body.page-redesign .tc-btn,
body.page-redesign a.co-submit,
body.page-redesign .co-submit,
body.page-redesign .oc__pay .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 28px;
  box-sizing: border-box;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* Главное действие */
body.page-redesign .tc-btn--primary,
body.page-redesign a.co-submit,
body.page-redesign .co-submit,
body.page-redesign .oc__pay .btn {
  background: var(--blue);
  border: 0;
  color: #fff !important;   /* вендорские .btn-success и .bx-soa-order-save красят текст сами */
}
body.page-redesign .tc-btn--primary:hover,
body.page-redesign a.co-submit:hover,
body.page-redesign .co-submit:hover,
body.page-redesign .oc__pay .btn:hover {
  background: #00478F;
  color: #fff !important;
}

/* Второстепенное действие */
body.page-redesign .tc-btn--ghost {
  background: #fff;
  border: 1px solid #CAD5F0;
  color: var(--blue);
}
body.page-redesign .tc-btn--ghost:hover {
  background: #EAF1FC;
  border-color: var(--blue);
  color: var(--blue);
}

/* Размер и ширина */
body.page-redesign .tc-btn--lg,
body.page-redesign a.co-submit,
body.page-redesign .co-submit,
body.page-redesign .oc__pay .btn {
  min-height: 52px;
  padding: 0 40px;
  border-radius: 14px;
  font-size: 15px;
}
body.page-redesign .tc-btn--block,
body.page-redesign a.co-submit,
body.page-redesign .co-submit { width: 100%; }

body.page-redesign .tc-btn.is-disabled,
body.page-redesign .tc-btn:disabled,
body.page-redesign a.co-submit.is-disabled { opacity: .5; pointer-events: none; }

/* Вывод платёжной системы: класс не наш, разметка приедет обратно при обновлении
   модуля sale. Геометрию и цвет берёт из правил выше по селектору `.oc__pay .btn`,
   здесь — только то, что иначе не перебить: у кнопки инлайновый style="border-radius:32px",
   а бутстраповские .btn-success/.d-flex объявлены с !important. */
body.page-redesign .oc__pay .btn {
  width: auto !important;
  min-width: 260px;
  max-width: 100%;
  margin: 0 auto !important;
  background: var(--blue) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.page-redesign .oc__pay .btn:hover { background: #00478F !important; }

/* ── Бейдж статуса — общий кирпич (31.07.2026) ─────────────────────────────
   Один набор тонов на весь сайт: статусы заказа, отгрузки, оплаты.
   Не заводить локальных «красных плашек» под каждый экран. */
body.page-redesign .tc-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
body.page-redesign .tc-badge--wait { background: #FFF3E6; color: #A9541A; }  /* ждём действия покупателя */
body.page-redesign .tc-badge--info { background: #EAF1FC; color: #0059B9; }  /* в работе */
body.page-redesign .tc-badge--ok   { background: #E8F6EE; color: #1B7A46; }  /* завершено */
body.page-redesign .tc-badge--err  { background: #FDECEC; color: #A3282E; }  /* отказ, возврат */
body.page-redesign .tc-badge--off  { background: #F1F3F7; color: #6b7280; }  /* отменено, неактивно */


/* ── Грабер мобильной шторки — общий кирпич (31.07.2026) ───────────────────
   Полоска-«ручка» как в нативных bottom-sheet: понятна без подписи и не занимает
   строку текста. Используют чек-аут (.co__peek) и детали заказа (.lk-peek). */
body.page-redesign .tc-grab {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: #CAD5F0;
  transition: background .15s ease, width .15s ease;
}
body.page-redesign .is-open .tc-grab { background: #9FB0D4; width: 34px; }


/* ════════════════════════════════════════════════════════════
   МЕНЮ КАТАЛОГА: выпадающие подразделы (десктоп) и аккордеон (шторка)
   Разметку строит include/catalog-nav.php — один источник на три места.
   Десктопное меню живёт только от 1200px (769–1199 уходит в бургер),
   поэтому наведение здесь — единственный способ открытия, тач сюда не попадает.
   ════════════════════════════════════════════════════════════ */

body.page-redesign .site-nav{align-items:stretch!important}
body.page-redesign .nav-item{position:relative;display:flex;align-items:center}
body.page-redesign .nav-item > .nav-link{display:inline-flex;align-items:center;gap:5px}

/* Шеврон — только подсказка «здесь есть продолжение»: мельче текста и приглушён,
   иначе четыре галочки в ряд читаются как элементы управления. */
body.page-redesign .nav-caret{
  width:11px;height:11px;flex-shrink:0;opacity:.45;
  transition:transform .3s cubic-bezier(.22,.75,.25,1),opacity .25s ease;
}
body.page-redesign .nav-item.has-drop:hover .nav-caret,
body.page-redesign .nav-item.has-drop:focus-within .nav-caret{transform:rotate(180deg);opacity:1}

/* Пункт остаётся подсвеченным, пока курсор гуляет по списку (сам он уже не :hover). */
body.page-redesign .nav-item.has-drop:hover > .nav-link,
body.page-redesign .nav-item.has-drop:focus-within > .nav-link{background:#f0f4ff;color:var(--blue)}

body.page-redesign .nav-drop{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%);
  /* padding вместо отступа: между шапкой и панелью прозрачный «мост», по которому
     курсор переходит вниз, не теряя наведение (с margin список схлопывался в зазоре). */
  padding-top:6px;
  z-index:12;
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .42s;   /* исчезаем ПОСЛЕ паузы и анимации закрытия */
}
body.page-redesign .nav-item.has-drop:hover .nav-drop,
body.page-redesign .nav-item.has-drop:focus-within .nav-drop{
  visibility:visible;pointer-events:auto;transition-delay:0s;
}

body.page-redesign .nav-drop__inner{
  background:#fff;
  border-radius:16px;
  padding:8px;
  box-shadow:0 18px 40px -16px rgba(0,30,80,.28), 0 6px 16px -8px rgba(0,30,80,.14);
  display:grid;gap:1px;
  opacity:0;
  transform-origin:top center;
  transform:translateY(-6px) scaleY(.72);
  /* Пауза перед закрытием: путь к списку идёт наискось, и по дороге курсор задевает
     соседний пункт. Пока держится эта задержка, свой список не гаснет и возвращается
     мгновенно, а чужой открыться не успевает — у него своя задержка на открытие. */
  transition:opacity .2s ease .14s,transform .28s cubic-bezier(.22,.75,.25,1) .14s;
}
body.page-redesign .nav-item.has-drop:hover .nav-drop__inner,
body.page-redesign .nav-item.has-drop:focus-within .nav-drop__inner{
  opacity:1;transform:translateY(0) scaleY(1);
  transition-delay:.12s;   /* мимолётный проход мимо пункта список не открывает */
}
/* С клавиатуры ждать нечего — фокус попадает в пункт намеренно. */
body.page-redesign .nav-item.has-drop:focus-within .nav-drop__inner{transition-delay:0s}

/* Длинные списки (волосы, лицо — по 13 подразделов) в одну колонку уходят
   почти на весь экран → раскладываем в две, по семь в столбце. */
body.page-redesign .nav-drop__inner[data-cols="2"]{
  grid-auto-flow:column;
  grid-template-rows:repeat(7,auto);
}

body.page-redesign .nav-drop__inner a{
  display:block;
  padding:8px 12px;border-radius:9px;
  font:400 13.5px 'Montserrat',sans-serif;
  color:var(--text);white-space:nowrap;
  opacity:0;transform:translateY(-4px);
  /* .14s — та же пауза перед закрытием, что у самой панели: гаснут вместе, а не порознь */
  transition:opacity .18s ease .14s,transform .22s cubic-bezier(.22,.75,.25,1) .14s,background .2s ease,color .2s ease;
}
/* Пункты подтягиваются друг за другом — панель «раскрывается», а не появляется целиком.
   Задержка только на открытии: при закрытии всё гаснет разом, иначе хвост списка
   висит на экране уже после того, как курсор ушёл. */
body.page-redesign .nav-item.has-drop:hover .nav-drop__inner a,
body.page-redesign .nav-item.has-drop:focus-within .nav-drop__inner a{
  opacity:1;transform:translateY(0);
  transition-delay:calc(120ms + var(--i,0) * 16ms);   /* 120ms — пока панель ждёт наведения */
}
body.page-redesign .nav-item.has-drop:focus-within .nav-drop__inner a{
  transition-delay:calc(var(--i,0) * 16ms);
}
body.page-redesign .nav-drop__inner a:hover{background:#f0f4ff;color:var(--blue)}

/* ── Шторка: подразделы аккордеоном ───────────────────────────
   Название ведёт в раздел, шеврон раскрывает список — тап по строке не должен
   быть лотереей «перейду или раскрою». */
body.page-redesign .nav-acc__row{display:flex;align-items:stretch;gap:2px}
body.page-redesign .nav-acc__row > a{flex:1;min-width:0}
/* У корня со списком стрелку-указатель убираем: её роль берёт на себя шеврон-кнопка. */
body.page-redesign .nav-acc.has-sub .nav-acc__row > a::after{display:none}
/* Треть строки под раскрытие: в шеврон 14px пальцем не целятся, а тап мимо уводил
   в раздел — понять, что список вообще раскрывается, было неоткуда. Иконка при этом
   осталась на прежнем месте у правого края (justify-content:flex-end), выросла
   только область нажатия. Тонкая черта показывает, что целей в строке две:
   слева — перейти в раздел, справа — посмотреть, что внутри. */
body.page-redesign .nav-acc__toggle{
  width:33%;flex-shrink:0;align-self:stretch;
  border-radius:12px;border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 13px 0 0;
  position:relative;
  color:var(--text);
  transition:background .2s ease,color .2s ease;
}
body.page-redesign .nav-acc__toggle::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:22px;background:#EDF1F9;
  transition:background .2s ease;
}
/* Подсветка — только вокруг самой иконки. Залитая на треть строки, она читалась
   как пустая плашка, хотя нажимать можно всю зону. */
body.page-redesign .nav-acc__toggle::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:12px;
  background:transparent;transition:background .2s ease;
}
body.page-redesign .nav-acc__toggle svg{
  width:14px;height:14px;opacity:.5;position:relative;z-index:1;
  transition:transform .3s cubic-bezier(.22,.75,.25,1),opacity .2s ease;
}
body.page-redesign .nav-acc__toggle:active::after{background:#f0f4ff}
body.page-redesign .nav-acc__toggle[aria-expanded="true"]{color:var(--blue)}
body.page-redesign .nav-acc__toggle[aria-expanded="true"]::after{background:#f0f4ff}
body.page-redesign .nav-acc__toggle[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1}

/* Раскрытие через grid 0fr→1fr: высота списка не нужна заранее, анимация плавная
   и не ломается, когда подразделов станет больше или меньше. */
body.page-redesign .nav-acc__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .32s cubic-bezier(.22,.75,.25,1);
}
body.page-redesign .nav-acc.is-open .nav-acc__body{grid-template-rows:1fr}
body.page-redesign .nav-acc__list{
  overflow:hidden;
  display:flex;flex-direction:column;
  padding-left:10px;
  border-left:2px solid #EDF1F9;margin-left:14px;
}
body.page-redesign .nav-acc__list a{
  font:400 14px 'Montserrat',sans-serif;color:var(--gray);
  padding:9px 12px;border-radius:10px;
}
/* Стрелка-указатель у подпунктов не нужна: вложенность уже показывает линия слева,
   а длинные названия («Дополнительный уход для волос») упирались в неё вплотную. */
body.page-redesign .nav-acc__list a::after{display:none}