/* =============================================================================
   CENTERSHIN.RU — дизайн-система
   ---------------------------------------------------------------------------
   Написана с нуля под фирменный стиль (папка «centershin fs») и макет
   главной new4.html. Ключевые решения макета:
     * прямые углы — никаких скруглений, кроме мелких служебных элементов;
     * заголовки капсом, плотный жирный шрифт;
     * синий — основной, оранжево-красный — акцент и призыв к действию;
     * тёмный герой-блок с подбором поверх фотографии.

   Ничего не наследуется от старой темы Stroyka: имена классов свои,
   единый префикс `cs-`. Файл один, порядок разделов = порядок страницы.
   ========================================================================== */

/* ── 1. Токены ───────────────────────────────────────────────────────── */
:root{
  /* фирменные цвета */
  --nv:#00339F;          /* синий, основной */
  --nv-d:#002377;        /* синий тёмный, ховер */
  --nv-l:#1e56c8;
  --nv-50:#eef3fd;
  --nv-100:#dbe5fa;
  --or:#E9432D;          /* красный, акцент */
  --or-d:#c8351f;
  --or-50:#fdeeeb;

  /* нейтральные */
  --ink:#131a24;
  --ink-2:#39414f;
  --ink-3:#697280;
  --ln:#e2e6ec;
  --ln-2:#eef1f5;
  --bg:#f4f6f9;
  --paper:#fff;
  --dark:#0f1522;

  /* статусы */
  --ok:#12a150;
  --warn:#e08b16;
  --err:#E9432D;

  /* типографика */
  --font:'HelveticaNeueCyr','Roboto',-apple-system,'Segoe UI',Arial,sans-serif;
  --font-h:'Proxima Nova Cond','Roboto Condensed','Roboto',var(--font);

  /* геометрия */
  --w:1340px;            /* контейнер */
  --gut:16px;
  --r:0px;               /* прямые углы — так в макете */
  --r-sm:2px;

  --sh-1:0 1px 3px rgba(16,24,40,.08);
  --sh-2:0 8px 24px -8px rgba(16,24,40,.22);
  --sh-3:0 22px 50px -26px rgba(0,0,0,.7);
  --t:.18s;
}

/* ── 2. База ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--nv);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--or)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:800;line-height:1.15;margin:0 0 .6em}
h1{font-size:34px;letter-spacing:-.3px}
h2{font-size:26px}
h3{font-size:20px}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
table{border-collapse:collapse;width:100%}
.cs-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.cs-wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.cs-section{margin:36px 0}
.cs-muted{color:var(--ink-3)}
.cs-nowrap{white-space:nowrap}

/* ── 3. Кнопки ───────────────────────────────────────────────────────── */
.cs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border:0;border-radius:var(--r);
  background:var(--nv);color:#fff;
  font:700 14px/1 var(--font-h);letter-spacing:.02em;
  transition:background var(--t),color var(--t);
}
.cs-btn:hover{background:var(--nv-d);color:#fff}
.cs-btn--accent{background:var(--or)}
.cs-btn--accent:hover{background:var(--or-d)}
.cs-btn--ghost{background:transparent;color:var(--nv);box-shadow:inset 0 0 0 1px var(--nv)}
.cs-btn--ghost:hover{background:var(--nv);color:#fff}
.cs-btn--light{background:#fff;color:var(--nv);box-shadow:inset 0 0 0 1px var(--ln)}
.cs-btn--light:hover{background:var(--nv-50);color:var(--nv)}
.cs-btn--sm{height:36px;padding:0 14px;font-size:13px}
.cs-btn--lg{height:52px;padding:0 30px;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.cs-btn--block{width:100%}
.cs-btn[disabled]{opacity:.5;pointer-events:none}

/* ── 4. Поля ─────────────────────────────────────────────────────────── */
.cs-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.cs-label{font:700 10px/1 var(--font-h);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.cs-input,.cs-select,.cs-textarea{
  width:100%;height:42px;padding:0 12px;
  background:#fff;border:1px solid var(--ln);border-radius:var(--r);
  color:var(--ink);transition:border-color var(--t),box-shadow var(--t);
}
.cs-textarea{height:auto;padding:10px 12px;min-height:96px;resize:vertical}
.cs-input:hover,.cs-select:hover{border-color:var(--nv-l)}
.cs-input:focus,.cs-select:focus,.cs-textarea:focus{
  outline:0;border-color:var(--nv);box-shadow:inset 0 0 0 1px var(--nv);
}
.cs-select{
  -webkit-appearance:none;appearance:none;padding-right:32px;cursor:pointer;
  background-repeat:no-repeat;background-position:right 12px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2300339F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cs-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
.cs-check input{width:18px;height:18px;accent-color:var(--nv);margin:0}
/* вариант списком: способ доставки и оплаты занимает всю строку,
   иначе радиокнопки выстраиваются в ряд и подписи наезжают друг на друга */
.cs-check--row{display:flex;width:100%;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--ln-2)}
.cs-check--row:last-child{border-bottom:0}
.cs-check--row input{margin-top:2px;flex:0 0 auto}
.cs-error{color:var(--err);font-size:13px;margin-top:4px}
.cs-hint{color:var(--ink-3);font-size:12px}

/* ── 5. Шапка ────────────────────────────────────────────────────────── */
.cs-topline{background:var(--nv);color:#fff;text-align:center;font-size:13px}
.cs-topline a{color:#fff;text-decoration:underline;display:inline-block;padding:8px 0}

.cs-topbar{background:#fff;border-bottom:1px solid var(--ln-2)}
.cs-topbar__in{display:flex;align-items:center;gap:20px;height:42px;font-size:13px;color:var(--ink-2)}
.cs-topbar__spring{margin-left:auto}
.cs-topbar__phone{font:800 17px/1 var(--font-h);color:var(--ink)}
.cs-topbar a{color:var(--ink-2)}
.cs-topbar a:hover{color:var(--nv)}
.cs-topbar__in > span{display:inline-flex;align-items:center;gap:6px}
.cs-city{
  border:0;background:none;padding:0;
  border-bottom:1px dashed currentColor;cursor:pointer;color:var(--nv);
  font:inherit;line-height:1.2;
}
.cs-city:hover{color:var(--or)}

.cs-header{background:#fff}
.cs-header__in{display:grid;grid-template-columns:210px 1fr auto;align-items:center;gap:24px;padding:14px 0}
.cs-logo img{height:44px;width:auto}
.cs-search{display:flex;min-width:0}
.cs-search__pick{
  display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;
  background:var(--nv-50);color:var(--nv);border:1px solid var(--ln);border-right:0;
  font:700 14px/1 var(--font-h);white-space:nowrap;
}
.cs-search__pick:hover{background:var(--nv-100);color:var(--nv)}
.cs-search__input{flex:1 1 auto;min-width:0;height:46px;border:1px solid var(--ln);border-right:0;padding:0 14px}
.cs-search__go{width:60px;height:46px;background:var(--or);color:#fff;border:0}
.cs-search__go:hover{background:var(--or-d)}
.cs-actions{display:flex;align-items:center;gap:6px}
.cs-action{display:flex;align-items:center;gap:9px;padding:6px 10px;color:var(--ink)}
.cs-action:hover{color:var(--nv)}
.cs-action__ico{position:relative;display:flex}
.cs-action__cnt{
  position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;
  background:var(--or);color:#fff;border-radius:9px;
  font:700 11px/18px var(--font);text-align:center;
}
/* подпись и значение — в столбик, иначе «Отследить» и «Заказы»
   слипаются в одну строку */
.cs-action > span:last-child{display:flex;flex-direction:column;gap:1px}
.cs-action__t{display:block;font-size:11px;color:var(--ink-3);line-height:1.1}
.cs-action__v{display:block;font:700 13px/1.2 var(--font-h);white-space:nowrap}

.cs-nav{background:#fff;border-top:1px solid var(--ln-2);box-shadow:var(--sh-1)}
.cs-nav__in{display:flex;align-items:stretch}
.cs-nav__cat{
  display:inline-flex;align-items:center;gap:10px;padding:0 22px;
  background:var(--nv);color:#fff;font:800 14px/1 var(--font-h);
  text-transform:uppercase;letter-spacing:.04em;border:0;
}
.cs-nav__cat:hover{background:var(--nv-d);color:#fff}
.cs-nav__list{display:flex;align-items:stretch;list-style:none;margin:0;padding:0}
.cs-nav__link{
  display:inline-flex;align-items:center;gap:8px;padding:0 16px;height:52px;
  color:var(--ink);font-weight:600;font-size:14px;
  border-bottom:3px solid transparent;
}
.cs-nav__link:hover{color:var(--nv);border-bottom-color:var(--or)}
.cs-nav__link svg{fill:currentColor;opacity:.75}

/* мега-меню */
.cs-mega{position:relative}
.cs-mega__body{
  position:absolute;left:0;top:100%;z-index:60;min-width:260px;
  background:#fff;box-shadow:var(--sh-2);border:1px solid var(--ln);
  padding:10px 0;display:none;
}
.cs-mega:hover .cs-mega__body,
.cs-mega.is-open .cs-mega__body{display:block}
.cs-mega__body a{display:block;padding:8px 18px;color:var(--ink);font-size:14px}
.cs-mega__body a:hover{background:var(--nv-50);color:var(--nv)}

/* ── 6. Герой с подбором (макет new4) ────────────────────────────────── */
.cs-hero{position:relative;overflow:hidden;background:var(--dark);margin-bottom:28px}
.cs-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-hero__sh{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,14,26,.94),rgba(8,14,26,.6) 46%,rgba(8,14,26,.18));
}
.cs-hero__in{
  position:relative;display:grid;grid-template-columns:minmax(0,560px) 1fr;
  gap:32px;align-items:center;padding:34px 30px;
}
.cs-hero__txt{color:#fff;max-width:480px}
.cs-kick{
  display:inline-block;margin:0 0 12px;padding:6px 12px;background:var(--or);
  color:#fff;font:800 11px/1 var(--font-h);letter-spacing:.1em;text-transform:uppercase;
}
.cs-hero__t{margin:0 0 12px;font-size:44px;line-height:1.04;text-transform:uppercase;color:#fff}
.cs-hero__d{margin:0 0 22px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.82)}

/* подборщик */
.cs-picker{background:#fff;box-shadow:var(--sh-3)}
.cs-picker__tabs{display:flex;background:#f1f4f8;border-bottom:1px solid var(--ln)}
.cs-picker__tab{
  flex:1;border:0;background:none;padding:15px 10px;
  font:700 15px/1 var(--font-h);color:var(--ink-3);
  border-bottom:3px solid transparent;transition:var(--t);
}
.cs-picker__tab:hover{color:var(--nv)}
.cs-picker__tab.is-on{background:#fff;color:var(--nv);border-bottom-color:var(--or)}
.cs-picker__body{padding:16px 18px 20px}
.cs-picker__mode{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cs-picker__mode label{font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer}
.cs-picker__mode label.is-on{color:var(--nv);border-bottom:1px solid var(--nv)}
.cs-switch{
  position:relative;width:46px;height:24px;flex:0 0 46px;border:0;padding:0;
  background:var(--nv);transition:background .2s;
}
.cs-switch.is-on{background:var(--or)}
.cs-switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;transition:transform .2s}
.cs-switch.is-on i{transform:translateX(22px)}
.cs-picker__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.cs-picker__grid--3{grid-template-columns:repeat(3,1fr)}
.cs-picker__wide{grid-column:1/-1}
.cs-picker__pane{display:none}
.cs-picker__pane.is-on{display:block}

/* ── 7. Акции ────────────────────────────────────────────────────────── */
.cs-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px}
.cs-head__t{margin:0;font-size:28px}
.cs-head__t b{color:var(--or);font-weight:800}
.cs-head__sub{margin:2px 0 0;color:var(--ink-3);font-size:14px}
.cs-head__sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.cs-arr{
  width:38px;height:38px;border:0;background:var(--nv-100);color:var(--nv);
  display:inline-flex;align-items:center;justify-content:center;
}
.cs-arr:hover{background:var(--nv);color:#fff}
.cs-arr svg{fill:currentColor}

.cs-promos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cs-promo{position:relative;background:#fff;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.cs-promo__pic{position:relative;aspect-ratio:16/9;background:var(--nv);overflow:hidden}
.cs-promo__pic img{width:100%;height:100%;object-fit:cover}
.cs-promo__badge{
  position:absolute;top:0;left:0;z-index:2;padding:5px 10px;
  background:var(--or);color:#fff;font:800 10px/1 var(--font-h);
  letter-spacing:.08em;text-transform:uppercase;
}
.cs-promo__badge--nv{background:var(--nv)}
.cs-promo__body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1 1 auto}
.cs-promo__t{margin:0 0 6px;font:700 15px/1.3 var(--font-h);color:var(--nv)}
.cs-promo__t a{color:inherit}
.cs-promo__d{margin:0 0 12px;font-size:13px;color:var(--ink-3);line-height:1.45}
.cs-promo__more{
  margin-top:auto;align-self:flex-start;color:var(--or);font-weight:700;font-size:13px;
  border-bottom:1px solid currentColor;
}

/* ── 8. Карточка товара ──────────────────────────────────────────────── */
.cs-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.cs-products--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1199.98px){.cs-products--4{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}}
.cs-products--6{grid-template-columns:repeat(auto-fill,minmax(195px,1fr))}

.cs-card{
  background:#fff;box-shadow:var(--sh-1);display:flex;flex-direction:column;
  position:relative;transition:box-shadow var(--t),transform var(--t);
}
.cs-card:hover{box-shadow:var(--sh-2)}
.cs-card__marks{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:6px}
.cs-mark{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:var(--sh-1)}
.cs-mark svg{fill:var(--nv)}
.cs-mark--winter svg{fill:#2b7fd4}
.cs-mark--summer svg{fill:#e0a01a}
.cs-mark--stud svg{fill:var(--or)}

.cs-card__pic{aspect-ratio:1;padding:14px;display:flex;align-items:center;justify-content:center;background:#fff}
.cs-card__pic img{max-height:100%;width:auto;object-fit:contain}
.cs-card__body{padding:0 14px 14px;display:flex;flex-direction:column;flex:1 1 auto;gap:8px}
.cs-badges{display:flex;flex-wrap:wrap;gap:5px}
.cs-badge{
  padding:4px 8px;font:700 10px/1 var(--font-h);letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--ink-3);
}
.cs-badge--sale{background:var(--or)}
.cs-badge--hot{background:var(--nv)}
.cs-badge--new{background:var(--ok)}
.cs-badge a{color:#fff}
.cs-card__name{font-size:14px;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-card__name a{color:inherit}
.cs-card__name a:hover{color:var(--nv)}
.cs-stock{font-size:13px;font-weight:600}
.cs-stock--in{color:var(--ok)}
.cs-stock--out{color:var(--ink-3)}
.cs-rating{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.cs-stars{display:inline-flex;gap:1px}
.cs-stars svg{fill:var(--ln)}
.cs-stars .is-on{fill:#f0a500}
.cs-card__prices{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.cs-price{font:800 22px/1 var(--font-h);color:var(--nv)}
.cs-price--old{font-size:14px;color:var(--ink-3);text-decoration:line-through;font-weight:400}
.cs-card__buy{display:flex;gap:0;margin-top:2px}

/* счётчик количества */
.cs-qty{display:inline-flex;align-items:center;border:1px solid var(--ln);height:44px;flex:0 0 auto}
.cs-qty button{width:36px;height:100%;border:0;background:none;color:var(--ink-2);font-size:18px;line-height:1}
.cs-qty button:hover{color:var(--nv)}
.cs-qty input{width:44px;height:100%;border:0;text-align:center;font-weight:700;padding:0}
.cs-qty input::-webkit-outer-spin-button,
.cs-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* в узкой карточке подпись кнопки не должна переноситься на две строки */
.cs-card__buy .cs-btn{flex:1 1 auto;padding:0 10px;font-size:13px;white-space:nowrap}
.cs-card__buy .cs-qty{flex:0 0 auto}
.cs-card__buy .cs-qty button{width:30px}
.cs-card__buy .cs-qty input{width:34px}
.cs-card__total{font-size:12px;color:var(--ink-3);text-align:center;padding-top:6px;border-top:1px solid var(--ln-2)}
.cs-card__total b{color:var(--ink)}

/* ── 9. Каталог ──────────────────────────────────────────────────────── */
.cs-crumbs{padding:12px 0;font-size:13px;color:var(--ink-3)}
.cs-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.cs-crumbs li+li::before{content:'/';margin-right:6px;color:var(--ln)}
.cs-crumbs a{color:var(--ink-3)}
.cs-crumbs a:hover{color:var(--nv)}

.cs-layout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:24px;align-items:start}
.cs-side{background:#fff;box-shadow:var(--sh-1)}
.cs-side__head{padding:16px 18px;border-bottom:1px solid var(--ln-2);font:800 16px/1 var(--font-h)}
.cs-filter{border-bottom:1px solid var(--ln-2)}
.cs-filter__t{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:14px 18px;background:none;border:0;font:700 14px/1 var(--font-h);text-align:left;
}
.cs-filter__t svg{fill:var(--ink-3);transition:transform var(--t)}
.cs-filter.is-closed .cs-filter__t svg{transform:rotate(-90deg)}
.cs-filter__b{padding:0 18px 16px;display:flex;flex-direction:column;gap:10px}
.cs-filter.is-closed .cs-filter__b{display:none}
.cs-side__actions{padding:16px 18px;display:flex;gap:10px}

.cs-toolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:#fff;box-shadow:var(--sh-1);padding:12px 16px;margin-bottom:16px;
}
.cs-toolbar__cnt{color:var(--ink-3);font-size:14px}
/* кнопка открытия фильтров нужна только на узких экранах */
[data-side-toggle]{display:none}
@media(max-width:991.98px){[data-side-toggle]{display:inline-flex}}
.cs-toolbar__sp{margin-left:auto;display:flex;align-items:center;gap:10px}

.cs-strip{margin-bottom:16px;background:#fff;box-shadow:var(--sh-1)}
.cs-strip img{width:100%}

.cs-pager{display:flex;gap:6px;justify-content:center;margin:28px 0;flex-wrap:wrap}
.cs-pager a,.cs-pager span{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:var(--sh-1);color:var(--ink);font-weight:600;padding:0 10px;
}
.cs-pager a:hover{background:var(--nv-50);color:var(--nv)}
.cs-pager .is-cur{background:var(--nv);color:#fff}

.cs-empty{background:#fff;box-shadow:var(--sh-1);padding:40px;text-align:center;color:var(--ink-3)}
.cs-seo{background:#fff;box-shadow:var(--sh-1);padding:28px;margin-top:28px;font-size:14px;line-height:1.6}
.cs-seo h2,.cs-seo h3{margin-top:1.4em}

/* ── 10. Карточка товара (страница) ──────────────────────────────────── */
.cs-product{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr) 320px;gap:28px;
  background:#fff;box-shadow:var(--sh-1);padding:24px}
.cs-gallery__main{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:16px}
.cs-gallery__main img{max-height:100%;width:auto;object-fit:contain}
.cs-gallery__thumbs{display:flex;gap:8px;flex-wrap:wrap}
.cs-gallery__thumbs a{width:64px;height:64px;border:1px solid var(--ln);padding:4px;display:flex}
.cs-gallery__thumbs a.is-on{border-color:var(--nv)}
.cs-specs{width:100%;font-size:14px}
.cs-specs tr:nth-child(odd){background:var(--ln-2)}
.cs-specs th,.cs-specs td{padding:9px 12px;text-align:left;font-weight:400}
.cs-specs th{color:var(--ink-3);width:46%}
.cs-specs td{font-weight:600}
.cs-buybox{background:var(--bg);padding:20px;align-self:start}
.cs-buybox .cs-price{font-size:32px}
.cs-features{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.cs-features li{display:flex;gap:12px;align-items:flex-start}
.cs-features svg{fill:var(--nv);flex:0 0 auto}
.cs-features b{display:block;font:700 14px/1.2 var(--font-h)}
.cs-features span{font-size:12px;color:var(--ink-3)}

/* шапка карточки товара: рейтинг, артикул, бренд — в одну строку */
.cs-product .cs-head__sub{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.cs-product .cs-rating{cursor:pointer}
.cs-gallery__thumbs a img{width:100%;height:100%;object-fit:contain}
.cs-buybox .cs-card__buy{display:flex;gap:8px}
.cs-buybox .cs-card__buy .cs-btn{flex:1 1 auto}
.cs-buybox .cs-card__total{font-size:13px;color:var(--ink-3)}
/* кэшбэк — это акция, а не служебная метка: цвет как у распродажи */
.cs-buybox .cs-tag{background:var(--or-50);color:var(--or)}
/* текст описания внутри блока не нужно отбивать ещё раз */
.cs-block > .cs-seo{padding:0}
/* «В избранное» после нажатия */
.cs-btn--ghost.is-on{background:var(--nv);color:#fff}
.cs-btn--ghost.is-on svg{fill:#fff}

.cs-block{background:#fff;box-shadow:var(--sh-1);padding:24px;margin-top:20px}
.cs-block__t{margin:0 0 16px;font-size:22px}

/* отзывы */
.cs-review{padding:16px 0;border-bottom:1px solid var(--ln-2)}
.cs-review:last-child{border-bottom:0}
.cs-review__top{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.cs-review__who{font-weight:700}
.cs-review__date{color:var(--ink-3);font-size:13px;margin-left:auto}
.cs-review__plus b{color:var(--ok)}
.cs-review__minus b{color:var(--err)}

/* форма отзыва раскрывается по кнопке, поэтому её поля обычной ширины */
.cs-review-form{border-top:1px solid var(--ln-2);padding-top:18px}
.cs-review-form .cs-picker__grid--3{margin-bottom:0}
.cs-review__plus,.cs-review__minus{margin:4px 0}

/* подсказки поиска */
.cs-search__list{list-style:none;margin:0;padding:0}
.cs-search__list a{display:flex;align-items:center;gap:12px;padding:10px 14px;color:var(--ink)}
.cs-search__list a:hover{background:var(--nv-50)}
.cs-search__list img{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.cs-search__name{flex:1 1 auto;font-size:14px}
.cs-search__price{font:800 15px/1 var(--font-h);color:var(--nv);white-space:nowrap}
.cs-search__all{display:block;padding:10px 14px;border-top:1px solid var(--ln-2);
  font-size:13px;font-weight:700;text-align:center}

/* ── 11. Корзина и оформление ────────────────────────────────────────── */
.cs-cart{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.cs-cart__table{background:#fff;box-shadow:var(--sh-1)}
.cs-cart__row{
  display:grid;grid-template-columns:88px minmax(0,1fr) 130px 150px 140px 44px;
  gap:14px;align-items:center;padding:16px;border-bottom:1px solid var(--ln-2);
}
.cs-cart__row:last-child{border-bottom:0}
.cs-cart__head{font:700 11px/1 var(--font-h);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cs-cart__pic img{width:72px;height:72px;object-fit:contain}
.cs-cart__sum{font:800 18px/1 var(--font-h);color:var(--nv)}
.cs-cart__del{border:0;background:none;color:var(--ink-3);font-size:20px;line-height:1}
.cs-cart__del:hover{color:var(--err)}
.cs-totals{background:#fff;box-shadow:var(--sh-1);padding:22px}
.cs-totals__row{display:flex;justify-content:space-between;padding:8px 0;font-size:15px}
.cs-totals__grand{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 0 18px;margin-top:8px;border-top:1px solid var(--ln);
  font:800 20px/1 var(--font-h);
}
.cs-steps{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.cs-step{flex:1 1 0;padding:12px 14px;background:#fff;box-shadow:var(--sh-1);font-size:13px;color:var(--ink-3)}
.cs-step.is-on{background:var(--nv);color:#fff}
.cs-step b{display:block;font:700 14px/1.2 var(--font-h)}
/* оформление: правая колонка липнет при прокрутке длинной формы */
.cs-cart .cs-totals{position:sticky;top:16px}
/* подсказка города поверх поля, а не в потоке — форма не прыгает */
[data-city-hint],[data-delivery-hint]{line-height:1.8}
[data-city-hint] a,[data-delivery-hint] a{font-weight:700}

/* ── 12. Подвал ──────────────────────────────────────────────────────── */
.cs-footer{background:var(--nv);color:#fff;margin-top:48px;padding:40px 0 0}
.cs-footer a{color:rgba(255,255,255,.85)}
.cs-footer a:hover{color:#fff}
.cs-footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px;padding-bottom:32px}
.cs-footer__t{font:800 14px/1 var(--font-h);letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
.cs-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.cs-footer__lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:14px}
.cs-footer__val{font-weight:600}
.cs-footer__bottom{
  border-top:1px solid rgba(255,255,255,.15);padding:18px 0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.7);
}
.cs-soc{display:flex;gap:8px}
.cs-soc a{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12)}
.cs-soc a:hover{background:var(--or)}
.cs-soc svg{fill:#fff}

/* ── 13. Модальные окна ──────────────────────────────────────────────── */
.cs-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.cs-modal.is-open{display:flex}
.cs-modal__bg{position:absolute;inset:0;background:rgba(10,15,25,.6)}
.cs-modal__box{position:relative;background:#fff;max-width:640px;width:100%;max-height:86vh;overflow:auto;box-shadow:var(--sh-2)}
.cs-modal__box--wide{max-width:960px}
.cs-modal__head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--ln-2)}
.cs-modal__t{margin:0;font-size:20px}
.cs-modal__x{margin-left:auto;border:0;background:none;font-size:24px;line-height:1;color:var(--ink-3)}
.cs-modal__body{padding:22px}

/* ── 14. Служебное ───────────────────────────────────────────────────── */
.cs-alert{padding:14px 16px;font-size:14px;border-left:3px solid}
.cs-alert--ok{background:#eaf7ef;border-color:var(--ok)}
.cs-alert--warn{background:#fdf5e7;border-color:var(--warn)}
.cs-alert--err{background:var(--or-50);border-color:var(--err)}
.cs-tag{display:inline-block;padding:5px 10px;background:var(--nv-50);color:var(--nv);font-size:13px;font-weight:600}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;box-shadow:var(--sh-1);font-size:13px}
.cs-chip b{font-weight:700}
.cs-chip__x{color:var(--ink-3);font-size:15px;line-height:1}

.cs-skeleton{background:linear-gradient(90deg,var(--ln-2) 25%,#f7f9fb 50%,var(--ln-2) 75%);
  background-size:200% 100%;animation:cs-sk 1.2s infinite}
@keyframes cs-sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── 13а. Перенесённый текст ─────────────────────────────────────────
   Содержимое страниц, новостей и акций приехало из NetCat как есть —
   вместе с версткой десятилетней давности: таблицы вместо сеток,
   классы Bootstrap 3, картинки с width в атрибутах. Переписывать
   сотни страниц руками бессмысленно, поэтому приводим их в порядок
   стилями: текст читается, ничего не вылезает за экран. */
.cs-seo{overflow-wrap:break-word}
.cs-seo h1,.cs-seo h2,.cs-seo h3,.cs-seo h4{margin:1.4em 0 .5em;line-height:1.25}
.cs-seo h1{font-size:26px}
.cs-seo h2{font-size:22px}
.cs-seo h3{font-size:18px}
.cs-seo p{margin:0 0 1em}
.cs-seo ul,.cs-seo ol{margin:0 0 1em;padding-left:22px}
.cs-seo li{margin-bottom:.35em}
.cs-seo a{color:var(--nv);text-decoration:underline}
.cs-seo b,.cs-seo strong{font-weight:700}

/* Картинки со старыми width/height в атрибутах не должны рвать колонку. */
.cs-seo img{max-width:100%;height:auto;display:block;margin:1em 0}
.cs-seo iframe,.cs-seo video{max-width:100%;border:0}

/* Таблицы в старом контенте использовались и для данных, и для верстки.
   Даём им человеческий вид и горизонтальную прокрутку вместо разъезда. */
.cs-seo table{width:100%;border-collapse:collapse;margin:1em 0;font-size:14px;display:block;
  overflow-x:auto;white-space:nowrap}
.cs-seo table td,.cs-seo table th{padding:8px 10px;border:1px solid var(--ln);vertical-align:top;
  white-space:normal}
.cs-seo table th{background:var(--ln-2);text-align:left;font-weight:700}
.cs-seo table[align=left],.cs-seo table[align=right]{float:none}

/* Остатки Bootstrap 3: сетка, кнопки, утилиты. Классы в контенте есть,
   а самого Bootstrap на сайте нет — без этого блоки лепятся в столбик
   без отступов, а «кнопки» выглядят обычными ссылками. */
.cs-seo .row{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 1em}
.cs-seo [class*="col-"]{flex:1 1 260px;min-width:0}
.cs-seo .img-responsive,.cs-seo .img-fluid{max-width:100%;height:auto}
.cs-seo .text-center{text-align:center}
.cs-seo .text-right{text-align:right}
.cs-seo .pull-left{float:left;margin:0 16px 10px 0}
.cs-seo .pull-right{float:right;margin:0 0 10px 16px}
.cs-seo .btn{display:inline-flex;align-items:center;justify-content:center;height:42px;
  padding:0 20px;background:var(--nv);color:#fff;font:700 14px/1 var(--font-h);
  text-decoration:none;margin:0 8px 8px 0}
.cs-seo .btn:hover{background:var(--nv-d);color:#fff}
.cs-seo .btn-danger,.cs-seo .btn-warning{background:var(--or)}
.cs-seo .btn-danger:hover,.cs-seo .btn-warning:hover{background:var(--or-d)}

/* Инлайновые размеры и цвета из визуального редактора старой админки
   ломают тёмный текст на светлом фоне реже, чем сетку, — но ширину
   в пикселях приходится гасить. */
.cs-seo [style*="width"]{max-width:100% !important}
.cs-seo [width]{max-width:100%}

@media(max-width:767.98px){
  .cs-seo .row{display:block}
  .cs-seo .pull-left,.cs-seo .pull-right{float:none;margin:0 0 12px}
}

/* ── 14а. Раскрытое меню ─────────────────────────────────────────────
   Кнопки «Категории» и бургер открывают этот же блок: на широком экране
   он и так виден, на узком — выезжает панелью. */
body.cs-nav-open{overflow:hidden}

@media(max-width:767.98px){
  .cs-nav.is-open{
    display:block;position:fixed;inset:0 auto 0 0;width:300px;max-width:86vw;
    background:#fff;z-index:200;overflow:auto;box-shadow:var(--sh-2);padding-bottom:24px;
  }
  .cs-nav.is-open .cs-nav__in{display:block;padding:0}
  .cs-nav.is-open .cs-nav__cat{display:none}
  .cs-nav.is-open .cs-nav__list{display:block}
  .cs-nav.is-open .cs-mega{border-bottom:1px solid var(--ln-2)}
  .cs-nav.is-open .cs-nav__link{display:block;padding:14px 18px;color:var(--ink)}
  .cs-nav.is-open .cs-mega__body{
    position:static;display:block;box-shadow:none;border-top:1px solid var(--ln-2);
    background:var(--bg);min-width:0;
  }
  .cs-nav.is-open .cs-mega__body a{padding:10px 18px 10px 32px}
}

/* ── 15. Адаптив ─────────────────────────────────────────────────────── */
.cs-burger{display:none}
@media(max-width:1199.98px){
  .cs-product{grid-template-columns:minmax(0,380px) minmax(0,1fr);}
  .cs-buybox{grid-column:1/-1}
  .cs-layout{grid-template-columns:250px minmax(0,1fr)}
}
@media(max-width:991.98px){
  .cs-hero__in{grid-template-columns:1fr;padding:24px 20px}
  .cs-hero__t{font-size:32px}
  .cs-layout{grid-template-columns:1fr}
  .cs-side{position:fixed;inset:0 auto 0 0;width:320px;max-width:88vw;z-index:150;
    transform:translateX(-100%);transition:transform .25s;overflow:auto}
  .cs-side.is-open{transform:none}
  .cs-cart{grid-template-columns:1fr}
  .cs-footer__cols{grid-template-columns:1fr 1fr}
}
@media(max-width:767.98px){
  h1{font-size:26px}
  h2{font-size:22px}
  .cs-topbar,.cs-nav{display:none}
  .cs-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    border:0;background:none;color:var(--ink)}
  .cs-header__in{grid-template-columns:auto 1fr auto;gap:10px;padding:10px 0}
  .cs-logo img{height:32px}
  .cs-search__pick,.cs-action__t,.cs-action__v{display:none}
  .cs-product{grid-template-columns:1fr;padding:16px}
  .cs-cart__row{grid-template-columns:64px minmax(0,1fr) auto;gap:10px}
  .cs-cart__head{display:none}
  .cs-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cs-promos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cs-footer__cols{grid-template-columns:1fr;gap:20px}
  .cs-picker__grid{grid-template-columns:1fr}
}
@media(max-width:479.98px){
  .cs-products,.cs-promos{grid-template-columns:1fr}
}

/* ── 16. Печать ──────────────────────────────────────────────────────── */
@media print{
  .cs-topline,.cs-topbar,.cs-nav,.cs-footer,.cs-side,.cs-card__buy{display:none}
  body{background:#fff}
}