/* Мерч-каталог (/merch/). Только токены и компоненты из assets/css/style.css:
   своих цветов и радиусов не заводим, здесь — раскладка раздела. */

.mx { padding: 28px 0 80px; min-height: 50vh; }
.mx-loading, .mx-empty { padding: 48px 0; color: var(--gray); font-size: 16px; }
.mx .link { color: var(--orange-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mx-small { font-size: 13px; color: var(--gray); line-height: 1.45; margin-top: 10px; }
.mx-hint { font-size: 13px; color: var(--gray); margin-top: 8px; min-height: 1em; }
.mx-hint.is-warn { color: var(--warn); }
.mx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-chips .chip { padding: 8px 14px; font-size: 14px; }

/* Поиск и разделы */
.mx-search { display: flex; gap: 12px; max-width: 760px; margin-bottom: 14px; }
.mx-search .input { height: 52px; }
.mx-search .btn { height: 52px; }
.mx-stats { color: var(--gray); font-size: 14px; margin-bottom: 26px; }
.mx-stats a { color: var(--orange-dark); }
.mx-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mx-cat {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; min-height: 104px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: .2s ease;
}
.mx-cat b { font-size: 17px; }
.mx-cat span { font-size: 14px; color: var(--gray); margin-top: auto; }
.mx-cat:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* Главная, вариант 3 (29.10): поиск и статистика в строку, баннеры «по поводу», плитки с фото, преимущества */
.mx-search-row { display: flex; align-items: center; gap: 12px 20px; margin: 0 0 4px; }
.mx-search-row .mx-search { flex: 0 1 820px; max-width: none; margin: 0; }
.mx-search-row .mx-search .input { flex: 1 1 auto; }
.mx-search-row .mx-stats { margin: 0; white-space: nowrap; }
.mx3-sec { padding-top: 26px; }
.mx3-sec h2 { font-size: 21px; margin: 0 0 16px; }
.mx3-occ { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 14px; }
.mx3-occ__i {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 236px;
  border-radius: var(--radius-lg); padding: 18px 18px 16px; color: var(--white); overflow: hidden; transition: .18s;
}
.mx3-occ__i:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.mx3-occ__t { padding-right: 40px; }
.mx3-occ__t b { display: block; font-size: 18px; font-weight: 800; line-height: 1.2; }
.mx3-occ__t span { display: block; font-size: 12px; opacity: .92; margin-top: 5px; line-height: 1.35; }
.mx3-occ__ph { display: flex; gap: 8px; align-items: flex-end; }
.mx3-occ__ph img { background: var(--white); border-radius: 12px; object-fit: cover; aspect-ratio: 1 / 1; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.mx3-occ__ph img:first-child { width: 46%; }
.mx3-occ__ph img:not(:first-child) { width: 25%; }
.mx3-occ__go {
  position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.mx3-occ__i--o1 { background: linear-gradient(135deg, #B3261E, var(--orange)); }
.mx3-occ__i--o2 { background: linear-gradient(135deg, #2B6CB0, #4C8FD6); }
.mx3-occ__i--o3 { background: linear-gradient(135deg, #2F7D4F, #4FA873); }
.mx3-occ__i--o4 { background: linear-gradient(135deg, #3A3A3A, #6B6B6B); }
.mx-cats.mx3-cats { gap: 16px; }
.mx3-cat {
  display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: .18s; color: inherit;
}
.mx3-cat:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.mx3-cat__ph { height: 190px; background: #F3F3F1; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; position: relative; }
.mx3-cat__ph img { width: 100%; height: 100%; object-fit: contain; padding: 12px 12px 18px; mix-blend-mode: multiply; }
.mx3-cat__ic {
  position: absolute; left: 12px; bottom: -16px; width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, var(--orange), var(--orange-light)); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(240, 93, 32, .35);
}
.mx3-cat.is-noph .mx3-cat__ic { left: 50%; bottom: 50%; transform: translate(-50%, 50%) scale(1.5); }
.mx3-cat__body { padding: 22px 16px 14px; }
.mx3-cat__body b { font-size: 14.5px; font-weight: 700; display: block; margin-bottom: 4px; }
.mx3-cat__body span { font-size: 12px; color: var(--gray); }
.mx3-advs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 46px 0 20px; }
.mx3-adv { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.mx3-adv__ic { width: 38px; height: 38px; border-radius: 10px; background: var(--cream); display: flex; align-items: center; justify-content: center; }
.mx3-adv b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.mx3-adv span { font-size: 12.5px; color: var(--gray); line-height: 1.4; }
@media (max-width: 1200px) {
  .mx3-occ { grid-template-columns: repeat(2, 1fr); }
  .mx3-advs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .mx-search-row { flex-wrap: wrap; }
  .mx-search-row .mx-search { flex-basis: 100%; }
}
@media (max-width: 600px) {
  .mx-search-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .mx-search-row .mx-search { flex-direction: column; flex-basis: auto; }
  .mx-search-row .mx-search .input { font-size: 16px; }
  .mx-search-row .mx-stats { white-space: normal; font-size: 13px; }
  .mx3-sec h2 { font-size: 17px; margin-bottom: 10px; }
  .mx3-occ { display: flex; overflow-x: auto; gap: 10px; margin: 0 -16px 10px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mx3-occ::-webkit-scrollbar { display: none; }
  .mx3-occ__i { flex: 0 0 72%; height: 200px; scroll-snap-align: start; }
  .mx-cats.mx3-cats { gap: 10px; }
  .mx3-cat__ph { height: 140px; }
  .mx3-cat__body b { font-size: 12.5px; }
  .mx3-cat__body span { font-size: 11px; }
  .mx3-advs { grid-template-columns: 1fr; margin: 30px 0 10px; }
}

/* Подборка-баннер на главной витрины и ссылка в шапке */
.mx-headnav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mx-navlink {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r-control);
  background: var(--cream); color: var(--orange-dark); font-size: 14px; font-weight: 700; transition: .2s;
}
.mx-navlink:hover { background: var(--orange); color: var(--white); }
.mx-promo {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center;
  margin-bottom: 22px; padding: 28px 32px; border-radius: var(--radius-lg); background: var(--orange); color: var(--white);
  transition: .2s ease;
}
.mx-promo:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.mx-promo__text { display: flex; flex-direction: column; gap: 8px; }
.mx-promo__text b { font-size: 28px; line-height: 1.15; }
.mx-promo__text span { font-size: 15px; line-height: 1.45; opacity: .95; }
.mx-promo__text .mx-promo__tag { align-self: flex-start; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: 1;
  padding: 4px 10px; border-radius: 20px; background: rgba(255, 255, 255, .2); }
.mx-promo__subs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mx-promo__subs i { font-style: normal; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 20px; background: var(--white); color: var(--ink); }
.mx-subs { margin-bottom: 22px; }
.mx-main { min-width: 0; }
.mx-subs .chip small { color: var(--gray); font-size: 12.5px; margin-left: 4px; }
.mx-subs .chip.is-active small { color: inherit; opacity: .8; }

/* Подборка в КП */
.mx-card { position: relative; }
.mx-card__kp {
  position: absolute; top: 10px; right: 10px; z-index: 2; height: 30px; padding: 0 11px; border-radius: 15px;
  border: 1px solid var(--line); background: var(--white); font-size: 12.5px; font-weight: 700; color: var(--ink);
  opacity: .92; transition: .15s;
}
.mx-card__kp:hover { border-color: var(--orange); color: var(--orange-dark); opacity: 1; }
.mx-card__kp.is-on { background: var(--orange); border-color: var(--orange); color: var(--white); }
.mx-card__kp.is-on::before { content: "✓ "; }
.mx-kpadd { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mx-kp .mx-cl__foot { flex-wrap: wrap; }
.mx-kp__move { height: 40px; padding: 0 14px; font-size: 14px; }
.mx-kp__acts { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mx-kp__acts:empty { display: none; }

/* Список раздела */
.mx-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.mx-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 22px;
  max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; }
.mx-side__group > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.mx-side .input { height: 46px; padding: 0 14px; }
.mx-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mx-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; padding: 3px; transition: .15s; }
.mx-sw i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.mx-sw.is-active { border-color: var(--orange); }
.mx-reset { height: 42px; }
.mx-toolbar { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.mx-find { max-width: 420px; height: 48px; }
.mx-count { color: var(--gray); font-size: 14px; white-space: nowrap; }
.mx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mx-grid--wide { grid-template-columns: repeat(5, 1fr); }
.mx-card {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); overflow: hidden; transition: .2s ease;
}
.mx-card:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.mx-card__img { aspect-ratio: 1; background: var(--white); display: flex; align-items: center; justify-content: center; padding: 10px; }
.mx-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mx-card__body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mx-card h3 { font-size: 14.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mx-card__price { font-weight: 800; font-size: 17px; margin-top: auto; }
.mx-card__price small { font-weight: 500; font-size: 13px; color: var(--gray); }
.mx-card__stock { font-size: 13px; color: var(--ok); line-height: 1.35; }
.mx-card__stock.is-transit { color: #b26a00; }
.mx-card__stock.is-order { color: var(--gray); }
.mx-card__fit { font-size: 12.5px; font-weight: 600; color: var(--dark, #222); background: #f3f6f1; border-radius: 6px; padding: 3px 7px; align-self: flex-start; }
.mx-card__img { position: relative; }
.mx-badges { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; }
.mx-badge { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: #111; color: #fff; }
.mx-badge--sale { background: var(--orange); }

/* Фильтры (merch-filters 27.10) */
.mx-check, .mx-side__group > label.mx-check { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 400; margin: 0; padding: 5px 0; cursor: pointer; }
.mx-check input { width: 18px; height: 18px; accent-color: var(--orange); flex-shrink: 0; margin: 0; }
.mx-check span { flex: 1; }
.mx-check small { color: var(--gray); font-size: 12.5px; }
.mx-side__group > label.mx-check--sm { font-size: 13px; padding-top: 8px; }
.mx-side .mx-hint { font-size: 12.5px; color: var(--gray); margin-top: 6px; }
.mx-chips--sm { margin-top: 8px; gap: 6px; }
.mx-chips--sm .chip { padding: 6px 11px; font-size: 13px; }
.mx-side__head, .mx-side__apply, .mx-filters-btn { display: none; }
.mx-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gray); margin-left: auto; white-space: nowrap; }
.mx-sort select { height: 44px; padding: 0 12px; font-size: 14px; min-width: 190px; }
.mx-avail { margin: 10px 0 4px; font-size: 13.5px; }
.mx-avail summary { cursor: pointer; font-weight: 600; color: var(--orange); }
.mx-avail table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.mx-avail th { text-align: left; font-weight: 600; color: var(--gray); font-size: 12.5px; padding: 4px 6px; }
.mx-avail td { padding: 5px 6px; border-top: 1px solid var(--line); }
.mx-avail tr.is-cur td { background: #fff6f1; }
.mx-more { display: flex; justify-content: center; margin-top: 28px; }

/* Карточка товара */
.mx-item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.mx-gallery__main {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.mx-gallery__main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mx-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mx-gallery__thumbs button { width: 72px; height: 72px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); padding: 4px; }
.mx-gallery__thumbs button.is-active { border-color: var(--orange); }
.mx-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.mx-buy { display: flex; flex-direction: column; gap: 16px; }
.mx-buy__price { font-size: 32px; font-weight: 800; }
.mx-buy__price small { font-size: 15px; font-weight: 500; color: var(--gray); }
.mx-buy__stock { color: var(--ok); font-weight: 600; font-size: 14.5px; margin-top: -8px; }
.mx-buy__stock.is-low { color: var(--warn); }
.mx-opt > label { display: block; font-size: 14px; margin-bottom: 8px; color: #4a4a4a; }
.mx-qty { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mx-qty .input { width: 120px; height: 44px; padding: 0 14px; }
.mx-sum { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mx-sum span { color: #4a4a4a; }
.mx-sum--total { font-size: 19px; border-bottom: 0; padding-top: 12px; }
.mx-sum--total span { color: var(--ink); font-weight: 700; }
.mx-sum--unit { border-bottom: 0; padding-top: 0; font-size: 14px; }
.mx-cta { width: 100%; }
.mx-cta2 { width: 100%; margin-top: -6px; }
.mx-nobrand { font-size: 14.5px; color: var(--ink); background: var(--fill-lg); border-radius: var(--radius-sm); padding: 12px 14px; }
.mx-cta[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.mx-facts { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.mx-facts li { display: flex; gap: 12px; }
.mx-facts span { color: var(--gray); min-width: 150px; }
.mx-desc { font-size: 14px; line-height: 1.55; color: #4a4a4a; background: var(--bg); border-radius: var(--radius); padding: 16px 18px; }

/* Конструктор нанесения */
.mx-brand { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.mx-stage { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); padding: 16px; }
.mx-stage__head { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; margin-bottom: 10px; }
.mx-stage__head span { color: var(--gray); text-align: right; }
.mx-canvas-wrap { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--white); }
.mx-canvas-wrap.is-over { outline: 2px dashed var(--orange); }
.mx-canvas { display: block; touch-action: none; }
.mx-canvas-empty {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: 420px; width: calc(100% - 32px);
  background: rgba(255, 255, 255, .94); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; color: var(--gray); text-align: center; pointer-events: none;
}
.mx-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.mx-tools .btn { height: 40px; padding: 0 14px; font-size: 14px; }
.mx-tools__size { margin-left: auto; font-weight: 700; font-size: 14px; }
.mx-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); padding: 20px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px; }
.mx-pblock { padding: 12px 0 16px; border-bottom: 1px solid var(--line); }
.mx-ptitle { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.mx-drop {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm); background: var(--field); cursor: pointer; transition: .15s;
}
.mx-drop:hover { border-color: var(--orange); }
.mx-drop b { font-size: 15px; color: var(--orange-dark); }
.mx-drop em { font-style: normal; font-size: 13px; color: var(--gray); }
.mx-drop.is-ok { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.mx-drop.is-ok b { color: var(--ink); word-break: break-all; }
.mx-err { color: var(--err); font-size: 13px; margin-top: 8px; }
.mx-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mx-method {
  text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); display: flex; flex-direction: column; gap: 3px; transition: .15s;
}
.mx-method b { font-size: 14px; }
.mx-method span { font-size: 12px; color: var(--gray); line-height: 1.3; }
.mx-method i { font-style: normal; font-size: 11.5px; color: var(--warn); }
.mx-method.is-active { border-color: var(--orange); background: var(--cream); }
.mx-method.is-active b { color: var(--orange-dark); }
.mx-total { padding-top: 10px; }
.mx-panel .mx-opt { margin-bottom: 10px; }

/* Значок корзины мерча в шапке страницы */
.mx-headrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mx-cartbtn {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 40px; padding: 0 8px 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--white); font-size: 14px; font-weight: 600; transition: .2s;
}
.mx-cartbtn b { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--orange); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.mx-cartbtn.is-empty b { background: var(--fill-lg); color: var(--gray); }
.mx-cartbtn:hover { border-color: var(--orange); }
.mx-cartbtn.is-bumped { border-color: var(--orange); transform: scale(1.06); }
.mx-quick { align-self: center; font-size: 14px; margin-top: 2px; }
.mx-panel .mx-quick { margin-top: 10px; }

/* Логотип в конструкторе: текущий и недавние */
.mx-logo-cur { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ok); background: var(--ok-bg); border-radius: var(--radius-sm); }
.mx-logo-cur > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx-logo-cur b { font-size: 14.5px; word-break: break-all; }
.mx-logo-cur em { font-style: normal; font-size: 12.5px; color: var(--gray); }
.mx-logo-other { flex-shrink: 0; height: 38px; padding: 0 14px; font-size: 13.5px; cursor: pointer; }
.mx-recent { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--gray); }
.mx-recent__it { width: 48px; height: 48px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--field); }
.mx-recent__it:hover { border-color: var(--orange); }
.mx-recent__it img { width: 100%; height: 100%; object-fit: contain; }

/* Превью позиции: фото изделия и логотип поверх, доли кадра как в конструкторе */
.mx-pv { position: relative; aspect-ratio: 1; width: 100%; background: var(--white); overflow: hidden; }
.mx-pv__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mx-pv__logo { position: absolute; height: auto; }
.mx-pv__logo.is-mono { filter: grayscale(1) brightness(.45) contrast(1.2); opacity: .85; }

/* Корзина и оформление */
.mx-cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.mx-cart__list { display: flex; flex-direction: column; gap: 14px; }
.mx-cl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.mx-cl__img { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; align-self: start; }
.mx-cl__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mx-cl__head { display: flex; justify-content: space-between; gap: 16px; }
.mx-cl__head b { font-size: 16px; line-height: 1.35; }
.mx-cl__head a:hover b { color: var(--orange-dark); }
.mx-cl__sum { font-weight: 800; font-size: 18px; text-align: right; white-space: nowrap; }
.mx-cl__sum small { display: block; font-weight: 500; font-size: 12.5px; color: var(--gray); white-space: normal; max-width: 160px; margin-left: auto; }
.mx-cl__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 0; font-size: 13.5px; }
.mx-cl__specs div { display: flex; gap: 8px; min-width: 0; }
.mx-cl__specs dt { color: var(--gray); flex-shrink: 0; }
.mx-cl__specs dd { margin: 0; min-width: 0; }
.mx-cl__foot { display: flex; align-items: flex-end; gap: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.mx-cl__qty { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--gray); }
.mx-cl__qty .input { width: 120px; height: 44px; padding: 0 14px; }
.mx-cl__parts { flex: 1; font-size: 13.5px; color: #4a4a4a; padding-bottom: 2px; }
.mx-cl__parts .mx-hint { margin-top: 4px; }
.mx-cl__del { flex-shrink: 0; }
.mx-cart__side { position: sticky; top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); padding: 20px; }
.mx-cart__side h3 { font-size: 18px; margin-bottom: 8px; }
.mx-cart__side .mx-sum--total b small { display: block; font-size: 12.5px; font-weight: 500; color: var(--gray); text-align: right; }
.mx-cart__side .mx-sum--unit b { text-align: right; font-weight: 600; max-width: 200px; }
.mx-cart__more { color: var(--gray); margin-top: 6px; }
.mx-order { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.mx-order h3 { font-size: 18px; }
.mx-order__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mx-f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.mx-f i { font-style: normal; font-weight: 400; color: var(--gray); }
.mx-f .input { height: 50px; }
.mx-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mx-ol { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.mx-ol .mx-pv { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mx-ol b { display: block; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-ol span { color: var(--gray); font-size: 12.5px; }
.mx-ol em { font-style: normal; font-weight: 700; white-space: nowrap; }
.mx-done { max-width: 640px; margin: 20px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mx-done h2 { font-size: 24px; line-height: 1.3; }
.mx-done p { color: #4a4a4a; font-size: 15.5px; line-height: 1.5; }

/* Адаптив — по убыванию ширины */
@media (max-width: 1200px) {
  .mx-cats { grid-template-columns: repeat(3, 1fr); }
  .mx-grid { grid-template-columns: repeat(3, 1fr); }
  .mx-grid--wide { grid-template-columns: repeat(4, 1fr); }
  .mx-brand { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 960px) {
  .mx-layout { grid-template-columns: 1fr; }
  /* фильтры — выезжающая панель по кнопке «Фильтры» */
  .mx-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1001; width: min(380px, 92vw); max-height: none; background: var(--white);
    overflow-y: auto; padding: 0 18px 90px; gap: 18px; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
  body.mx-side-open .mx-side { transform: none; }
  body.mx-side-open::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1000; }
  body.mx-side-open { overflow: hidden; }
  .mx-side__head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--white);
    padding: 16px 0 10px; z-index: 1; font-size: 18px; }
  .mx-side__close { font-size: 28px; line-height: 1; width: 40px; height: 40px; }
  .mx-side__apply { display: block; position: fixed; bottom: 14px; left: 18px; width: calc(min(380px, 92vw) - 36px); height: 50px; z-index: 2; }
  body:not(.mx-side-open) .mx-side__apply { display: none; }
  .mx-side .input { font-size: 16px; }
  .mx-filters-btn { display: inline-flex; height: 44px; align-items: center; }
  .mx-item, .mx-brand { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mx-panel { position: static; }
  .mx-cart { grid-template-columns: 1fr; }
  .mx-cart__side { position: static; }
  .mx-grid--wide { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .mx { padding-top: 18px; }
  .mx-cats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mx-cat { padding: 14px; min-height: 88px; }
  .mx-cat b { font-size: 15px; }
  .mx-grid, .mx-grid--wide { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mx-toolbar { flex-wrap: wrap; gap: 8px; }
  .mx-toolbar .mx-find { flex-basis: 100%; }
  .mx-sort { margin-left: 0; flex: 1; }
  .mx-sort select { min-width: 0; width: 100%; font-size: 16px; }
  .mx-count { flex-basis: 100%; }
  .mx-find { max-width: none; }
  .mx-search .btn { padding: 0 16px; }
  .mx-buy__price { font-size: 26px; }
  .mx-methods { grid-template-columns: 1fr; }
  .mx-stage { padding: 10px; }
  .mx-tools__size { margin-left: 0; width: 100%; }
  .mx-facts span { min-width: 120px; }
  .mx-headrow { flex-wrap: wrap; gap: 10px; }
  .mx-headnav { flex-wrap: wrap; }
  .mx-promo { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .mx-promo__text b { font-size: 22px; }
  .mx-promo__subs { display: none; }
  .mx-subs { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-bottom: 4px; }
  .mx-subs .chip { flex-shrink: 0; }
  .mx-cl { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .mx-cl__head { flex-direction: column; gap: 4px; }
  .mx-cl__sum { text-align: left; }
  .mx-cl__sum small { margin-left: 0; max-width: none; }
  .mx-cl__specs { grid-template-columns: 1fr; }
  .mx-cl__foot { flex-wrap: wrap; grid-column: 1 / -1; }
  .mx-cl__parts { flex-basis: 100%; order: 3; }
  .mx-cl__qty .input { width: 110px; font-size: 16px; }
  .mx-order { padding: 16px; }
  .mx-order__grid { grid-template-columns: 1fr; }
  .mx-logo-cur { flex-wrap: wrap; }
}

/* Печать КП (?kp=1): на экране блок скрыт, при печати виден только он */
.kp-print { display: none; }
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  body.has-kp-print > *:not(#kpPrint) { display: none !important; }
  body.has-kp-print { background: #fff; }
  body.has-kp-print .kp-print { display: block; color: #111; font-size: 10.5pt; line-height: 1.35; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kp-print__head { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 3px solid #F05D20; }
  .kp-print__logo { width: 64px; height: 64px; object-fit: contain; }
  .kp-print__firm { display: flex; flex-direction: column; flex: 1; }
  .kp-print__firm b { font-size: 14pt; }
  .kp-print__firm span { color: #666; font-size: 9.5pt; }
  .kp-print__contacts { text-align: right; font-size: 9.5pt; color: #333; }
  .kp-print h1 { font-size: 20pt; margin: 16px 0 4px; color: #F05D20; }
  .kp-print__meta { color: #666; font-size: 9.5pt; margin-bottom: 12px; }
  .kp-print__table { width: 100%; border-collapse: collapse; }
  .kp-print__table thead { display: table-header-group; }
  .kp-print__table th { text-align: left; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: #F05D20; padding: 6px 8px; }
  .kp-print__table td { padding: 8px; border-bottom: 1px solid #ddd; vertical-align: top; }
  .kp-print__table tr { break-inside: avoid; page-break-inside: avoid; }
  .kp-print .kp-n { width: 18px; color: #666; }
  .kp-print .kp-img { width: 78px; }
  .kp-print .mx-pv--print { position: relative; width: 74px; height: 74px; border: 1px solid #eee; border-radius: 6px; overflow: hidden; }
  .kp-print .mx-pv--print .mx-pv__photo { width: 100%; height: 100%; object-fit: contain; }
  .kp-print .mx-pv--print .mx-pv__logo { position: absolute; }
  .kp-print .kp-name b { display: block; margin-bottom: 3px; }
  .kp-print .kp-name span, .kp-print .kp-num span { display: block; color: #666; font-size: 8.5pt; }
  .kp-print .kp-num { text-align: right; white-space: nowrap; }
  .kp-print__sum { margin: 12px 0 0 auto; width: 300px; }
  .kp-print__sum div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #eee; }
  .kp-print__sum .kp-print__total { font-size: 13pt; border-bottom: 2px solid #F05D20; }
  .kp-print__note { margin-top: 14px; padding: 8px 10px; background: #FFEFE7; border-radius: 6px; font-size: 9pt; break-inside: avoid; }
  .kp-print__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 8px; border-top: 1px solid #ddd; font-size: 8.5pt; color: #666; }
}