/* 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: 56px; }
  .navbar-collapse { padding-left: 24px; }
}

/* 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-end; gap: 38px; 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: transparent; border: 2px solid #fff; }
.cs-btn--ghost:hover { background: #fff; color: var(--cs-red); }

/* ---------- 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: #999; 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); } }
.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; }
.cs-product__sku { font-size: 13px; color: #999; }

/* ---------- 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; }

/* ---------- FOOTER ---------- */
.page-footer { background: #1d1d1d; color: #cfcfcf; padding: 56px 0 28px; margin-top: 0; }
.page-footer .container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.page-footer__branding svg { width: 92px; height: 92px; }
.page-footer__about { margin-top: 16px; line-height: 1.6; color: #aaa; max-width: 320px; }
.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__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; } }
.cs-product-detail__media { 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-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; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 10px; min-height: 320px;
}
.cs-product-gallery__main img { max-width: 100%; max-height: 460px; object-fit: contain; padding: 12px; display: block; }
@media (max-width: 991px){
  .cs-product-gallery { flex-direction: column-reverse; }
  .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; }

/* 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 links near the top (TDS / MSDS) */
.cs-product-detail__docs { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 22px; }
.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-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; }
.cs-specs { width: 100%; border-collapse: collapse; }
.cs-specs th, .cs-specs td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #eee; }
.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: #888; 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 */
.cs-breadcrumbs { font-size: 14px; color: #888; padding: 18px 0; }
.cs-breadcrumbs a { color: #888; text-decoration: none; }
.cs-breadcrumbs a:hover { color: var(--cs-red); }
.cs-page-title { font-size: 38px; margin: 0 0 8px; color: #222; }