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

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

/* ---------- HERO TILE BUTTONS (btn-outline on image-grid) ----------
   Brand buttons live on photo tiles; original white-on-photo was unreadable
   on bright areas. Make them translucent black with a white outline, and
   add a soft bottom-up gradient so any button stays legible. */
.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 { position: relative; z-index: 0; }
.image-grid__item .image-grid__item-text { z-index: 2; }
.image-grid__item .btn-outline {
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 2px solid #fff;
  transition: background .15s, transform .15s;
}
.image-grid__item .btn-outline:hover {
  background: rgba(0,0,0,.82);
  color: #fff;
  transform: translateY(-1px);
}

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