/* mssochi.ru theme for OpenCart 4 — layered on top of the stock Bootstrap 5 stylesheet */

/* Onest (OFL 1.1, fonts/OFL.txt): variable 100–900, self-hosted — no third-party font CDN */
@font-face {
  font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/onest-cyrillic-wght-normal.woff2) format("woff2-variations"), url(../fonts/onest-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/onest-latin-wght-normal.woff2) format("woff2-variations"), url(../fonts/onest-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colour system — see design-system.md. Brand petrol #00405C and graphite #2B2A29 come from the old site and the logo */
  --ms-ink: #16191d;
  --ms-ink-2: #3c4450;
  --ms-muted: #6b7380;
  --ms-faint: #b6bcc5;
  --ms-line: #e4e7ec;
  --ms-line-strong: #d2d6dd;
  --ms-surface: #f4f5f7;
  --ms-surface-2: #fbfbfc;
  --ms-bg: #ffffff;
  /* dark surfaces: top bar, footer, dark buttons */
  --ms-brand: #1f2326;
  --ms-brand-2: #2b2a29;
  --ms-brand-3: #3a3d40;
  --ms-on-dark: #c9d1db;
  --ms-on-dark-2: #d3dae3;
  --ms-on-dark-muted: #8f9aa8;
  /* action colour: brand petrol, lightened for buttons (white text 7.2:1) */
  --ms-accent: #0b5e7e;
  --ms-accent-dark: #084a63;
  --ms-accent-deep: #00405c;
  --ms-accent-soft: #e3eff4;
  --ms-accent-line: #b9d6e2;
  --ms-accent-on-dark: #7cc4dc;
  --ms-accent-ring: rgba(11, 94, 126, .3);
  --ms-ok: #1d8a4d;
  --ms-ok-bg: #e7f5ed;
  --ms-wait: #9a6500;
  --ms-wait-bg: #fff4dc;
  --ms-danger: #b42318;
  --ms-danger-bg: #fdecec;
  --ms-wa: #1fae54;
  --ms-wa-dark: #17924a;
  --ms-wa-soft: #e8f7ee;

  /* Type scale (Onest). Weights: 400 text, 500 chips, 600 UI labels/buttons/nav, 700 headings, 800 prices and figures */
  --fs-display: clamp(1.75rem, 1.1rem + 2vw, 2.6rem);
  --fs-h1: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --fs-h2: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  --fs-h3: 1.25rem;
  --fs-h4: 1rem;
  --fs-lg: 1.0625rem;
  --fs-body: .9375rem;
  --fs-sm: .875rem;
  --fs-xs: .8125rem;
  --fs-2xs: .75rem;
  --fs-price: 1.2rem;
  --fs-price-lg: 1.9rem;

  --ms-radius: 12px;
  --ms-radius-sm: 8px;
  --ms-shadow: 0 1px 2px rgba(20, 24, 31, .06), 0 4px 16px rgba(20, 24, 31, .06);
  --ms-shadow-lift: 0 12px 32px rgba(20, 24, 31, .12);
  --ms-font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap's own blue (#0d6efd) shows up in stock components: point it at the same petrol */
  --bs-primary: #0b5e7e;
  --bs-primary-rgb: 11, 94, 126;
  --bs-link-color: #0b5e7e;
  --bs-link-color-rgb: 11, 94, 126;
  --bs-link-hover-color: #084a63;
  --bs-link-hover-color-rgb: 8, 74, 99;
  --bs-focus-ring-color: rgba(11, 94, 126, .25);
  --bs-primary-text-emphasis: #00405c;
  --bs-primary-bg-subtle: #e3eff4;
  --bs-primary-border-subtle: #b9d6e2;
  --bs-body-font-family: var(--ms-font);
  --bs-body-color: #16191d;
}

body {
  font-family: var(--ms-font);
  color: var(--ms-ink);
  background: var(--ms-bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Bootstrap sets its own font on form controls and buttons */
input, select, textarea, button, .btn, .form-control, .form-select { font-family: inherit; }
/* Prices, phones and quantities line up digit by digit */
.ms-price__new, .ms-price__old, .ms-phone__num, .ms-footer__phone, .ms-qty input, .ms-cart__total, #checkout-cart .table, #checkout-checkout .table { font-variant-numeric: tabular-nums; }

a { color: var(--ms-brand-2); }
a:hover { color: var(--ms-accent); }
h1, h2, h3, h4, h5 { color: var(--ms-ink); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--fs-h1); margin: .25rem 0 1rem; }

/* ---------- Buttons ---------- */
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 0 1.1rem; border-radius: var(--ms-radius-sm);
  border: 1px solid transparent; font-weight: 600; font-size: var(--fs-body); line-height: 1;
  text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.ms-btn--accent { background: var(--ms-accent); color: #fff; }
.ms-btn--accent:hover, .ms-btn--accent:focus { background: var(--ms-accent-dark); color: #fff; }
.ms-btn--dark { background: var(--ms-brand); color: #fff; }
.ms-btn--dark:hover { background: var(--ms-brand-2); color: #fff; }
.ms-btn--ghost { background: #fff; color: var(--ms-ink); border-color: var(--ms-line); }
.ms-btn--ghost:hover { border-color: var(--ms-ink-2); color: var(--ms-ink); }
.ms-btn--wa { background: var(--ms-wa); color: #fff; }
.ms-btn--wa:hover { background: var(--ms-wa-dark); color: #fff; }
.ms-btn--block { width: 100%; }
.ms-btn--lg { min-height: 52px; font-size: var(--fs-lg); padding: 0 1.4rem; }
.ms-btn:focus-visible, .ms-icon-btn:focus-visible, .ms-chip:focus-visible, .ms-nav__link:focus-visible, .ms-card__name a:focus-visible { outline: 3px solid var(--ms-accent-ring); outline-offset: 2px; }
.ms-btn--dark:hover { background: var(--ms-brand-3); }

/* ---------- Top bar ---------- */
.ms-topbar { background: var(--ms-brand); color: var(--ms-on-dark); font-size: var(--fs-xs); }
.ms-topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: 1rem; }
.ms-topbar a { color: var(--ms-on-dark); text-decoration: none; }
.ms-topbar a:hover { color: #fff; }
.ms-topbar__links { display: flex; gap: 1.25rem; }
.ms-topbar__info { display: flex; gap: 1.25rem; }

/* ---------- Header ---------- */
.ms-header { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--ms-line); }
.ms-header__row { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.ms-logo img { height: 48px; width: auto; display: block; }
.ms-logo { flex: 0 0 auto; }
.ms-catalog-btn { flex: 0 0 auto; }
.ms-search { flex: 1 1 auto; position: relative; }
.ms-search input {
  width: 100%; height: 44px; border-radius: var(--ms-radius-sm); border: 1px solid var(--ms-line);
  background: var(--ms-surface); padding: 0 3rem 0 1rem; font-size: var(--fs-body);
}
.ms-search input:focus { outline: none; border-color: var(--ms-accent); background: #fff; box-shadow: 0 0 0 3px var(--ms-accent-ring); }
/* Live search suggestions (mssochi.js) */
.ms-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1050; min-width: 320px; max-height: min(520px, 70vh); overflow-y: auto; padding: 8px; background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-radius); box-shadow: var(--ms-shadow-lift); }
.ms-suggest__label { padding: 8px 8px 4px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-muted); }
.ms-suggest__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--ms-radius-sm); color: var(--ms-ink); text-decoration: none; }
.ms-suggest__item:hover, .ms-suggest__item.is-active { background: var(--ms-accent-soft); color: var(--ms-ink); }
.ms-suggest__item img { flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); background: #fff; }
.ms-suggest__item--cat { font-size: var(--fs-sm); font-weight: 600; }
.ms-suggest__item--cat i { width: 20px; text-align: center; color: var(--ms-accent); }
.ms-suggest__text { display: grid; gap: 2px; min-width: 0; }
.ms-suggest__name { font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-suggest__price { font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-suggest__all { justify-content: center; margin-top: 4px; border-top: 1px solid var(--ms-line); border-radius: 0 0 var(--ms-radius-sm) var(--ms-radius-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ms-accent); }
.ms-suggest__empty { padding: 12px 8px; font-size: var(--fs-sm); color: var(--ms-muted); }
@media (max-width: 575.98px) { .ms-suggest { min-width: 0; max-height: 60vh; } }
.ms-search button { position: absolute; right: 4px; top: 4px; height: 36px; width: 40px; border: 0; background: transparent; color: var(--ms-ink-2); }
.ms-phone { flex: 0 0 auto; display: flex; flex-direction: column; line-height: 1.2; }
.ms-phone__num { font-weight: 700; font-size: var(--fs-lg); color: var(--ms-ink); text-decoration: none; white-space: nowrap; }
.ms-phone__num:hover { color: var(--ms-accent); }
.ms-phone__sub { font-size: var(--fs-xs); line-height: 1.3; color: var(--ms-accent); text-decoration: none; border-bottom: 1px dashed currentColor; width: fit-content; }
.ms-phone__sub:hover { color: var(--ms-accent-dark); }
.ms-icons { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.ms-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--ms-radius-sm); border: 1px solid var(--ms-line);
  background: #fff; color: var(--ms-ink); text-decoration: none; font-size: var(--fs-lg);
}
.ms-icon-btn:hover { border-color: var(--ms-ink-2); color: var(--ms-ink); }
.ms-icon-btn--wa { color: var(--ms-wa); }
.ms-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--ms-accent); color: #fff; font-size: var(--fs-2xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-cart { display: flex; align-items: center; gap: .6rem; }
.ms-cart__total { font-weight: 600; font-size: var(--fs-body); color: var(--ms-ink-2); white-space: nowrap; }

/* Mini cart dropdown */
.ms-minicart { width: min(400px, calc(100vw - 24px)); border-radius: var(--ms-radius); border-color: var(--ms-line); box-shadow: var(--ms-shadow); padding: 16px; }
.ms-minicart__list { list-style: none; margin: 0; padding: 0; max-height: min(360px, 50vh); overflow-y: auto; }
.ms-minicart__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) 36px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ms-line); }
.ms-minicart__img { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); overflow: hidden; color: var(--ms-faint); }
.ms-minicart__img img { width: 100%; height: 100%; object-fit: contain; }
.ms-minicart__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--ms-ink); text-decoration: none; }
.ms-minicart__name:hover { color: var(--ms-accent); }
.ms-minicart__qty { display: block; font-size: var(--fs-xs); color: var(--ms-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ms-minicart form { margin: 0; }
.ms-minicart__remove { width: 36px; height: 36px; border: 0; border-radius: var(--ms-radius-sm); background: transparent; color: var(--ms-muted); }
.ms-minicart__remove:hover { background: var(--ms-surface); color: var(--ms-danger); }
.ms-minicart__totals { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--ms-ink-2); font-variant-numeric: tabular-nums; }
.ms-minicart__totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.ms-minicart__totals dd { margin: 0; }
.ms-minicart__grand { color: var(--ms-ink); font-size: var(--fs-h4); font-weight: 700; border-top: 1px solid var(--ms-line); margin-top: 6px; padding-top: 8px !important; }
.ms-minicart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ms-minicart__empty { text-align: center; padding: 16px 0 8px; color: var(--ms-muted); }
.ms-minicart__empty i { font-size: 2rem; color: var(--ms-faint); margin-bottom: 8px; }
.ms-minicart__empty p { margin: 0; }

/* ---------- Navigation ---------- */
.ms-nav { background: #fff; border-bottom: 1px solid var(--ms-line); }
/* One line; mssochi.js moves what does not fit into "Ещё" (overflow stays visible so dropdowns are not clipped) */
.ms-nav__list { display: flex; flex-wrap: nowrap; gap: .1rem; list-style: none; margin: 0 -.85rem; padding: 0; }
.ms-nav__more > button { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.ms-nav__more > button i { font-size: var(--fs-2xs); margin-left: .25rem; }
.ms-nav__more.is-open .ms-nav__drop { display: block; }
.ms-nav__drop--right { left: auto; right: 0; }
.ms-nav__list::-webkit-scrollbar { display: none; }
.ms-nav__item { flex: 0 0 auto; }
.ms-nav__item { position: relative; }
.ms-nav__link {
  display: block; padding: .8rem .85rem; font-weight: 600; font-size: var(--fs-body); color: var(--ms-ink);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.ms-nav__link:hover, .ms-nav__item:focus-within .ms-nav__link, .ms-nav__link.is-active { color: var(--ms-accent); border-bottom-color: var(--ms-accent); }
.ms-nav__drop a.is-active { color: var(--ms-accent); font-weight: 600; }
/* the current section sits in "Ещё": mark the button too */
.ms-nav__more:has(li:not([hidden]) > a.is-active) > button { color: var(--ms-accent); border-bottom-color: var(--ms-accent); }
.ms-nav__drop {
  display: none; position: absolute; top: 100%; left: 0; z-index: 1040; min-width: 260px;
  background: #fff; border: 1px solid var(--ms-line); border-radius: 0 0 var(--ms-radius) var(--ms-radius);
  box-shadow: var(--ms-shadow); padding: .5rem; list-style: none; margin: 0;
}
.ms-nav__item:hover .ms-nav__drop, .ms-nav__item:focus-within .ms-nav__drop { display: block; }
.ms-nav__drop a { display: block; padding: .5rem .75rem; border-radius: var(--ms-radius-sm); color: var(--ms-ink); text-decoration: none; font-size: var(--fs-body); }
.ms-nav__drop a:hover { background: var(--ms-surface); color: var(--ms-accent); }
.ms-nav__drop .ms-nav__all { font-weight: 600; border-top: 1px solid var(--ms-line); margin-top: .25rem; padding-top: .6rem; }

/* Mobile menu (offcanvas) */
.ms-mmenu .offcanvas-header { border-bottom: 1px solid var(--ms-line); }
.ms-mmenu__list { list-style: none; margin: 0; padding: 0; }
.ms-mmenu__list > li { border-bottom: 1px solid var(--ms-line); }
.ms-mmenu__list a { display: block; padding: .85rem 1rem; color: var(--ms-ink); text-decoration: none; font-weight: 600; }
.ms-mmenu__list details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; font-weight: 600; cursor: pointer; }
.ms-mmenu__list details summary::-webkit-details-marker { display: none; }
.ms-mmenu__list details[open] summary .fa-chevron-down { transform: rotate(180deg); }
.ms-mmenu__list details ul { list-style: none; padding: 4px 0 8px; margin: 0; background: var(--ms-surface); }
.ms-mmenu__list details ul a { font-weight: 400; padding: .55rem 1.5rem; }
.ms-mmenu__list details summary i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ms-surface); font-size: var(--fs-2xs); }
.ms-mmenu__logo { height: 32px; width: auto; }
.ms-mmenu__contacts { padding: 20px 16px 16px; display: grid; gap: 4px; }
.ms-mmenu__phone { font-size: var(--fs-h3); font-weight: 700; color: var(--ms-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.ms-mmenu__hours { font-size: var(--fs-xs); color: var(--ms-muted); }
.ms-mmenu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ms-mmenu__links { list-style: none; margin: 0; padding: 0 0 24px; border-top: 1px solid var(--ms-line); }
.ms-mmenu__links a { display: block; padding: 10px 16px; color: var(--ms-ink-2); text-decoration: none; font-size: var(--fs-body); }
.ms-mmenu__links a:hover { color: var(--ms-accent); }

/* ---------- Page ---------- */
#container > main { background: var(--ms-bg); }
.breadcrumb { background: transparent; border: 0; border-radius: 0; padding: .9rem 0 .25rem; margin: 0; font-size: var(--fs-sm); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb > li.breadcrumb-item { padding: 0; text-shadow: none; }
.breadcrumb > li.breadcrumb-item + li.breadcrumb-item::before { content: "/"; color: var(--ms-faint); padding: 0 .5rem; }
.breadcrumb-item a { color: var(--ms-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--ms-accent); }
.breadcrumb-item:last-child a { color: var(--ms-ink-2); }
/* On phones show only a "back to parent" link instead of the whole trail */
@media (max-width: 575.98px) {
  .breadcrumb > li.breadcrumb-item { display: none; }
  .breadcrumb > li.breadcrumb-item:nth-last-child(2) { display: block; }
  /* the "+ li" selector repeats the separator rule above so this one wins on specificity */
  .breadcrumb > li.breadcrumb-item:nth-last-child(2)::before,
  .breadcrumb > li.breadcrumb-item + li.breadcrumb-item:nth-last-child(2)::before { content: "‹"; padding: 0 .4rem 0 0; color: var(--ms-muted); font-size: var(--fs-lg); line-height: 1; }
  /* parent is the home page: a lone house icon says nothing, name it */
  .breadcrumb > li.breadcrumb-item:first-child:nth-last-child(2) a::after { content: "Главная"; margin-left: .35rem; }
}
/* Stock notices as toasts bottom-right (the stock rule centres a 600px box); mssochi.js closes them after a few seconds */
#alert { position: fixed; top: auto; bottom: 16px; right: 16px; left: auto; width: auto; margin: 0; max-width: min(400px, calc(100vw - 32px)); z-index: 1080; display: grid; gap: 8px; }
@media (max-width: 991.98px) { body.ms-has-mbar #alert { bottom: calc(84px + env(safe-area-inset-bottom)); } }
#alert .alert { margin: 0; border: 0; border-radius: var(--ms-radius); box-shadow: var(--ms-shadow); padding: 12px 40px 12px 14px; font-size: var(--fs-sm); }
#alert .alert a { color: inherit; font-weight: 600; }
#alert .alert-success { background: var(--ms-ok-bg); color: var(--ms-ok); }
#alert .alert-danger { background: var(--ms-danger-bg); color: var(--ms-danger); }
#alert .alert .btn-close { padding: 14px 12px; }

/* ---------- Side column ---------- */
/* Fixed-width sidebar instead of col-3 (25%): the content grid gets the room */
@media (min-width: 992px) {
  #column-left { flex: 0 0 220px; width: 220px; max-width: 220px; }
}
@media (min-width: 1200px) {
  #column-left { flex: 0 0 240px; width: 240px; max-width: 240px; }
}
.ms-side { border: 1px solid var(--ms-line); border-radius: var(--ms-radius); overflow: hidden; margin-bottom: 24px; background: #fff; }
.ms-side__item { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 12px; font-size: var(--fs-sm); line-height: 1.3; color: var(--ms-ink); text-decoration: none; border-bottom: 1px solid var(--ms-line); }
.ms-side__item:last-child { border-bottom: 0; }
.ms-side__item:hover { background: var(--ms-surface); color: var(--ms-accent); }
.ms-side__item--child { padding-left: 24px; font-size: var(--fs-sm); color: var(--ms-ink-2); background: var(--ms-surface-2); }
.ms-side__item.is-active { background: var(--ms-accent-soft); color: var(--ms-accent-dark); font-weight: 600; box-shadow: inset 3px 0 0 var(--ms-accent); }
.ms-side__count { flex: 0 0 auto; font-size: var(--fs-2xs); color: var(--ms-muted); font-variant-numeric: tabular-nums; }
/* !important: the stock column carries Bootstrap's d-md-block, which is !important itself */
@media (max-width: 991.98px) { #column-left { display: none !important; } }
#column-left .carousel { display: none; }

/* ---------- Category ---------- */
.ms-cat-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.ms-cat-head .ms-count { color: var(--ms-muted); font-size: var(--fs-body); }
.ms-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; margin-bottom: 4px; scrollbar-width: none; }
.ms-chips::-webkit-scrollbar, .ms-sections-nav::-webkit-scrollbar, .ms-gallery__thumbs::-webkit-scrollbar { display: none; }
.ms-sections-nav, .ms-gallery__thumbs { scrollbar-width: none; }
@media (max-width: 991.98px) {
  /* fade at the right edge hints that the row scrolls */
  .ms-chips, .ms-filter__chips { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }
}
.ms-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
  border: 1px solid var(--ms-line); border-radius: 999px; background: #fff; color: var(--ms-ink);
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
}
.ms-chip:hover { border-color: var(--ms-ink-2); color: var(--ms-ink); }
.ms-chip--current { background: var(--ms-accent-soft); border-color: var(--ms-accent); color: var(--ms-accent-dark); font-weight: 600; }
/* Current page in the trail is not a link target */
.breadcrumb-item:last-child a { pointer-events: none; cursor: default; }
.ms-cat-desc { color: var(--ms-ink-2); max-width: 75ch; }
.ms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--ms-line); border-bottom: 1px solid var(--ms-line); margin: 8px 0 24px; }
.ms-toolbar select { height: 40px; border-radius: var(--ms-radius-sm); border: 1px solid var(--ms-line); padding: 0 2rem 0 .75rem; background-color: #fff; font-size: var(--fs-sm); }
.ms-toolbar label { color: var(--ms-muted); font-size: var(--fs-sm); margin-right: .4rem; }
@media (max-width: 575.98px) {
  .ms-toolbar { padding: 8px 0; margin-bottom: 16px; }
  .ms-toolbar__limit, .ms-toolbar label { display: none; }
  .ms-toolbar > div:first-child, .ms-toolbar select { width: 100%; }
  .ms-toolbar select { height: 44px; }
}
.ms-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1200px) { .ms-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Product card */
.ms-card {
  height: 100%; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--ms-line); border-radius: var(--ms-radius); overflow: hidden;
  transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}
/* Hover lift, as the product cards of the old site did; only for real pointers (no sticky hover on touch).
   prefers-reduced-motion switches all transitions off globally. */
@media (hover: hover) and (pointer: fine) {
  .ms-card:hover { transform: translateY(-4px); border-color: var(--ms-accent-line); box-shadow: var(--ms-shadow-lift); }
  .ms-card:hover .ms-card__img img { transform: scale(1.05); }
  .ms-card:hover .ms-card__name a { color: var(--ms-accent); }
}
.ms-card__img { display: block; aspect-ratio: 4 / 3; background: #fff; padding: .75rem; overflow: hidden; }
.ms-card__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease-out; }
.ms-card__body { display: flex; flex-direction: column; gap: .45rem; padding: .25rem 1rem 1rem; flex: 1 1 auto; }
.ms-card__brand { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ms-muted); font-weight: 600; }
.ms-card__name { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; margin: 0; min-height: calc(1.35em * 2); }
.ms-card__name a { color: var(--ms-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-card__name a:hover { color: var(--ms-accent); }
.ms-specs { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--ms-ink-2); }
/* block, not flex: long values ("200 кг", "Профессиональные / Коммерческий") wrap as text instead of stacking in a column */
.ms-specs li { display: block; padding: 1px 0; }
.ms-specs li span:first-child { color: var(--ms-muted); margin-right: 4px; }
.ms-card__foot { margin-top: auto; display: grid; gap: .6rem; padding-top: .35rem; }
.ms-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ms-price__new { font-size: var(--fs-price); font-weight: 800; color: var(--ms-ink); white-space: nowrap; }
.ms-price__old { color: var(--ms-muted); text-decoration: line-through; font-size: var(--fs-sm); }
.ms-stock { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 600; padding: .2rem .55rem; border-radius: 999px; width: fit-content; }
.ms-stock--ok { color: var(--ms-ok); background: var(--ms-ok-bg); }
.ms-stock--wait { color: var(--ms-wait); background: var(--ms-wait-bg); }
.ms-card__actions { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.ms-card__actions .ms-btn { min-height: 44px; padding: 0 .8rem; font-size: var(--fs-sm); }
.ms-card__actions .ms-btn--ghost { width: 44px; padding: 0; }
@media (max-width: 575.98px) {
  .ms-card__body { padding: .1rem .7rem .8rem; }
  .ms-card__img { padding: .5rem; }
  .ms-price__new { font-size: var(--fs-lg); }
  .ms-specs { display: none; }
  .ms-card__actions .ms-btn span { display: none; }
}
.pagination { gap: 6px; flex-wrap: wrap; margin: 0; }
.pagination .page-link { border-radius: var(--ms-radius-sm) !important; border-color: var(--ms-line); color: var(--ms-ink); min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.pagination .page-link:hover { border-color: var(--ms-ink-2); background: #fff; color: var(--ms-ink); }
.pagination .active .page-link { background: var(--ms-accent); border-color: var(--ms-accent); color: #fff; }

/* ---------- Product page ---------- */
.ms-pp { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 992px) { .ms-pp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; } }
/* 4:3 on desktop: equipment photos are wide, a square frame left a band of white above and below */
.ms-gallery__main { display: block; aspect-ratio: 1 / 1; border: 1px solid var(--ms-line); border-radius: var(--ms-radius); background: #fff; padding: 16px; }
@media (min-width: 992px) { .ms-gallery__main { aspect-ratio: 4 / 3; padding: 24px; } }
.ms-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.ms-gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; }
.ms-gallery__thumbs a { flex: 0 0 72px; height: 72px; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); padding: 4px; background: #fff; }
.ms-gallery__thumbs a:hover { border-color: var(--ms-accent); }
.ms-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.ms-pp__brand { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ms-muted); font-weight: 700; }
.ms-pp h1 { margin-top: .2rem; }
.ms-pp__meta { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; color: var(--ms-muted); font-size: var(--fs-sm); margin-bottom: 1rem; }
.ms-buybox { border: 1px solid var(--ms-line); border-radius: var(--ms-radius); padding: 24px; background: var(--ms-surface); }
@media (max-width: 575.98px) { .ms-buybox { padding: 16px; } .ms-buybox .ms-price__new { font-size: var(--fs-h2); } }
.ms-buybox .ms-price__new { font-size: var(--fs-price-lg); }
.ms-buybox__row { display: grid; grid-template-columns: 110px 1fr; gap: .6rem; margin-top: 1rem; }
.ms-qty { display: flex; align-items: center; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); background: #fff; height: 52px; }
.ms-qty button { width: 34px; height: 100%; border: 0; background: transparent; font-size: var(--fs-h3); color: var(--ms-ink-2); }
.ms-qty input { width: 100%; min-width: 0; border: 0; text-align: center; font-weight: 700; background: transparent; }
.ms-buybox__alt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ms-buybox__alt .ms-btn { min-height: 48px; }
.ms-benefits { list-style: none; padding: 16px 0 0; margin: 20px 0 0; border-top: 1px solid var(--ms-line); display: grid; gap: 8px; font-size: var(--fs-sm); color: var(--ms-ink-2); }
.ms-benefits li { display: flex; gap: .6rem; align-items: flex-start; }
.ms-benefits i { color: var(--ms-accent); width: 18px; margin-top: .2rem; }
.ms-keyspecs { margin-top: 1.25rem; }
.ms-keyspecs h2, .ms-section h2 { font-size: var(--fs-h3); margin-bottom: 12px; }
.ms-spec-table--full { max-width: 760px; }
.ms-spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.ms-spec-table td { padding: .55rem 0; border-bottom: 1px dashed var(--ms-line); vertical-align: top; }
.ms-spec-table td:first-child { color: var(--ms-muted); width: 50%; padding-right: 1rem; }
.ms-section { margin: 32px 0; scroll-margin-top: 96px; }
@media (max-width: 991.98px) { .ms-section { scroll-margin-top: 76px; } }
.ms-section__body { color: var(--ms-ink-2); max-width: 80ch; line-height: 1.65; }
.ms-section__body p { margin-bottom: 12px; }
.ms-section__body img { max-width: 100%; height: auto; }
.ms-sections-nav { display: flex; gap: .5rem; border-bottom: 1px solid var(--ms-line); margin-top: 1rem; overflow-x: auto; }
.ms-sections-nav a { padding: 12px 0; margin-right: 24px; font-weight: 600; color: var(--ms-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.ms-sections-nav a:hover { color: var(--ms-ink); border-bottom-color: var(--ms-ink); }

/* Sticky buy bar on phones */
.ms-mbar { display: none; }
@media (max-width: 991.98px) {
  .ms-mbar {
    display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--ms-line); box-shadow: 0 -4px 16px rgba(20, 24, 31, .08);
  }
  .ms-mbar .ms-price__new { font-size: var(--fs-lg); }
  .ms-mbar .ms-btn { min-height: 48px; }
  body.ms-has-mbar { padding-bottom: 76px; }
}

/* ---------- Footer ---------- */
.ms-footer { background: var(--ms-brand); color: var(--ms-on-dark); padding: 2.5rem 0 1.5rem; font-size: var(--fs-body); }
.ms-footer h5 { color: #fff; font-size: var(--fs-body); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .9rem; }
.ms-footer a { color: var(--ms-on-dark); text-decoration: none; }
.ms-footer a:hover { color: #fff; }
.ms-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.ms-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
/* minmax(0, …): the WhatsApp/Telegram buttons must not stretch the last column past the screen on tablets */
@media (min-width: 768px) { .ms-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ms-footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); } }
.ms-footer li.d-flex { flex-wrap: wrap; }
.ms-footer li.d-flex .ms-btn { flex: 1 1 auto; padding: 0 14px; }
.ms-footer__phone { font-size: var(--fs-h3); font-weight: 700; color: #fff !important; }
.ms-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2rem; padding-top: 1rem; font-size: var(--fs-xs); color: var(--ms-on-dark-muted); }
.ms-footer .ms-logo img { filter: invert(1); height: 44px; }

/* ---------- Responsive header ---------- */
@media (max-width: 991.98px) {
  .ms-topbar { display: none; }
  .ms-header__row { min-height: 60px; gap: 8px; }
  .ms-logo img { height: 36px; }
  .ms-catalog-btn, .ms-phone, .ms-cart__total, .ms-header__row > .ms-search { display: none; }
  .ms-icons { margin-left: auto; gap: 4px; }
  .ms-nav { display: none; }
  .ms-msearch { padding: 12px 0; border-bottom: 1px solid var(--ms-line); background: #fff; }
  .ms-msearch .ms-search { display: block; }
  /* 16px stops iOS from zooming into the field */
  .ms-msearch .ms-search input { font-size: 16px; }
}
@media (min-width: 992px) {
  .ms-burger, .ms-msearch, .ms-icon-btn--phone { display: none !important; }
}

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

/* ---------- Home ---------- */
.ms-btn--light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
.ms-btn--light:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.ms-hero {
  position: relative; color: #fff; background-color: var(--ms-brand);
  background-image: linear-gradient(90deg, rgba(16, 22, 30, .92) 0%, rgba(16, 22, 30, .78) 45%, rgba(16, 22, 30, .35) 100%), var(--ms-hero, none);
  background-size: cover; background-position: center right;
}
.ms-hero__body { max-width: 720px; padding: clamp(2.5rem, 6vw, 5rem) 0; }
.ms-hero h1 { color: #fff; font-size: var(--fs-display); line-height: 1.12; margin-bottom: 1rem; }
.ms-hero__kicker { color: var(--ms-accent-on-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); margin-bottom: .75rem; }
.ms-hero__lead { color: var(--ms-on-dark-2); font-size: var(--fs-lg); max-width: 56ch; }
.ms-hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.5rem 0; }
.ms-hero__facts { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; color: var(--ms-on-dark-2); font-size: var(--fs-body); }
.ms-hero__facts i { color: var(--ms-accent-on-dark); margin-right: .35rem; }

.ms-benefits-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ms-benefits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.ms-benefits-grid i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ms-accent-soft); color: var(--ms-accent); font-size: var(--fs-lg); margin-bottom: 12px; }
.ms-benefits-grid h3 { font-size: var(--fs-h4); margin: 0 0 4px; }
.ms-benefits-grid p { margin: 0; color: var(--ms-ink-2); font-size: var(--fs-sm); }
@media (max-width: 575.98px) { .ms-benefits-grid p { font-size: var(--fs-xs); } }

.ms-home-section { padding-top: 64px; }
@media (max-width: 991.98px) { .ms-home-section { padding-top: 48px; } }
@media (max-width: 575.98px) { .ms-home-section { padding-top: 40px; } }
.ms-home-section__head { margin-bottom: 24px; }
.ms-home-section__head h2 { font-size: var(--fs-h2); margin-bottom: 4px; }
.ms-home-section__head p { color: var(--ms-muted); margin: 0; }

/* Catalogue tiles: every picture on the same light plate (multiply blends white product shots into it) */
.ms-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ms-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
/* 5 across: the ten root categories make two full rows instead of 4+4+2 */
@media (min-width: 1200px) { .ms-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ms-tile { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ms-line); border-radius: var(--ms-radius); overflow: hidden; background: #fff; transition: box-shadow .2s, border-color .2s; }
.ms-tile:hover { border-color: var(--ms-line-strong); box-shadow: 0 12px 32px rgba(20, 24, 31, .1); }
.ms-tile__img { display: block; aspect-ratio: 4 / 3; background: var(--ms-surface); padding: 16px; overflow: hidden; }
.ms-tile__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease-out; }
.ms-tile:hover .ms-tile__img img { transform: scale(1.05); }
.ms-tile__noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ms-faint); font-size: 2rem; }
.ms-tile__body { display: flex; flex-direction: column; padding: 14px 16px 16px; flex: 1 1 auto; }
.ms-tile h3 { font-size: var(--fs-h4); line-height: 1.3; margin: 0 0 4px; }
.ms-tile h3 a { color: var(--ms-ink); text-decoration: none; }
/* the whole tile is clickable through the title link; sub-category links sit above it */
.ms-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.ms-tile h3 a:hover, .ms-tile:hover h3 a { color: var(--ms-accent); }
.ms-tile__count { font-size: var(--fs-xs); color: var(--ms-muted); }
.ms-tile ul { position: relative; z-index: 1; list-style: none; padding: 10px 0 0; margin: 10px 0 0; border-top: 1px solid var(--ms-line); display: grid; gap: 4px; font-size: var(--fs-sm); }
.ms-tile ul a { color: var(--ms-ink-2); text-decoration: none; }
.ms-tile ul a:hover { color: var(--ms-accent); }
@media (max-width: 575.98px) { .ms-tile ul { display: none; } .ms-tile__body { padding: 10px 12px 12px; } .ms-tile__img { padding: 10px; } }

/* "How we work": numbered steps joined by a line */
.ms-home-band { background: var(--ms-surface); margin-top: 64px; padding-bottom: 64px; }
@media (max-width: 991.98px) { .ms-home-band { margin-top: 48px; padding-bottom: 48px; } }
.ms-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ms-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ms-steps li { position: relative; }
.ms-steps span { position: relative; z-index: 1; display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--ms-accent); color: var(--ms-accent); font-weight: 800; font-size: var(--fs-h4); margin-bottom: 16px; box-shadow: 0 0 0 6px var(--ms-surface); }
.ms-steps li:first-child span { background: var(--ms-accent); color: #fff; }
@media (min-width: 768px) {
  .ms-steps li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 44px; right: -24px; height: 2px; background: linear-gradient(90deg, var(--ms-accent), var(--ms-accent-line)); }
}
.ms-steps h3 { font-size: var(--fs-h4); margin: 0 0 6px; }
.ms-steps p { margin: 0; color: var(--ms-ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.ms-steps__cta { margin-top: 32px; display: flex; justify-content: center; }
@media (max-width: 767.98px) {
  /* vertical timeline on phones */
  .ms-steps { gap: 0; }
  .ms-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding-bottom: 20px; }
  .ms-steps span { grid-row: span 2; margin: 0; }
  .ms-steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--ms-accent-line); }
  .ms-steps__cta { margin-top: 12px; }
  .ms-steps__cta .ms-btn { width: 100%; }
}

/* Brands strip */
.ms-brands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ms-brands a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--ms-line); border-radius: 999px; background: #fff; color: var(--ms-ink); text-decoration: none; transition: border-color .15s, color .15s; }
.ms-brands a:hover { border-color: var(--ms-accent); color: var(--ms-accent); }
.ms-brands strong { font-size: var(--fs-body); font-weight: 700; letter-spacing: .01em; }
.ms-brands span { font-size: var(--fs-2xs); color: var(--ms-muted); font-variant-numeric: tabular-nums; }

.ms-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: #fff; border-radius: 16px; padding: clamp(24px, 4vw, 48px); background-color: var(--ms-brand); background-image: linear-gradient(90deg, rgba(16, 22, 30, .95) 0%, rgba(16, 22, 30, .82) 60%, rgba(11, 94, 126, .55) 100%), var(--ms-hero, none); background-size: cover; background-position: center; }
.ms-cta h2 { color: #fff; font-size: var(--fs-h2); margin: 0 0 6px; }
.ms-cta p { margin: 0; color: var(--ms-on-dark); }
.ms-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 575.98px) { .ms-cta__actions { display: grid; grid-template-columns: 1fr; width: 100%; } .ms-cta .ms-btn { width: 100%; } }

/* ---------- Lead form ---------- */
.ms-lead .modal-content { border-radius: var(--ms-radius); border: 0; }
.ms-lead .modal-header { border-bottom: 0; padding: 1.25rem 1.5rem .25rem; }
.ms-lead .modal-title { font-size: var(--fs-h3); margin: 0; }
.ms-lead .modal-body { padding: .5rem 1.5rem 1.5rem; }
@media (max-width: 575.98px) { .ms-lead .modal-dialog { margin: 12px; } .ms-lead .modal-body { max-height: calc(100dvh - 120px); overflow-y: auto; } }
/* Required fields are marked before the first submit, not only after an error */
.ms-lead .ms-field:has(> [required]) > label::after { content: " *"; color: var(--ms-muted); font-weight: 400; }
.ms-lead .form-check-label a { color: var(--ms-accent); text-decoration: underline; text-underline-offset: 2px; }
.ms-lead__lead { color: var(--ms-ink-2); font-size: var(--fs-body); }
.ms-field { margin-bottom: .85rem; }
.ms-field label { font-weight: 600; font-size: var(--fs-sm); margin-bottom: .3rem; display: block; }
.ms-field .form-check-label { font-weight: 400; display: inline; }
.ms-field .form-control, .ms-field .form-select { min-height: 44px; border-radius: var(--ms-radius-sm); border-color: var(--ms-line); }
.ms-field__error { color: var(--ms-danger); font-size: var(--fs-xs); margin-top: .3rem; }
.ms-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ms-lead__alt { text-align: center; color: var(--ms-muted); font-size: var(--fs-sm); margin-top: .8rem; }
.ms-lead__done { text-align: center; padding: 1rem 0; }
.ms-lead__done i { font-size: 2.6rem; color: var(--ms-ok); }
.ms-lead__done p { margin: .8rem 0 1.2rem; font-size: var(--fs-lg); }
.ms-footer .ms-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.ms-footer .ms-btn--ghost:hover { border-color: #fff; color: #fff; }

/* Footer stays at the bottom on short pages; one 48px gap between page content and footer */
#container { min-height: 100vh; display: flex; flex-direction: column; }
#container > main { flex: 1 0 auto; }
#container > main > .container:last-child, #common-home > .ms-home-section:last-child { padding-bottom: 48px; }

/* Content column must be allowed to shrink below its widest child (chip rows),
   otherwise the flex row wraps it under the sidebar on category pages */
#content.col { min-width: 0; }
@media (min-width: 992px) { .ms-chips { flex-wrap: wrap; overflow: visible; padding-bottom: 0; } }

/* ---------- Category filter ---------- */
.ms-filter { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.ms-filter__label { flex: 0 0 auto; font-weight: 600; font-size: var(--fs-sm); padding-top: .5rem; color: var(--ms-ink-2); }
.ms-filter__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ms-chip__count { color: var(--ms-muted); font-size: var(--fs-xs); margin-left: .3rem; }
.ms-chip--active { background: var(--ms-accent); border-color: var(--ms-accent); color: #fff; }
.ms-chip--active:hover { background: var(--ms-accent-dark); border-color: var(--ms-accent-dark); color: #fff; }
.ms-chip--active .ms-chip__count { color: var(--ms-accent-line); }
.ms-chip--active i, .ms-chip--reset i { margin-right: 6px; }
.ms-chip--reset { color: var(--ms-accent); border-style: dashed; }
@media (max-width: 575.98px) {
  .ms-filter { flex-direction: column; gap: .35rem; }
  .ms-filter__label { padding-top: 0; }
  .ms-filter__chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: .25rem; scrollbar-width: none; }
  .ms-filter__chips::-webkit-scrollbar { display: none; }
  .ms-filter__chips .ms-chip { height: 36px; }
}

/* ---------- Stock Bootstrap controls in theme colours (cart, checkout, account) ---------- */
.btn-primary { --bs-btn-bg: var(--ms-accent); --bs-btn-border-color: var(--ms-accent); --bs-btn-hover-bg: var(--ms-accent-dark); --bs-btn-hover-border-color: var(--ms-accent-dark); --bs-btn-active-bg: var(--ms-accent-dark); --bs-btn-active-border-color: var(--ms-accent-dark); --bs-btn-disabled-bg: var(--ms-accent); --bs-btn-disabled-border-color: var(--ms-accent); font-weight: 600; border-radius: var(--ms-radius-sm); }
.btn-light, .btn-secondary { --bs-btn-bg: #fff; --bs-btn-border-color: var(--ms-line); --bs-btn-color: var(--ms-ink); --bs-btn-hover-bg: var(--ms-surface); --bs-btn-hover-border-color: var(--ms-ink-2); --bs-btn-hover-color: var(--ms-ink); border-radius: var(--ms-radius-sm); font-weight: 600; }
.btn-danger { border-radius: var(--ms-radius-sm); }
/* One control height across stock pages: 36 compact, 44 standard */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-left: 18px; padding-right: 18px; font-weight: 600; }
.btn-sm { min-height: 36px; padding-left: 12px; padding-right: 12px; }
.btn.d-block { display: flex; }
.btn-close { min-height: 0; padding: .25em; }
.form-control, .form-select { border-radius: var(--ms-radius-sm); border-color: var(--ms-line); min-height: 44px; }
.form-control:focus, .form-select:focus { border-color: var(--ms-accent); box-shadow: 0 0 0 3px var(--ms-accent-ring); }
.form-check-input:checked { background-color: var(--ms-accent); border-color: var(--ms-accent); }
.form-check-input:focus { border-color: var(--ms-accent); box-shadow: 0 0 0 3px var(--ms-accent-ring); }
.input-group-text { background: var(--ms-surface); border-color: var(--ms-line); }
#content > h1 + .row, #checkout-checkout legend, #checkout-checkout h2 { margin-top: .5rem; }
#checkout-checkout fieldset legend, #checkout-checkout h2 { font-size: var(--fs-lg); font-weight: 700; }
/* Checkout: numbered steps (hidden fieldsets do not count), order summary column on a grey panel */
#checkout-checkout #content { counter-reset: ms-step; }
#checkout-checkout fieldset legend { margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--ms-line); }
#checkout-checkout fieldset legend::before { counter-increment: ms-step; content: counter(ms-step) ". "; color: var(--ms-accent); }
#checkout-checkout #content > .row > .col-md-7 fieldset:first-child legend { margin-top: 8px; }
@media (min-width: 768px) {
  #checkout-checkout #content > .row > .col { background: var(--ms-surface); border-radius: var(--ms-radius); padding: 8px 24px 24px; align-self: flex-start; }
}
#checkout-checkout .invalid-feedback { margin-top: 6px; font-size: var(--fs-xs); }
#checkout-checkout .input-group .btn { min-height: 44px; }
#checkout-checkout .form-switch { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-left: 0; }
#checkout-checkout .form-switch .form-check-input { order: -1; margin: 0; float: none; flex: 0 0 auto; }
#button-register { min-height: 48px; padding: 0 24px; }
/* Stock shipping/payment choice dialogs: radio and its label on one line, options as tappable rows */
#modal-shipping .modal-content, #modal-payment .modal-content { border: 0; border-radius: var(--ms-radius); }
#modal-shipping .modal-header, #modal-payment .modal-header { border-bottom: 1px solid var(--ms-line); padding: 16px 20px; }
#modal-shipping .modal-title, #modal-payment .modal-title { font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; }
#modal-shipping .modal-body, #modal-payment .modal-body { padding: 16px 20px 20px; }
#modal-shipping .modal-body > form > p:first-child, #modal-payment .modal-body > form > p:first-child { color: var(--ms-ink-2); font-size: var(--fs-sm); }
#modal-shipping .modal-body p strong, #modal-payment .modal-body p strong { display: block; margin-top: 12px; font-size: var(--fs-sm); }
#modal-shipping .form-check, #modal-payment .form-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0; padding: 8px 12px; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); }
#modal-shipping .form-check:has(input:checked), #modal-payment .form-check:has(input:checked) { border-color: var(--ms-accent); background: var(--ms-accent-soft); }
#modal-shipping .form-check input, #modal-payment .form-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--ms-accent); }
#modal-shipping .form-check label, #modal-payment .form-check label { flex: 1 1 auto; cursor: pointer; font-size: var(--fs-body); line-height: 1.35; }
#modal-shipping .text-end, #modal-payment .text-end { margin-top: 16px; }
#modal-shipping .text-end .btn, #modal-payment .text-end .btn { width: 100%; min-height: 48px; }
.ms-confirm { margin-bottom: 16px; }
.ms-confirm th { font-size: var(--fs-xs); color: var(--ms-muted); font-weight: 600; border-bottom: 1px solid var(--ms-line); }
.ms-confirm td { padding: 10px 0; border-bottom: 1px solid var(--ms-line); background: transparent; }
.ms-confirm th:last-child, .ms-confirm td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.ms-confirm tfoot td { border: 0; padding: 4px 0; font-size: var(--fs-sm); }
.ms-confirm tfoot tr:last-child td { font-size: var(--fs-lg); font-weight: 800; padding-top: 10px; border-top: 1px solid var(--ms-line); }
.ms-confirm tfoot td:first-child { text-align: left !important; }
#checkout-payment .text-end { text-align: left !important; }
#checkout-payment .btn-primary { width: 100%; min-height: 52px; font-size: var(--fs-lg); }

/* Cart page: item list + sticky summary */
#checkout-checkout .table { border-color: var(--ms-line); }
#checkout-checkout .table thead td { background: var(--ms-surface); font-weight: 600; font-size: var(--fs-sm); color: var(--ms-ink-2); }
.ms-basket { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) {
  .ms-basket { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px 32px; }
  .ms-basket__summary { grid-column: 2; grid-row: 1 / span 2; }
  .ms-basket__back { grid-column: 1; grid-row: 2; }
}
.ms-basket__back { justify-self: start; }
.ms-basket__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ms-line); }
.ms-basket__item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ms-line); align-items: start; }
.ms-basket__img { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); background: #fff; overflow: hidden; color: var(--ms-faint); }
.ms-basket__img img { width: 100%; height: 100%; object-fit: contain; }
.ms-basket__name { display: block; font-weight: 600; color: var(--ms-ink); text-decoration: none; line-height: 1.35; }
.ms-basket__name:hover { color: var(--ms-accent); }
.ms-basket__warn { display: block; font-size: var(--fs-xs); color: var(--ms-wait); margin-top: 2px; }
.ms-basket__meta { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--fs-xs); color: var(--ms-muted); }
.ms-basket__controls { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.ms-basket__qtyform { margin: 0; }
.ms-qty--sm { height: 40px; width: 124px; }
.ms-qty--sm button { width: 38px; }
.ms-qty--sm input.is-invalid { color: var(--ms-danger); }
.ms-basket__remove { font-size: var(--fs-sm); color: var(--ms-muted); text-decoration: none; background: none; border: 0; padding: 0; }
.ms-basket__remove:hover { color: var(--ms-danger); }
.ms-basket__remove i { margin-right: 4px; }
.ms-basket__sum { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-basket__sum strong { display: block; font-size: var(--fs-lg); }
.ms-basket__sum span { font-size: var(--fs-xs); color: var(--ms-muted); }
.ms-basket__modules { margin-top: 24px; }
.ms-basket__modules h2 { font-size: var(--fs-lg); }
.ms-basket__summary { display: grid; gap: 8px; background: var(--ms-surface); border-radius: var(--ms-radius); padding: 24px; }
@media (min-width: 992px) { .ms-basket__summary { position: sticky; top: 96px; } }
.ms-basket__totals { margin: 0 0 8px; }
.ms-basket__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--fs-body); color: var(--ms-ink-2); font-variant-numeric: tabular-nums; }
.ms-basket__row dt { font-weight: 400; }
.ms-basket__row dd { margin: 0; white-space: nowrap; }
.ms-basket__row--total { border-top: 1px solid var(--ms-line); margin-top: 8px; padding-top: 12px; color: var(--ms-ink); font-size: var(--fs-lg); }
.ms-basket__row--total dt { font-weight: 600; }
.ms-basket__row--total dd { font-size: var(--fs-h3); font-weight: 800; }
.ms-basket__row--note { font-size: var(--fs-xs); color: var(--ms-muted); }
.ms-basket__note { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--ms-muted); text-align: center; }
@media (max-width: 575.98px) {
  .ms-basket__item { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .ms-basket__img { width: 64px; height: 64px; }
  .ms-basket__sum { grid-column: 2; text-align: left; }
  .ms-basket__summary { padding: 16px; }
}

/* Checkout: drop optional fields buyers never fill (company, second address line) */
#checkout-checkout .col:has(> #input-shipping-company),
#checkout-checkout .col:has(> #input-shipping-address-2),
#checkout-checkout .col:has(> #input-payment-company),
#checkout-checkout .col:has(> #input-payment-address-2) { display: none; }

/* ---------- Contacts ---------- */
.ms-contact__cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .ms-contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ms-contact__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ms-contact__card { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem; border: 1px solid var(--ms-line); border-radius: var(--ms-radius); color: var(--ms-ink); text-decoration: none; background: #fff; }
a.ms-contact__card:hover { border-color: var(--ms-ink-2); color: var(--ms-ink); }
.ms-contact__card i { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ms-accent-soft); font-size: var(--fs-lg); color: var(--ms-accent); margin-bottom: 8px; }
.ms-contact__card .fa-whatsapp { color: var(--ms-wa); background: var(--ms-wa-soft); }
@media (max-width: 767.98px) {
  .ms-contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ms-contact__card { padding: 14px; }
  .ms-contact__card strong { font-size: var(--fs-body); }
}
.ms-contact__maplink { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-sm); font-weight: 600; }
.ms-contact__label { font-size: var(--fs-xs); color: var(--ms-muted); }
.ms-contact__card strong { font-size: var(--fs-lg); word-break: break-word; }
.ms-contact__sub { font-size: var(--fs-sm); color: var(--ms-ink-2); }
.ms-contact__cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--ms-surface); border-radius: var(--ms-radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.ms-contact__cta h2 { font-size: var(--fs-lg); margin: 0 0 .2rem; }
.ms-contact__cta p { margin: 0; color: var(--ms-ink-2); }
/* No min-height: with aspect-ratio it widened the map to 640px and pushed the whole phone page sideways */
.ms-contact__map { width: 100%; max-width: 100%; border-radius: var(--ms-radius); overflow: hidden; border: 1px solid var(--ms-line); aspect-ratio: 16 / 7; }
@media (max-width: 767.98px) { .ms-contact__map { aspect-ratio: 4 / 3; } }
.ms-contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Information pages, 404, stock product lists (search, specials) ---------- */
.ms-article { max-width: 820px; }
.ms-article__body { color: var(--ms-ink-2); font-size: var(--fs-h4); line-height: 1.65; }
.ms-article__body h2 { font-size: var(--fs-h3); margin: 32px 0 12px; color: var(--ms-ink); }
.ms-article__body h2[style] { text-align: left !important; }
.ms-article__body p { margin: 0 0 12px; }
.ms-article__body em { font-style: normal; color: var(--ms-ink-2); }
.ms-article__body img { max-width: 100%; height: auto; }
/* "Нам доверяют" client logos on the about page: a grid instead of one logo per screen row */
.ms-article:has(.clients-logo-wrap) { max-width: 960px; }
.ms-article__body .clients-logo-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; margin-top: 24px; }
.ms-article__body .clients-logo-item { text-align: center; }
.ms-article__body .clients-logo-image img { width: 120px; height: 120px; object-fit: contain; margin: 0 auto 8px; display: block; border: 1px solid var(--ms-line); border-radius: var(--ms-radius); padding: 8px; background: #fff; }
.ms-article__body .clients-logo-title { font-weight: 600; font-size: var(--fs-sm); color: var(--ms-ink); }
.ms-article__body .clients-logo-title_city { font-size: var(--fs-xs); color: var(--ms-muted); }
.ms-article__body table { width: 100%; }
.ms-404 { max-width: 640px; padding: 2rem 0 1rem; }
.ms-404__code { font-size: clamp(4rem, 10vw, 6rem); font-weight: 800; line-height: 1; color: var(--ms-line); margin: 0; }
.ms-404 h1 { margin-top: .5rem; }
.ms-404 p { color: var(--ms-ink-2); }
.ms-404__search { margin: 1.25rem 0; }
.ms-404__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---------- Account: login, register, forgotten ---------- */
.ms-auth { max-width: 440px; margin: 8px auto 0; }
.ms-auth h1 { text-align: center; margin-bottom: 24px; }
.ms-auth__form { display: grid; gap: 16px; border: 1px solid var(--ms-line); border-radius: var(--ms-radius); padding: 24px; background: #fff; }
.ms-auth__form .ms-field { margin: 0; }
.ms-auth__forgot { display: inline-block; margin-top: 8px; font-size: var(--fs-sm); }
.ms-auth__alt { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ms-line); text-align: center; }
.ms-auth__alt p { font-size: var(--fs-sm); color: var(--ms-ink-2); margin: 0 0 12px; }
/* The account links module is noise next to the guest forms */
#account-register #column-right, #account-forgotten #column-right, #account-login #column-right { display: none !important; }
#account-register #content, #account-forgotten #content { max-width: 560px; }
#account-register .row.mb-3 > .col-sm-2, #account-forgotten .row.mb-3 > .col-sm-2, #account-forgotten .row.mb-3 > .col-sm-3 { flex: 0 0 100%; max-width: 100%; text-align: left !important; font-weight: 600; font-size: var(--fs-sm); padding-bottom: 6px; }
#account-register .row.mb-3 > .col-sm-10, #account-forgotten .row.mb-3 > .col-sm-10, #account-forgotten .row.mb-3 > .col-sm-9 { flex: 0 0 100%; max-width: 100%; }
#account-register fieldset legend, #account-forgotten fieldset legend { font-size: var(--fs-lg); font-weight: 700; margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ms-line); }
.col-form-label, .form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ms-ink); padding-bottom: 6px; }
.form-check-label { font-size: var(--fs-sm); }
/* Required fields in every stock form: a quiet star after the label */
div.required > .col-form-label::after, div.required .form-label::after { content: " *"; color: var(--ms-muted); font-weight: 400; }
#account-register .text-end, #account-forgotten .text-end { text-align: left !important; }
#account-register .text-end .btn, #account-forgotten .text-end .btn { min-height: 48px; padding: 0 24px; }

/* ---------- Search ---------- */
.ms-refine { background: var(--ms-surface); border-radius: var(--ms-radius); padding: 16px; margin: 0 0 24px; }
.ms-refine__row { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ms-refine__row { grid-template-columns: minmax(0, 1fr) 240px auto; } }
.ms-refine .form-control, .ms-refine .form-select { background-color: #fff; min-height: 44px; }
.ms-refine__opts { margin-top: 10px; font-size: var(--fs-sm); color: var(--ms-ink-2); }
.ms-refine__opts .form-check-input:disabled ~ .form-check-label { color: var(--ms-muted); }
.ms-pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; }
.ms-pager__results { font-size: var(--fs-xs); color: var(--ms-muted); }
.ms-empty { max-width: 640px; padding: 8px 0 16px; }
.ms-empty__icon { font-size: 2rem; color: var(--ms-faint); margin-bottom: 12px; }
.ms-empty h2 { font-size: var(--fs-h3); margin: 0 0 8px; }
.ms-empty p { color: var(--ms-ink-2); margin: 0 0 16px; }
.ms-empty__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ms-empty__catalog { margin-top: 32px; }
.ms-empty__catalog h2 { font-size: var(--fs-h3); margin: 0 0 16px; }
.ms-tile--link { color: var(--ms-ink); text-decoration: none; }
.ms-tile--link:hover { color: var(--ms-accent); }
.ms-tile--link strong { display: block; font-size: var(--fs-body); line-height: 1.3; margin-bottom: 2px; }
.ms-tiles--compact .ms-tile__img { aspect-ratio: 16 / 9; }
@media (min-width: 1200px) { .ms-tiles--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Site map page: two plain columns of nested links */
#information-sitemap #content ul { list-style: none; padding: 0; margin: 0; }
#information-sitemap #content li { padding: 4px 0; }
#information-sitemap #content > .row > div > ul > li { padding: 8px 0; }
#information-sitemap #content > .row > div > ul > li > a { font-weight: 600; color: var(--ms-ink); }
#information-sitemap #content ul ul { padding-left: 16px; margin: 4px 0; border-left: 2px solid var(--ms-line); }
#information-sitemap #content ul ul a { color: var(--ms-ink-2); font-size: var(--fs-body); }
#product-compare .text-end { text-align: left !important; }

/* Search / specials / brand pages use the stock grid; keep it a grid on every screen */
#product-list.row > .col, #product-list.row > div { flex: 0 0 50% !important; max-width: 50% !important; }
@media (min-width: 768px) { #product-list.row > .col, #product-list.row > div { flex: 0 0 33.333% !important; max-width: 33.333% !important; } }
@media (min-width: 1200px) { #product-list.row > .col, #product-list.row > div { flex: 0 0 25% !important; max-width: 25% !important; } }
#product-list.row { --bs-gutter-x: 1rem; }
#product-search .row.row-cols-1.row-cols-md-2 .form-control, #product-search .form-select { min-height: 44px; }