/* Carsystem RU — overrides on top of the brand app.css.
   Keeps the original header/nav/flyout/footer look, adapts layout to our stack. */

:root {
  --cs-red: #da291c;
  --cs-dark: #333;
  --cs-grey: #f8f8f8;
}

body {
  font-family: Abel, Helvetica, Arial, sans-serif;
  color: #333;
  margin: 0;
}

/* Header keeps the brand's fixed + shrink-on-scroll behaviour from app.css.
   We only center the container and add a subtle shadow + smooth transition. */
.header-main { box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: background .2s ease; }
.header-main__container { max-width: 1320px; margin: 0 auto; }
.header-main__branding svg, .header-main__branding { transition: width .25s ease-in-out, height .25s ease-in-out; }
/* Bigger breathing room between the logo and the nav (req: «отступ побольше от логотипа»). */
@media (min-width: 992px) {
  .header-main__branding { margin-right: 40px; }
  .navbar-collapse { padding-left: 12px; }
  /* Pull the nav right after the logo instead of centering it. Brand uses
     space-between on the header row (logo / nav / lang dropdown), which would
     float the nav in the middle. flex:1 grows the nav to fill the space
     between the logo and the RU dropdown, so items sit next to the logo. */
  .navbar-collapse { flex: 1 1 auto; max-width: none; }
}

/* Suppress the brand's generic "red arrow before any in-section link" on our cards. */
.cs-cat:before, .cs-product:before, .cs-tile:before,
.cs-cats a:before, .cs-products a:before { content: none !important; display: none !important; }

/* Full-width mega flyout under the nav.
   The brand ships «.main-nav__list .sub-menu» (specificity 0,2,0) with
   position:absolute; left:-140px; width:auto; text-align:center, which made the
   grid collapse and overflow the right edge. We match that specificity (and load
   later) so our rules win cleanly without !important. */
.main-nav__list > li { position: static; }
@media (min-width: 992px) {
  /* Anchor the panel to the centered header container (full width) instead of the
     narrow right-aligned nav, so the mega menu spans the whole header. */
  .header-main__container { position: relative; }
  .navbar-collapse { position: static; }

  .main-nav__list .main-nav__sub {
    position: absolute; left: 0; right: 0; top: 100%; width: auto; height: auto;
    background: #fff; box-shadow: 0 16px 30px rgba(0,0,0,.12);
    padding: 26px 0; z-index: 1000;
  }
  .main-nav__list .sub-menu {
    position: static; left: auto; top: auto; height: auto; width: 100%;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 24px; max-width: 1320px; margin: 0 auto; padding: 0 40px;
    background: #fff; text-align: left; box-sizing: border-box;
  }
  .main-nav__list .sub-menu li { border: 0; padding: 0; display: block; min-width: 0; }
  .main-nav__list .sub-menu li a {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 14px 12px; font-size: 15px; line-height: 1.25; color: #333; text-transform: none;
    border-radius: 8px; transition: background .15s, color .15s; overflow-wrap: anywhere;
  }
  .main-nav__list .sub-menu li a:hover { background: var(--cs-grey); color: var(--cs-red); }
  .main-nav__icon { color: var(--cs-red); font-size: 28px; flex: 0 0 auto; }
}
/* Narrower desktop widths: drop columns so long labels never clip. */
@media (min-width: 992px) and (max-width: 1199px) {
  .main-nav__list .sub-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) and (max-width: 1059px) {
  .main-nav__list .sub-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Top-level nav items */
.main-nav__list li a { font-family: Abel, Helvetica, Arial, sans-serif; }
@media (min-width: 992px) {
  .main-nav__list { justify-content: flex-start; gap: 30px; width: auto; }
  .main-nav__list > li { padding: 28px 0 !important; }
  .main-nav__list > li > a { font-size: 19px !important; letter-spacing: .6px; text-transform: uppercase; }
}
.main-nav__li--has-sub > a:after { color: var(--cs-red); }

.language-dropdown__current { color: var(--cs-red); font-weight: 700; border: 1px solid #e6e6e6; border-radius: 6px; padding: 6px 12px; }

/* ---------- HERO ---------- */
.cs-hero { position: relative; background: #111; color: #fff; }
.cs-hero__img { width: 100%; height: 560px; object-fit: cover; display: block; opacity: .85; }
.cs-hero__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; max-width: 1320px; margin: 0 auto; left: 0; right: 0; padding: 0 40px;
}
.cs-hero__kicker { color: var(--cs-red); font-size: 20px; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 10px; }
.cs-hero__title { font-size: 64px; line-height: 1.02; margin: 0 0 18px; max-width: 720px; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.cs-hero__lead { font-size: 22px; max-width: 600px; margin: 0 0 28px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
@media (max-width: 991px){ .cs-hero__img{height:420px} .cs-hero__title{font-size:40px} .cs-hero__overlay{padding:0 20px} }

.cs-btn {
  display: inline-block; background: var(--cs-red); color: #fff; text-decoration: none;
  padding: 15px 32px; font-size: 18px; text-transform: uppercase; letter-spacing: 1px;
  border-radius: 4px; transition: background .15s, transform .15s; border: 0;
}
.cs-btn:hover { background: #b21f15; color: #fff; transform: translateY(-1px); }
.cs-btn--ghost { background: rgba(0,0,0,.55); border: 2px solid #fff; color: #fff; }
.cs-btn--ghost:hover { background: rgba(0,0,0,.8); color: #fff; transform: translateY(-1px); }

/* ---------- SECTIONS ---------- */
.cs-section { padding: 72px 0; }
.cs-section--grey { background: var(--cs-grey); }
.cs-container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.cs-section__head { text-align: center; margin-bottom: 44px; }
.cs-section__kicker { color: var(--cs-red); text-transform: uppercase; letter-spacing: 2px; font-size: 16px; margin: 0 0 8px; }
.cs-section__title { font-size: 42px; margin: 0; color: #222; }

/* ---------- CATEGORY GRID ---------- */
.cs-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
@media (max-width: 991px){ .cs-cats{ grid-template-columns: repeat(2, 1fr); } }
.cs-cat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 30px 18px;
  text-decoration: none; color: #333; transition: box-shadow .18s, transform .18s, border-color .18s;
}
.cs-cat:hover { box-shadow: 0 14px 30px rgba(0,0,0,.1); transform: translateY(-3px); border-color: var(--cs-red); color: var(--cs-red); }
.cs-cat__icon { font-size: 54px; color: var(--cs-red); margin-bottom: 16px; }
.cs-cat__name { font-size: 17px; text-transform: uppercase; letter-spacing: .4px; line-height: 1.25; }
.cs-cat__count { font-size: 13px; color: #767676; margin-top: 6px; }

/* ---------- PRODUCT GRID ---------- */
.cs-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 991px){ .cs-products{ grid-template-columns: repeat(2, 1fr); } }

/* AJAX «load more» wrapper */
.cs-products__more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 36px; }
.cs-products__more .cs-btn { min-width: 260px; }
.cs-products__more .cs-btn:disabled { opacity: .6; cursor: default; }
.cs-products__counter { font-size: 14px; color: #6c757d; }
.cs-product {
  display: flex; flex-direction: column; background: #fff; border: 1px solid #eee;
  border-radius: 12px; overflow: hidden; text-decoration: none; color: #333; transition: box-shadow .18s, transform .18s;
}
.cs-product:hover { box-shadow: 0 14px 30px rgba(0,0,0,.1); transform: translateY(-3px); }
.cs-product__media { position: relative; aspect-ratio: 1/1; background: #f4f4f4; display: flex; align-items: center; justify-content: center; }
.cs-product__media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.cs-product__noimg { color: #ccc; font-size: 46px; }
.cs-product__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.cs-badge { background: var(--cs-red); color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 4px; text-transform: uppercase; }
.cs-badge--hit { background: #222; }
.cs-product__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.cs-product__title { font-size: 16px; line-height: 1.3; }
/* #999 on white = 1.92:1 (very low). #767676 = 4.54:1 passes AA. */
.cs-product__sku { font-size: 13px; color: #767676; }

/* ---------- TILES (start banners like the original) ---------- */
.cs-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 991px){ .cs-tiles{ grid-template-columns: 1fr; } }
.cs-tile { position: relative; border-radius: 14px; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; }
.cs-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-tile__cap { position: relative; padding: 26px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); width: 100%; }
.cs-tile__cap h3 { font-size: 26px; margin: 0 0 6px; }

/* ---------- ADVANTAGES ---------- */
.cs-adv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 991px){ .cs-adv{ grid-template-columns: repeat(2, 1fr); } }
.cs-adv__item { text-align: center; }
.cs-adv__icon { font-size: 46px; color: var(--cs-red); margin-bottom: 12px; }
.cs-adv__item h4 { font-size: 19px; margin: 0 0 8px; text-transform: uppercase; }
.cs-adv__item p { color: #666; margin: 0; }

/* ---------- ABOUT ---------- */
.cs-about__text { font-size: 18px; line-height: 1.7; color: #444; max-width: 900px; }

/* Centered video blocks on the «О компании» page. The source mp4 is 848×464;
   we cap the width at 848px (or the viewport width on mobile) and keep the
   native 16:9 aspect ratio so the player never crops. */
.cs-about__video-wrap {
  display: flex; justify-content: center; margin: 36px 0;
}
.cs-about__video {
  width: 100%; max-width: 848px; aspect-ratio: 16 / 9;
  background: #000; border-radius: 12px; outline: none;
}
@media (max-width: 991px){ .cs-about__video-wrap { margin: 28px 0; } }

/* Separator + heading for the «АВТОСИСТЕМ» block at the bottom of the page. */
.cs-about__autosystem {
  margin-top: 56px; padding-top: 36px; border-top: 1px solid #e6e6e6;
}
.cs-about__autosystem-title {
  font-size: 30px; color: var(--cs-red); margin: 0 0 18px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* ---------- FOOTER ---------- */
/* Fixed header (~100–160px) overlaps the top of an anchor target. scroll-margin-top
   makes #contacts and #categories land below the header when navigated to.
   padding-bottom reserves space for the fixed contact button (bottom-right, 58px). */
.page-footer {
  background: #1d1d1d; color: #cfcfcf; padding: 56px 0 90px; margin-top: 0; scroll-margin-top: 120px;
}
.page-footer .container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.page-footer__branding svg { width: 92px; height: 92px; }
/* Brand CSS pins .page-footer__branding to height:37px (legacy text logo) and
   centers it with margin:0 auto. Our square SVG is 92px tall, so it overflows
   the 37px <a> by ~55px; the about paragraph's margin-top is then measured
   from the <a> box, not from the visible bottom of the SVG — which makes the
   text overlap the logo, especially on narrow viewports. Let the <a> wrap the
   full SVG and add a small gap that scales with the viewport. */
.page-footer__branding { height: auto; margin: 0 auto; }
.page-footer__about {
  margin-top: clamp(16px, 4vw, 28px);
  line-height: 1.6; color: #aaa; max-width: 320px;
}
/* On mobile the catalog/contacts columns stack full-width under the brand
   column; give them breathing room at the top so the sections don't collide. */
@media (max-width: 991px) {
  .page-footer__col { margin-top: 32px; }
  /* Brand column is first — no top gap needed there. */
  .page-footer__col:first-child { margin-top: 0; }
}
.page-footer__title { color: #fff; font-size: 20px; text-transform: uppercase; margin: 0 0 18px; }
.page-footer__nav, .page-footer .page-footer__contact { list-style: none; margin: 0; padding: 0; }
.page-footer__nav li, .page-footer__contact-item { margin-bottom: 10px; }
.page-footer a { color: #cfcfcf; text-decoration: none; }
.page-footer a:hover { color: var(--cs-red); }
.page-footer__contact-item .icon-phone, .page-footer__contact-item .icon-mail, .page-footer__contact-item .icon-pin { color: var(--cs-red); margin-right: 8px; }
.page-footer__socials { margin-top: 14px; font-size: 24px; display: flex; gap: 14px; }
.page-footer__socials a { color: #cfcfcf; }
.page-footer__distributor {
  margin: 0 0 18px; padding-bottom: 16px;
  border-bottom: 1px solid #333;
  font-size: 16px; font-weight: 700; line-height: 1.35; color: #fff;
  text-transform: none;
}
.page-footer__legal { border-top: 1px solid #333; margin-top: 36px; padding-top: 18px; color: #888; }

/* ---------- CONTACT FLYOUT BUTTON ---------- */
.contact-flyout-icon {
  position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%;
  background: var(--cs-red); color: #fff; border: 0; font-size: 26px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.25); z-index: 1100;
}
.contact-flyout-icon:hover { background: #b21f15; }

/* product detail */
.cs-product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 10px 0 40px; }
@media (max-width: 991px){ .cs-product-detail{ grid-template-columns: 1fr; } }
/* min-width:0 stops grid/flex children from overflowing the viewport when an
   inner <img> (or the thumb strip) has an intrinsic width larger than the cell. */
.cs-product-detail__media { min-width: 0; background: #f4f4f4; border-radius: 14px; min-height: 360px; padding: 16px; }
.cs-product-detail__media .cs-product__noimg { display: flex; align-items: center; justify-content: center; min-height: 320px; width: 100%; }
.cs-product-gallery { display: flex; flex-direction: row; align-items: stretch; gap: 14px; width: 100%; min-width: 0; min-height: 320px; }
.cs-product-gallery__thumbs {
  display: flex; flex-direction: column; gap: 10px; flex: 0 0 84px;
  max-height: 460px; overflow-y: auto; padding-right: 2px;
}
.cs-product-gallery__thumb {
  display: block; width: 72px; height: 72px; padding: 0; border: 2px solid #e0e0e0;
  border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; flex: 0 0 auto;
  transition: border-color .15s, box-shadow .15s;
}
.cs-product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
.cs-product-gallery__thumb:hover { border-color: #ccc; }
.cs-product-gallery__thumb.is-active { border-color: var(--cs-red); box-shadow: 0 0 0 1px var(--cs-red); }
.cs-product-gallery__main {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 10px; min-height: 320px;
}
/* Main image: explicit max-height + width:100% with object-fit keeps the photo
   inside the cell on every screen. Avoid `width:auto` — it lets the intrinsic
   image width push the grid cell wider than the viewport on mobile. */
.cs-product-gallery__main img {
  display: block; max-width: 100%; width: 100%; max-height: 460px;
  object-fit: contain; padding: 12px;
}
@media (max-width: 991px){
  .cs-product-gallery { flex-direction: column-reverse; }
  .cs-product-gallery__main img { max-height: 360px; }
  .cs-product-gallery__thumbs {
    flex-direction: row; flex-wrap: nowrap; max-width: 100%; max-height: none;
    overflow-x: auto; overflow-y: hidden; flex: 0 0 auto; padding-bottom: 4px;
  }
}
/* zoomable main image */
.cs-product-gallery__zoom { display: block; width: 100%; border: 0; background: transparent; padding: 0; cursor: zoom-in; position: relative; }
.cs-product-gallery__zoom-icon {
  position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.cs-product-gallery__main:hover .cs-product-gallery__zoom-icon { opacity: 1; }
/* Touch devices have no hover: show the zoom affordance permanently so users
   know the main image is tappable. Matches the desktop hover state. */
@media (hover: none) {
  .cs-product-gallery__zoom-icon { opacity: 1; }
}

/* lead: short description + optional icon badge */
.cs-product-detail__lead { display: flex; gap: 16px; align-items: flex-start; margin: 8px 0 4px; }
.cs-product-detail__icon { flex: 0 0 auto; width: 64px; height: 64px; object-fit: contain; }
.cs-product-detail__short { font-size: 17px; }

/* document buttons near the top (TDS / MSDS) — org-style red buttons */
.cs-product-detail__docs { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 22px; }
.cs-btn-doc {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cs-red); color: #fff; text-decoration: none;
  padding: 14px 26px; font-size: 16px; font-weight: 600; line-height: 1.2;
  border-radius: 4px; border: 0; transition: background .15s, transform .15s;
}
.cs-btn-doc:hover { background: #b21f15; color: #fff; transform: translateY(-1px); }
.cs-btn-doc [class^="icon-"] { font-size: 24px; }
/* secondary doc button (MSDS): outlined variant so TDS stays primary */
.cs-btn-doc--alt {
  background: #fff; color: var(--cs-red); border: 2px solid var(--cs-red);
  padding: 12px 24px;
}
.cs-btn-doc--alt:hover { background: var(--cs-red); color: #fff; }

/* legacy text-link doc style kept for backward compat if referenced elsewhere */
.cs-doclink { display: inline-flex; align-items: center; gap: 8px; color: var(--cs-red); font-size: 15px; text-decoration: none; font-weight: 600; }
.cs-doclink:hover { color: #b21f15; text-decoration: underline; }
.cs-doclink [class^="icon-"] { font-size: 20px; }

/* article / variant table (org-style) */
.cs-vartable__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-vartable { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 480px; }
/* The brand app.css forces «table td{float:left}» (Bootstrap-ish), and a floated
   cell is blockified, so the row collapses into two visual lines. Kill the float
   and restore real table cells so each article stays on one row. !important is
   needed to beat the vendor framework rule. */
.cs-vartable { table-layout: auto; }
.cs-vartable tr { display: table-row !important; float: none !important; }
.cs-vartable thead, .cs-vartable tbody { float: none !important; }
.cs-vartable th, .cs-vartable td {
  display: table-cell !important; float: none !important;
  text-align: left; padding: 12px 14px; border-bottom: 1px solid #eee; vertical-align: middle;
}
.cs-vartable thead th { background: var(--cs-grey); color: #444; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .4px; }
.cs-vartable tbody tr:hover { background: #fafafa; }
.cs-vartable__sku { font-weight: 700; white-space: nowrap; width: 120px; }
.cs-vartable__pack { white-space: nowrap; width: 180px; }
.cs-vartable__doc { text-align: center; width: 64px; }
.cs-vartable__doc a { color: var(--cs-red); font-size: 20px; text-decoration: none; }
.cs-vartable__doc a:hover { color: #b21f15; }

/* product video */
.cs-product-video { width: 100%; max-width: 860px; border-radius: 12px; background: #000; display: block; }

/* image lightbox */
.cs-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 32px; }
.cs-lightbox[hidden] { display: none; }
.cs-lightbox__img { max-width: 95vw; max-height: 90vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.cs-lightbox__close { position: absolute; top: 18px; right: 26px; background: transparent; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; }
.cs-lightbox__close:hover { color: var(--cs-red); }
.cs-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 40px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cs-lightbox__nav:hover { background: rgba(255,255,255,.22); }
.cs-lightbox__nav--prev { left: 16px; }
.cs-lightbox__nav--next { right: 16px; }
.cs-lightbox__count {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  color: #fff; font-size: 14px; background: rgba(0,0,0,.4); padding: 4px 12px; border-radius: 12px;
}
/* Keep the arrows reachable by thumb on phones and clear of the iOS safe areas. */
@media (max-width: 560px) {
  .cs-lightbox { padding: 16px; }
  .cs-lightbox__nav { width: 44px; height: 44px; font-size: 30px; }
  .cs-lightbox__nav--prev { left: 8px; }
  .cs-lightbox__nav--next { right: 8px; }
  .cs-lightbox__close { top: max(12px, env(safe-area-inset-top)); right: 16px; }
}

.cs-prod-section { max-width: 1320px; margin: 0 auto 36px; padding: 0 24px; }
.cs-prod-section h2 { font-size: 26px; color: #222; border-left: 4px solid var(--cs-red); padding-left: 12px; margin-bottom: 16px; }

/* specs table — the same brand rule «table td{float:left;width:50%}» that collapses
   the variant table also flattens this two-column attribute table into a vertical
   stream of single cells (left column only). Kill the float with !important so the
   <th>/<td> stay real table cells on one row, exactly like .cs-vartable above.
   Wrap adds horizontal scroll on very narrow phones instead of squishing columns. */
.cs-specs__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-specs { width: 100%; border-collapse: collapse; table-layout: auto; }
.cs-specs tr { display: table-row !important; float: none !important; }
.cs-specs thead, .cs-specs tbody { float: none !important; }
.cs-specs th, .cs-specs td {
  display: table-cell !important; float: none !important;
  text-align: left; padding: 12px 14px; border-bottom: 1px solid #eee; vertical-align: middle;
}
.cs-specs th { width: 40%; color: #555; font-weight: 600; background: var(--cs-grey); }

/* category SEO block — below product grid */
.cs-category-seo { padding-top: 48px; padding-bottom: 56px; margin-top: 0; }
.cs-category-seo__text { max-width: 960px; font-size: 16px; line-height: 1.75; color: #666; }

/* ---------- PARTNERS / MAP ---------- */
.cs-map { width: 100%; height: 460px; border-radius: 14px; overflow: hidden; margin: 22px 0 36px; background: #eee; }
@media (max-width: 991px){ .cs-map{ height: 340px; } }
.cs-partners__group { margin-bottom: 34px; }
.cs-partners__country { font-size: 26px; color: #222; border-left: 4px solid var(--cs-red); padding-left: 12px; margin: 0 0 18px; }
.cs-partners__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 991px){ .cs-partners__list{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px){ .cs-partners__list{ grid-template-columns: 1fr; } }
.cs-partner { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 18px; }
.cs-partner__name { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.cs-partner__meta { display: flex; gap: 10px; align-items: center; color: #6c757d; font-size: 14px; margin-bottom: 10px; }
.cs-partner__kind { background: var(--cs-grey); color: var(--cs-red); border-radius: 4px; padding: 2px 8px; font-size: 12px; text-transform: uppercase; }
.cs-partner__addr, .cs-partner__row { font-size: 14px; color: #555; margin-top: 6px; }
.cs-partner__row a { color: #555; text-decoration: none; }
.cs-partner__row a:hover { color: var(--cs-red); }
.cs-partner__addr .icon-pin, .cs-partner__row .icon-phone, .cs-partner__row .icon-mail { color: var(--cs-red); margin-right: 6px; }
.cs-page-title + .cs-about__text { margin-bottom: 6px; }

/* breadcrumbs / simple catalog pages */
/* #888 on white = 3.54:1 (fails WCAG AA 4.5:1). #6c757d = 4.72:1. */
.cs-breadcrumbs, .cs-breadcrumbs a, .cs-breadcrumbs span { color: #6c757d; }
.cs-breadcrumbs { font-size: 14px; padding: 18px 0; }
.cs-breadcrumbs a { text-decoration: none; }
.cs-breadcrumbs a:hover { color: var(--cs-red); }
.cs-page-title { font-size: 38px; margin: 0 0 8px; color: #222; }

/* Brand «productlist» (homepage featured block): .productlist__subheadline uses #999
   on white (2.84:1) — fails AA. Match the same accessible grey used elsewhere. */
.productlist__subheadline { color: #767676 !important; }
/* Brand CSS pins .productlist__btn to position:absolute !important in the lower-right
   corner of the card (carsystem.org product-list layout). In a 3-column row that reads
   fine, but on narrow viewports the card goes full-width and the absolutely-positioned
   button drifts to the far right edge, far from the centred headline. Keep it in the
   normal flow so it sits under the headline, centred like the rest of the content.
   !important is needed to override the brand rule that is itself !important. */
.productlist__btn { position: static !important; bottom: auto !important; right: auto !important; margin-top: 16px; }

/* ---------- UNIFORM HOMEPAGE BUTTON STYLE ----------
   All buttons on the homepage share ONE visual treatment:
   - Visible label always shown (no transparent text trick).
   - Dark or transparent background depending on context (btn-outline on
     photos, btn-secondary elsewhere — both come from brand CSS).
   - On hover: brand ::after red slider sweeps across (width:0 → 100%).
     That is the ONLY animation — no label swap, no transform.

   Why this is needed: brand .btn-labelled makes the label transparent in
   rest state and shows a COPY of it via ::before { content: attr(title) }.
   On hover that ::before slides off (left:-200%) while the real text fades
   in — this is the "text sliding with the slider" effect we do NOT want.
   Additionally, when title != visible label (e.g. our "Подробнее" with
   title=product name), the visible text would morph into the title on hover.

   Fix applied uniformly to EVERY .btn on the homepage:
   1. Make the real label visible (color:#fff instead of transparent).
   2. Suppress the ::before copy entirely (content:none) — no sliding copy.
   3. Leave ::after (the red slider) untouched.
   Result: same look everywhere; only the label text and size differ. */

/* 1) Always-visible label for every labelled button on the site.
   Scoped to .btn-labelled so plain .btn links are untouched.
   Specificity: brand rule is `.btn.btn-labelled` (0,2,0) and sets
   `color:transparent`. We match that same specificity and rely on source
   order (this file loads after app.css) to win. */
.btn.btn-labelled,
.btn.btn-labelled:hover {
  color: #fff;
}

/* 2) Kill the sliding ::before copy everywhere. This is the single rule
   that removes the "text slides with slider" effect for ALL buttons,
   regardless of their btn-outline / btn-secondary / cs-home-product-btn
   variant. */
.btn-labelled::before {
  content: none !important;
}

/* Keep the photo-tile button readable on bright image areas without
   darkening the whole button (so the red slider stays visible on hover).
   Only adds a soft text-shadow; background stays transparent as on the
   original carsystem.org. */
.image-grid__item { position: relative; }
.image-grid__item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}
.image-grid__item img { z-index: 0; }
.image-grid__item .image-grid__item-text { z-index: 2; }
.image-grid__item .btn-outline {
  background: transparent;
  border: 2px solid #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ---------- CATALOGUES PAGE (/catalogues/) ----------
   Uses the exact same brand classes as carsystem.org/en/catalogues:
   .productlist--overview .productlist--no-product + .col-lg-4 .productlist__item.
   Brand CSS gives the cards proper aspect, button, and hover via these classes.
   The few additions here are only: intro/hero styling and centered layout for
   partial rows (1 or 2 items in a row, instead of left-aligned). */
.cs-catalogues__intro {
  max-width: 860px; margin: 0 auto 32px; padding: 32px 0 0;
  text-align: center;
}
.cs-catalogues__intro h1,
.cs-catalogues__intro .intro__headline {
  font-size: 38px; margin: 0 0 14px; color: #222; text-align: center;
}
.cs-catalogues__intro p { font-size: 18px; line-height: 1.7; color: #444; }
@media (max-width: 767px) {
  .cs-catalogues__intro h1,
  .cs-catalogues__intro .intro__headline { font-size: 28px; }
}

/* Centered grid: when there are 1 or 2 catalogues/brochures, Bootstrap's
   .row left-aligns them. justify-content:center centers any partial last
   row so 1 item sits in the middle, 2 items are centered as a pair.
   3 items form a full row; 4+ wrap normally with the last partial row
   also centered. Purely additive — does not affect 3/6-item full rows. */
.cs-catalogues .productlist.row,
.cs-catalogues--brochures .productlist.row {
  justify-content: center;
}

/* IMPORTANT: brand CSS has `section a { display:inline-block; position:relative }`
   (it's how the red-arrow :before is attached to every link inside <section>).
   When the download card's <img> is wrapped in <a> and that <a> becomes
   inline-block + relative, the absolutely-positioned img resolves its
   offsetParent to that collapsed <a> (width:auto → 20px, height:0) instead
   of .productlist__image (relative, 390×390). The result: covers render at
   20×0 and are invisible. Fix: force the wrapper <a> back to display:inline,
   position:static inside .productlist__image, so the img's offsetParent
   becomes .productlist__image as on carsystem.org. */
.productlist__image > a {
  display: inline;
  position: static;
  padding-left: 0;
}
.productlist__image > a::before {
  content: none;
}

/* Brand CSS caps .productlist__image img at max-width:300px (meant for
   product photos in a list). For catalogues/brochures we want the PDF cover
   to fill the whole 390×390 card. .ce-gallery .productlist__image img does
   this reset on carsystem.org; replicate it here for the download cards. */
.productlist--no-product .productlist__image img {
  max-width: none;
}

/* ---------- SMALL MOBILE (≤ 480px) ----------
   The only breakpoint below 991px was 575px (partners grid). Hero/section/page
   titles are designed for ≥390px and look oversized on 360–375px phones:
   hero 40px wraps to 3 short lines, section titles 42px crowd the screen.
   Scale them down on the smallest phones without touching the rest. */
@media (max-width: 480px) {
  .cs-hero__title { font-size: 30px; line-height: 1.08; }
  .cs-hero__lead { font-size: 17px; }
  .cs-hero__kicker { font-size: 16px; }
  .cs-section__title { font-size: 30px; }
  .cs-section__head { margin-bottom: 28px; }
  .cs-page-title { font-size: 28px; }
  .cs-prod-section h2,
  .cs-partners__country { font-size: 22px; }
  .cs-btn { padding: 13px 24px; font-size: 16px; }
}

/* ---------- FOOTER NAV: tighter spacing ----------
   The footer category list looked like a long vertical strip
   ("простыня"). Two causes, both fixed here:
   1. Brand `li { margin-bottom: 10px }` — halved to 3px.
   2. `<li>` inherited big font-size/line-height (21px / 31.5px) from the
      section context, while the <a> inside is only 14px/21px. The huge
      line-box around the small link is what actually produced the gap.
      We pin <li> to the same compact metrics as the link so each row
      is only as tall as the text itself.
   Net effect: row pitch went from ~36px to ~18px — about 2x tighter,
   without shrinking the visible 14px link text. Scoped to .page-footer__nav
   so footer contact list, breadcrumbs and mobile nav are untouched. */
.page-footer__nav li {
  margin-bottom: 3px;
  font-size: 14px;
  line-height: 1.3; /* 14 * 1.3 ≈ 18px row */
}