:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#f1f5ff;
  --stroke:rgba(15,23,42,0.10);
  --text:#0f172a;
  --muted:rgba(15,23,42,0.62);
  --muted2:rgba(15,23,42,0.48);
  --shadow:0 18px 50px rgba(2,6,23,0.10);
  --shadow2:0 8px 24px rgba(2,6,23,0.08);
  --blue:#2563eb;
  --blue2:#1d4ed8;
  --teal:#06b6d4;
  --ring:0 0 0 4px rgba(37,99,235,0.18);
  --radius:18px;
  --radius2:14px;
  --container:1200px;
  --font:-apple-system, BlinkMacSystemFont,
         "SF Pro Text", "SF Pro Display",
         "Inter",
         "Segoe UI",
         Roboto,
         Helvetica,
         Arial,
         "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
/* Keep layout stable between pages with/without vertical scroll */
html{overflow-y:scroll; scrollbar-gutter:stable;}
body{
  margin:0;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.01em;
  color:var(--text);
  /* Solid background — no visible transitions/bands */
  background:var(--bg);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{max-width:var(--container); margin:0 auto; padding:0 18px}
.muted{color:var(--muted)}

/* Product page: compact info block (instead of external Netlab link) */
.miniInfo{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px 14px;
}
.miniInfo__row{display:grid; grid-template-columns:90px 1fr; gap:10px; align-items:start}
.miniInfo__row + .miniInfo__row{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(20,32,64,.12)}
.miniInfo__k{font-size:12px; letter-spacing:.02em; color:var(--muted)}
.miniInfo__v{font-size:13px; color:var(--text)}

@media (max-width: 720px){
  .miniInfo__row{grid-template-columns:1fr; gap:4px}
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.h1{font-size:42px; line-height:1.05; letter-spacing:-0.02em; margin:0}
.h2{font-size:22px; line-height:1.2; margin:0}
.lead{font-size:16px; line-height:1.65; color:var(--muted); margin:0}

.siteHeader{
  position:sticky;
  top:0;
  z-index:50;
  /* Solid header to avoid any visible bands/gradients */
  background:var(--bg);
  backdrop-filter:none;
  border-bottom:1px solid var(--stroke);
}
.siteHeader.is-scrolled{box-shadow:var(--shadow2)}
.siteHeader__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}

.logo{display:flex; align-items:center; gap:10px; min-width:220px}
.logo__mark{
  width:38px; height:38px;
  border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(37,99,235,0.95), rgba(6,182,212,0.85));
  color:#fff;
  font-weight:800;
  letter-spacing:0.02em;
  box-shadow:0 10px 24px rgba(37,99,235,0.22);
}
.logo__text{display:flex; flex-direction:column; line-height:1.1}
.logo__title{font-weight:800; letter-spacing:-0.02em}
.logo__sub{font-size:12px; color:var(--muted)}

.topNav{display:flex; align-items:center; gap:10px}
.topNav__link{
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  font-weight:600;
  font-family:inherit;
  letter-spacing:inherit;
}

/* Buttons in nav must inherit font exactly (so Каталог matches links) */
button.topNav__link{font:inherit; font-weight:600;}

.topNav__link--btn{
  background:transparent;
  border:0;
  cursor:pointer;
  font:inherit;
  color:inherit;
  padding:10px 12px;
  appearance:none;
  -webkit-appearance:none;
}
.topNav__link--btn:focus-visible{outline:2px solid rgba(37,99,235,0.45); outline-offset:2px; border-radius:12px}
.topNav__link:hover{background:rgba(15,23,42,0.06); color:var(--text)}
.topNav__link.is-active{background:rgba(37,99,235,0.10); color:var(--blue2)}

.siteHeader__right{display:flex; align-items:center; gap:10px}

.search{position:relative; display:flex; align-items:center}
.search__input{
  width:340px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.86);
  border-radius:14px;
  padding:10px 38px 10px 12px; /* room for magnifier */
  outline:none;
  box-shadow:0 1px 0 rgba(15,23,42,0.02);
}
.search__input:focus{box-shadow:var(--ring); border-color:rgba(37,99,235,0.35)}
.search__btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.90);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:rgba(15,23,42,0.66);
}
.search__btn:hover{background:rgba(15,23,42,0.04); color:rgba(15,23,42,0.80)}
.search__btn:focus-visible{outline:2px solid rgba(37,99,235,0.45); outline-offset:2px}
.search__icon{width:18px; height:18px; display:block}

/* dropdown trigger should look like other nav links */
.catMenu__trigger{
  background:transparent;
  border:0;
  cursor:pointer;
  font:inherit;
  font-weight:600 !important;
  line-height:inherit;
  letter-spacing:inherit;
  -webkit-appearance:none;
  appearance:none;
}
.catMenu__trigger::after{content:none !important;}
.catMenu__trigger .chev{display:none !important;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.90);
  color:var(--text);
  font:inherit;          /* inherit family/weight/letter-spacing */
  font-weight:700;       /* force bold like header menu */
  font-size:14px;
  line-height:1;
  letter-spacing:inherit;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(15,23,42,0.02);
}
.btn, a.btn{ text-decoration:none; }
button.btn{ -webkit-appearance:none; appearance:none; }
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow2)}
.btn:active{transform:translateY(0)}
.btn--primary{
  border-color:rgba(37,99,235,0.35);
  background:linear-gradient(135deg, rgba(37,99,235,0.95), rgba(6,182,212,0.85));
  color:#fff;
  box-shadow:0 16px 34px rgba(37,99,235,0.22);
}
.btn--primary:hover{box-shadow:0 18px 44px rgba(37,99,235,0.28)}
.btn--ghost{background:transparent}
.btn--sm{padding:8px 12px; border-radius:12px; font-size:14px}

/* ===== Catalog mega menu ===== */
.catMenu{position:relative}
.catMenu__trigger{position:relative; user-select:none}
.catMenu__trigger .chev{
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:2px;
  opacity:0.95;
}

/* Netlab-like dropdown */
.catMenu__panel{
  /* Centered like a real mega-menu (not anchored to the trigger width) */
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  top:calc(var(--header-h, 64px) + 10px);
  width:min(1180px, calc(100vw - 32px));
  border-radius:18px;
  border:1px solid var(--stroke);
  background:#fff;
  backdrop-filter:none;
  box-shadow:var(--shadow);
  padding:0;
  display:none;
  overflow:hidden;
  z-index:200;
}
.catMenu[data-open="1"] .catMenu__panel{display:block}
/* Fallback (if JS fails / blocked): open dropdown while trigger is focused */
/* Prevent menu from staying open after PJAX navigation due to focus remaining on a clicked link */
.catMenu[data-open="1"]:focus-within .catMenu__panel{display:block}

.catMenu__grid{display:grid; grid-template-columns: 340px 1fr; min-height:min(560px, 70vh)}

/* Left column */
.catMenu__lvl1{
  list-style:none; margin:0; padding:14px 0;
  max-height:min(560px, 70vh);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  background:#f7f8fc;
  position:relative;
  /* subtle hint that the list is scrollable (no visible scrollbar) */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.catMenu__lvl1::-webkit-scrollbar{width:0; height:0}
.catMenu__item{position:relative}
.catMenu__item[data-active="1"] > .catMenu__link{background:rgba(15,23,42,0.06)}
.catMenu__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  color:var(--text);
  font-weight:800;
  border-left:4px solid transparent;
}
.catMenu__link:hover{background:rgba(15,23,42,0.05)}
.catMenu__item[data-active="1"] > .catMenu__link{border-left-color:var(--blue)}
.catMenu__name{
  min-width:0;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.catMenu__count{
  flex:0 0 auto;
  font-size:12px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(37,99,235,0.12);
  color:var(--blue2);
  font-weight:900;
}

/* Disable old flyouts (we render on the right) */
.catMenu__fly,.catMenu__fly2{display:none !important}

/* Right column */
.catMenu__aside{
  padding:18px 18px 16px;
  background:#fff;
  border-left:1px solid var(--stroke);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.catMenu__hint{display:grid; gap:6px; color:var(--text)}
.catMenu__title{font-weight:900; font-size:20px; letter-spacing:0.2px}
.catMenu__subTitle{color:var(--muted); font-weight:800}
.catMenu__hintText{color:var(--muted)}

.catMenu__dynamic{min-height:200px}

/* Right pane content */
.catAside{display:grid; gap:12px; color:var(--text)}
.catAside__head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.catAside__headLeft{display:grid; gap:6px}
.catAside__title{font-weight:900; font-size:26px; line-height:1.15}

.catAside__cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(37,99,235,0.95), rgba(6,182,212,0.85));
  color:#fff;
  font-weight:900;
  border:1px solid rgba(37,99,235,0.18);
  box-shadow:0 12px 28px rgba(37,99,235,0.22);
}
.catAside__cta:hover{filter:brightness(0.98)}

.catAside__back{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  cursor:pointer;
}
.catAside__backIcon{width:10px; height:10px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:0.9}

.catAside__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 24px;
  max-height:calc(min(560px, 70vh) - 110px);
  /* allow mouse-wheel scrolling when the subgroups list is long */
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-right:2px;
  scrollbar-width:none;
  /* subtle hint that the list is scrollable (no visible scrollbar) */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.catAside__grid::-webkit-scrollbar{width:0; height:0}

/* Reusable subtle scroll hint (no visible scrollbar) */
.catFade{
  scrollbar-width:none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.catFade::-webkit-scrollbar{width:0;height:0}

/* ===== Catalog page: always-visible sidebar (lvl1) + right panel (lvl2/3) */
.catPage{display:grid;grid-template-columns:300px 1fr;gap:16px}
.catPage__side{border:1px solid var(--stroke);border-radius:18px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.catPage__sideHead{padding:14px 14px 10px;border-bottom:1px solid var(--stroke)}
.catPage__sideTitle{font-weight:800;letter-spacing:-0.02em}
.catPage__sideScroll{max-height:calc(min(680px, 70vh));overflow-y:auto;overflow-x:hidden;padding:10px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.catPage__sideScroll::-webkit-scrollbar{width:0;height:0}
.catPage__link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;color:var(--text);text-decoration:none;border-left:4px solid transparent;font-weight:700}
.catPage__link:hover{background:rgba(15,23,42,0.04)}
.catPage__link.is-active{background:rgba(37,99,235,0.07);border-left-color:var(--blue)}
.catPage__name{min-width:0;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catPage__badge{flex:0 0 auto;min-width:34px;text-align:center;font-size:12px;font-weight:800;color:var(--blue);background:rgba(37,99,235,0.10);border:1px solid rgba(37,99,235,0.16);border-radius:999px;padding:2px 8px}

.catPage__main{border:1px solid var(--stroke);border-radius:18px;background:#fff;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.catPage__mainHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--stroke)}
.catPage__title{font-size:22px;font-weight:900;letter-spacing:-0.03em}
.catPage__gridWrap{flex:1 1 auto;min-height:calc(min(680px, 70vh));max-height:calc(min(680px, 70vh));overflow-y:auto;overflow-x:hidden;padding:12px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.catPage__gridWrap::-webkit-scrollbar{width:0;height:0}
.catPage__grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:6px 28px}

.catPage__item{display:flex;align-items:center;gap:10px;padding:10px 10px;height:52px;border-radius:14px;color:var(--text);text-decoration:none;font-weight:800;min-width:0}
.catPage__item:hover{background:rgba(37,99,235,0.06)}
.catPage__child{opacity:.92;padding-left:18px;height:46px;font-weight:750}
.catPage__item.is-expanded .catPage__chev{transform:rotate(45deg)}
.catPage__itemName{min-width:0;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catPage__meta{margin-left:auto;display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.catPage__count{font-size:12px;font-weight:800;color:var(--muted);background:rgba(15,23,42,0.06);border:1px solid rgba(15,23,42,0.08);border-radius:999px;padding:2px 8px}
.catPage__chev{width:10px;height:10px;border-right:2px solid rgba(15,23,42,0.35);border-bottom:2px solid rgba(15,23,42,0.35);transform:rotate(-45deg)}

.catPage__drill{width:34px;height:34px;border-radius:999px;border:1px solid rgba(15,23,42,0.10);background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.catPage__drill:hover{background:rgba(15,23,42,0.04)}

.catPage__back{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 10px;border:1px solid rgba(15,23,42,0.10);background:#fff;border-radius:999px;font-weight:700;color:var(--text);cursor:pointer;width:max-content}
.catPage__back:hover{background:rgba(15,23,42,0.04)}

.catPage__hint{
  position:sticky;
  bottom:0;
  padding:10px 16px 14px;
  margin:10px -16px -12px;
  border-top:1px solid var(--stroke);
  background:#fff;
}

@media (max-width: 980px){
  .catPage{grid-template-columns:1fr}
  .catPage__sideScroll,.catPage__gridWrap{max-height:52vh}
  .catPage__title{font-size:18px}
  .catPage__grid{grid-template-columns:1fr}
}

.catAside__row{display:flex; align-items:center; gap:10px}

.catAside__item{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  height:52px;                 /* одинаковая высота -> нет "каши" */
  border-radius:14px;
  color:var(--text);
  font-weight:800;
  text-align:left;
  background:transparent;      /* строгий список, не карточки */
  border:1px solid transparent;
  cursor:pointer;
  min-width:0;
}
a.catAside__item{cursor:pointer}
.catAside__item:hover{
  background:rgba(37,99,235,0.06);
  border-color:rgba(15,23,42,0.10);
}

.catAside__name{
  flex:1 1 auto;
  min-width:0;
  line-height:1.15;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.catAside__meta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.catAside__count{
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(15,23,42,0.06);
  color:rgba(15,23,42,0.62);
  font-weight:900;
}

.catAside__empty{color:var(--muted); padding:6px 2px}

.catAside__drill{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.10);
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.catAside__drill:hover{background:rgba(37,99,235,0.06); border-color:rgba(15,23,42,0.14)}
.catAside__chev{width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); opacity:0.85}

@media (max-width: 860px){
  .catMenu__panel{left:12px; right:12px; transform:none; width:auto}
  .catMenu__grid{grid-template-columns:1fr; min-height:auto}
  .catMenu__lvl1{max-height:42vh}
  .catMenu__aside{border-left:0; border-top:1px solid var(--stroke)}
  .catAside__grid{grid-template-columns:1fr; max-height:42vh}
  .catAside__title{font-size:22px}
}


.iconBtn{
  display:none;
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.90);
  cursor:pointer;
}
.iconBtn__bars{display:block; width:18px; height:12px; position:relative; margin:0 auto}
.iconBtn__bars:before,.iconBtn__bars:after,.iconBtn__bars{content:""; background:rgba(15,23,42,0.80); height:2px; border-radius:99px; position:absolute; left:0; right:0}
.iconBtn__bars{top:50%; transform:translateY(-50%)}
.iconBtn__bars:before{top:-6px}
.iconBtn__bars:after{top:6px}

.navDrawer{border-top:1px solid var(--stroke)}
.navDrawer__inner{padding:10px 18px 14px; display:grid; gap:8px}
.navDrawer__link{
  padding:12px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.86);
  border:1px solid var(--stroke);
  font-weight:700;
}
.navDrawer__meta{
  padding:12px 12px;
  border-radius:14px;
  background:rgba(15,23,42,0.04);
  border:1px dashed rgba(15,23,42,0.14);
}

.siteMain{flex:1 0 auto; padding:22px 0 48px}
.siteFooter{flex-shrink:0; padding:26px 0 38px; border-top:1px solid var(--stroke); background:rgba(255,255,255,0.55)}
.siteFooter__inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.siteFooter__title{font-weight:800}
.siteFooter__meta{color:var(--muted); font-size:12px; text-align:right}

.panel{
  background:rgba(255,255,255,0.90);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  padding:16px;
}
.panel__title{font-weight:800; margin-bottom:10px}
.hr{height:1px; background:var(--stroke); margin:12px 0}

.page{min-height:60vh}
.pageHead{padding:10px 0}
.headRow{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}

.hero{padding:18px 0 8px}
.hero__inner{display:grid; grid-template-columns:0.55fr 1.25fr 0.75fr; gap:18px; align-items:center; position:relative}
/* HERO on the homepage can "break out" to full viewport width,
   while the main content stays aligned to the site container.
   The left categories navigator is placed in the left gutter (absolute),
   so it must NOT shift the whole layout. */
.hero--wide{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:0;
  padding-right:0;
}
.hero--wide .hero__inner{
  max-width:var(--container);
  margin:0 auto;
  /* IMPORTANT: .hero--wide breaks out of the main .container (100vw),
     so we must re-add the same horizontal padding as .container.
     Otherwise the top (hero) blocks look wider than the sections below. */
  padding:0 18px;
  /* quick actions block moved below the hero, so the hero content can use full width */
  grid-template-columns:1fr;
  gap:18px;
}


.heroMedia{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 520px);
  gap:28px;
  align-items:center;
  margin-top:14px;

  /* unified glass panel (Variant 2) */
  padding:34px 28px;
  border-radius:22px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 22px 60px rgba(0,0,0,.08);
  backdrop-filter:blur(14px);
}
/* KPIs: column on the RIGHT of the logo, with a subtle glass panel to avoid "empty" look */
.hero__stats--stack{
  width:100%;
  /* Не ограничиваем ширину панели, иначе визуально нижний ряд KPI выглядит уже.
     Панель должна тянуться на всю ширину своей колонки. */
  max-width:none;
  justify-self:stretch;
  align-self:center;

  margin-top:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  /* одинаковая высота строк -> все KPI выглядят как единая сетка */
  grid-auto-rows: 1fr;
  gap:12px;

  padding:0;
  border-radius:0;
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
}

@media (max-width: 560px){
  .hero__stats--stack{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
.hero__stats--stack .stat{
  width:100%;
  padding:12px 14px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  box-shadow:none;
  /* текст всегда сверху, без "центровки" при разной высоте */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.heroLogo{margin:0; flex:0 0 auto; display:flex; justify-content:center; align-items:center; height:100%; min-height:170px}

@media (max-width: 980px){
  .heroMedia{grid-template-columns:1fr; gap:16px}
  .hero__stats--stack{padding:12px}
  .heroLogo{width:100%; text-align:left; margin-bottom:0}
}


.heroLogo{margin-top:0}
.heroLogo__img{max-width:440px; width:100%; height:auto; max-height:170px; object-fit:contain; display:block; opacity:0.95}
@media (max-width: 1100px){
  .hero--wide .hero__inner{grid-template-columns:1fr;}
  .hero--wide .hero__inner > :nth-child(3){display:none;}
}
@media (max-width: 860px){
  .hero--wide .hero__inner{padding:0 12px;}
  .heroNav{display:none;}
}


/* Home left categories navigator: lives in the left gutter on wide screens */
.heroNav{position:absolute; left:calc(-320px - 24px); top:0; width:320px; padding:18px; border-radius:var(--radius); background:rgba(255,255,255,0.92); border:1px solid var(--stroke); box-shadow:var(--shadow); overflow:hidden}

/* If the viewport isn't wide enough for a left gutter, show the block above the hero content */
@media (max-width: 1500px){
  .heroNav{position:relative; left:auto; top:auto; width:auto; margin-bottom:14px; grid-column:1 / -1}
}
.heroNav__head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px}
.heroNav__title{font-weight:800}
.heroNav__all{font-weight:700; color:var(--primary); text-decoration:none}
.heroNav__all:hover{text-decoration:underline}
.heroNav__list{display:flex; flex-direction:column; gap:6px; padding-right:0}
.heroNav__item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:14px; text-decoration:none; color:var(--text); background:rgba(15,23,42,0.03); border:1px solid rgba(15,23,42,0.06)}
.heroNav__item:hover{background:rgba(37,99,235,0.08); border-color:rgba(37,99,235,0.22)}
.heroNav__name{min-width:0; flex:1; font-weight:650; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.heroNav__badge{flex:0 0 auto; font-size:12px; font-weight:700; color:var(--primary); background:rgba(37,99,235,0.10); border:1px solid rgba(37,99,235,0.18); padding:2px 8px; border-radius:999px}
.heroNav__more{margin-top:6px; padding:10px 12px; border-radius:14px; border:1px dashed rgba(15,23,42,0.18); text-decoration:none; font-weight:700; color:var(--muted); text-align:center}
.heroNav__more:hover{border-style:solid; color:var(--text); background:rgba(15,23,42,0.03)}

.heroNavPop{position:absolute; left:calc(100% + 12px); top:18px; width:min(520px, 52vw); max-height:440px; overflow:hidden; padding:14px; border-radius:var(--radius); background:#fff; border:1px solid var(--stroke); box-shadow:var(--shadow)}
.heroNavPop__title{font-weight:900; letter-spacing:-0.02em; margin-bottom:10px}
.heroNavPop__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  max-height:380px;
  /* allow mouse-wheel scrolling when the list is long */
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-right:8px;
}
.heroNavPop__grid.catFade{max-height:380px}
.heroNavPop__item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:14px; text-decoration:none; color:var(--text); border:1px solid rgba(15,23,42,0.08); background:rgba(15,23,42,0.02)}
.heroNavPop__item:hover{background:rgba(37,99,235,0.08); border-color:rgba(37,99,235,0.22)}
.heroNavPop__name{min-width:0; flex:1; font-weight:650; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.heroNavPop__count{flex:0 0 auto; font-size:12px; font-weight:700; color:var(--muted); background:rgba(15,23,42,0.04); border:1px solid rgba(15,23,42,0.06); padding:2px 8px; border-radius:999px}

@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .heroNav{display:none}
}

.hero__left{padding:18px}
.hero__left > .kicker,
.hero__left > .h1,
.hero__left > .lead{padding-left:10px}
/* Homepage: hero content should align with the same container width as the blocks below.
   The .hero--wide section already has container padding via .hero__inner,
   so extra padding on .hero__left makes the header look narrower. */
.hero--wide .hero__left{padding:0}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.hero__stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:16px}
.stat{
  padding:12px;
  border-radius:var(--radius2);
  background:rgba(255,255,255,0.75);
  border:1px solid var(--stroke);
  /* единое поведение по всему сайту: текст начинается сверху, карточки не "плавают" */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.stat__k{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.12em}
.stat__v{font-weight:800; margin-top:6px}
.hero__right{position:relative}
.heroCard{position:relative; z-index:1; padding:18px; border-radius:var(--radius); background:rgba(255,255,255,0.90); border:1px solid var(--stroke); box-shadow:var(--shadow)}
.heroCard__cap{font-weight:800; margin-bottom:10px}
.heroCard__link{display:flex; justify-content:space-between; padding:12px 12px; border-radius:14px; border:1px solid var(--stroke); background:rgba(15,23,42,0.03); font-weight:700; margin-top:10px}
.heroCard__link:hover{background:rgba(37,99,235,0.08); border-color:rgba(37,99,235,0.22)}
.heroCard__note{margin-top:12px; font-size:12px; line-height:1.55}
.heroGlow{display:none !important;}


.section{margin-top:20px}

/* Full‑width quick actions bar (homepage) */
.section--tight{margin-top:14px}
.qaBar{
  background:rgba(255,255,255,0.92);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  padding:14px 16px;
}
.qaBar__cap{font-weight:900; letter-spacing:-0.02em}
.qaBar__links{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:10px}
.qaLink{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  background:rgba(15,23,42,0.03);
  border:1px solid rgba(15,23,42,0.06);
  font-weight:800;
}
.qaLink:hover{background:rgba(37,99,235,0.08); border-color:rgba(37,99,235,0.22)}
.qaLink__arrow{color:var(--primary); font-weight:900}
.qaBar__note{margin-top:10px; font-size:12px}

@media (max-width: 760px){
  .qaBar__links{grid-template-columns:1fr}
}

/* Homepage "How to buy" panel */
.howPanel{padding:18px}
.howPanel__grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:18px; align-items:stretch}
.howPanel__left{display:flex; flex-direction:column; min-height:100%}
.howPanel__content{max-width:72ch}
/* Keep buttons visually "lifted" while still ending on the same baseline as the steps */
.howPanel__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:16px}
.howSteps{display:grid; gap:10px}
.howStep{
  display:flex; gap:12px; align-items:center;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(15,23,42,0.02);
}
.howStep__num{
  width:28px; height:28px; flex:0 0 28px;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(37,99,235,0.10);
  border:1px solid rgba(37,99,235,0.22);
  color:var(--primary);
  font-weight:900;
}
.howStep__title{font-weight:900; letter-spacing:-0.01em}
.howStep__text{font-size:13px; margin-top:4px; line-height:1.35}
/* (moved above to support flex alignment in the left column) */

@media (max-width: 980px){
  .howPanel__grid{grid-template-columns:1fr}
  .howPanel__cta{margin-top:14px; padding-top:0}
}

/* Tender / government procurement block */
.tenderPanel{
  padding:18px;
}
.tenderPanel__grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:18px; align-items:stretch}
.tenderPanel__left{display:flex; flex-direction:column; min-height:100%}
.tenderPanel__list{display:grid; gap:10px}
.tItem{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(15,23,42,0.02);
  font-weight:650;
  line-height:1.35;
}
.tenderPanel__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:14px}

@media (max-width: 980px){
  .tenderPanel__grid{grid-template-columns:1fr}
  .tenderPanel__cta{margin-top:14px; padding-top:0}
}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.sectionTitle{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted)}
.link{color:var(--blue2); font-weight:800}
.link:hover{text-decoration:underline}

.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px}
.grid2{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px}
.checkoutStack{display:flex; flex-direction:column; gap:12px}


.card{
  display:block;
  padding:14px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.90);
  box-shadow:var(--shadow2);
}
.card:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.card__title{font-weight:800}
.card__meta{color:var(--muted); font-size:12px; margin-top:6px}

.productStrip{display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; align-items:stretch}

/* Сетка товаров в категориях (плитка) */
.productGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
  align-items:stretch;
  margin-top:10px;
}

/* Карточка товара в блоке «Пять свежих позиций»
   Задача: все карточки одинаковой высоты и без «съезжаний» из-за длинных цен/текста. */
.pCard{display:grid; grid-template-rows:220px 1fr; height:100%; border:1px solid var(--stroke); border-radius:var(--radius); background:rgba(255,255,255,0.92); overflow:hidden; box-shadow:var(--shadow2)}
.pCard:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.pCard__media{
  height:100%;
  position:relative;
  z-index:0;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(37,99,235,0.08), rgba(6,182,212,0.06));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
/*
  Критичный фикс: некоторые изображения (нестандартные пропорции/метаданные)
  при width/height:100% могут визуально «уезжать» и создавать эффект,
  будто они тянут за собой нижнюю часть карточки.
  Поэтому держим картинку строго внутри медиа-зоны через max-*.
*/
.pCard__media img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center;
  background:#fff;
  border-radius:14px;
  display:block;
}
.pCard__ph{font-weight:900; color:rgba(37,99,235,0.65)}
.pCard__body{
  padding:12px;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  height:140px;
  min-width:0; /* критично для flex: даём детям сжиматься, иначе длинные слова ломают сетку */
  background:rgba(255,255,255,0.92)
}
.pCard__title{
  font-weight:800;
  font-size:13px;
  line-height:1.25;
  min-width:0;
  /* если встречается длинная «склейка» символов (модель/артикул без пробелов) — не ломаем карточку */
  overflow-wrap:anywhere;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.5em
}
.pCard__meta{
  color:var(--muted);
  font-size:12px;
  margin-top:6px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:1.2em
}

.pCard__meta2{
  font-size:12px;
  margin-top:-2px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pCard__row{
  margin-top:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}

/*
  Фикс «обрезанного бейджа»:
  когда цена/подпись длинные, блок цен должен уметь сжиматься (ellipsis),
  а бейдж — всегда оставаться видимым внутри карточки.
*/
.pCard__row .prices{min-width:0; overflow:hidden}
.pCard__row .badge{
  justify-self:end;
  align-self:end;
  /* не обрезаем текст "в наличии" / "под заказ" */
  max-width:none;
  overflow:visible;
  text-overflow:clip;
}

/* Не даём ценам переноситься на новую строку — именно это ломало высоту/верстку */
.pCard .prices__main,
.pCard .prices__sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Значок наличия всегда фиксированный и не «прыгает» */
.pCard .badge{flex:0 0 auto; white-space:nowrap}

.list{display:grid; gap:10px}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-radius:var(--radius); border:1px solid var(--stroke); background:rgba(255,255,255,0.92); box-shadow:var(--shadow2); min-width:0; max-width:100%}
.row:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.row__thumb{width:48px; height:38px; border-radius:12px; border:1px solid var(--stroke); background:rgba(15,23,42,0.03); overflow:hidden; display:grid; place-items:center; flex:0 0 auto}
.row__thumb img{width:100%; height:100%; object-fit:contain; background:#fff}
.thumb__placeholder{font-weight:900; color:rgba(37,99,235,0.65)}
.row__main{min-width:0; flex:1; display:flex; flex-direction:column}
.row__title{font-weight:800; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; overflow-wrap:anywhere; word-break:break-word; hyphens:auto}
.row__meta{color:var(--muted); font-size:12px; margin-top:6px}
.row__meta2{font-size:12px; margin-top:4px}
.row__side{display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:8px; flex:0 0 auto}

.prices{display:flex; flex-direction:column; align-items:flex-end}
.prices__main{font-weight:900}
.prices__sub{font-size:12px; color:var(--muted)}

.badge{font-size:12px; font-weight:900; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background:rgba(15,23,42,0.03)}
.badge.ok{border-color:rgba(16,185,129,0.28); background:rgba(16,185,129,0.12); color:rgba(6,95,70,0.95)}
.badge.no{border-color:rgba(239,68,68,0.26); background:rgba(239,68,68,0.10); color:rgba(127,29,29,0.95)}

.row__badge{font-size:12px; font-weight:900; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background:rgba(15,23,42,0.03)}
.row__badge.ok{border-color:rgba(16,185,129,0.28); background:rgba(16,185,129,0.12); color:rgba(6,95,70,0.95)}
.row__badge.no{border-color:rgba(239,68,68,0.26); background:rgba(239,68,68,0.10); color:rgba(127,29,29,0.95)}

.infoPanel{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.infoPanel__title{font-weight:900; margin-bottom:6px}
.infoPanel__tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{font-size:12px; font-weight:800; padding:8px 10px; border-radius:999px; border:1px solid var(--stroke); background:rgba(37,99,235,0.08); color:var(--blue2)}

.crumbs{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.crumbs a{color:var(--blue2); font-weight:800}
.crumbs a:hover{text-decoration:underline}

/* Listing tools / pagination */
.listTools{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 0 12px}
.listTools__left{display:flex; align-items:center; gap:10px}
.select{border:1px solid var(--stroke); background:rgba(255,255,255,0.92); border-radius:12px; padding:8px 10px; font-weight:700; color:var(--text)}
.pager{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 0 4px}
.pager__btn{display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 12px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,0.92); font-weight:800; color:var(--text); text-decoration:none}
.pager__btn:hover{background:rgba(37,99,235,0.10); border-color:rgba(37,99,235,0.22)}
.pager__btn.is-active{background:rgba(37,99,235,0.14); border-color:rgba(37,99,235,0.30); color:var(--blue2)}
.pager__dots{color:var(--muted); font-weight:900; padding:0 4px}

/* Catalog tree */
.catTree{display:grid; gap:10px}
.catNode{
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  background:rgba(255,255,255,0.92);
  overflow:hidden;
}
.catNode__sum{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  cursor:pointer;
}
.catNode__sum::-webkit-details-marker{display:none}
.catNode__name{font-weight:900; flex:1; min-width:0}
.catNode__count{font-size:12px; font-weight:900; padding:6px 10px; border-radius:999px; background:rgba(15,23,42,0.03); border:1px solid var(--stroke)}
.catNode__open{font-size:12px; font-weight:900; color:var(--blue2); padding:8px 10px; border-radius:999px; border:1px solid rgba(37,99,235,0.22); background:rgba(37,99,235,0.08)}
.catNode__open:hover{background:rgba(37,99,235,0.12)}
.catNode__children{padding:0 12px 12px; display:grid; gap:8px}
.catNode__empty{padding:0 12px 12px; font-size:12px}
.catNode .catNode{border-radius:16px; background:rgba(15,23,42,0.02)}

/* Offer */
.kv{padding:12px; border-radius:var(--radius2); border:1px solid var(--stroke); background:rgba(15,23,42,0.02)}
.kv__label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.12em}
.kv__value{font-weight:900; font-size:18px; margin-top:6px}
.imgBox{border-radius:var(--radius); border:1px solid var(--stroke); background:#fff; padding:12px; box-shadow:var(--shadow2)}
.imgBox img{width:100%; height:auto; object-fit:contain}
.prose{line-height:1.75; color:rgba(15,23,42,0.78)}
.prose ul,.prose ol{margin:10px 0 0 18px}

.specs{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:10px}
.spec{padding:12px; border-radius:var(--radius2); border:1px solid var(--stroke); background:rgba(15,23,42,0.02)}
.spec__k{font-size:12px; color:var(--muted); font-weight:800}
.spec__v{margin-top:8px; font-weight:700; overflow-wrap:anywhere; word-break:break-word}

@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .hero__right{display:none}
  .productStrip{grid-template-columns:repeat(2, 1fr)}
  .grid{grid-template-columns:repeat(2, 1fr)}
  .specs{grid-template-columns:1fr}
  .search__input{width:240px}
}

@media (max-width: 720px){
  .topNav{display:none}
  .iconBtn{display:grid; place-items:center}
  .search{display:none}
  .catMenu__panel{display:none !important}
  .h1{font-size:32px}
  .productStrip{grid-template-columns:1fr}
  .pCard{grid-template-rows:210px 1fr}
  .pCard__media{height:100%}
  .grid2{grid-template-columns:1fr}
  .row{flex-direction:column; align-items:flex-start}
  .row__side{align-items:center; width:100%}
  .prices{align-items:flex-start}
  .siteFooter__inner{flex-direction:column; align-items:flex-start}
  .siteFooter__meta{text-align:left}
}

/* Variant 2 responsive */
@media (max-width: 980px){
  .heroMedia{
    grid-template-columns: 1fr;
    padding:18px;
    gap:16px;
  }
  .hero__stats--stack{
    grid-template-columns: 1fr;
  }
}
/* === unified wide layout (same width as hero) === */
.container--wide{
  max-width: 1240px;   /* можешь поставить 1200/1280 если у тебя hero другой */
  margin: 0 auto;
  padding: 0 24px;
}

/* чтобы на мобиле не было жирных полей */
@media (max-width: 640px){
  .container--wide{ padding: 0 16px; }
}



/* небольшой сдвиг заголовков вправо, чтобы совпадали с внутренним отступом карточек */
.section__head > div:first-child{padding-left:10px}


/* --- NAV: make 'Каталог' button look exactly like other links --- */
.catMenu .topNav__link--btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}
.catMenu .topNav__link--btn:focus-visible{
  outline:2px solid rgba(37,99,235,0.35);
  outline-offset:2px;
}
.chev{
  width:auto; height:auto;
  border:0;
  transform:none;
  margin-left:0;
  opacity:0.7;
  font-size:12px;
  line-height:1;
}
.chev::before{content:"▾";}



.subcatFilter{display:flex;gap:10px;margin:16px 0 24px;flex-wrap:wrap}
.subcatBtn{padding:6px 14px;border-radius:999px;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.6);cursor:pointer;font-size:13px}
.subcatBtn.active{background:#111;color:#fff;border-color:#111}

/* ===== Category header alignment ===== */
.pageHead{padding-left:10px;padding-right:10px}
.pageHead .crumbs{margin-left:2px}

/* ===== Subcategory sticky filter ===== */
.subcatSticky{
  position: sticky;
  top: 72px; /* под шапкой */
  z-index: 30;
  margin-top: 6px;
  padding: 6px 0;
  border-radius: 14px;
  background: linear-gradient(to bottom, rgba(246,247,251,.92), rgba(246,247,251,.55), rgba(246,247,251,0));
  isolation: isolate;
}
.subcatFilter{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  overflow: visible;
  padding: 2px 6px;
  
  
}

.subcatBtn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space:nowrap;
  font-size:13px;
  color: var(--text);
  transition: .18s ease;
}
.subcatBtn:hover{
  /* Avoid shimmer on light gradients / thin borders */
  transform:none;
  box-shadow:none;
  background: rgba(255,255,255,.78);
}
.subcatBtn.active{background:#0f172a;color:#fff;border-color:#0f172a}
.subcatCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(15,23,42,.08);
  color: rgba(15,23,42,.70);
}
.subcatBtn.active .subcatCount{background: rgba(255,255,255,.18); color: rgba(255,255,255,.92)}
.subcatFade{
  position:absolute;
  top:0; bottom:0;
  width: 24px;
  pointer-events:none;
}
.subcatFade--left{left:0;background:linear-gradient(to right, rgba(246,247,251,1), rgba(246,247,251,0))}
.subcatFade--right{right:0;background:linear-gradient(to left, rgba(246,247,251,1), rgba(246,247,251,0))}

/* ===== Category controls ===== */
.catControls{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top: 12px;
}
.catControls__left{display:flex; align-items:center; flex-wrap:wrap; gap:10px}
.catControls__right{display:flex; align-items:flex-end; gap:10px}
.togglePills{display:flex; gap:8px; flex-wrap:wrap}
.pillBtn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  font-size:13px;
  color: var(--text);
  transition:.18s ease;
}
.pillBtn:hover{
  /* Avoid shimmer on light gradients / thin borders */
  transform:none;
  box-shadow:none;
  background: rgba(255,255,255,.78);
}
.pillBtn.active{background:#0f172a; color:#fff; border-color:#0f172a}
.selectLike{display:flex; flex-direction:column; gap:6px}
.selectLike__select{
  height: 34px;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,.12);
  padding: 0 10px;
  background: rgba(255,255,255,.75);
  font-size: 13px;
  outline:none;
}
.selectLike__select:focus{box-shadow: var(--ring)}

/* ===== Images perf ===== */
.pCard__img img{content-visibility:auto}


/* FIX: constrain subcats width */
.subcatSticky{width:100%; max-width:100%}


/* FIX: show all subcategories in multiple rows */
.subcatFilter{flex-wrap:wrap; overflow:visible}
.subcatSticky .subcatFade{display:none}

/* ===== ListTools with inline filters ===== */
.listTools--top{align-items:center}
.listTools__mid{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center}
.selectLike--inline{flex-direction:row; align-items:center; gap:8px}
.selectLike--inline .muted{font-size:12px}
@media (max-width: 860px){
  .listTools__mid{justify-content:flex-start}
}

/* ===== FINAL listTools layout ===== */
.listTools--top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.listTools--top .listTools__left{display:flex;flex-direction:column;gap:6px}
.listTools--top .listTools__right{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.listTools--top .togglePills{margin:0}
@media (max-width: 860px){
  .listTools--top{align-items:flex-start}
  .listTools--top .listTools__right{justify-content:flex-start}
}

/* ===== Panel header (products) ===== */
.panelHead{display:flex;align-items:center;justify-content:space-between;gap:16px}
.panelHead__left{display:flex;flex-direction:column;gap:6px}
.panelHead__right{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:nowrap}
.panelHead__right .togglePills{display:flex;gap:8px;flex-wrap:nowrap}
.panelHead__right .pillBtn{white-space:nowrap}
.selectLike--inline{display:flex;flex-direction:row;align-items:center;gap:8px}
.selectLike--inline .muted{font-size:12px;white-space:nowrap}
@media (max-width: 980px){
  .panelHead{align-items:flex-start}
  .panelHead__right{flex-wrap:wrap;justify-content:flex-start}
}

/* ===== Offer prices ===== */
.priceCard{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  border-radius: 18px;
  padding: 14px;
}
.priceCard__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.priceTabs{display:flex; gap:8px; flex-wrap:wrap}
.priceTab{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  cursor:pointer;
  transition: .18s ease;
}
.priceTab:hover{transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,23,.08)}
.priceTab.is-active{background:#0f172a;color:#fff;border-color:#0f172a}
.priceMain{margin-top:12px}
.priceMain__label{font-size:12px;color:rgba(2,6,23,.55)}
.priceMain__value{font-size:30px; font-weight:800; letter-spacing:-.02em}
.priceMini{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:12px}
.priceMini__item{
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.priceMini__item b{font-size:14px}
.priceAll{margin-top:10px}
.priceAll summary{cursor:pointer; font-weight:700}
@media (max-width: 860px){
  .priceMini{grid-template-columns: 1fr}
}

/* ===== Offer redesign ===== */
.offerLayout{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:16px;
}
.offerLayout__media,.offerLayout__side{
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  border-radius: 18px;
}
.offerLayout__media{padding:14px}
.offerImg{
  width:100%;
  height:100%;
  max-height: 520px;
  object-fit: contain;
  display:block;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
}
.offerImg--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(2,6,23,.55);
  min-height: 320px;
}
.offerSide{padding:14px}
.offerPrices{display:grid; gap:10px}
.offerPrice{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  padding: 12px 14px;
}
.offerPrice__label{font-size:12px;color:rgba(2,6,23,.55)}
.offerPrice__value{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.offerSpecs{margin-top:14px}
.offerSpecs__title{font-weight:800;margin-bottom:10px}
.specGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 14px;
}
.specRow{
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 10px 12px;
}
.specRow__k{font-size:12px;color:rgba(2,6,23,.55)}
.specRow__v{margin-top:4px;font-weight:700}
.offerExtra summary{cursor:pointer;font-weight:800}
@media (max-width: 980px){
  .offerLayout{grid-template-columns: 1fr}
  .specGrid{grid-template-columns: 1fr}
  .offerImg{max-height: 440px}
}

/* ===== Offer side tidy ===== */
.offerSide{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.offerSide > *{
  width:100%;
}
.offerPrice,
.kv{
  min-height:92px;
}

/* ===== Offer side stat cards ===== */
.offerStat{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  padding: 12px 14px;
  min-height: 92px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.offerStat__label{font-size:12px;color:rgba(2,6,23,.55)}
.offerStat__value{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:6px}

/* Make the availability card denser: keep the same place, reduce "empty" feel */
.offerStat--stock{
  min-height: 72px;            /* smaller than price cards */
  padding: 10px 14px;          /* tighter vertical rhythm */
  justify-content:flex-start;  /* avoid pushing content to bottom */
}
.offerStat__stock{margin-top:6px}

.offerBadgeBig{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
}
.offerNote{margin-left:10px;font-size:12px;color:rgba(2,6,23,.55)}

/* Offer availability line (keep layout, change look: not a button) */
.stockLine{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.stockDot{
  font-size: 12px;
  line-height: 1;
}
.stockDot.ok{color: rgba(34,197,94,.9);} /* soft green */
.stockDot.no{color: rgba(245,158,11,.95);} /* soft amber */
.stockText{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.01em;
}
.stockNote{
  font-size: 12px;
  color: rgba(2,6,23,.55);
}

/* ===== Offer layout tweaks ===== */
.offerImg{max-height: 420px}
.offerLayout{grid-template-columns: 1fr 1fr}
.offerPrices{grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 980px){
  .offerLayout{grid-template-columns: 1fr}
  .offerPrices{grid-template-columns: 1fr}
  .offerImg{max-height: 440px}
}

.offerDesc{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(2,6,23,.85);
}


/* Meta links (manufacturer site/service) should not break layout */
.metaBlock{display:flex; flex-direction:column; gap:12px; margin-top:10px}
.metaRow{display:grid; grid-template-columns:180px 1fr; gap:12px; align-items:start}
.metaRow__title{font-size:12px; color:var(--muted); font-weight:800; padding-top:10px}
.metaRow__body{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.metaBtn{max-width:100%}
.metaHint{font-size:12px; color:var(--muted); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.metaText{font-weight:700; overflow-wrap:anywhere; word-break:break-word}
.metaText__k{font-size:12px; color:var(--muted); font-weight:800}
.metaText__v{margin-top:6px}
@media (max-width: 980px){
  .metaRow{grid-template-columns:1fr}
  .metaRow__title{padding-top:0}
  .metaHint{max-width:100%}
}

/* Link inside characteristics rows: show short domain text, keep layout stable */
.propLink{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,.22);
  word-break: break-word;
}
.propLink:hover{ text-decoration-color: rgba(0,0,0,.55); }



/* ===== Cart / Checkout ===== */
.cartBtn{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration:none;
  white-space:nowrap;
}
.cartBtn:hover{ background: rgba(255,255,255,.88); }
.cartBtn__icon{ font-size:16px; }
.cartBtn__text{ font-weight:800; font-size:13px; letter-spacing:-.01em; }
.cartBtn__badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background: rgba(34,197,94,.95);
  color:#fff;
  font-size:12px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.flashStack{ display:flex; flex-direction:column; gap:10px; margin:14px 0 6px; }
.flash{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  border-radius:14px;
  padding:10px 12px;
  font-size:14px;
  box-shadow: var(--shadow);
}
.flash.ok{ border-color: rgba(34,197,94,.25); }
.flash.error{ border-color: rgba(239,68,68,.25); }

.cartBox{ margin-top:12px; }
.addCart{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.addCart__qty{ display:flex; flex-direction:column; gap:4px; }
.addCart__qty .muted{ font-size:12px; font-weight:800; }

/* Make qty input and all product-card buttons the same size */
.qtyInput{
  width: 120px;
  height: 40px;
  padding: 0 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  font: inherit;
  font-size:14px;
  line-height:40px;
  font-weight:800;
  box-sizing:border-box;
}
.cartBox .btn,
.cartBox a.btn,
.cartBox button.btn,
button[data-quick-open].btn,
a.btn.btn--ghost{
  height:40px;
  padding:0 14px;
  font-size:14px;
  line-height:40px;
  border-radius:14px;
  font-weight:800;
}

.cartTable{ display:flex; flex-direction:column; gap:12px; }
.cartHead{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cartRows{ display:flex; flex-direction:column; gap:12px; }
.cartRow{
  display:grid;
  grid-template-columns: 84px 1fr 220px;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
}
.cartRow.is-pending{ opacity:.72; pointer-events:none; }
.cartRow.is-removing{ opacity:.9; }
.cartRow__media img{
  width:84px; height:84px; object-fit:cover;
  border-radius:14px; border:1px solid rgba(0,0,0,.08);
}
.cartPh{
  width:84px; height:84px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
  font-weight:900;
}
.cartTitle a{ color: inherit; text-decoration:none; font-weight:900; }
.cartTitle a:hover{ text-decoration:underline; text-underline-offset:4px; }
.cartPrice{ font-weight:900; margin-top:8px; }
.cartControls{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.cartQty{ display:flex; flex-direction:column; gap:6px; }
.cartQty__input{ width:120px; }
.cartLine{ font-weight:900; }
.cartRemove{ margin-top:6px; }
.cartFoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:6px; }
.cartTotal{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:16px; font-weight:900; }
.cartCta{ display:flex; gap:10px; flex-wrap:wrap; }

.checkoutGrid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; }
@media (max-width: 980px){
  .cartRow{ grid-template-columns: 84px 1fr; }
  .cartControls{ grid-column: 1 / -1; align-items:center; }
  .checkoutGrid{ grid-template-columns: 1fr; }
}
.formGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 980px){ .formGrid{ grid-template-columns:1fr; } }
.fld{ display:flex; flex-direction:column; gap:6px; }
.fld__label{ font-size:12px; font-weight:900; color: rgba(2,6,23,.72); }
.fld__input, .fld__area{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  font-size:14px;
}
.fld__area{ min-height:84px; resize:vertical; }
.miniTotal{ display:flex; flex-direction:column; gap:8px; }
.miniTotal__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.miniTotal__k{ color: rgba(2,6,23,.60); }
.miniTotal__v{ font-weight:900; }

.successBox{ display:flex; flex-direction:column; gap:10px; }
.successActions{ display:flex; gap:10px; flex-wrap:wrap; }




/* === Cart button (header) === */
.cartBtn2{ padding:10px 14px; border-radius:14px; text-decoration:none; }
.cartBadge{
  margin-left:8px;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  background:linear-gradient(135deg, rgba(37,99,235,0.95), rgba(6,182,212,0.85));
  color:#fff;
}
/* Cart badge: absolutely positioned so button width never "jumps".
   When empty, hide completely (no reserved space). */
.cartBtn2{ position:relative; }
.cartBadge{
  position:absolute;
  right:-6px;
  top:-6px;
  transform:none;
}
.cartBadge.is-hidden{ display:none; }

/* === Cart UI refresh === */
.cartRow{ grid-template-columns: 84px 1fr; }
.cartRow__main{ min-width:0; }
/* Cart row: align "Цена / Кол-во / Сумма" and values on one line (no "stairs") */
.cartGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: 160px 180px 180px 1fr;
  grid-template-rows: auto auto;
  column-gap:12px;
  row-gap:6px;
  align-items:center;
}
.cartGrid__lbl{
  font-size:12px;
  font-weight:800;
  color: rgba(15,23,42,0.62);
}
.cartGrid__val{ align-self:center; }
.cartGrid .qtyInput{ width:140px; }
.cartRow__actions{ display:flex; justify-content:flex-end; align-items:center; }
.cartFoot{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.08);
}
.cartTotal{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:16px; font-weight:900; }
.cartTotal__value{ font-size:22px; font-weight:900; }

/* === Checkout polish === */
.checkoutForm .formGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

/* Form fields (site style) */
.field{ min-width:0; }
.field__label{ display:block; font-size:12px; font-weight:800; margin:0 0 6px; color:var(--text); }
.field__hint{ margin-top:6px; font-size:12px; color:rgba(15,23,42,0.62); }
.field__input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.88);
  color: var(--text);
  font: inherit;
  font-size:14px;
  outline:none;
  box-shadow: 0 1px 0 rgba(15,23,42,0.02);
}
.field__input:not(textarea){
  height:44px;
}
.field__input::placeholder{ color:rgba(15,23,42,0.42); }
.field__input:focus{ border-color:rgba(37,99,235,0.35); box-shadow:0 0 0 3px rgba(37,99,235,0.12); }

/* Styled file picker — same height as other inputs */
.filePick{
  position:relative;
  width:100%;
  height:44px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.88);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(15,23,42,0.02);
  cursor:pointer;
  user-select:none;
}
.filePick:focus-within{ border-color:rgba(37,99,235,0.35); box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
.filePick__input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.filePick__btn{
  font: inherit;
  font-size:14px;
  font-weight:800;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.95);
  white-space:nowrap;
}
.filePick__name{
  flex:1;
  min-width:0;
  font-size:13px;
  color:rgba(15,23,42,0.62);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Quick order modal */
.modal{ position:fixed; inset:0; z-index:999; display:none; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(2,6,23,0.52); backdrop-filter: blur(8px); }
.modal__dialog{
  position:relative;
  width:min(760px, calc(100vw - 32px));
  margin:10vh auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.96);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__head{ padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(0,0,0,0.06); }
.modal__title{ font-weight:900; font-size:16px; }
.modal__close{ width:38px; height:38px; border-radius:12px; border:1px solid rgba(15,23,42,0.12); background:rgba(255,255,255,0.9); cursor:pointer; font:inherit; }
.modal__close:hover{ background:rgba(37,99,235,0.10); border-color:rgba(37,99,235,0.22); }
.modal__body{ padding:16px; }
.quickGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.quickPreview{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:16px; border:1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.72); }
.quickPreview__img{ width:56px; height:56px; border-radius:14px; border:1px solid rgba(0,0,0,0.06); background:rgba(15,23,42,0.04); object-fit:cover; }
.quickPreview__title{ font-weight:900; line-height:1.2; }
.quickPreview__meta{ font-size:12px; margin-top:4px; color:rgba(15,23,42,0.62); }
.modal__actions{ margin-top:14px; display:flex; gap:12px; justify-content:flex-end; }

@media (max-width: 980px){
  .quickGrid{ grid-template-columns: 1fr; }
  .modal__dialog{ margin:6vh auto; }
  .modal__actions{ flex-direction:column; }
  .modal__actions .btn{ width:100%; }
}
.checkoutActions{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.orderList{ display:flex; flex-direction:column; gap:10px; }
.orderItem{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
}
.orderItem__title{ font-weight:800; }
.orderItem__sum{ margin-top:6px; font-weight:900; }
.orderTotal{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.orderTotal__value{ font-size:22px; font-weight:900; }

@media (max-width: 980px){
  .cartGrid{ grid-template-columns: 1fr 1fr; }
  .cartRow__actions{ justify-content:flex-start; }
  .checkoutForm .formGrid{ grid-template-columns: 1fr; }
  .checkoutActions{ flex-direction:column-reverse; align-items:stretch; }
  .checkoutActions .btn{ width:100%; }
}

.cartTotal .muted{ margin:0; }


/* ===== Premium navigation (no header flicker) ===== */
.header{ min-height:72px; }
.header .cartBadge{ min-width:28px; text-align:center; }
/* Smooth page transitions (PJAX-style)
   NOTE: opacity-only avoids shimmering/ripple artifacts on gradients and thin borders. */
#pjax-main{ transition: opacity .18s ease; contain: paint; }
#pjax-main.is-leaving{ opacity:0; }
#pjax-main.is-entering{ opacity:0; }
#pjax-main.is-entered{ opacity:1; }
/* Keep header stable on load */
html.js body{ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }


.list>*{min-width:0}


/* ===========================
   Mobile header fixes (v5)
   Scope: ONLY mobile <= 720px
   Desktop remains unchanged.
   =========================== */
@media (max-width: 720px){
  /* Header height + safe side padding */
  .siteHeader{ position:sticky; top:0; z-index:50; }
  .siteHeader__inner{
    min-height:56px;
    padding:8px 14px;      /* fixes "pressed to the left" on iOS */
    gap:10px;
  }

  /* Brand block: keep subtitle like desktop, but compact */
  .logo{ gap:10px; min-width:0; }
  .logo__text{ min-width:0; }
  .logo__title{ font-size:16px; }
  .logo__sub{
    display:block;          /* show on mobile */
    font-size:12px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 52vw;
  }

  /* Search shrinks to icon only (input hidden) */
  .search{ width:auto; }
  .search__input{ display:none; }
  .search__btn{ width:44px; height:44px; padding:0; border-radius:14px; }

  /* Right-side actions spacing */
  .siteHeader__right{ gap:8px; }
  .siteHeader__right > *{ flex:0 0 auto; }

  /* Cart becomes icon button (same HTML; hide text span) */
  a.btn.cartBtn2{
    width:44px;
    height:44px;
    padding:0;
    border-radius:14px;
    display:grid;
    place-items:center;
    position:relative;
    color: rgba(37,99,235,0.95);
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  a.btn.cartBtn2 > span:not(.cartBadge){ display:none; }
  a.btn.cartBtn2::before{
    content:"";
    width:22px;
    height:22px;
    display:block;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M7%2018c-1.1%200-2%20.9-2%202s.9%202%202%202%202-.9%202-2-.9-2-2-2Zm10%200c-1.1%200-2%20.9-2%202s.9%202%202%202%202-.9%202-2-.9-2-2-2ZM6.2%206h14.1c.6%200%201%20.5.9%201.1l-1.2%207.1c-.2%201.1-1.1%201.8-2.2%201.8H9.1c-1%200-1.9-.7-2.2-1.7L4.3%203H2a1%201%200%201%201%200-2h3.1c.5%200%20.9.3%201%20.8L6.2%206Zm1%202%201.5%206.8c.1.2.2.2.4.2h8.7c.2%200%20.3-.1.4-.3L19.2%208H7.2Z%27/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M7%2018c-1.1%200-2%20.9-2%202s.9%202%202%202%202-.9%202-2-.9-2-2-2Zm10%200c-1.1%200-2%20.9-2%202s.9%202%202%202%202-.9%202-2-.9-2-2-2ZM6.2%206h14.1c.6%200%201%20.5.9%201.1l-1.2%207.1c-.2%201.1-1.1%201.8-2.2%201.8H9.1c-1%200-1.9-.7-2.2-1.7L4.3%203H2a1%201%200%201%201%200-2h3.1c.5%200%20.9.3%201%20.8L6.2%206Zm1%202%201.5%206.8c.1.2.2.2.4.2h8.7c.2%200%20.3-.1.4-.3L19.2%208H7.2Z%27/%3E%3C/svg%3E") no-repeat center / contain;
  }
  a.btn.cartBtn2 .cartBadge{
    position:absolute;
    top:6px;
    right:6px;
    transform:none;
  }

  /* Burger button: match cart style (premium) */
  .iconBtn{
    width:44px;
    height:44px;
    border-radius:14px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display:grid;
    place-items:center;
  }
  .iconBtn__bar{
    display:block;
    width:18px;
    height:2px;
    border-radius:99px;
    background: rgba(37,99,235,0.95);
    margin:3px 0;
  }
}




/* === Mobile header (iOS‑friendly) — only <=720px === */
@media (max-width: 720px){
  .siteHeader{position:sticky; top:0; z-index:50;}
  .siteHeader__inner{padding-left:14px; padding-right:14px; height:64px;}

  /* Hide desktop nav/search on mobile (actions live as icons) */
  .topNav{display:none !important;}
  .search{display:none !important;}

  /* Left: logo */
  .logo{gap:10px; min-width:0;}
  .logo__mark{width:40px; height:40px; border-radius:14px; font-size:14px;}
  .logo__text{min-width:0;}
  .logo__title{font-size:16px; line-height:1.1;}
  .logo__sub{
    display:block;
    font-size:12px;
    line-height:1.1;
    opacity:.72;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:52vw;
  }

  /* Right: actions */
  .siteHeader__right{gap:10px;}
  .cartBtn2, .iconBtn{
    width:44px; height:44px;
    padding:0;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 18px rgba(15,23,42,.08);
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    position:relative;
  }

  /* Cart becomes icon-only (keep text for accessibility) */
  .cartBtn2 > span:first-child{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
  .cartBtn2::before{
    content:"";
    width:22px; height:22px;
    background: currentColor;
    color: var(--primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5h14l-1.6 8.1a2 2 0 0 1-2 1.6H9.2a2 2 0 0 1-2-1.6L5.4 3.8H3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9.5' cy='20' r='1.2' fill='%23000'/%3E%3Ccircle cx='17.5' cy='20' r='1.2' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5h14l-1.6 8.1a2 2 0 0 1-2 1.6H9.2a2 2 0 0 1-2-1.6L5.4 3.8H3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9.5' cy='20' r='1.2' fill='%23000'/%3E%3Ccircle cx='17.5' cy='20' r='1.2' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* Badge (count) */
  .cartBadge{
    position:absolute;
    top:6px; right:6px;
    min-width:18px; height:18px;
    padding:0 5px;
    border-radius:999px;
    font-size:11px;
    line-height:18px;
    background: var(--primary);
    color:#fff;
    box-shadow: 0 6px 14px rgba(11,95,255,.25);
  }

  /* Burger (3 bars) */
  .iconBtn{flex-direction:column; gap:6px;}
  .iconBtn__bar{
    display:block;
    width:20px;
    height:2px;
    border-radius:99px;
    background: var(--primary);
  }

  /* Optional: a little nicer press */
  .cartBtn2:active, .iconBtn:active{
    transform: translateY(1px);
  }
}



/* ===== RSS News block (homepage) ===== */
.infoPanel--news{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:16px;
  align-items:start;
}
.infoPanel--news .infoPanel__left{display:flex; flex-direction:column; gap:8px; min-width:0}
.infoPanel--news .infoPanel__right{min-width:0}

.infoPanel--news .infoPanel__tags{margin-top:6px}

/* Full-width news panel (used on главной и /news) */
.infoPanel--newsFull{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  justify-content:flex-start;
  width:100%;
}
.newsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.newsHead__text{min-width:0}
.newsHead .infoPanel__title{margin:0; text-align:left;}
.newsHead .btn{flex:0 0 auto; margin-top:2px}

.newsList--page{gap:12px}
.newsHead--page{padding-bottom:6px; border-bottom:1px solid rgba(15,23,42,0.08)}
@media (max-width: 900px){
  .newsHead{flex-direction:column; align-items:stretch}
  .newsHead .btn{width:100%}
}

.newsList{
  display:grid;
  gap:10px;
}
.newsItem{
  display:block;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 1px 0 rgba(15,23,42,0.02);
  transition: .18s ease;
  min-width:0;
}
.newsItem:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
  border-color: rgba(37,99,235,0.18);
  background: rgba(255,255,255,0.82);
}
.newsItem__title{
  font-weight:900;
  line-height:1.25;
  letter-spacing:-0.01em;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.newsItem__meta{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
  font-weight:800;
}
.newsItem__desc{
  margin-top:8px;
  font-size:13px;
  color: rgba(15,23,42,0.70);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width: 980px){
  .infoPanel--news{grid-template-columns:1fr;}
}