:root {
  --hm-ink: #101820;
  --hm-muted: #52606a;
  --hm-cyan: #00a7ce;
  --hm-cyan-dark: #007d9c;
  --hm-fog: #f3f5f6;
  --hm-line: #dce1e4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hm-fog) !important;
  color: var(--hm-ink) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.site-header,
body > header:not([id]),
#site-header {
  min-height: 90px;
  padding: 12px max(20px, calc((100vw - 1200px) / 2)) !important;
  background: #fff !important;
  border-bottom: 1px solid var(--hm-line) !important;
}

#site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
#site-header .logo-container { display: flex; align-items: center; gap: 20px; }
#site-header .logo-container img {
  width: auto !important;
  max-width: 118px !important;
  height: auto !important;
  max-height: 54px !important;
  object-fit: contain;
}
#site-header .contact-info { margin-left: auto; font-size: 13px; }
#site-header .contact-info p { margin: 3px 0; }

.left-logos img { max-height: 42px !important; margin-right: 16px; }
.logo-main img { max-height: 58px !important; }
.contact-info { color: var(--hm-ink) !important; }
.contact-info a { color: var(--hm-ink) !important; font-weight: 650; }

nav.main-nav {
  position: relative;
  z-index: 50;
  background: var(--hm-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}
nav.main-nav > ul {
  width: min(1200px, calc(100% - 40px));
  min-height: 54px;
  margin: 0 auto !important;
  align-items: center;
  justify-content: flex-start !important;
}
nav.main-nav li { margin: 0 !important; }
nav.main-nav a {
  padding: 17px 20px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: .045em;
  text-transform: uppercase;
}
nav.main-nav a:hover,
nav.main-nav a.active,
nav.main-nav li:hover > a { background: var(--hm-cyan) !important; color: #07151b !important; }
nav.main-nav .submenu { background: var(--hm-ink) !important; border-radius: 0 !important; }

main.content {
  width: min(1200px, calc(100% - 40px)) !important;
  max-width: 1200px !important;
  min-height: 55vh;
  padding: 64px 0 80px !important;
  margin: 0 auto !important;
}
main.content > h1,
main.content h1 {
  margin: 0 0 38px !important;
  color: var(--hm-ink) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.08;
  letter-spacing: -.04em;
  text-align: left !important;
}
main.content > h1::before {
  content: "Каталог";
  display: block;
  margin-bottom: 10px;
  color: var(--hm-cyan-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.wiper-grid,
.accessory-grid { gap: 18px !important; }
.wiper-card,
.accessory-card,
.adapter-card,
#adapter-container .adapter-block {
  padding: 24px !important;
  background: #fff !important;
  border: 1px solid var(--hm-line);
  border-radius: 2px !important;
  box-shadow: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.wiper-card:hover,
.accessory-card:hover,
.adapter-card:hover {
  transform: translateY(-5px) !important;
  border-color: #c8d3d8;
  box-shadow: 0 16px 36px rgba(15,30,39,.1) !important;
}
.wiper-card .card-title,
.accessory-card .card-title { color: var(--hm-ink) !important; letter-spacing: -.015em; }

.selector-block select,
#yearSelect {
  min-height: 50px !important;
  padding: 12px 42px 12px 15px !important;
  border: 1px solid #cbd3d7 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.selector-block select:focus,
#yearSelect:focus { border-color: var(--hm-cyan-dark) !important; outline: 3px solid rgba(0,167,206,.14) !important; }

.modal-content { border-radius: 3px !important; box-shadow: 0 28px 80px rgba(0,0,0,.3) !important; }
.modal-title { color: var(--hm-ink) !important; }

/* Accessories catalog */
.accessories-intro { max-width: 820px; margin-bottom: 34px; }
.catalog-kicker {
  margin: 0 0 10px;
  color: var(--hm-cyan-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.accessories-intro h1 { margin-bottom: 18px !important; }
.accessories-intro > p:last-child { margin: 0; color: var(--hm-muted); font-size: 17px; }
.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin-bottom: 48px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--hm-line);
}
.catalog-toolbar label { display: grid; gap: 7px; }
.catalog-toolbar label span {
  color: var(--hm-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.catalog-toolbar input,
.catalog-toolbar select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  color: var(--hm-ink);
  background: #fff;
  border: 1px solid #cbd3d7;
  border-radius: 2px;
  font: inherit;
}
.catalog-toolbar input:focus,
.catalog-toolbar select:focus { border-color: var(--hm-cyan-dark); outline: 3px solid rgba(0,167,206,.14); }
.catalog-count { min-width: 142px; margin: 0 0 13px; color: var(--hm-muted); font-size: 13px; text-align: right; }
#accessory-cards.card-grid { display: block; }
.accessory-section { margin-bottom: 58px; }
.accessory-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hm-line);
}
.accessory-section-heading h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; }
.accessory-section-heading span {
  display: inline-grid;
  min-width: 30px;
  height: 30px;
  place-items: center;
  color: #fff;
  background: var(--hm-cyan-dark);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}
.accessory-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.accessory-card { display: flex; min-width: 0; min-height: 340px; flex-direction: column; text-align: left; }
.accessory-card:focus-visible { outline: 3px solid rgba(0,167,206,.45); outline-offset: 3px; }
.accessory-image {
  display: grid;
  height: 210px;
  margin: -8px -8px 18px;
  place-items: center;
  overflow: hidden;
  background: #fff;
}
.accessory-image img { width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; }
.accessory-meta { display: flex; flex: 1; flex-direction: column; }
.accessory-brand { color: var(--hm-cyan-dark); font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.accessory-card .card-title { margin: 8px 0 16px; font-size: 16px; line-height: 1.35; }
.accessory-article { margin: auto 0 0; color: var(--hm-muted); font-size: 12px; }
.catalog-empty { padding: 42px; background: #fff; border: 1px solid var(--hm-line); color: var(--hm-muted); text-align: center; }
body.modal-open { overflow: hidden; }
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  padding: 24px;
  place-items: center;
  overflow-y: auto;
  background: rgba(4,13,18,.78);
}
.modal-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 34px;
  width: min(1080px, 100%);
  max-height: calc(100vh - 48px);
  padding: 34px;
  overflow-y: auto;
  background: #fff;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  color: var(--hm-ink);
  background: #fff;
  border: 1px solid var(--hm-line);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}
.modal-main-photo { width: 100%; height: min(52vh, 500px); object-fit: contain; background: #fff; }
.modal-thumbnails { display: flex; gap: 8px; margin-top: 14px; padding-bottom: 4px; overflow-x: auto; }
.modal-thumbnails button { flex: 0 0 70px; height: 70px; padding: 3px; background: #fff; border: 1px solid var(--hm-line); cursor: pointer; }
.modal-thumbnails button.is-active { border: 2px solid var(--hm-cyan-dark); }
.modal-thumbnails img { width: 100%; height: 100%; object-fit: contain; }
.modal-copy { align-self: center; }
.modal-brand { margin: 0 0 10px; color: var(--hm-cyan-dark); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.modal-title { margin: 0 0 12px; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; text-align: left; }
.modal-article { margin: 0 0 24px; color: var(--hm-muted); font-weight: 700; }
.modal-description { margin: 0; color: var(--hm-muted); font-size: 15px; line-height: 1.65; text-align: left; }

footer.footer {
  margin: 0 !important;
  padding: 34px 20px !important;
  background: var(--hm-ink) !important;
  color: #a9b3b8 !important;
}
.footer a, .footer-nav a { color: #d9e0e3 !important; }

@media (max-width: 768px) {
  .site-header,
  body > header:not([id]),
  #site-header { min-height: auto; padding: 14px !important; }
  #site-header .logo-container img { max-width: 90px !important; max-height: 42px !important; }
  #site-header .contact-info { display: none; }
  .logo-main { position: static !important; transform: none !important; order: -1; }
  .logo-main img { max-width: 125px; }
  .left-logos { display: none; }
  nav.main-nav > ul { width: 100%; min-height: 0; flex-direction: column; align-items: stretch; }
  nav.main-nav a { text-align: left !important; }
  nav.main-nav .submenu { position: static !important; box-shadow: none !important; }
  main.content { width: min(100% - 28px, 1200px) !important; padding-top: 44px !important; }
  .catalog-toolbar { grid-template-columns: 1fr; }
  .catalog-count { margin: 0; text-align: left; }
  .accessory-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .accessory-card { min-height: 300px; padding: 16px !important; }
  .accessory-image { height: 170px; }
  .modal { padding: 10px; }
  .modal-content { grid-template-columns: 1fr; gap: 20px; max-height: calc(100vh - 20px); padding: 50px 18px 24px; }
  .modal-main-photo { height: 34vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}