@charset "UTF-8";
/* =========================================================================
   Королёвский Водовоз — тема Joomla «vodovoz»
   Дизайн-токены и компоненты перенесены из прототипа Claude Design
   (дизайн-система 7cf28c87). React заменён на обычный CSS.
   ========================================================================= */

/* ---------- Шрифты ---------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Golos+Text:wght@400;500;600;700&display=swap");

/* ---------- Токены ---------- */
:root {
  --font-display: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-ui: "Golos Text", "Segoe UI", Arial, sans-serif;
  --font-body: var(--font-ui);

  /* Вода — ядро бренда */
  --blue-50:#eff7fd; --blue-100:#d9edfb; --blue-200:#b4dcf6; --blue-300:#7fc3ee;
  --blue-400:#3ea4e2; --blue-500:#1187ce; --blue-600:#0b6fb4; --blue-700:#0a5a93;
  --blue-800:#0b4972; --blue-900:#0b3a58;

  --aqua-100:#dff7fa; --aqua-300:#7fdde8; --aqua-400:#35c6d9; --aqua-500:#17a8bf;
  --amber-100:#fdf0d8; --amber-300:#f8cf7d; --amber-500:#f59211; --amber-600:#d97706;

  --grey-0:#ffffff; --grey-25:#f7fafc; --grey-50:#f1f5f9; --grey-100:#e6edf3;
  --grey-200:#d5dfe8; --grey-300:#b6c4d1; --grey-400:#8a9bab; --grey-500:#64798c;
  --grey-600:#4a5c6d; --grey-700:#35485a; --grey-800:#22323f; --grey-900:#142430;

  --green-100:#dcf3e7; --green-500:#1e9e5a; --green-700:#157244;
  --red-100:#fbe1e1; --red-500:#d93a3a; --red-700:#a92626;

  --text-strong:var(--grey-900);
  --text-body:var(--grey-700);
  --text-muted:var(--grey-500);
  --text-faint:var(--grey-400);
  --text-inverse:#ffffff;
  --text-brand:var(--blue-600);
  --text-price:var(--grey-900);
  --text-price-old:var(--grey-400);
  --text-sale:var(--red-500);

  --surface-page:var(--grey-0);
  --surface-subtle:var(--grey-25);
  --surface-card:var(--grey-0);
  --surface-sunken:var(--grey-50);
  --surface-brand:var(--blue-600);
  --surface-brand-deep:var(--blue-900);
  --surface-brand-soft:var(--blue-50);
  --surface-promo:var(--amber-100);
  --surface-inverse:var(--grey-900);

  --border-subtle:var(--grey-100);
  --border-default:var(--grey-200);
  --border-strong:var(--grey-300);
  --border-brand:var(--blue-300);

  --action-primary:var(--blue-600);
  --action-primary-hover:var(--blue-700);
  --action-primary-active:var(--blue-800);
  --action-promo:var(--amber-500);
  --action-promo-hover:var(--amber-600);
  --focus-ring:var(--blue-400);

  --status-instock:var(--green-500);
  --status-instock-bg:var(--green-100);
  --status-sale:var(--red-500);
  --status-sale-bg:var(--red-100);
  --status-hit:var(--blue-600);
  --status-hit-bg:var(--blue-100);

  --gradient-water:linear-gradient(160deg,var(--blue-800) 0%,var(--blue-900) 100%);
  --gradient-fresh:linear-gradient(180deg,var(--blue-50) 0%,var(--grey-0) 100%);

  --text-2xs:12px; --text-xs:13px; --text-sm:14px; --text-md:15px; --text-base:16px;
  --text-lg:18px; --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:36px;
  --text-5xl:44px; --text-6xl:56px;

  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.06em; --tracking-caps:0.09em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800;
  --type-price-font:var(--font-display); --type-price-weight:700;

  --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:12px;
  --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px; --space-10:40px;
  --space-11:48px; --space-12:64px; --space-13:80px; --space-14:96px;

  --container-max:1200px;
  --gutter:24px;
  --card-pad:16px;
  --grid-gap:24px;

  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
  --radius-2xl:28px; --radius-pill:999px;
  --radius-card:var(--radius-lg);
  --radius-control:var(--radius-md);
  --radius-badge:var(--radius-pill);
  --radius-image:var(--radius-md);
  --border-width:1px;

  --shadow-xs:0 1px 2px rgba(20,36,48,.05);
  --shadow-sm:0 1px 2px rgba(20,36,48,.04),0 4px 12px -8px rgba(20,36,48,.12);
  --shadow-card:0 1px 2px rgba(20,36,48,.04),0 8px 24px -12px rgba(20,36,48,.14);
  --shadow-card-hover:0 2px 4px rgba(20,36,48,.05),0 18px 36px -16px rgba(11,73,114,.26);
  --shadow-pop:0 12px 32px -8px rgba(20,36,48,.22);
  --ring-focus:0 0 0 3px rgba(62,164,226,.35);
  --overlay-scrim:rgba(11,58,88,.55);

  --duration-fast:120ms; --duration-base:180ms; --duration-slow:280ms;
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --transition-control:background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

a {
  color: var(--text-brand);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
a:hover { color: var(--blue-700); }

:focus-visible { outline: none; box-shadow: var(--ring-focus); }
::selection { background: var(--blue-200); color: var(--grey-900); }

.kv-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.kv-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Иконки — инлайновый SVG в потоке текста */
.kv-i { display: block; flex: 0 0 auto; }

/* =========================================================================
   Верхняя служебная полоса
   ========================================================================= */
.kv-topbar {
  background: var(--gradient-water);
  color: rgba(255,255,255,.72);
}

.kv-topbar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  font-size: var(--text-xs);
  flex-wrap: wrap;
}

.kv-topbar__group { display: flex; align-items: center; gap: var(--space-6); min-width: 0; flex-wrap: wrap; }
/* Слово рядом с числом баллов нужно только на телефоне: на широком экране
   перед числом стоит подпись «Баллы». */
.kv-topbar__bonus-word { display: none; }

/* Номер телефона строкой и кнопки каталога с меню в строке поиска —
   это мобильная раскладка. На широком экране их место занимают кнопка
   обратного звонка и полоса навигации. */
.kv-topbar__phone { display: none; }
.kv-search__nav { display: none; }
.kv-topbar__item  { display: flex; align-items: center; gap: var(--space-3); }
.kv-topbar a      { color: rgba(255,255,255,.72); }
.kv-topbar a:hover { color: #fff; }

.kv-social { display: flex; align-items: center; gap: var(--space-4); }

.kv-social__link {
  width: 30px; height: 30px;
  border-radius: var(--space-4);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--duration-base) var(--ease-out);
}
.kv-social__link:hover { opacity: .85; color: #fff; }
.kv-social__link--tg  { background: #229ED9; }
.kv-social__link--wa  { background: #25D366; }
/* MAX: фирменный цвет и официальный логотип (maxicons.ru), не буквы. */
.kv-social__link--max { background: #7C4DFF; color: #fff; }
.kv-social__link--max .kv-i { display: block; }

.kv-callback {
  display: flex; align-items: center; gap: var(--space-4);
  height: 30px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out);
}
.kv-callback:hover { background: rgba(255,255,255,.24); }

/* Баллы и повтор заказа на верхней полосе — только для вошедшего.
   Баллы читаются как показание, повтор — как действие, поэтому у него
   рамка, а у баллов её нет. */
.kv-topbar__bonus { white-space: nowrap; }
.kv-topbar__bonus-label { color: rgba(255,255,255,.72); }
.kv-topbar__bonus-value { color: #fff; font-weight: var(--weight-bold); }

.kv-topbar__reorder {
  height: 30px; padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-out);
}
.kv-topbar__reorder:hover { background: rgba(255,255,255,.18); color: #fff; }


/* =========================================================================
   Шапка
   ========================================================================= */
.kv-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  /* Свой слой поверх содержимого страницы. Иначе выпадающий список городов
     из шапки уходил под элементы страницы: у активной вкладки кабинета
     (ul.eac_tabs li.current в стилях аддона) стоит z-index 100, и она
     просвечивала сквозь раскрытое меню. */
  position: relative;
  z-index: 210;
}

.kv-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.kv-logo { display: flex; align-items: center; gap: var(--space-5); flex: 0 0 auto; }
.kv-logo img { width: 54px; height: 54px; display: block; }
.kv-logo__text { display: grid; gap: var(--space-1); }

.kv-logo__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  color: var(--blue-800);
}
.kv-logo__tagline { font-size: var(--text-2xs); color: var(--text-muted); }

/* --- Выбор города --- */
.kv-region { position: relative; flex: 0 1 220px; min-width: 0; }

.kv-region__button {
  display: flex; align-items: center; gap: var(--space-5);
  width: 100%; min-width: 0; height: 46px; padding: 0 14px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  cursor: pointer; text-align: left;
  font-family: var(--font-ui);
  transition: var(--transition-control);
}
.kv-region__button:hover {
  border-color: var(--border-brand);
  background: var(--surface-brand-soft);
}
.kv-region__pin  { color: var(--blue-600); display: flex; }
.kv-region__body { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.kv-region__label { font-size: 11px; color: var(--text-muted); }
.kv-region__value {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kv-region__caret { color: var(--text-muted); display: flex; }

.kv-region__pop {
  position: absolute; top: 52px; left: 0; z-index: 60; width: 460px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  padding: var(--space-6);
  display: none; gap: var(--space-5);
}
.kv-region.is-open .kv-region__pop { display: grid; }

.kv-region__pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.kv-region__pop-title {
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}
.kv-region__detect {
  display: flex; align-items: center; gap: var(--space-3);
  background: none; border: none; padding: 0;
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); color: var(--text-brand); cursor: pointer;
}
.kv-region__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--space-5); }

.kv-region__city {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 7px 10px; border: none; background: none;
  border-radius: var(--radius-control);
  font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--text-body); cursor: pointer; text-align: left;
  transition: var(--transition-control);
}
.kv-region__city:hover { background: var(--surface-sunken); color: var(--text-brand); }
.kv-region__city.is-active { font-weight: var(--weight-bold); }

.kv-region__all {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  padding: var(--space-4) 10px 0;
  border-top: 1px solid var(--border-subtle);
}

.kv-region__note {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: 10px var(--space-5);
  border-radius: var(--radius-control);
  background: var(--surface-promo); color: var(--amber-600);
  font-size: var(--text-xs); line-height: 1.5;
}

/* --- Поиск --- */
.kv-search { flex: 1 1 200px; display: flex; gap: var(--space-4); min-width: 0; }
.kv-search__field { flex: 1 1 auto; min-width: 0; }

.kv-input {
  display: flex; align-items: center; gap: var(--space-5);
  height: 44px; padding: 0 var(--space-6);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  transition: var(--transition-control);
}
.kv-input:focus-within {
  border-color: var(--border-brand);
  box-shadow: var(--ring-focus);
}
.kv-input__icon { color: var(--text-faint); display: flex; }
.kv-input input {
  flex: 1 1 0%; min-width: 0;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: var(--text-md);
  color: var(--text-strong);
}

/* --- Кнопки --- */
.kv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
  font-family: var(--font-ui); font-weight: var(--weight-semibold);
  cursor: pointer;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  transition: var(--transition-control);
  text-decoration: none; white-space: nowrap;
  height: 44px; padding: 0 var(--space-7);
  font-size: var(--text-md);
}
.kv-btn--primary {
  background: var(--action-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}
.kv-btn--primary:hover { background: var(--action-primary-hover); color: #fff; }
.kv-btn--primary:active { background: var(--action-primary-active); }

.kv-btn--promo { background: var(--action-promo); color: var(--grey-900); box-shadow: var(--shadow-sm); }
.kv-btn--promo:hover { background: var(--action-promo-hover); color: var(--grey-900); }

.kv-btn--ghost {
  background: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-default);
}
.kv-btn--ghost:hover { border-color: var(--border-brand); color: var(--text-brand); }

.kv-btn--sm { height: 36px; padding: 0 var(--space-6); font-size: var(--text-sm); }
.kv-btn--block { width: 100%; }

/* --- Правая группа шапки --- */
.kv-header__tools {
  display: flex; align-items: center; gap: var(--space-4);
  flex: 0 0 auto; margin-left: auto;
}

.kv-icon-link {
  width: 44px; height: 44px;
  border-radius: var(--radius-control);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-body);
  transition: var(--transition-control);
}
.kv-icon-link:hover { background: var(--surface-sunken); color: var(--text-strong); }

.kv-cart {
  display: flex; align-items: center; gap: var(--space-5);
  height: 44px; padding: 0 14px;
  border-radius: var(--radius-control);
  color: var(--text-body);
  transition: var(--transition-control);
}
.kv-cart:hover { background: var(--surface-sunken); color: var(--text-strong); }
.kv-cart__icon { position: relative; display: flex; }

.kv-cart__count {
  position: absolute; top: -6px; right: -9px;
  min-width: 18px; height: 18px; padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--amber-500); color: var(--grey-900);
  font-size: 11px; font-weight: var(--weight-bold);
  display: flex; align-items: center; justify-content: center;
}
.kv-cart__text  { display: grid; gap: 1px; }
.kv-cart__label { font-size: 11px; color: var(--text-muted); }
.kv-cart__sum {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--weight-bold); color: var(--text-strong);
}

.kv-header .kv-account {
  display: flex; align-items: center; gap: var(--space-4);
  height: 44px; padding: 0 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-default);
  color: var(--text-body);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  transition: var(--transition-control);
}
.kv-header .kv-account:hover { border-color: var(--border-brand); color: var(--text-brand); }



/* Бургер — только на мобильных */
.kv-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-body); cursor: pointer;
}

/* =========================================================================
   Основное меню (липкое)
   ========================================================================= */
.kv-navbar {
  /* Выше содержимого страницы — см. комментарий у .kv-header. */
  position: sticky; top: 0; z-index: 200;
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.kv-navbar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* Логотип в полосе меню.

   На неприкреплённой полосе он не нужен: точно такой же логотип стоит
   в шапке прямо над ней. Но как только шапка ушла вверх, полоса остаётся
   единственной навигацией, и вернуться на главную становится не по чему.
   Поэтому логотип держим в разметке всегда (чтобы не дёргать DOM), а
   показываем шириной — так соседние пункты меню плавно сдвигаются, а не
   прыгают. */
.kv-navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  margin-right: calc(var(--space-5) * -1);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  transition: max-width 0.25s ease, opacity 0.2s ease, margin-right 0.25s ease;
}
.kv-navbar__logo img { width: 34px; height: 34px; flex: none; }
.kv-navbar.is-stuck .kv-navbar__logo {
  max-width: 260px;
  opacity: 1;
  margin-right: 0;
}

.kv-nav {
  display: flex; align-items: center; gap: var(--space-3);
  height: 56px; white-space: nowrap;
}

.kv-nav__link {
  height: 40px; padding: 0 var(--space-5);
  display: flex; align-items: center;
  font-size: var(--text-md); font-weight: var(--weight-medium);
  color: var(--text-body);
  border-radius: var(--radius-control);
  transition: var(--transition-control);
}
.kv-nav__link:hover { background: var(--surface-sunken); color: var(--text-strong); }
.kv-nav__link.is-active { background: var(--surface-sunken); color: var(--text-strong); font-weight: var(--weight-semibold); }

/* Кнопка «Каталог» + мегаменю */
.kv-catalog { position: relative; height: 56px; display: flex; align-items: center; }

.kv-catalog__button {
  display: flex; align-items: center; gap: var(--space-4);
  height: 40px; padding: 0 18px;
  border-radius: var(--radius-control);
  background: var(--action-primary); color: #fff;
  font-size: var(--text-md); font-weight: var(--weight-semibold);
  transition: var(--transition-control);
}
.kv-catalog__button:hover { background: var(--action-primary-hover); color: #fff; }

.kv-megamenu {
  position: absolute; top: 56px; left: var(--gutter); right: var(--gutter); z-index: 40;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  padding: 28px;
  display: none;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
}
.kv-catalog:hover ~ .kv-megamenu,
.kv-megamenu:hover,
.kv-megamenu.is-open { display: grid; }

.kv-megamenu__group { display: grid; gap: var(--space-5); align-content: start; }
.kv-megamenu__title {
  font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-strong);
}
.kv-megamenu__title:hover { color: var(--text-brand); }
.kv-megamenu__link { font-size: var(--text-sm); color: var(--text-muted); }
.kv-megamenu__link:hover { color: var(--text-brand); }

/* Телефон в меню */
.kv-phone { margin-left: auto; position: relative; display: flex; align-items: center; }

.kv-phone__button {
  display: flex; align-items: center; gap: var(--space-4);
  height: 40px; padding: 0 var(--space-5);
  border: none; background: none;
  border-radius: var(--radius-control); cursor: pointer;
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--weight-extrabold); color: var(--text-strong);
  transition: var(--transition-control);
}
.kv-phone__button:hover { background: var(--surface-sunken); }
.kv-phone__icon  { color: var(--blue-600); display: flex; }
.kv-phone__caret { color: var(--text-muted); display: flex; }

.kv-phone__pop {
  position: absolute; top: 48px; right: 0; z-index: 45; width: 300px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  padding: var(--space-6);
  display: none; gap: var(--space-5);
}
.kv-phone.is-open .kv-phone__pop, .kv-phone:hover .kv-phone__pop { display: grid; }

.kv-phone__row { display: grid; gap: var(--space-1); }
.kv-phone__row + .kv-phone__row { padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.kv-phone__num {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--weight-extrabold); color: var(--text-strong);
}
.kv-phone__hint { font-size: var(--text-xs); color: var(--text-muted); }

.kv-phone__channels {
  display: grid; gap: var(--space-4);
  padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
}
.kv-phone__channel {
  display: flex; align-items: center; gap: var(--space-5);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-body);
}
.kv-phone__channel:hover { color: var(--text-brand); }
.kv-phone__dot {
  width: 26px; height: 26px; border-radius: 50%;
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}

/* =========================================================================
   Заголовок страницы / хлебные крошки
   ========================================================================= */
.kv-pagehead { max-width: var(--container-max); margin: 0 auto; padding: var(--space-7) var(--gutter) 0; }

.kv-breadcrumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--text-xs); color: var(--text-muted);
  list-style: none; margin: 0; padding: 0;
}
.kv-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-4); }
.kv-breadcrumbs a { color: var(--text-muted); }
.kv-breadcrumbs a:hover { color: var(--text-brand); }
.kv-breadcrumbs__sep { color: var(--grey-300); display: inline-flex; }
.kv-breadcrumbs .active { color: var(--text-body); }

.kv-h1 {
  margin: var(--space-6) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.kv-lead { margin: 0; font-size: var(--text-base); color: var(--text-muted); max-width: 760px; }

/* =========================================================================
   Каркас каталога: сайдбар + сетка
   ========================================================================= */
.kv-layout {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 28px var(--gutter) 0;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
.kv-layout--wide { grid-template-columns: minmax(0, 1fr); }

.kv-sidebar { position: sticky; top: 76px; display: grid; gap: var(--space-6); }

.kv-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-7);
  display: grid;
  gap: var(--space-5);
}

.kv-panel__title {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}

.kv-panel__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  font-size: var(--text-sm); color: var(--text-body);
}
.kv-panel__row a { color: var(--text-body); }
.kv-panel__row a:hover { color: var(--text-brand); }
.kv-panel__row.is-active a { color: var(--text-brand); font-weight: var(--weight-semibold); }
.kv-panel__count { color: var(--text-faint); font-size: var(--text-xs); }

/* Подкатегории активной ветки в колонке каталога. */
.kv-panel__sub {
  display: grid;
  gap: var(--space-4);
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  padding-left: var(--space-6);
  border-left: 2px solid var(--border-subtle);
}
.kv-panel__row--sub { font-size: var(--text-xs); color: var(--text-muted); }
.kv-panel__row--sub a { color: var(--text-muted); }

/* Плитка подкатегорий над списком товаров. */
.kv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 0 var(--space-7);
}
.kv-tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-control);
}
.kv-tag:hover {
  border-color: var(--border-brand);
  background: var(--surface-brand-soft);
  color: var(--text-brand);
}

/* Свёрнутая плитка. Разделов бывает под два десятка, и развёрнутыми они
   занимают полэкрана до первого товара. Показываем одну строку, остальное
   — по кнопке. Высоту режем ровно по строке: 36px плитка. */
.kv-tags-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin: 0 0 var(--space-7);
}
.kv-tags-row .kv-tags,
.kv-tags-row .kv-cattiles { flex: 1 1 auto; min-width: 0; margin: 0; }
.kv-tags.is-collapsed,
.kv-cattiles.is-collapsed {
  max-height: 36px;
  overflow: hidden;
}
.kv-tags__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 36px;
  padding: 0 var(--space-6);
  margin: 0 0 var(--space-7);
  border-radius: var(--radius-pill);
  border: var(--border-width) dashed var(--border-default);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-control);
}
.kv-tags__more:hover { border-color: var(--border-brand); color: var(--text-brand); }

/* Атрибут hidden — это display:none из стилей браузера, и любой свой display
   его перебивает. Без этой строки кнопка «Ещё N» оставалась на странице
   пустым кружком там, где плитки и так помещаются в одну строку. */
.kv-tags__more[hidden], .kv-aside-toggle[hidden] { display: none; }
.kv-tags-row .kv-tags__more { flex: none; margin: 0; }

/* Плитка «Категории товаров» на главной сворачивается тем же механизмом,
   что и теги разделов в каталоге. */
.kv-cattiles.is-collapsed { max-height: 38px; }

/* Кнопка раскрытия боковой колонки. На десктопе колонка видна всегда,
   поэтому кнопки там нет. */
.kv-aside-toggle {
  display: none;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-6);
  margin: 0 0 var(--space-6);
  border-radius: var(--radius-control);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  cursor: pointer;
}
.kv-aside-toggle:hover { border-color: var(--border-brand); color: var(--text-brand); }
.kv-tag.is-active {
  border-color: var(--border-brand);
  background: var(--surface-brand-soft);
  color: var(--text-brand);
}

.kv-promo-card {
  background: var(--gradient-water);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  color: rgba(255,255,255,.72);
}
.kv-promo-card__title {
  display: flex; align-items: center; gap: var(--space-4);
  color: #fff; font-family: var(--font-display);
  font-size: 17px; font-weight: var(--weight-extrabold);
}
.kv-promo-card p { margin: 10px 0 0; font-size: var(--text-xs); line-height: 1.6; }

/* Панель сортировки */
.kv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-7);
}
.kv-chips { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.kv-chip {
  display: inline-flex; align-items: center; gap: var(--space-4);
  height: 38px; padding: 0 var(--space-6);
  border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--font-ui); font-size: var(--text-sm);
  font-weight: var(--weight-medium); white-space: nowrap;
  transition: var(--transition-control);
  background: var(--surface-card); color: var(--text-body);
  border: var(--border-width) solid var(--border-default);
}
.kv-chip:hover { border-color: var(--border-brand); color: var(--text-brand); }
.kv-chip.is-active {
  background: var(--action-primary); color: #fff; border-color: var(--action-primary);
}

.kv-toolbar__meta { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }

.kv-select {
  position: relative; display: inline-flex; align-items: center;
  height: 36px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  transition: var(--transition-control);
}
.kv-select select {
  appearance: none; -webkit-appearance: none;
  border: none; outline: none; background: transparent;
  font: inherit; font-weight: var(--weight-medium); font-size: var(--text-sm);
  color: var(--text-strong);
  padding: 0 var(--space-10) 0 var(--space-6);
  height: 100%; cursor: pointer;
}
.kv-select__caret {
  position: absolute; right: var(--space-5);
  pointer-events: none; color: var(--text-faint); display: flex;
}

/* =========================================================================
   Панель над списком товаров: количество, сортировка, фильтр по цене

   Разметку отдаёт list_products/form_filters.php. Селекты приходят готовыми
   от компонента, поэтому оформляем их через обёртку .kv-select.
   ========================================================================= */
.kv-listbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-7);
}
.kv-listbar__count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.kv-listbar__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-left: auto;
}
.kv-listbar__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}
.kv-listbar__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  white-space: nowrap;
}
.kv-listbar__dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: var(--transition-control);
}
.kv-listbar__dir:hover { border-color: var(--border-brand); }
.kv-listbar__dir img { display: block; width: 12px; height: 12px; }

/* =========================================================================
   Карточка товара
   ========================================================================= */
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--grid-gap);
  /* stretch, а не start: тогда строка цены выравнивается по всем карточкам ряда */
  align-items: stretch;
}

.kv-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.kv-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.kv-card__meta {
  display: flex; align-items: center; gap: var(--space-4);
  font-size: var(--text-2xs); color: var(--text-faint);
  justify-content: space-between;
  min-height: 18px;
}
.kv-card__meta > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.kv-stock {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--green-700); font-weight: var(--weight-medium);
  white-space: nowrap; flex: 0 0 auto;
}
.kv-stock__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-instock); }
.kv-stock--out { color: var(--red-700); }
.kv-stock--out .kv-stock__dot { background: var(--status-sale); }

.kv-card__media {
  position: relative; margin-top: var(--space-5);
  border-radius: var(--radius-image);
  background: var(--gradient-fresh);
  aspect-ratio: 1 / 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.kv-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-out);
}
.kv-card:hover .kv-card__media img { transform: scale(1.04); }

.kv-card__labels {
  position: absolute; top: var(--space-5); left: var(--space-5);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
}

.kv-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 24px; padding: 0 var(--space-5);
  border-radius: var(--radius-badge);
  font-family: var(--font-ui); font-size: var(--text-2xs);
  font-weight: var(--weight-bold); line-height: 1; white-space: nowrap;
  background: var(--surface-card); color: var(--text-strong);
  border: var(--border-width) solid var(--border-default);
}
.kv-badge--hit  { background: var(--status-hit); color: var(--text-inverse); border-color: transparent; }
.kv-badge--sale { background: var(--status-sale); color: var(--text-inverse); border-color: transparent; }
.kv-badge--new  { background: var(--aqua-500); color: var(--text-inverse); border-color: transparent; }

.kv-card__wish {
  position: absolute; top: var(--space-5); right: var(--space-5);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-out);
}
.kv-card:hover .kv-card__wish { opacity: 1; }
.kv-card__wish button, .kv-card__wish a {
  display: flex; width: 34px; height: 34px;
  align-items: center; justify-content: center;
  background: var(--surface-card);
  border: none; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); color: var(--text-muted); cursor: pointer;
}
.kv-card__wish button:hover, .kv-card__wish a:hover { color: var(--red-500); }

.kv-rating { margin-top: var(--space-6); }
.kv-rating__inner { display: inline-flex; align-items: center; gap: var(--space-3); }
.kv-rating__stars { display: inline-flex; gap: 1px; }
.kv-rating__star { display: block; flex: 0 0 auto; }
.kv-rating__star--on  { fill: var(--amber-500); stroke: var(--amber-500); }
.kv-rating__star--off { fill: none; stroke: var(--grey-300); }
.kv-rating__count { font-size: var(--text-xs); color: var(--text-muted); }

.kv-card__name {
  margin-top: var(--space-4);
  font-family: var(--font-ui); font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  min-height: 40px;
}
.kv-card__name a { color: var(--text-strong); }
.kv-card__name a:hover { color: var(--text-brand); }

/* Тарифная сетка «цена за количество» */
.kv-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
  background: var(--surface-sunken); padding: var(--space-2);
  border-radius: var(--radius-control);
  margin-top: var(--space-5);
}
.kv-tier {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-4) var(--space-3);
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  transition: var(--transition-control);
  cursor: default;
}
.kv-tier.is-active {
  background: var(--surface-card);
  border-color: var(--border-brand);
  box-shadow: var(--shadow-xs);
}
.kv-tier__qty   { font-size: var(--text-2xs); color: var(--text-muted); }
.kv-tier__price {
  font-family: var(--type-price-font); font-weight: var(--type-price-weight);
  font-size: var(--text-md); color: var(--text-body);
}
.kv-tier.is-active .kv-tier__price { color: var(--text-strong); }

/* Варианты (тара / залог) */
.kv-options { display: grid; gap: var(--space-3); margin-top: var(--space-6); }

.kv-option {
  display: flex; align-items: center; gap: var(--space-5);
  width: 100%; padding: var(--space-5) var(--space-6);
  text-align: left; cursor: pointer;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-control);
  transition: var(--transition-control);
}
.kv-option:hover { border-color: var(--border-brand); }
.kv-option.is-active {
  background: var(--surface-brand-soft);
  border-color: var(--border-brand);
}
.kv-option__mark {
  width: 18px; height: 18px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
}
.kv-option.is-active .kv-option__mark { border-color: var(--action-primary); }
.kv-option__dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.kv-option.is-active .kv-option__dot { background: var(--action-primary); }
.kv-option__label { flex: 1 1 0%; font-size: var(--text-sm); color: var(--text-body); }
.kv-option__price {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--weight-bold); color: var(--text-strong);
}
.kv-option__price--free { color: var(--green-700); }

/* Строка покупки */
/* Одна раскладка на все карточки сайта. В каталоге JoomShopping рисует рядом
   поле количества, в блоках на статьях его нет — когда они стояли в строку,
   кнопка в одних карточках выходила вдвое уже, чем в других. Кладём друг под
   друга: кнопка всегда во всю ширину и всегда с подписью. */
.kv-buyrow {
  display: grid; gap: var(--space-3); margin-top: var(--space-7); min-width: 0;
}
.kv-card .kv-card__qty .prod_qty_input,
.kv-card .kv-card__qty .prod_qty_input_flex { width: auto; }

.kv-stepper {
  display: inline-flex; align-items: center; height: 36px; flex: 0 0 auto;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.kv-stepper button {
  width: 30px; height: 36px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-body);
  transition: var(--transition-control);
}
.kv-stepper button:hover { background: var(--surface-sunken); color: var(--text-strong); }
.kv-stepper input {
  min-width: 26px; width: 40px; text-align: center;
  border: none; outline: none; background: transparent;
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-bold); color: var(--text-strong);
  -moz-appearance: textfield;
}
.kv-stepper input::-webkit-outer-spin-button,
.kv-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.kv-card__more {
  margin-top: var(--space-5);
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--text-brand); text-align: left;
}

.kv-card__foot {
  margin-top: auto; padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: baseline;
}
.kv-card__foot-label { font-size: var(--text-sm); color: var(--text-muted); }
.kv-price {
  font-family: var(--type-price-font); font-weight: var(--type-price-weight);
  font-size: var(--text-xl); color: var(--text-price);
}
.kv-price--old {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-price-old); text-decoration: line-through;
  margin-right: var(--space-4);
}

/* Бонусы под карточкой */
.kv-points {
  display: grid; gap: var(--space-3);
  margin: -10px 12px 0; padding: 12px 14px;
  background: var(--surface-sunken);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.kv-points__item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  white-space: nowrap; justify-self: start;
}
.kv-points__item--earn  { background: var(--status-instock-bg); color: var(--green-700); }
.kv-points__item--spend { background: var(--surface-brand-soft); color: var(--text-brand); }

/* =========================================================================
   Карточка товара: элементы, которые дорисовывают плагины магазина

   Количество, баллы и часть кнопок в карточку добавляет сам JoomShopping со
   своими плагинами. Разметку их не трогаем — приводим к виду прототипа
   стилями. Иконки у них из FontAwesome, которого в шаблоне нет: вместо
   пустых квадратов рисуем свои значки.
   ========================================================================= */

/* Все карточки в ряду заканчиваются кнопками на одной линии. */
.kv-card__name { min-height: 44px; }
.kv-card .kv-card__foot { margin-top: auto; }

/* --- Счётчик количества (плагин plus_minus_count_product) --- */
.kv-card .prod_qty_input,
.kv-card .prod_qty_input_flex {
  display: flex;
  align-items: center;
  height: 36px;
  flex: 0 0 auto;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  overflow: hidden;
}
.kv-card .prod_qty_left,
.kv-card .prod_qty_center,
.kv-card .prod_qty_right { display: flex; align-items: center; }

.kv-card .product_minus,
.kv-card .product_plus {
  width: 30px;
  height: 34px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: var(--transition-control);
}
.kv-card .product_minus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364798c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.kv-card .product_plus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364798c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}
.kv-card .product_minus:hover,
.kv-card .product_plus:hover { background-color: var(--surface-sunken); }

.kv-card .input_quantity,
.kv-card input.inputbox[id^="quantity"] {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px;
  padding: 0;
  border: 0;
  outline: none;
  text-align: center;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

/* --- Баллы (плагин бонусной системы) --- */
.kv-card .product_bonus,
.kv-card .product_bonus__ { display: flex; }
.kv-card .product_bonus_sub,
.kv-card .block_bonus {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.kv-card .product_bonus_sub {
  height: 24px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--surface-promo);
  color: var(--amber-600);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
/* Иконка карты из FontAwesome — шрифта нет, вместо неё свой значок. */
.kv-card .product_bonus_sub .fas,
.kv-card .product_bonus_sub .fa,
.kv-card .product_bonus_sub i { display: none; }
.kv-card .product_bonus_sub::before {
  content: "";
  width: 12px; height: 12px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kv-card .ball { font-weight: var(--weight-bold); }

/* Скрипт пересчёта цены плагин печатает прямо в карточке. */
.kv-card .kv-buyrow > script,
.kv-card .kv-card__qty > script { display: none; }

/* =========================================================================
   Пагинация
   ========================================================================= */
.kv-pagination__info { font-size: var(--text-xs); color: var(--text-muted); }

/* =========================================================================
   SEO-текст под каталогом
   ========================================================================= */
.kv-seo { max-width: var(--container-max); margin: 0 auto; padding: 56px var(--gutter) var(--space-12); }
.kv-seo h2, .kv-seo__title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display); font-size: 22px;
  font-weight: var(--weight-extrabold); color: var(--text-strong);
}
.kv-seo__body {
  display: grid; gap: var(--space-5); max-width: 960px;
  font-size: var(--text-sm); line-height: 1.7; color: var(--text-muted);
}
.kv-seo__body p { margin: 0; }

/* Заголовки в этих блоках приходят из описаний категорий, а там клиент
   набирает их построчно — отдельным h3 на каждую строку, с инлайновым
   размером внутри span. К отступам сетки прибавлялись собственные отступы
   браузера, и одна фраза разъезжалась на треть экрана. Здесь строки
   собираются обратно в один заголовок. */
.kv-seo__body h1,
.kv-seo__body h2,
.kv-seo__body h3,
.kv-seo__body h4,
.kv-seo__body h5 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.35;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

/* Инлайновый font-size из редактора перебиваем: иначе строки одного
   заголовка выходят разного кегля. */
.kv-seo__body h1 span,
.kv-seo__body h2 span,
.kv-seo__body h3 span,
.kv-seo__body h4 span,
.kv-seo__body h5 span { font-size: inherit !important; }

/* Соседние строки одного заголовка — вплотную, без зазора сетки. */
.kv-seo__body h1 + h1,
.kv-seo__body h2 + h2,
.kv-seo__body h3 + h3,
.kv-seo__body h4 + h4,
.kv-seo__body h5 + h5 { margin-top: calc(var(--space-5) * -1 + 2px); }

/* =========================================================================
   Главная страница
   ========================================================================= */

/* --- Первый экран --- */
.kv-hero { background: var(--gradient-fresh); border-bottom: 1px solid var(--border-subtle); }
.kv-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 56px var(--gutter) var(--space-10);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-11);
  align-items: center;
}
.kv-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-4);
  height: 30px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-promo); color: var(--amber-600);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: .04em; text-transform: uppercase;
}
.kv-hero__title {
  margin: var(--space-7) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-extrabold);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-wrap: pretty;
}
.kv-hero__lead {
  margin: var(--space-7) 0 0;
  font-size: var(--text-lg); line-height: 1.65;
  color: var(--text-muted); max-width: 500px;
}
.kv-hero__actions { display: flex; gap: var(--space-5); margin-top: var(--space-9); flex-wrap: wrap; }
.kv-hero__note {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-7); font-size: var(--text-sm); color: var(--text-muted);
}
.kv-hero__note svg { color: var(--green-500); flex: 0 0 auto; }
.kv-hero__media {
  height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  background: var(--surface-card);
}
.kv-hero__media picture { display: block; width: 100%; height: 100%; }
.kv-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kv-btn--lg { height: 52px; padding: 0 var(--space-9); font-size: var(--text-base); }

/* --- Полоса показателей --- */
.kv-stats {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 44px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}
.kv-stat {
  display: grid; gap: var(--space-2);
  padding: var(--space-6) var(--space-7);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.kv-stat__value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-extrabold); color: var(--text-strong); }
.kv-stat__label { font-size: var(--text-sm); color: var(--text-muted); }
/* Для показателей-фраз («ежедневно, в день заказа…») крупный кегль не годится:
   строка ломается на три и ряд плиток разъезжается. */
.kv-stat--text .kv-stat__value { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.4; }

/* --- Каркас секций --- */
.kv-sec { max-width: var(--container-max); margin: 0 auto; padding: 44px var(--gutter) 0; }
.kv-sec--band { margin-top: 44px; background: var(--surface-subtle); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.kv-sec--band > .kv-sec__inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--gutter); }

.kv-sec__eyebrow { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-brand); }
.kv-sec__title {
  margin: var(--space-5) 0 var(--space-4);
  font-family: var(--font-display); font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight); color: var(--text-strong);
}
.kv-sec__title--sm { font-size: 28px; }
.kv-sec__lead { margin: 0; font-size: var(--text-base); color: var(--text-muted); }
.kv-sec__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-8); margin-bottom: var(--space-9); flex-wrap: wrap;
}
.kv-sec__head--center { text-align: center; display: block; margin-bottom: var(--space-9); }
.kv-sec__narrow { max-width: 900px; margin: 0 auto; }

/* --- Плитки-ссылки категорий --- */
.kv-catrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-7); flex-wrap: wrap; }
.kv-cattiles { display: flex; flex-wrap: wrap; gap: 10px; }
.kv-cattile {
  display: flex; align-items: center; gap: var(--space-4);
  height: 38px; padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-body);
  transition: var(--transition-control);
}
.kv-cattile:hover { border-color: var(--border-brand); color: var(--text-brand); }
.kv-cattile__count { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-faint); }

/* --- Карточки преимуществ --- */
.kv-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.kv-feature {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.kv-feature:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.kv-feature__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--surface-brand-soft); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-7);
}
.kv-feature__title { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.kv-feature__text { margin-top: var(--space-4); font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-relaxed); }

/* --- Первый экран страницы города --- */
/* Слева заголовок, текст и кнопки, справа карточка с условиями — как в
   прототипе «Город». На узком экране карточка уходит под текст. */
.kv-citytop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  align-items: start;
  margin-top: var(--space-7);
}
.kv-citytop .kv-lead { margin: 0; }
@media (max-width: 900px) {
  .kv-citytop { grid-template-columns: 1fr; }
}

/* --- География доставки --- */
.kv-geo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: stretch; }
.kv-geo__map {
  position: relative; min-height: 380px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.kv-geo__ring {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%; border: 1px dashed var(--border-strong);
}
.kv-geo__ring--1 { width: 330px; height: 330px; margin: -165px 0 0 -165px; background: rgba(17,135,206,.04); }
.kv-geo__ring--2 { width: 220px; height: 220px; margin: -110px 0 0 -110px; background: rgba(17,135,206,.07); }
.kv-geo__ring--3 { width: 110px; height: 110px; margin: -55px 0 0 -55px; background: rgba(17,135,206,.14); border: none; }
.kv-geo__center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: var(--space-3);
  height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--action-primary); color: #fff;
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
}
.kv-geo__pin {
  position: absolute;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--text-strong);
  white-space: nowrap;
}
.kv-geo__pin:hover { border-color: var(--border-brand); color: var(--text-brand); }
.kv-geo__pin--1 { top: 26%; left: 16%; }
.kv-geo__pin--2 { top: 20%; right: 14%; }
.kv-geo__pin--3 { bottom: 22%; left: 12%; }
.kv-geo__pin--4 { bottom: 16%; right: 18%; }
.kv-geo__pin--5 { top: 47%; right: 6%; }
.kv-geo__pin--6 { bottom: 44%; left: 6%; }
.kv-geo__caption { position: absolute; bottom: 14px; left: 16px; font-size: var(--text-2xs); color: var(--text-faint); }

.kv-geo__list {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-7) var(--space-8);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-8);
  align-content: start;
}
.kv-geo__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-strong);
}
.kv-geo__row a { color: var(--text-strong); font-weight: var(--weight-medium); }
.kv-geo__row a:hover { color: var(--text-brand); }
.kv-geo__note { font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--text-muted); white-space: nowrap; }

/* --- Блок «о компании» --- */
.kv-about { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-11); align-items: center; }
.kv-about__text p { margin: 0; font-size: var(--text-base); line-height: 1.65; color: var(--text-body); }
.kv-about__text p + p { margin-top: var(--space-6); }
.kv-about__stats {
  background: var(--gradient-water);
  border-radius: var(--radius-xl);
  padding: var(--space-9);
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.kv-about__stat { display: grid; gap: var(--space-3); }
.kv-about__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); color: #fff; }
.kv-about__label { font-size: var(--text-sm); color: rgba(255,255,255,.72); }

/* --- Отзывы --- */
.kv-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.kv-testimonial {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  display: grid; gap: var(--space-6);
  align-content: start;
}
.kv-testimonial__head { display: flex; align-items: center; gap: var(--space-5); }
.kv-testimonial__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: var(--surface-brand-soft); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-extrabold);
}
.kv-testimonial__name { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); }
.kv-testimonial__meta { font-size: var(--text-xs); color: var(--text-muted); }
.kv-testimonial__text { margin: 0; font-size: var(--text-md); line-height: 1.65; color: var(--text-body); }

/* flex: 0 0 auto не давал блоку сжаться, и на телефоне оценка с кнопкой
   растягивала страницу до 454 px — появлялась прокрутка вбок. */
.kv-score { display: flex; align-items: center; gap: var(--space-7); flex: 0 1 auto; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.kv-score__tile { min-width: 0; }
.kv-score__tile {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5) 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.kv-score__value { font-family: var(--font-display); font-size: 32px; font-weight: var(--weight-extrabold); color: var(--text-strong); }
.kv-score__label { font-size: var(--text-xs); color: var(--text-muted); }

/* --- Статьи --- */
.kv-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.kv-articlecard {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.kv-articlecard:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.kv-articlecard__media {
  aspect-ratio: 16 / 9;
  background: var(--gradient-fresh);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--blue-200);
}
.kv-articlecard__media img { width: 100%; height: 100%; object-fit: cover; }
.kv-articlecard__body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); flex: 1 1 0%; }
.kv-articlecard__meta { display: flex; align-items: center; gap: var(--space-5); font-size: var(--text-2xs); color: var(--text-faint); }
.kv-articlecard__title { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-strong); }
.kv-articlecard__excerpt { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); flex: 1 1 0%; }
.kv-articlecard__more { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-brand); }
.kv-badge--article { background: var(--aqua-100); color: var(--aqua-500); border-color: transparent; }

/* --- Контакты внизу --- */
.kv-contacts {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-12) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-11);
  align-items: start;
}
.kv-contacts__list { display: grid; gap: var(--space-6); }
.kv-contacts__phone {
  display: flex; align-items: center; gap: var(--space-5);
  font-family: var(--font-display); font-size: 26px;
  font-weight: var(--weight-extrabold); color: var(--text-strong);
}
.kv-contacts__row { display: flex; align-items: center; gap: var(--space-5); font-size: var(--text-md); color: var(--text-body); }
.kv-contacts__channels { display: flex; gap: 10px; margin-top: var(--space-8); flex-wrap: wrap; }
.kv-contacts__channel {
  display: flex; align-items: center; gap: var(--space-4);
  height: 44px; padding: 0 var(--space-6);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-body);
  transition: var(--transition-control);
}
.kv-contacts__channel:hover { border-color: var(--border-brand); color: var(--text-brand); }
.kv-contacts__dot {
  width: 26px; height: 26px; border-radius: 50%;
  color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.kv-contacts__form {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.kv-contacts__form-title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-extrabold); color: var(--text-strong); }
.kv-contacts__form-lead { margin: 0 0 var(--space-7); font-size: var(--text-sm); color: var(--text-muted); }

/* Плавающая кнопка «наверх» / связаться */
.kv-fab { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 60; display: grid; justify-items: end; gap: 10px; }
.kv-fab__button {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--action-primary); color: #fff;
  box-shadow: var(--shadow-pop); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-control);
}
.kv-fab__button:hover { background: var(--action-primary-hover); }

/* =========================================================================
   Страница товара
   ========================================================================= */
.kv-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  gap: var(--space-10);
  align-items: start;
}

/* --- Галерея: рельса миниатюр слева, крупный кадр справа --- */
.kv-product__gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.kv-product__gallery.has-thumbs { grid-template-columns: 84px minmax(0, 1fr); }

.kv-product__rail { display: grid; gap: 10px; align-content: start; }

.kv-product__thumb {
  width: 84px; height: 84px; padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-image);
  background: var(--gradient-fresh);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: var(--transition-control);
}
.kv-product__thumb:hover, .kv-product__thumb.is-active { border-color: var(--border-brand); }
.kv-product__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

.kv-product__main {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--gradient-fresh);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.kv-product__stage {
  height: 560px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-9);
}
/* Картинку магазин заворачивает в ссылку увеличения. Ссылка — обычный блок
   с автоматической высотой, и max-height:100% у самой картинки не срабатывал:
   процент считать не от чего. Из-за этого снимок 600×600 не вписывался в
   кадр и обрезался. Задаём ссылке высоту кадра — тогда ограничение работает. */
.kv-product__stage > a,
.kv-product__stage > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.kv-product__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.kv-product__flags {
  position: absolute; top: var(--space-6); left: var(--space-6); z-index: 2;
  display: flex; flex-wrap: wrap; gap: var(--space-4); max-width: 70%;
}

.kv-product__wish {
  position: absolute; top: var(--space-6); right: var(--space-6); z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-control);
}
.kv-product__wish:hover { color: var(--red-500); border-color: var(--red-500); }

/* --- Плитки преимуществ под галереей --- */
.kv-perks {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5); margin-top: var(--space-8);
}
.kv-perk {
  display: grid; gap: var(--space-4);
  padding: 14px var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  align-content: start;
}
.kv-perk__icon { color: var(--blue-600); display: flex; }
.kv-perk__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); line-height: 1.3; }
.kv-perk__text { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }

/* --- Правая колонка: заголовок и блок покупки --- */
.kv-product__aside { position: sticky; top: 74px; display: grid; gap: var(--space-6); }

.kv-product__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: var(--text-strong);
  text-wrap: pretty;
}
.kv-product__meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: var(--space-5); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--text-faint);
}

.kv-buybox {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  display: grid; gap: 18px;
}
.kv-buybox__section {
  display: grid; gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}
.kv-buybox__label {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}

.kv-product__price-row { display: flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; }
.kv-product__price {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--text-strong);
}
.kv-product__price-old { font-size: var(--text-xl); color: var(--text-faint); text-decoration: line-through; }
.kv-product__price-note { font-size: var(--text-sm); color: var(--text-muted); }

.kv-total { display: flex; align-items: center; gap: var(--space-5); }
.kv-total__text { display: grid; gap: 2px; }
.kv-total__label { font-size: var(--text-xs); color: var(--text-muted); }
.kv-total__value {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--weight-extrabold); color: var(--text-strong);
}

.kv-note {
  display: flex; gap: var(--space-4);
  font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted);
}
.kv-note__icon { color: var(--blue-600); display: flex; padding-top: 1px; flex: 0 0 auto; }

.kv-product__facts { display: grid; gap: var(--space-4); font-size: var(--text-sm); }
.kv-product__fact { display: flex; align-items: flex-start; gap: var(--space-4); color: var(--text-body); }
.kv-product__fact svg { color: var(--blue-600); margin-top: 2px; flex: 0 0 auto; }

/* --- Нижние секции: описание слева, отзывы справа --- */
.kv-product__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
  margin-top: 56px;
}
.kv-product__left { display: grid; gap: var(--space-9); align-content: start; }
.kv-product__desc { margin-top: var(--space-4); }
.kv-product__sections { display: grid; gap: var(--space-9); }

.kv-section__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.kv-card-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 4px var(--space-8);
}

.kv-specs { display: block; }
.kv-specs__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-8); padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-md);
}
.kv-specs__row:last-child { border-bottom: none; }
.kv-specs__name { color: var(--text-muted); }
.kv-specs__value { font-weight: var(--weight-semibold); color: var(--text-strong); text-align: right; }

/* --- Аккордеон вопросов --- */
.kv-faq { display: grid; gap: var(--space-4); }
.kv-faq__item {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.kv-faq__item > summary {
  list-style: none; cursor: pointer;
  padding: var(--space-6) var(--space-7);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong);
}
.kv-faq__item > summary::-webkit-details-marker { display: none; }
.kv-faq__item > summary::after {
  content: ""; flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-base) var(--ease-out);
}
.kv-faq__item[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.kv-faq__body {
  padding: 0 var(--space-7) var(--space-6);
  font-size: var(--text-sm); line-height: 1.65; color: var(--text-body);
}

/* --- Карточка отзывов --- */
.kv-reviews {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  display: grid; gap: var(--space-6);
}
.kv-reviews__head { display: flex; align-items: center; gap: 14px; }
.kv-reviews__score {
  font-family: var(--font-display); font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.kv-reviews__list {
  display: grid; gap: 14px;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.kv-review { display: grid; gap: var(--space-4); }
.kv-review__head { display: flex; align-items: center; gap: 10px; }
.kv-review__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: var(--surface-brand-soft); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-extrabold);
}
.kv-review__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.kv-review__meta { font-size: var(--text-2xs); color: var(--text-muted); }
.kv-review__text { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-body); }

/* --- Похожие товары --- */
.kv-related { margin-top: 56px; }
.kv-related__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-8);
}
.kv-related__title {
  margin: 0; font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

/* =========================================================================
   Нижняя панель навигации — только на телефоне (из мобильного прототипа)
   ========================================================================= */
.kv-tabbar { display: none; }

/* =========================================================================
   Корзина, оформление заказа и личный кабинет

   Эти страницы целиком принадлежат программисту клиента: его файлы шаблона
   JoomShopping подключаются как есть, ни строки внутри не меняется и ничего
   перед ними не выводится. Поэтому новый вид собран только стилями — по тем
   классам, которые его разметка уже отдаёт. Шапку кабинета и меню разделов
   добавляет шаблон сайта вокруг готового вывода компонента.
   ========================================================================= */

/* --- Контейнер: своей ширины у этой вёрстки нет --- */
.kv-shop--boxed {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-9) var(--gutter) var(--space-12);
}

.kv-shop--boxed h1 {
  margin: 0 0 var(--space-7);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  text-transform: none;
}

/* Обёртки старого шаблона: фон и рамку рисуем сами. */
.kv-shop .border0086B4 { border: 0; background: none; padding: 0; }

/* Страница товара. Своей ширины у неё не было: .kv-product растягивался на
   всё окно, поэтому кадр с товаром получался неестественно широким, а правая
   колонка с ценой уезжала за край экрана. Ширина и поля — как в прототипе. */
.kv-shop .productscatalog,
.kv-shop .productfull {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-9) var(--gutter) var(--space-12);
}

/* Плагин количества дописывает в строку свою пару кнопок «−»/«+» рядом с
   нашим счётчиком — на странице товара получалось две пары. Свои у него
   прячем, но из разметки не убираем: на них завязан его же скрипт.
   В карточках списка, наоборот, показываем — там счётчик рисует он. */
.kv-total > .product_minus,
.kv-total > .product_plus { display: none; }

/* =========================================================================
   Обвязка кабинета (её выводит шаблон сайта)
   ========================================================================= */
.kv-lk { display: grid; gap: var(--space-7); }

.kv-lk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.kv-lk__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.kv-lk__meta { margin: var(--space-4) 0 0; font-size: var(--text-base); color: var(--text-muted); }

.kv-lk__logout {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 44px;
  padding: 0 var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-control);
}
.kv-lk__logout:hover { border-color: var(--border-brand); color: var(--text-brand); }

.kv-lk__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}
.kv-lk__tile {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-7);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.kv-lk__tile-label { font-size: var(--text-xs); color: var(--text-muted); }
.kv-lk__tile-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
}
.kv-lk__tile-note { font-size: var(--text-xs); color: var(--text-muted); }

.kv-lk__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.kv-lk__navlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-7);
  border-radius: var(--radius-control);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-control);
}
.kv-lk__navlink:hover { background: var(--surface-sunken); color: var(--text-strong); }
.kv-lk__navlink.is-active {
  background: var(--surface-brand-soft);
  color: var(--text-brand);
  font-weight: var(--weight-semibold);
}

.kv-lk__body { min-width: 0; }

.kv-lk__note { max-width: 960px; }
.kv-lk__note h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
}
.kv-lk__note p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-muted); }

/* Карточка вокруг страницы компонента */
.kv-shop .m_cart,
.kv-shop .editaccount_block,
.kv-shop .myorders_list,
.kv-shop .pagelogin,
.kv-shop .jshop_register_block {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}
/* Служебная разметка старого шаблона, оставленная в комментариях. */
.kv-shop .flex_009 { display: none; }
/* Копирайт JoomShopping. В старом шаблоне он скрыт — повторяем, чтобы
   оформление не отличалось от того, что видит покупатель сейчас. */
.kv-shop #mxcpr, .kv-content #mxcpr { display: none; }

/* --- Сетка Bootstrap 2, на которой написаны эти страницы --- */
.kv-shop .row-fluid,
.kv-content .row-fluid { display: flex; flex-wrap: wrap; gap: var(--space-6); width: 100%; }
.kv-shop .row-fluid > [class*="span"],
.kv-content .row-fluid > [class*="span"] { flex: 1 1 0%; min-width: 0; }
.kv-shop .span12, .kv-content .span12 { flex: 0 0 100%; }
.kv-shop .span6,  .kv-content .span6  { flex: 1 1 calc(50% - var(--space-6)); }
.kv-shop .pull-left,  .kv-content .pull-left  { margin-right: auto; }
.kv-shop .pull-right, .kv-content .pull-right { margin-left: auto; text-align: right; }
.kv-shop .clearfix, .kv-content .clearfix { flex-basis: 100%; height: 0; }

/* =========================================================================
   Список товаров в корзине

   Разметка клиента — обычная таблица. Раскладываем её гридом в строку
   прототипа: картинка, название, цена, количество, сумма, удаление.
   ========================================================================= */
.kv-shop table.jshop.cart { display: block; width: 100%; border: 0; }
.kv-shop table.jshop.cart tbody { display: block; }

/* Шапку таблицы прототип не показывает — подписи и так очевидны. */
.kv-shop table.jshop.cart tr:not(.jshop_prod_cart) { display: none; }

.kv-shop tr.jshop_prod_cart {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 132px 148px 132px 44px;
  gap: var(--space-2) var(--space-7);
  align-items: center;
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.kv-shop tr.jshop_prod_cart > td { display: block; padding: 0; border: 0; vertical-align: middle; }

/* Подписи полей нужны только на узком экране. */
.kv-shop .mobile-cart { display: none; }

.kv-shop tr.jshop_prod_cart td.jshop_img_description_center .data {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--gradient-fresh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kv-shop tr.jshop_prod_cart img.jshop_img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}

.kv-shop tr.jshop_prod_cart td.product_name a {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  text-decoration: none;
}
.kv-shop tr.jshop_prod_cart td.product_name a:hover { color: var(--text-brand); }
.kv-shop .jshop_code_prod { display: block; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-faint); }
.kv-shop tr.jshop_prod_cart .manufacturer { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }

.kv-shop tr.jshop_prod_cart td.single_price { font-size: var(--text-md); color: var(--text-muted); white-space: nowrap; }
.kv-shop .basic_price,
.kv-shop .taxinfo { display: block; margin-top: var(--space-2); font-size: var(--text-2xs); color: var(--text-faint); }

/* Количество: поле, кнопки плагина и ссылка «обновить» — всё родное.
   В разметке порядок «поле, минус, плюс», а кнопки идут без подписи: в старом
   шаблоне глиф рисовал CSS. Собираем из них привычный степпер порядком flex,
   а знаки возвращаем фоновой картинкой — value у чужого input не трогаем. */
.kv-shop tr.jshop_prod_cart td.quantity .data {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
}
.kv-shop tr.jshop_prod_cart td.quantity input.inputbox,
.kv-shop tr.jshop_prod_cart td.quantity input[type="text"] {
  order: 0;
  width: 56px; min-width: 0; max-width: none; height: 44px;
  padding: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  border: var(--border-width) solid var(--border-default);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: var(--surface-card);
}
.kv-shop tr.jshop_prod_cart .product_minus,
.kv-shop tr.jshop_prod_cart .product_plus {
  width: 38px; height: 44px;
  border: var(--border-width) solid var(--border-default);
  background-color: var(--surface-card);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  cursor: pointer;
  transition: var(--transition-control);
}
.kv-shop tr.jshop_prod_cart .product_minus {
  order: -1;
  border-radius: var(--radius-control) 0 0 var(--radius-control);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364798c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.kv-shop tr.jshop_prod_cart .product_plus {
  order: 1;
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364798c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}
.kv-shop tr.jshop_prod_cart .product_minus:hover,
.kv-shop tr.jshop_prod_cart .product_plus:hover { background-color: var(--surface-sunken); }

/* Ссылка «обновить корзину» — на своей строке под степпером. */
.kv-shop tr.jshop_prod_cart td.quantity .cart_reload {
  order: 2; flex-basis: 100%; margin-top: var(--space-4);
}

/* Картинка-стрелка перезагрузки: рядом есть текстовая ссылка, она понятнее. */
.kv-shop .cart_reload img { display: none; }
.kv-shop .cart_reload a.btn {
  height: auto; padding: 0; border: 0; background: none; box-shadow: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  text-decoration: none;
  cursor: pointer;
}
.kv-shop .cart_reload a.btn:hover { color: var(--blue-700); text-decoration: underline; }

.kv-shop tr.jshop_prod_cart td.total_price {
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
  white-space: nowrap;
}

.kv-shop tr.jshop_prod_cart td.remove { justify-self: end; }
.kv-shop tr.jshop_prod_cart td.remove a.btn-danger { display: none; }
.kv-shop tr.jshop_prod_cart a.button-img {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control);
  transition: var(--transition-control);
}
.kv-shop tr.jshop_prod_cart a.button-img:hover { background: var(--status-sale-bg); }
.kv-shop tr.jshop_prod_cart a.button-img img { width: 18px; height: 18px; }

.kv-shop .shippingfree,
.kv-shop .weightorder,
.kv-shop .cartdescr {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
.kv-shop .cartdescr:empty, .kv-shop .weightorder:empty { margin: 0; }

/* --- Итоги --- */
.kv-shop table.jshop_subtotal {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: var(--space-8) 0 0 auto;
  padding: var(--space-7) var(--space-8);
  background: var(--surface-sunken);
  border-radius: var(--radius-xl);
}
.kv-shop table.jshop_subtotal tbody { display: block; }
.kv-shop table.jshop_subtotal tr {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-4) 0;
}
.kv-shop table.jshop_subtotal td { display: block; padding: 0; border: 0; background: none; }
.kv-shop table.jshop_subtotal td.name { font-size: var(--text-md); color: var(--text-muted); }
.kv-shop table.jshop_subtotal td.value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  white-space: nowrap;
}
.kv-shop table.jshop_subtotal tr.discount td.value { color: var(--green-500); }
.kv-shop table.jshop_subtotal tr.total {
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-default);
}
.kv-shop table.jshop_subtotal tr.total td.name {
  font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong);
}
.kv-shop table.jshop_subtotal tr.total td.value {
  font-size: var(--text-3xl); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight);
}
.kv-shop table.jshop_subtotal tr.plusshipping,
.kv-shop table.jshop_subtotal tr.free_discount { display: block; text-align: right; }
.kv-shop .plusshippinginfo,
.kv-shop .free_discount { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-muted); }

/* --- Кнопки корзины и промокод --- */
.kv-shop .cart_buttons { margin-top: var(--space-8); }
.kv-shop .cart_buttons #checkout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.kv-shop .cart_buttons a.btn img { display: none; }
.kv-shop .cart_buttons .td_2 a.btn {
  height: 52px; padding: 0 var(--space-9);
  font-size: var(--text-base);
  background: var(--action-primary);
  color: var(--text-inverse);
  border-color: var(--action-primary);
  box-shadow: var(--shadow-sm);
}
.kv-shop .cart_buttons .td_2 a.btn:hover {
  background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: #fff;
}

.kv-shop .cart_block_discount {
  margin: var(--space-7) 0 0 auto;
  max-width: 420px;
  padding: var(--space-7) var(--space-8);
  background: var(--surface-sunken);
  border-radius: var(--radius-xl);
}
.kv-shop .cart_block_discount .name {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.kv-shop .cart_block_discount .span12 { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.kv-shop .cart_block_discount .name { flex-basis: 100%; }
.kv-shop .cart_block_discount input.inputbox { flex: 1 1 160px; max-width: none; }

.kv-shop .cart_empty_text {
  padding: var(--space-13) var(--space-8);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
}

/* =========================================================================
   Формы: оформление заказа, регистрация, вход, личные данные
   ========================================================================= */
.kv-shop .form-horizontal,
.kv-content .form-horizontal { display: grid; gap: var(--space-6); }

.kv-shop .jshop_register { display: grid; gap: var(--space-6); }
.kv-shop .jshop_register + .jshop_register {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}

.kv-shop .control-group,
.kv-content .control-group { display: grid; gap: var(--space-4); }

.kv-shop .control-label,
.kv-shop .control-label.name,
.kv-content .control-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.kv-shop .control-label span { color: var(--red-500); }

.kv-shop .controls,
.kv-content .controls { display: grid; gap: var(--space-4); }

.kv-shop .control-group.checkbox .controls,
.kv-shop .rowremember .controls,
.kv-shop .other_delivery_adress .controls,
.kv-content .control-group.checkbox .controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
}

.kv-shop input[type="text"],
.kv-shop input[type="email"],
.kv-shop input[type="tel"],
.kv-shop input[type="password"],
.kv-shop input[type="number"],
.kv-shop input[type="date"],
.kv-shop select,
.kv-shop textarea,
.kv-shop .inputbox,
.kv-content input[type="text"],
.kv-content input[type="email"],
.kv-content input[type="tel"],
.kv-content input[type="password"],
.kv-content input[type="number"],
.kv-content input[type="date"],
.kv-content select,
.kv-content textarea,
.kv-content .inputbox {
  width: 100%;
  max-width: 460px;
  min-height: 44px;
  padding: 0 var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  transition: var(--transition-control);
}

.kv-shop textarea, .kv-content textarea { padding: var(--space-5) var(--space-6); min-height: 110px; resize: vertical; }

.kv-shop input:focus, .kv-shop select:focus, .kv-shop textarea:focus,
.kv-content input:focus, .kv-content select:focus, .kv-content textarea:focus {
  outline: none; border-color: var(--border-brand); box-shadow: var(--ring-focus);
}

.kv-shop input[type="checkbox"], .kv-shop input[type="radio"],
.kv-content input[type="checkbox"], .kv-content input[type="radio"] {
  width: 18px; height: 18px; min-height: 0; max-width: none;
  accent-color: var(--action-primary);
}

.kv-shop .box_button .controls,
.kv-shop .rowbutton .controls,
.kv-shop .block_button_register {
  display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center;
}
.kv-shop .box_button .requiredtext { margin-right: auto; }

.kv-shop .requiredtext, .kv-content .requiredtext,
.kv-shop .privacy_statement, .kv-content .privacy_statement,
.kv-shop .logintext, .kv-content .logintext,
.kv-shop .text_pay_without_reg {
  font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-muted);
}
.kv-shop .small_header {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
  margin-bottom: var(--space-5);
}

/* Способы доставки и оплаты */
.kv-shop .jshop_payment_method,
.kv-shop .jshop_shipping_method {
  display: flex; align-items: flex-start; gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  margin-bottom: var(--space-5);
  transition: var(--transition-control);
}
.kv-shop .jshop_payment_method:hover,
.kv-shop .jshop_shipping_method:hover { border-color: var(--border-brand); background: var(--surface-brand-soft); }
.kv-shop .payment_image img, .kv-shop .shipping_image img { max-width: 64px; height: auto; }
.kv-shop .payment_price, .kv-shop .shipping_price {
  font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text-strong);
}

.kv-shop .myaccount_urls {
  display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center;
  margin-top: var(--space-7); padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}
.kv-shop .myaccount_urls a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 var(--space-7);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-body); text-decoration: none;
  transition: var(--transition-control);
}
.kv-shop .myaccount_urls a:hover { border-color: var(--border-brand); color: var(--text-brand); }

.kv-shop .jshop_profile_data { display: grid; gap: var(--space-4); font-size: var(--text-md); }
.kv-shop .jshop_profile_data .name {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--weight-extrabold); color: var(--text-strong);
}
.kv-shop .jshop_profile_data span { color: var(--text-muted); }

/* --- Кнопки из чужой разметки --- */
.kv-shop .btn, .kv-shop .button,
.kv-content .btn, .kv-content .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
  height: 44px; padding: 0 var(--space-7);
  font-family: var(--font-ui); font-size: var(--text-md); font-weight: var(--weight-semibold);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card); color: var(--text-body);
  cursor: pointer; text-decoration: none;
  transition: var(--transition-control);
}
.kv-shop .btn:hover, .kv-content .btn:hover { border-color: var(--border-brand); color: var(--text-brand); }

.kv-shop .btn-primary, .kv-shop .btn-success,
.kv-content .btn-primary, .kv-content .btn-success {
  background: var(--action-primary); color: var(--text-inverse);
  border-color: var(--action-primary); box-shadow: var(--shadow-sm);
}
.kv-shop .btn-primary:hover, .kv-shop .btn-success:hover,
.kv-content .btn-primary:hover, .kv-content .btn-success:hover {
  background: var(--action-primary-hover); color: #fff; border-color: var(--action-primary-hover);
}

.kv-shop .btn-danger, .kv-content .btn-danger {
  background: var(--surface-card); color: var(--red-500); border-color: var(--red-100);
}
.kv-shop .btn-danger:hover, .kv-content .btn-danger:hover { background: var(--status-sale-bg); color: var(--red-700); }

/* =========================================================================
   Мои заказы
   ========================================================================= */
.kv-shop .myorders_block_info {
  display: grid; gap: var(--space-5);
  padding: var(--space-7);
  margin-bottom: var(--space-6);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  transition: var(--transition-control);
}
.kv-shop .myorders_block_info:hover { border-color: var(--border-brand); box-shadow: var(--shadow-sm); }

.kv-shop .order_number, .kv-shop .order_status {
  display: inline-flex; align-items: baseline; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--text-muted);
}
.kv-shop .order_number { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); }
.kv-shop .order_number b {
  font-family: var(--font-ui); font-size: var(--text-sm);
  font-weight: var(--weight-regular); color: var(--text-muted);
}
.kv-shop .order_number span { font-weight: var(--weight-extrabold); }
.kv-shop .order_status span {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--status-instock-bg); color: var(--green-700);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}

.kv-shop .table_order_list .row-fluid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: var(--space-6); align-items: center;
}
.kv-shop .table_order_list [class*="span"] { display: grid; gap: var(--space-2); min-width: 0; }
.kv-shop .table_order_list b { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-muted); }
.kv-shop .table_order_list span { font-size: var(--text-sm); color: var(--text-strong); }
.kv-shop .table_order_list .products span:last-child {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-extrabold);
}
.kv-shop .table_order_list .buttons { justify-items: end; }

.kv-shop .myorders_total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6);
  padding-top: var(--space-7); border-top: 1px solid var(--border-subtle);
}
.kv-shop .myorders_total .name { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); }
.kv-shop .myorders_total .price {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold); color: var(--text-strong);
}
.kv-shop .myorders_no_orders {
  padding: var(--space-11) var(--space-8); text-align: center;
  font-size: var(--text-lg); color: var(--text-muted);
}

/* Таблицы заказов */
.kv-shop .jshop table:not(.cart):not(.jshop_subtotal),
.kv-content .jshop table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.kv-shop .jshop table:not(.cart):not(.jshop_subtotal) th,
.kv-content .jshop table th {
  text-align: left; padding: var(--space-5) var(--space-6);
  background: var(--surface-sunken);
  font-weight: var(--weight-semibold); color: var(--text-strong);
  border-bottom: 1px solid var(--border-default);
}
.kv-shop .jshop table:not(.cart):not(.jshop_subtotal) td,
.kv-content .jshop table td {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

/* =========================================================================
   Планшет и телефон
   ========================================================================= */
@media (max-width: 1023px) {
  .kv-shop tr.jshop_prod_cart {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    grid-template-areas:
      "img name   rm"
      "img price  price"
      "qty qty    total";
    gap: var(--space-4) var(--space-6);
  }
  .kv-shop tr.jshop_prod_cart td.jshop_img_description_center { grid-area: img; }
  .kv-shop tr.jshop_prod_cart td.product_name { grid-area: name; }
  .kv-shop tr.jshop_prod_cart td.single_price { grid-area: price; }
  .kv-shop tr.jshop_prod_cart td.quantity { grid-area: qty; }
  .kv-shop tr.jshop_prod_cart td.total_price { grid-area: total; text-align: right; }
  .kv-shop tr.jshop_prod_cart td.remove { grid-area: rm; justify-self: end; }
  .kv-shop tr.jshop_prod_cart td.jshop_img_description_center .data { width: 88px; height: 88px; }

  .kv-shop .mobile-cart {
    display: block; margin-bottom: var(--space-2);
    font-size: var(--text-2xs); text-transform: uppercase;
    letter-spacing: var(--tracking-caps); color: var(--text-faint);
  }
  .kv-shop tr.jshop_prod_cart td.jshop_img_description_center .mobile-cart,
  .kv-shop tr.jshop_prod_cart td.product_name .mobile-cart,
  .kv-shop tr.jshop_prod_cart td.remove .mobile-cart { display: none; }

  .kv-shop table.jshop_subtotal,
  .kv-shop .cart_block_discount { max-width: none; }
  .kv-shop .cart_buttons #checkout { flex-direction: column; align-items: stretch; }
  /* pull-left/pull-right из старой сетки прижимали кнопки к краям. */
  .kv-shop .cart_buttons #checkout > div { width: 100%; margin: 0; text-align: left; }
  .kv-shop .cart_buttons .btn { width: 100%; }

  .kv-shop .table_order_list .row-fluid { grid-template-columns: minmax(0, 1fr); }
  .kv-shop .table_order_list .buttons { justify-items: start; }
  .kv-lk__title { font-size: var(--text-3xl); }
  .kv-lk__navlink { flex: 1 1 140px; justify-content: center; }
}

@media (max-width: 600px) {
  .kv-shop .m_cart,
  .kv-shop .editaccount_block,
  .kv-shop .myorders_list,
  .kv-shop .pagelogin { padding: var(--space-7) var(--space-6); }

  .kv-shop tr.jshop_prod_cart {
    /* Ширину первой колонки задаёт степпер, он шире картинки. */
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      "img name"
      "price price"
      "qty qty"
      "total total"
      "rm  rm";
    gap: var(--space-3) var(--space-5);
  }

  /* Цена, количество и сумма — каждое своей строкой во всю ширину: подпись
     слева, значение справа. Раньше цена стояла прямо под названием в узкой
     правой колонке и читалась как его продолжение. */
  .kv-shop tr.jshop_prod_cart td.single_price,
  .kv-shop tr.jshop_prod_cart td.total_price,
  .kv-shop tr.jshop_prod_cart td.quantity {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-5); min-width: 0;
    padding: var(--space-4) 0;
    border-top: var(--border-width) solid var(--border-subtle);
  }
  .kv-shop tr.jshop_prod_cart .mobile-cart {
    flex: 0 0 auto;
    font-size: var(--text-2xs); text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
  }
  .kv-shop tr.jshop_prod_cart td.single_price .data,
  .kv-shop tr.jshop_prod_cart td.total_price .data { min-width: 0; text-align: right; }
  .kv-shop tr.jshop_prod_cart td.quantity .data {
    display: flex; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; min-width: 0;
  }
  .kv-shop tr.jshop_prod_cart td.quantity .cart_reload { flex-basis: 100%; text-align: right; }
  .kv-shop tr.jshop_prod_cart td.product_name { align-self: center; }
  .kv-shop tr.jshop_prod_cart td.remove { justify-self: start; }
  .kv-shop tr.jshop_prod_cart td.jshop_img_description_center .data { width: 72px; height: 72px; }
  .kv-shop tr.jshop_prod_cart td.jshop_img_description_center { justify-self: start; }
  .kv-shop tr.jshop_prod_cart td.remove { justify-self: start; }
  .kv-shop tr.jshop_prod_cart a.button-img { display: none; }
  .kv-shop tr.jshop_prod_cart td.remove a.btn-danger { display: inline-flex; }
}

/* =========================================================================
   Личный кабинет — аддон Nevigen Extended Account

   Кабинет с вкладками «Аккаунт / Адрес доставки / Заказы / Купоны / Бонусы»
   рисует коммерческий аддон JoomShopping со своим CSS. Его файлы мы не
   трогаем: ниже только переопределение оформления по его же классам.
   Приставка .kv-shop нужна для веса — без неё правила аддона перебивают.
   ========================================================================= */
.kv-shop .nvg-eac-tabs-section {
  font-family: var(--font-ui);
  color: var(--text-body);
}

/* Верхняя строка: «Вернуться назад» и «Выйти из аккаунта» */
.kv-shop .nvg-eac-tabs-section > div:first-child { margin: 0 0 var(--space-8) !important; }
.kv-shop .nvg-eac-tabs-section > div > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 40px;
  padding: 0 var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-control);
}
.kv-shop .nvg-eac-tabs-section > div > a:hover { border-color: var(--border-brand); color: var(--text-brand); }

/* Вкладки */
.kv-shop ul.eac_tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-7);
  padding: var(--space-4);
  list-style: none;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.kv-shop ul.eac_tabs li,
.kv-shop ul.eac_tabs li.litab {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: var(--transition-control);
}
.kv-shop ul.eac_tabs li span.tabli {
  display: block;
  padding: var(--space-5) var(--space-7);
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  white-space: nowrap;
}
.kv-shop ul.eac_tabs li:hover { background: var(--surface-sunken); }
.kv-shop ul.eac_tabs li.current { background: var(--surface-brand-soft); }
.kv-shop ul.eac_tabs li.current span.tabli { color: var(--text-brand); font-weight: var(--weight-semibold); }

/* Панель вкладки */
.kv-shop .eac_box {
  border: 0;
  background: none;
  padding: 0;
}
.kv-shop .eac_jshop_nvg {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}

/* Вкладка «Аккаунт». Её содержимое аддон подтягивает аяксом со страницы
   профиля Joomla (com_users) и кладёт в #sequire_data — то есть внутрь
   кабинета попадает наша же вёрстка профиля. Ей нужна такая же карточка,
   как у остальных вкладок, а собственный заголовок там лишний: над ним
   уже стоит полоса вкладок. */
.kv-shop #sequire_data .profile-edit {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  max-width: none;
}
.kv-shop #sequire_data .kv-account__head { display: none; }
.kv-shop #sequire_data .kv-account__card {
  border: 0;
  padding: 0;
  box-shadow: none;
  background: none;
}

/* Кнопки, которые аддон дописывает в форму вместо удалённых наших. */
.kv-shop #member-profile a.validate,
.kv-shop #member-profile a.deletep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: var(--space-6);
  margin-right: var(--space-5);
  padding: 0 var(--space-8);
  border-radius: var(--radius-control);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control);
}
.kv-shop #member-profile a.validate {
  background: var(--action-primary);
  border: var(--border-width) solid var(--action-primary);
  color: var(--text-inverse);
}
.kv-shop #member-profile a.validate:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: #fff; }
.kv-shop #member-profile a.deletep {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  color: var(--text-muted);
}
.kv-shop #member-profile a.deletep:hover { border-color: var(--red-500); color: var(--red-500); }

/* Заголовок блока внутри вкладки */
.kv-shop .nvg-block_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin: 0 0 var(--space-6);
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: none;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
}

/* Сетка аддона */
.kv-shop .nvg-grid { display: flex; flex-wrap: wrap; gap: var(--grid-gap); margin: 0; }
.kv-shop .nvg-grid > * { padding: 0; }
.kv-shop .nvg-width-1-1 { flex: 0 0 100%; max-width: 100%; }
.kv-shop .nvg-width-1-2 { flex: 1 1 320px; max-width: 100%; }
.kv-shop .nvg-width-1-3 { flex: 1 1 240px; }
.kv-shop .nvg-width-1-4 { flex: 1 1 180px; }
.kv-shop .nvg-width-3-4 { flex: 1 1 480px; }
.kv-shop .nvg-width-30  { flex: 0 0 auto; }

.kv-shop .nvg-box-solid-border {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.kv-shop .nvg_boxshadow { box-shadow: var(--shadow-card); border-radius: var(--radius-card); }
.kv-shop .nvg-border-round { border-radius: var(--radius-card); }
.kv-shop .nvg-border-bottom-dotted { border-bottom: 1px solid var(--border-subtle); }

/* Поля ввода аддона */
.kv-shop .nvg-eac-tabs-section input[type="text"],
.kv-shop .nvg-eac-tabs-section input[type="email"],
.kv-shop .nvg-eac-tabs-section input[type="tel"],
.kv-shop .nvg-eac-tabs-section input[type="password"],
.kv-shop .nvg-eac-tabs-section input[type="number"],
.kv-shop .nvg-eac-tabs-section input[type="date"],
.kv-shop .nvg-eac-tabs-section select,
.kv-shop .nvg-eac-tabs-section textarea {
  width: 100%;
  max-width: 460px;
  height: auto;
  min-height: 44px;
  padding: 0 var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 42px;
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  box-shadow: none;
  transition: var(--transition-control);
}
.kv-shop .nvg-eac-tabs-section textarea { line-height: var(--leading-normal); padding: var(--space-5) var(--space-6); min-height: 96px; }
.kv-shop .nvg-eac-tabs-section input:focus,
.kv-shop .nvg-eac-tabs-section select:focus,
.kv-shop .nvg-eac-tabs-section textarea:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: var(--ring-focus);
}
.kv-shop .nvg-eac-tabs-section input[disabled],
.kv-shop .nvg-eac-tabs-section select[disabled] { background: var(--surface-sunken); color: var(--text-muted); }

/* Подписи полей */
.kv-shop .acc_nvg_name,
.kv-shop .nvg_name,
.kv-shop .nvg_name1 {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}
.kv-shop span.aec_value { font-size: var(--text-md); color: var(--text-strong); }
.kv-shop th.eac_title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  background: none;
}
.kv-shop .eac_required { color: var(--red-500); font-size: var(--text-xs); }
.kv-shop #eacAdressForm .fielderror { border-color: var(--red-500); }

/* Кнопки аддона */
.kv-shop .eac_jshop_nvg button,
.kv-shop .eac_jshop_nvg a.button,
.kv-shop a.pr-btn,
.kv-shop a.profile_save,
.kv-shop a.nosave,
.kv-shop a.addad,
.kv-shop a.addsave,
.kv-shop a.order_reeat,
.kv-shop a.eac_norder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 40px;
  padding: 0 var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: var(--transition-control);
}
.kv-shop .eac_jshop_nvg button:hover,
.kv-shop a.pr-btn:hover,
.kv-shop a.addad:hover,
.kv-shop a.order_reeat:hover,
.kv-shop a.eac_norder:hover { border-color: var(--border-brand); color: var(--text-brand); }

/* Кнопку «Добавить» рядом с «Другим адресом доставки» аддон красит в белый
   через !important — на нашем светлом фоне и подпись, и плюс становились
   невидимыми, оставалась пустая рамка. Перебиваем цвет тем же весом. */
.kv-shop a.addad { color: var(--text-body) !important; }
.kv-shop a.addad:hover { color: var(--text-brand) !important; }

.kv-shop a.profile_save,
.kv-shop a.addsave {
  background: var(--action-primary);
  border-color: var(--action-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}
.kv-shop a.profile_save:hover,
.kv-shop a.addsave:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: #fff;
}

.kv-shop a.btn.btn-danger.deletep,
.kv-shop .btn-danger,
.kv-shop a.add_del,
.kv-shop a.cancel_order {
  background: var(--surface-card);
  border-color: var(--red-100);
  color: var(--red-500);
}
.kv-shop a.btn.btn-danger.deletep:hover,
.kv-shop a.add_del:hover,
.kv-shop a.cancel_order:hover { background: var(--status-sale-bg); color: var(--red-700); }

.kv-shop .eac_btnblock { display: inline-flex; gap: var(--space-4); }

/* Таблицы кабинета */
.kv-shop .eac_jshop_nvg table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: none;
}
.kv-shop .eac_jshop_nvg table tr th {
  padding: var(--space-5) var(--space-6);
  text-align: left;
  background: var(--surface-sunken);
  border: 0;
  border-bottom: 1px solid var(--border-default);
}
.kv-shop .eac_jshop_nvg table tbody tr { border: 0; background: none; }
.kv-shop .eac_jshop_nvg table tbody tr:hover,
.kv-shop table.table-hover tbody tr:hover { background: var(--surface-sunken); }
.kv-shop .eac_jshop_nvg table td {
  padding: var(--space-5) var(--space-6);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--text-strong);
}

/* Заказы */
.kv-shop .eac-listorder,
.kv-shop .order-n {
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background: var(--surface-card);
  transition: var(--transition-control);
}
.kv-shop .eac-listorder:hover, .kv-shop .order-n:hover { border-color: var(--border-brand); box-shadow: var(--shadow-sm); }
.kv-shop .order_date, .kv-shop .coupon_date { font-size: var(--text-sm); color: var(--text-muted); }
.kv-shop .order-top-service-info { font-size: var(--text-sm); color: var(--text-muted); }
.kv-shop .ord_adress { font-size: var(--text-sm); color: var(--text-muted); }
.kv-shop span.sale_total,
.kv-shop .order_info strong {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
}
.kv-shop a.eac_norder { margin-top: var(--space-5); }

/* Бонусы */
.kv-shop .bonusup { color: var(--green-500); font-weight: var(--weight-bold); }
.kv-shop .bonusdown { color: var(--red-500); font-weight: var(--weight-bold); }
.kv-shop .bon_bonus {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
}
.kv-shop .ch_tab { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.kv-shop .ch_tab a.btn-tab {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-body); text-decoration: none;
}
.kv-shop .ch_tab a.btn-tab.active {
  background: var(--surface-brand-soft);
  border-color: var(--border-brand);
  color: var(--text-brand);
}

@media (max-width: 700px) {
  .kv-shop .eac_jshop_nvg { padding: var(--space-7) var(--space-6); }
  .kv-shop ul.eac_tabs li span.tabli { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); }
  .kv-shop .nvg-block_header { font-size: var(--text-lg); }
  .kv-shop .nvg-eac-tabs-section > div:first-child { flex-wrap: wrap; gap: var(--space-4); }
}

/* =========================================================================
   Личный кабинет и вход

   Профиль выводят наши переопределения com_users. Вход по номеру телефона
   рисует компонент клиента (com_j_sms_registration) — его разметку мы не
   меняем, только оформляем те классы, которые она отдаёт.
   ========================================================================= */
.kv-account {
  max-width: var(--container-max);
  margin: 0 auto;
}

.kv-account__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.kv-account__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}
.kv-account__hello { font-size: var(--text-base); color: var(--text-muted); }

.kv-account__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--grid-gap);
  align-items: start;
}
.kv-account__main { display: grid; gap: var(--space-6); min-width: 0; }

.kv-account__card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  margin: 0;
}
.kv-account__card-title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
}

.kv-account__rows {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
  margin: 0;
}
.kv-account__rows dt {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}
.kv-account__rows dd {
  margin: 0;
  font-size: var(--text-md);
  color: var(--text-strong);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Панель ссылок */
.kv-account__panel {
  display: grid;
  gap: var(--space-3);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.kv-account__panel-title {
  padding: var(--space-3) var(--space-5) var(--space-5);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}
.kv-account__link {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-control);
}
.kv-account__link:hover { background: var(--surface-brand-soft); color: var(--text-brand); }

/* Форма профиля */
.kv-account__form { display: grid; gap: var(--space-6); }
.kv-account__fields { display: grid; gap: var(--space-6); }
.kv-account__field {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
  align-items: center;
}
.kv-account__field-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.kv-account__field-label label { margin: 0; }
.kv-account__field-input { min-width: 0; display: grid; gap: var(--space-3); }
.kv-account__field-input input[type="text"],
.kv-account__field-input input[type="email"],
.kv-account__field-input input[type="tel"],
.kv-account__field-input input[type="password"],
.kv-account__field-input select,
.kv-account__field-input textarea {
  width: 100%;
  max-width: 460px;
  min-height: 44px;
  padding: 0 var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  transition: var(--transition-control);
}
.kv-account__field-input input:focus,
.kv-account__field-input select:focus,
.kv-account__field-input textarea:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: var(--ring-focus);
}
.kv-account__field-input .form-control-feedback,
.kv-account__field-input .invalid { color: var(--red-500); font-size: var(--text-xs); }

.kv-account__actions { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }

/* Регистрация, восстановление пароля и выход остаются на стандартной
   разметке Joomla с классами старого шаблона — оформляем их здесь. */
.kv-content .border0086B4 { border: 0; background: none; padding: 0; }
.kv-content .block_reg,
.kv-content .well,
.kv-content .registration-complete,
.kv-content .logout-description {
  max-width: 640px;
  margin: 0 auto var(--space-7);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}
.kv-content .block_reg .well,
.kv-content .block_reg .form-horizontal {
  max-width: none; margin: 0; background: none;
  border: 0; box-shadow: none; padding: 0;
}
.kv-content .page-header { margin: 0 0 var(--space-6); }
.kv-content .page-header h1,
.kv-content .page-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
}
.kv-content .dl-horizontal {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
  margin: 0;
}
.kv-content .dl-horizontal dt { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); }
.kv-content .dl-horizontal dd { margin: 0; font-size: var(--text-md); color: var(--text-strong); overflow-wrap: anywhere; }
.kv-content fieldset { border: 0; margin: 0; padding: 0; }
.kv-content .icon-arrow-left, .kv-content .icon-white { display: none; }

/* =========================================================================
   Вход по номеру телефона (com_j_sms_registration)
   ========================================================================= */
.sms_component_form {
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-10) var(--space-8);
  text-align: center;
}
.mainSmsFormTitle {
  margin: 0 0 var(--space-7);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.mainSmsForm { display: grid; gap: var(--space-6); }
.sms_component_form .top_text,
.sms_component_form .top_login_text,
.sms_component_form .showphonetxt1,
.sms_component_form .showphonetxt2 {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
.sms_component_form .j_sms_registration_phone,
.sms_component_form .one_login_field input,
.sms_component_form .input-small {
  width: 100%;
  max-width: 320px;
  height: 52px;
  padding: 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  text-align: center;
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  transition: var(--transition-control);
}
.sms_component_form input:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: var(--ring-focus);
}
.sms_component_form .ener_one_symbol {
  width: 48px;
  height: 56px;
  margin: 0 var(--space-2);
  padding: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
}
.sms_component_form .enter_symbols_block_wrapper { display: flex; justify-content: center; flex-wrap: wrap; }

.sms_component_form .btn,
.sms_component_form .j_sms_registration_submit_button,
.sms_component_form .login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 var(--space-9);
  border: var(--border-width) solid var(--action-primary);
  border-radius: var(--radius-control);
  background: var(--action-primary);
  color: var(--text-inverse);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-control);
}
.sms_component_form .btn:hover,
.sms_component_form .j_sms_registration_submit_button:hover,
.sms_component_form .login-button:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: #fff;
}

.sms_component_form .goto_sms,
.sms_component_form .goto_standart,
.sms_component_form .backlnk,
.sms_component_form .bot_lnk a {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  cursor: pointer;
}
.sms_component_form .err_j_phone { color: var(--red-500); font-size: var(--text-sm); }
.sms_component_form .obrabotka1 { color: var(--text-muted); font-size: var(--text-sm); }
.sms_component_form .smscountdown,
.sms_component_form .countdownstopped { font-size: var(--text-sm); color: var(--text-muted); }
.sms_component_form .social_buttons_wrapper { display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap; }
.sms_component_form .jsms_return_buttons { display: flex; justify-content: center; gap: var(--space-6); flex-wrap: wrap; }
.sms_component_form .enter_standart_login_form { display: grid; gap: var(--space-5); justify-items: center; }

@media (max-width: 900px) {
  .kv-account__grid { grid-template-columns: minmax(0, 1fr); }
  .kv-account__rows,
  .kv-account__field { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .kv-account__field { gap: var(--space-3); }
  .kv-account__title { font-size: var(--text-3xl); }
  .sms_component_form { padding: var(--space-8) var(--space-6); }
}

/* =========================================================================
   Блог — список материалов

   Раскладку выдаёт стандартный вид Joomla (com_content, блог категории).
   Разметку не переопределяем, оформляем её классы: заголовок, карточки
   материалов, дата, кнопка «Подробнее», постраничная навигация.
   ========================================================================= */
.kv-content .com-content-category-blog > .page-header h1,
.kv-content .com-content-category-blog > .page-header h2 {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}

.kv-content .com-content-category-blog .category-desc {
  margin-bottom: var(--space-8);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

.kv-content .com-content-category-blog__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.kv-content .com-content-category-blog__item {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-8);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.kv-content .com-content-category-blog__item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.kv-content .com-content-category-blog__item .item-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}

/* Заголовок материала */
.kv-content .com-content-category-blog__item .page-header { margin: 0; }
.kv-content .com-content-category-blog__item .page-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.kv-content .com-content-category-blog__item .page-header h2 a {
  color: var(--text-strong);
  text-decoration: none;
}
.kv-content .com-content-category-blog__item .page-header h2 a:hover { color: var(--text-brand); }

/* Дата */
.kv-content .com-content-category-blog .article-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.kv-content .com-content-category-blog .article-info dd { margin: 0; }
.kv-content .com-content-category-blog .article-info .icon-calendar { display: none; }

/* Утилита Joomla для текста только для скринридеров. Она живёт в CSS
   Cassiopeia, который у нас не подключается, — без неё служебные подписи
   вроде «Информация о материале» выводились на экран. */
.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Вводный текст, если он включён в настройках пункта меню */
.kv-content .com-content-category-blog__item p:not(.readmore) {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* Кнопка «Подробнее» */
.kv-content .com-content-category-blog .readmore { margin: auto 0 0; }
.kv-content .com-content-category-blog .readmore a.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 40px;
  padding: 0 var(--space-7);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-control);
}
.kv-content .com-content-category-blog .readmore a.btn:hover {
  border-color: var(--border-brand);
  color: var(--text-brand);
}
.kv-content .com-content-category-blog .readmore .icon-chevron-right { display: none; }

/* Постраничная навигация */
.kv-content .com-content-category-blog__navigation { margin-top: var(--space-9); }
.kv-content .com-content-category-blog__counter {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.kv-content .com-content-category-blog .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kv-content .com-content-category-blog .page-item { margin: 0; }
.kv-content .com-content-category-blog .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-5);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-control);
}
.kv-content .com-content-category-blog .page-link:hover { border-color: var(--border-brand); color: var(--text-brand); }
.kv-content .com-content-category-blog .page-item.active .page-link {
  background: var(--surface-brand-soft);
  border-color: var(--border-brand);
  color: var(--text-brand);
}
.kv-content .com-content-category-blog .page-item.disabled .page-link { opacity: .45; pointer-events: none; }

/* =========================================================================
   Витрины товаров, вставленные в тексты

   В описании категории и в статьях встречается готовая вёрстка витрины из
   старого шаблона — с рабочими кнопками «Купить». Её разметку не меняем,
   только оформляем: иначе блок выпадает из дизайна.
   ========================================================================= */
.desc_static .jshop_list_product,
.kv-article .jshop_list_product,
.kv-seo__body .jshop_list_product {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--grid-gap);
  margin: var(--space-8) 0 0;
}

.desc_static .block_item,
.kv-article .block_item,
.kv-seo__body .block_item { display: block; min-width: 0; }

.desc_static .block_product,
.kv-article .block_product,
.kv-seo__body .block_product {
  display: block;
  width: auto;
  float: none;
  margin: 0;
  height: 100%;
}

.desc_static .block_product .product,
.kv-article .block_product .product,
.kv-seo__body .block_product .product {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: var(--transition-control);
}
.desc_static .block_product .product:hover,
.kv-article .block_product .product:hover,
.kv-seo__body .block_product .product:hover { box-shadow: var(--shadow-card-hover); }

/* Картинка */
.desc_static .image_block,
.kv-article .image_block,
.kv-seo__body .image_block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  border-radius: var(--radius-image);
  background: var(--gradient-fresh);
  overflow: hidden;
}
.desc_static .image_block img,
.kv-article .image_block img,
.kv-seo__body .image_block img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Рейтинг */
.desc_static .review_mark,
.kv-article .review_mark,
.kv-seo__body .review_mark {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.desc_static .list_stars_count,
.kv-article .list_stars_count,
.kv-seo__body .list_stars_count { white-space: nowrap; }

/* Название */
.desc_static .prod_33 .name,
.kv-article .prod_33 .name,
.kv-seo__body .prod_33 .name { min-height: 44px; }
.desc_static .prod_33 .name a,
.kv-article .prod_33 .name a,
.kv-seo__body .prod_33 .name a {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  text-decoration: none;
}
.desc_static .prod_33 .name a:hover,
.kv-article .prod_33 .name a:hover,
.kv-seo__body .prod_33 .name a:hover { color: var(--text-brand); }

/* Баллы */
.desc_static .product_bonus_sub,
.kv-article .product_bonus_sub,
.kv-seo__body .product_bonus_sub {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 24px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--surface-promo);
  color: var(--amber-600);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

/* Цена */
.desc_static .jshop_price span,
.kv-article .jshop_price span,
.kv-seo__body .jshop_price span {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-price);
  white-space: nowrap;
}

/* Количество и кнопка «Купить» */
.desc_static .flex_price_prod,
.kv-article .flex_price_prod,
.kv-seo__body .flex_price_prod {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: auto;
  padding-top: var(--space-5);
}
.desc_static .fp_right,
.kv-article .fp_right,
.kv-seo__body .fp_right { flex: 1 1 auto; }

.desc_static .prod_qty_input,
.kv-article .prod_qty_input,
.kv-seo__body .prod_qty_input {
  display: flex;
  align-items: center;
  height: 44px;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--surface-card);
}
.desc_static .product_minus, .desc_static .product_plus,
.kv-article .product_minus, .kv-article .product_plus,
.kv-seo__body .product_minus, .kv-seo__body .product_plus {
  width: 34px;
  height: 42px;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-control);
}
.desc_static .product_minus:hover, .desc_static .product_plus:hover,
.kv-article .product_minus:hover, .kv-article .product_plus:hover,
.kv-seo__body .product_minus:hover, .kv-seo__body .product_plus:hover {
  background: var(--surface-sunken);
  color: var(--text-strong);
}
.desc_static .input_quantity,
.kv-article .input_quantity,
.kv-seo__body .input_quantity {
  width: 40px;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 42px;
  padding: 0;
  border: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  background: none;
}

.desc_static .button_buy,
.kv-article .button_buy,
.kv-seo__body .button_buy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 var(--space-6);
  border: var(--border-width) solid var(--action-primary);
  border-radius: var(--radius-control);
  background: var(--action-primary);
  color: var(--text-inverse);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-control);
}
.desc_static .button_buy:hover,
.kv-article .button_buy:hover,
.kv-seo__body .button_buy:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: #fff;
}

/* Пустые служебные обёртки старой вёрстки не должны занимать место. */
.desc_static .price_extra_info:empty,
.desc_static .extra_fields:empty,
.desc_static .product_bonus__:empty,
.desc_static .jshop_price_right:empty,
.kv-article .price_extra_info:empty,
.kv-article .extra_fields:empty,
.kv-seo__body .price_extra_info:empty,
.kv-seo__body .extra_fields:empty { display: none; }

/* Заголовки внутри вставленного текста — в стиле сайта. */
.kv-seo__body h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
  margin: var(--space-8) 0 var(--space-4);
}

@media (max-width: 600px) {
  .desc_static .jshop_list_product,
  .kv-article .jshop_list_product,
  .kv-seo__body .jshop_list_product { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .desc_static .image_block,
  .kv-article .image_block,
  .kv-seo__body .image_block { height: 140px; }
  .desc_static .flex_price_prod,
  .kv-article .flex_price_prod,
  .kv-seo__body .flex_price_prod { flex-wrap: wrap; }
}

/* =========================================================================
   Подвал
   ========================================================================= */
.kv-footer {
  background: var(--gradient-water);
  color: rgba(255,255,255,.72);
  font-family: var(--font-ui);
  margin-top: var(--space-13);
}
.kv-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: 44px var(--gutter) 18px; }

.kv-footer__cols {
  display: grid;
  grid-template-columns: 1.35fr .7fr .8fr 1.05fr;
  gap: 44px; align-items: start;
}

.kv-footer a { color: rgba(255,255,255,.72); }
.kv-footer a:hover { color: #fff; }

.kv-footer__brand { display: flex; align-items: center; gap: var(--space-5); }
.kv-footer__brand img { width: 64px; height: 64px; display: block; }
.kv-footer__brand-text { display: grid; gap: var(--space-3); }
.kv-footer__name {
  font-family: var(--font-display); font-size: 23px;
  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight);
  color: #fff; white-space: nowrap;
}
.kv-footer__since { font-size: var(--text-2xs); color: rgba(255,255,255,.6); }
.kv-footer__about { margin: 14px 0 0; font-size: var(--text-sm); line-height: 1.6; max-width: 290px; }

.kv-footer__hours { display: grid; gap: var(--space-3); margin-top: 18px; font-size: var(--text-xs); }
.kv-footer__hours strong { color: #fff; font-weight: var(--weight-semibold); }

.kv-footer__title {
  margin: 0 0 var(--space-6);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: #fff; letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.kv-footer__links { display: grid; gap: var(--space-4); font-size: var(--text-sm); }

.kv-footer__bar {
  margin-top: 28px; padding-top: var(--space-7);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-9); flex-wrap: wrap;
}
.kv-footer__contacts { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.kv-footer__phone {
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-display); font-size: 19px;
  font-weight: var(--weight-extrabold); color: #fff;
}
.kv-footer__phone:hover { color: #fff; }
.kv-footer__mail { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); }

.kv-footer__social { display: flex; gap: var(--space-4); }
.kv-footer__social .kv-social__link { width: 38px; height: 38px; border-radius: var(--radius-control); }
.kv-footer__social .kv-social__link--max .kv-i { width: 16px; height: 16px; }

.kv-footer__legal {
  margin-top: var(--space-7); padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: var(--space-8);
  font-size: var(--text-2xs); flex-wrap: wrap;
}
.kv-footer__legal-links { display: flex; align-items: center; gap: var(--space-7); flex-wrap: wrap; }

/* =========================================================================
   Системные сообщения Joomla
   ========================================================================= */
.kv-messages { max-width: var(--container-max); margin: var(--space-6) auto 0; padding: 0 var(--gutter); }
.kv-messages .alert {
  border-radius: var(--radius-control);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-default);
  background: var(--surface-subtle);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
.kv-messages .alert-success { background: var(--status-instock-bg); border-color: var(--green-500); color: var(--green-700); }
.kv-messages .alert-danger, .kv-messages .alert-error { background: var(--status-sale-bg); border-color: var(--red-500); color: var(--red-700); }
.kv-messages .alert-warning { background: var(--surface-promo); border-color: var(--amber-500); color: var(--amber-600); }
.kv-messages .alert-info { background: var(--surface-brand-soft); border-color: var(--border-brand); color: var(--text-brand); }

/* Страница статьи (города, текстовые разделы) */
.kv-page { padding-bottom: var(--space-11); }
.kv-page > .kv-sec__eyebrow { display: block; margin-bottom: var(--space-4); }
.kv-page .kv-h1 { margin-top: 0; }

/* Контентная типографика для статей Joomla */
.kv-content { max-width: var(--container-max); margin: 0 auto; padding: var(--space-9) var(--gutter) 0; }
.kv-article { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-body); }
.kv-article h2 { font-size: var(--text-2xl); margin: var(--space-10) 0 var(--space-5); }
.kv-article h3 { font-size: var(--text-xl); margin: var(--space-9) 0 var(--space-5); }
.kv-article p { margin: 0 0 var(--space-6); }
.kv-article ul, .kv-article ol { margin: 0 0 var(--space-6); padding-left: var(--space-8); }
.kv-article li { margin-bottom: var(--space-3); }
.kv-article img { border-radius: var(--radius-image); margin: var(--space-6) 0; }
.kv-article table {
  width: 100%; border-collapse: collapse; margin: var(--space-6) 0;
  font-size: var(--text-sm);
}
.kv-article th, .kv-article td {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-default); text-align: left;
}
.kv-article th { background: var(--surface-sunken); font-weight: var(--weight-semibold); color: var(--text-strong); }

/* Таблицы и широкий контент не должны ломать страницу */
.kv-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =========================================================================
   Адаптив
   ========================================================================= */
@media (max-width: 1100px) {
  .kv-layout { grid-template-columns: minmax(0, 1fr); }
  .kv-sidebar { position: static; }
  .kv-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .kv-megamenu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv-product, .kv-product__details { grid-template-columns: minmax(0, 1fr); }
  .kv-product__aside { position: static; }
  .kv-perks { grid-template-columns: repeat(2, 1fr); }

  /* Главная */
  .kv-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .kv-hero__media { height: 320px; }
  .kv-geo, .kv-about, .kv-contacts { grid-template-columns: minmax(0, 1fr); }
  .kv-about__stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .kv-topbar__inner { min-height: 0; padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .kv-header__inner { flex-wrap: wrap; gap: var(--space-5); }
  .kv-search { order: 3; flex: 1 1 100%; }
  .kv-region { flex: 1 1 200px; }
  .kv-burger { display: flex; }
  .kv-nav { display: none; }
  .kv-navbar.is-open .kv-nav {
    display: flex; flex-direction: column; align-items: stretch;
    height: auto; padding: var(--space-5) 0; gap: var(--space-2);
    flex: 1 1 100%;
  }
  .kv-navbar.is-open .kv-catalog { height: auto; }
  .kv-navbar.is-open .kv-phone { margin-left: 0; }
  .kv-megamenu { position: static; grid-template-columns: 1fr 1fr; padding: var(--space-6); flex: 1 1 100%; }

  /* Мобильная полоса меню. Пункты спрятаны под бургер, поэтому без
     логотипа полоса была бы пустой и «прилипать» ей было бы нечем —
     отсюда и ощущение, что шапка на телефоне не закреплена. Здесь
     логотип виден всегда, а не только после прокрутки. */
  .kv-navbar__inner { min-height: 56px; }
  .kv-burger { margin-left: auto; }

  /* В этой строке кроме кнопки ничего нет, и голая иконка ни о чём
     не говорит. Подписываем — строка перестаёт выглядеть пустой. */
  .kv-burger { width: auto; gap: var(--space-3); padding: 0 var(--space-5); }
  .kv-burger__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

  /* Боковая колонка каталога и фильтра. На телефоне она вставала перед
     товарами и занимала два экрана прокрутки — прячем под кнопку. */
  .kv-aside-toggle { display: flex; }
  .kv-sidebar { display: none; }
  .kv-sidebar.is-open { display: block; }
}

@media (max-width: 700px) {
  :root { --gutter: 16px; --section-y: 48px; }
  .kv-h1 { font-size: var(--text-3xl); }
  .kv-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-5); }
  .kv-footer__cols { grid-template-columns: 1fr; }
  /* Название в подвале не переносилось и на узких экранах (320 px) тянуло
     страницу вбок. Перенос включается только когда места не хватает. */
  .kv-footer__brand-text { min-width: 0; }
  .kv-footer__name { white-space: normal; }
  .kv-footer__bar { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .kv-logo__tagline { display: none; }
  .kv-navbar__logo span { font-size: var(--text-sm); }

  /* Плитки тегов на телефоне: названия вроде «Одноразовая посуда»
     не помещались в строку фиксированной высоты и обрезались. */
  .kv-tags { gap: var(--space-3); }
  .kv-tag {
    height: auto;
    min-height: 36px;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
    line-height: 1.25;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .kv-tags.is-collapsed { max-height: 36px; }
  .kv-cart__text, .kv-header .kv-account span { display: none; }
  .kv-header .kv-account { padding: 0 var(--space-5); }

  /* Шапка на телефоне занимала четыре строки до первого экрана товара.
     Корзина и кабинет продублированы в нижней панели, поэтому из шапки
     их убираем, а выбор города и «избранное» ставим в одну строку. */
  .kv-header .kv-cart, .kv-header .kv-account { display: none; }

  /* Строка поиска: кнопку «Найти» убираем — поиск запускается вводом,
     а освободившееся место отдаём каталогу и меню. Полоса навигации до
     прокрутки схлопнута, поэтому меню здесь единственное на экране. */
  .kv-search__submit { display: none; }
  .kv-search__field { flex: 1 1 auto; min-width: 0; }
  .kv-search__nav { display: flex; gap: 8px; flex: 0 0 auto; }
  .kv-search__navbtn {
    display: inline-flex; align-items: center; gap: 4px;
    height: 40px; padding: 0 10px;
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-control);
    background: var(--surface-card); color: var(--text-strong);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    white-space: nowrap;
  }
  .kv-search__navbtn .kv-i { flex: none; }

  /* Полоса навигации нужна на телефоне в двух случаях: когда шапка уехала
     вверх и когда раскрыто меню. В остальное время она пустая — схлопываем,
     иначе под поиском висела бы полоса ни с чем. */
  .kv-navbar:not(.is-stuck):not(.is-open) {
    height: 0; min-height: 0; padding: 0; border: 0; overflow: hidden;
  }
  .kv-region { flex: 1 1 auto; min-width: 0; }
  .kv-header__tools { flex: none; }
  .kv-topbar__item--hours, .kv-topbar__item--address { display: none; }

  /* Верхняя полоса на телефоне — одна строка. Слева баллы, справа значок
     звонка и мессенджеры. Почта убрана: писать письмо с телефона никто
     не станет, а строку она занимала целиком. Адрес и часы скрыты выше. */
  .kv-topbar__inner { flex-wrap: nowrap; gap: 8px; min-height: 38px; align-items: center; }
  .kv-topbar__group { gap: 8px; flex: 0 0 auto; min-width: 0; }
  .kv-topbar__group:first-child { flex: 1 1 auto; }
  .kv-topbar a.kv-topbar__item[href^="mailto"] { display: none; }

  /* Обратный звонок — кружок со значком телефона, рядом с мессенджерами. */
  .kv-callback__label { display: none; }
  .kv-callback {
    width: 26px; height: 26px; padding: 0; gap: 0;
    justify-content: center; border-radius: 50%; flex: 0 0 auto;
  }

  /* У повтора остаётся значок, у баллов — число: подписи съедают строку,
     а смысл несут не они. Но голая цифра в углу читается как опечатка,
     поэтому баллы оформлены плашкой — так же, как обратный звонок. */
  /* Голая иконка ничего не сообщает: у баллов рядом с числом стоит слово,
     у повтора — подпись. Полное «Повторить заказ» в одну строку вместе
     с баллами, звонком и соцсетями не помещается — оставляем «Повторить».
     Всё в строке не сжимается, кроме подписи повтора: если экран совсем
     узкий, обрежется она, а не поедет вся страница. */
  .kv-topbar__inner { font-size: 12px; }
  .kv-topbar__bonus-label, .kv-topbar__reorder-tail { display: none; }
  .kv-topbar__bonus-word { display: inline; }

  .kv-topbar__bonus, .kv-topbar__reorder {
    gap: 5px; height: 24px; padding: 0 9px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff; white-space: nowrap;
  }
  .kv-topbar__bonus { flex: 0 0 auto; }
  .kv-topbar__reorder { flex: 0 1 auto; min-width: 0; }
  .kv-topbar__bonus .kv-i, .kv-topbar__reorder .kv-i { flex: none; }
  .kv-topbar__reorder-text { overflow: hidden; text-overflow: ellipsis; }
  .kv-topbar__bonus-value { color: #fff; font-weight: var(--weight-bold); }
  /* Значок трубки человек читать не обязан: ставим сам номер, нажатие
     набирает его. Соцсети и кнопка обратного звонка в эту строку уже
     не помещаются — они остались в подвале и в меню. */
  .kv-topbar__phone {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: auto; flex: 0 0 auto;
    color: #fff; font-weight: var(--weight-semibold); white-space: nowrap;
  }
  .kv-topbar__phone .kv-i { display: none; }
  /* Рядом с номером — мессенджеры. Кнопка обратного звонка и повтор заказа
     в эту строку уже не помещаются: звонок живёт в меню и на главной,
     повтор — в кабинете. */
  .kv-topbar .kv-callback, .kv-topbar__reorder { display: none; }
  .kv-topbar .kv-social { gap: 6px; flex: none; }
  .kv-topbar .kv-social__link { width: 24px; height: 24px; border-radius: 7px; }
  .kv-tiers { grid-template-columns: repeat(3, 1fr); }
  .kv-card__name { min-height: 0; }
  .kv-megamenu { grid-template-columns: 1fr; }

  /* Галерея товара: рельса миниатюр уезжает под кадр и скроллится вбок */
  .kv-product__gallery.has-thumbs { grid-template-columns: minmax(0, 1fr); }
  .kv-product__rail {
    grid-auto-flow: column; grid-auto-columns: 68px;
    overflow-x: auto; padding-bottom: var(--space-2); order: 2;
  }
  .kv-product__thumb { width: 68px; height: 68px; }
  .kv-product__stage { height: 300px; padding: var(--space-6); }
  .kv-product__title { font-size: var(--text-2xl); }
  .kv-product__price { font-size: var(--text-3xl); }
  .kv-buybox { padding: var(--space-6); }
  .kv-perks { grid-template-columns: 1fr; }
  .kv-related__title, .kv-section__title { font-size: var(--text-xl); }

  /* Нижняя панель навигации из мобильного прототипа */
  .kv-tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 75;
    display: grid; grid-template-columns: repeat(4, 1fr);
    align-items: center;
    height: 64px;
    background: var(--surface-card);
    border-top: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-pop);
  }
  .kv-tabbar__link {
    display: grid; justify-items: center; gap: 3px;
    color: var(--text-muted); font-size: 11px; font-weight: var(--weight-medium);
  }
  .kv-tabbar__link.is-active { color: var(--text-brand); font-weight: var(--weight-semibold); }
  .kv-tabbar__badge {
    position: absolute; top: -6px; right: -9px;
    min-width: 17px; height: 17px; padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--amber-500); color: var(--grey-900);
    font-size: 10px; font-weight: var(--weight-bold);
    display: flex; align-items: center; justify-content: center;
  }
  .kv-tabbar__icon { position: relative; display: flex; }

  /* Панель перекрывает подвал — освобождаем место */
  body { padding-bottom: 64px; }

  /* Главная на телефоне */
  .kv-hero__inner { padding-top: var(--space-9); }
  .kv-hero__title { font-size: var(--text-4xl); }
  .kv-hero__lead { font-size: var(--text-base); }
  .kv-hero__media { height: 220px; }
  .kv-hero__actions .kv-btn { width: 100%; }
  .kv-stats { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .kv-sec__title { font-size: var(--text-2xl); }
  .kv-sec--band > .kv-sec__inner { padding: var(--space-10) var(--gutter); }
  .kv-geo__map { display: none; }
  .kv-geo__list { grid-template-columns: 1fr; }
  .kv-about__stats { grid-template-columns: 1fr 1fr; padding: var(--space-7); }
  .kv-about__value { font-size: var(--text-2xl); }
  .kv-contacts { padding: var(--space-10) var(--gutter); gap: var(--space-9); }
  .kv-contacts__phone { font-size: var(--text-xl); }
  .kv-fab { right: var(--space-5); bottom: 76px; }
}

@media print {
  .kv-topbar, .kv-navbar, .kv-footer, .kv-search, .kv-header__tools, .kv-tabbar { display: none !important; }
}

/* =========================================================================
   Оформление заказа (плагин onestepcheckout)

   Разметку отдаёт плагин клиента, её мы не трогаем: ниже только оформление
   по его же классам. В старом шаблоне axeld за это отвечал css/sitogon.css —
   у нас его нет, поэтому страница оставалась без стилей: поля в столбик по
   центру, серые кнопки, «уехавшая» шапка блока.

   Про display ничего не задаём: показ и скрытие шагов (.data-page)
   переключает скрипт плагина.
   ========================================================================= */
.kv-shop #oneStepCheckoutForm { max-width: 860px; margin: 0 auto; }
.kv-shop #oneStepCheckoutForm > .uk-grid { display: grid; gap: var(--space-7); margin: 0; }

.kv-shop #oneStepCheckoutForm .data-step {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}
.kv-shop #oneStepCheckoutForm .data-page > .data-step + .data-step { margin-top: var(--space-7); }

.kv-shop #oneStepCheckoutForm .uk-panel-title.step-header {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-align: left;
  text-transform: none;
}
.kv-shop #oneStepCheckoutForm .uk-panel-title { font-size: var(--text-base); color: var(--text-body); }
.kv-shop #oneStepCheckoutForm .uk-panel-title a { color: var(--text-brand); font-weight: var(--weight-semibold); }
.kv-shop #oneStepCheckoutForm .uk-panel-title span { color: var(--text-muted); font-size: var(--text-sm); }

/* Полоса «Всего к оплате» — она же переключатель мини-корзины. */
.kv-shop #oneStepCheckoutForm .slide-btn.cart-slide {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--border-brand);
  border-radius: var(--radius-card);
  background: var(--surface-brand-soft);
  color: var(--text-strong);
  text-decoration: none;
  cursor: pointer;
}
.kv-shop #oneStepCheckoutForm .slide-btn.cart-slide:hover { background: var(--surface-sunken); }
.kv-shop #oneStepCheckoutForm .fullsumm { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.kv-shop #oneStepCheckoutForm .fullprice {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-brand);
}
.kv-shop #oneStepCheckoutForm .minproducts { display: flex; gap: var(--space-3); margin-left: auto; }
.kv-shop #oneStepCheckoutForm .minimg { width: 34px; height: 34px; object-fit: contain; }
.kv-shop #oneStepCheckoutForm .slide-btn.cart-slide .fas { color: var(--text-muted); }

/* Мини-корзина внутри полосы. */
.kv-shop #oneStepCheckoutForm table.minicart { width: 100%; margin-top: var(--space-6); border-collapse: collapse; }
.kv-shop #oneStepCheckoutForm table.minicart th {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
}
.kv-shop #oneStepCheckoutForm table.minicart td {
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  vertical-align: middle;
}
.kv-shop #oneStepCheckoutForm table.minicart img.uk-thumbnail { width: 52px; height: 52px; object-fit: contain; }
.kv-shop #oneStepCheckoutForm table.minicart .name a { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* Счётчик в мини-корзине. Кнопки — пустые span, значки рисовал axeld. */
.kv-shop #oneStepCheckoutForm .quantity { display: inline-flex; align-items: center; }
.kv-shop #oneStepCheckoutForm .quantity input {
  width: 46px; height: 36px;
  padding: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-strong);
  border: var(--border-width) solid var(--border-default);
  border-left: 0; border-right: 0;
  background: var(--surface-card);
  outline: none;
}
.kv-shop #oneStepCheckoutForm .quantitymore,
.kv-shop #oneStepCheckoutForm .quantityless {
  width: 32px; height: 36px;
  border: var(--border-width) solid var(--border-default);
  background-color: var(--surface-card);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  cursor: pointer;
  transition: var(--transition-control);
}
.kv-shop #oneStepCheckoutForm .quantityless {
  order: -1;
  border-radius: var(--radius-control) 0 0 var(--radius-control);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364798c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.kv-shop #oneStepCheckoutForm .quantitymore {
  order: 1;
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364798c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}
.kv-shop #oneStepCheckoutForm .quantityless:hover,
.kv-shop #oneStepCheckoutForm .quantitymore:hover { background-color: var(--surface-sunken); }

/* Поля адреса. Плагин кладёт каждое поле в свою .uk-grid со span внутри. */
.kv-shop #oneStepCheckoutForm .data-step .uk-grid { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-5); }
.kv-shop #oneStepCheckoutForm .os-value { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.kv-shop #oneStepCheckoutForm .os-value > span:first-child { flex: 1 1 auto; min-width: 0; }
.kv-shop #oneStepCheckoutForm input[type="text"],
.kv-shop #oneStepCheckoutForm input[type="email"],
.kv-shop #oneStepCheckoutForm input[type="tel"],
.kv-shop #oneStepCheckoutForm input[type="date"],
.kv-shop #oneStepCheckoutForm select,
.kv-shop #oneStepCheckoutForm textarea {
  width: 100%;
  /* Общее правило форм магазина ограничивает поля 460 пикселями — здесь
     поле занимает всю строку, ширину держит сама колонка. */
  max-width: 100%;
  min-height: 46px;
  padding: 0 var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  outline: none;
  transition: var(--transition-control);
}
.kv-shop #oneStepCheckoutForm textarea { padding: var(--space-5) var(--space-6); min-height: 92px; line-height: var(--leading-normal); }
.kv-shop #oneStepCheckoutForm input:focus,
.kv-shop #oneStepCheckoutForm select:focus,
.kv-shop #oneStepCheckoutForm textarea:focus { border-color: var(--border-brand); box-shadow: var(--ring-focus); }
.kv-shop #oneStepCheckoutForm input[type="radio"],
.kv-shop #oneStepCheckoutForm input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--action-primary); }

/* Отметка обязательного поля. */
.kv-shop #oneStepCheckoutForm .requiredtext { flex: 0 0 auto; color: var(--red-500); font-size: var(--text-sm); }
/* Звёздочка обязательного поля. У плагина по 25 px отступов с боков —
   58 px в строке, из-за чего она то влезала рядом с полем, то переносилась
   под него, и колонка звёздочек прыгала. Убираем её из потока и ставим
   к правому краю строки — тогда поля занимают всю ширину, а звёздочки
   стоят ровным столбцом. */
.kv-shop #oneStepCheckoutForm .data-step .uk-grid { position: relative; padding-right: 34px; }

/* Только маркер поля: у него есть подсказка. Подпись «— Обязательно для
   заполнения» под формой набрана тем же классом, но это div, и уводить
   её в угол нельзя — она наезжала на первое поле. */
.kv-shop #oneStepCheckoutForm span.requiredtext[rel="tooltip"] {
  position: absolute;
  right: 0;
  top: 14px;
  padding: 0;
}
.kv-shop #oneStepCheckoutForm div.requiredtext {
  position: static;
  padding: 0;
  text-align: right;
  font-size: var(--text-xs);
}

/* Способы доставки и оплаты — карточки с переключателем. */
/* Способы доставки и оплаты. Плагин делает карточки inline-block, и они
   сжимались до ширины подписи — выходил ряд разнокалиберных «таблеток»,
   а значок платёжной системы налезал на текст. Каждый способ — своя строка
   во всю ширину: их выбирают, а не сравнивают глазами по ширине. */
.kv-shop #oneStepCheckoutForm .data-mth {
  display: block;
  width: 100%;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-5);
  transition: var(--transition-control);
}
.kv-shop #oneStepCheckoutForm .data-mth:hover { border-color: var(--border-brand); }
.kv-shop #oneStepCheckoutForm .data-mth.check-in { border-color: var(--border-brand); background: var(--surface-brand-soft); }
/* Внутренность карточки плагин делает inline-block внутри центрированного
   контейнера — подпись вставала посреди широкой карточки. Разворачиваем
   в обычный блок по левому краю. */
.kv-shop #oneStepCheckoutForm .data-mth { text-align: left; }
.kv-shop #oneStepCheckoutForm .data-mth-inner {
  display: block;
  margin: 0;
  padding: var(--space-5) var(--space-6);
}
.kv-shop #oneStepCheckoutForm .shipping_header label,
.kv-shop #oneStepCheckoutForm .payment_header label {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  font-size: var(--text-md);
  color: var(--text-strong);
  cursor: pointer;
}
.kv-shop #oneStepCheckoutForm .payment_image img { max-height: 26px; width: auto; }

/* Переключатель и значок платёжной системы плагин ставит абсолютом — в его
   вёрстке место под них освобождал отступ у подписи. У нас подпись выложена
   флексом, и оба наезжали на текст: «Оплата картой на сайте» читалась
   поверх логотипа. Возвращаем их в поток — флекс расставит сам. */
.kv-shop #oneStepCheckoutForm .shipping_header label > input[type="radio"],
.kv-shop #oneStepCheckoutForm .payment_header label > input[type="radio"],
.kv-shop #oneStepCheckoutForm .shipping_header .shipping_image,
.kv-shop #oneStepCheckoutForm .payment_header .payment_image {
  position: static;
  flex: 0 0 auto;
}

/* Подпись способа — по левому краю карточки, а не по центру строки. */
.kv-shop #oneStepCheckoutForm .shipping_header,
.kv-shop #oneStepCheckoutForm .payment_header { text-align: left; }
.kv-shop #oneStepCheckoutForm .shipping_header label,
.kv-shop #oneStepCheckoutForm .payment_header label { justify-content: flex-start; }

/* Кнопки шагов и подтверждения. */
/* Кнопки шага лежат вне формы и без ограничения расходились по краям окна:
   «Назад» уезжала за левый край. Держим их в той же колонке, что и форма. */
.kv-shop .order-btn-block,
.kv-shop #oneStepCheckoutForm .order-btn-block {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  /* Та же ширина, что у формы, — иначе «Назад» уезжает к краю окна. */
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.kv-shop .btn-step,
.kv-shop #oneStepCheckoutForm .btn-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-control);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
}
.kv-shop .btn-step.btn-order-next,
.kv-shop #oneStepCheckoutForm .btn-step.btn-order-next {
  background: var(--action-primary);
  border-color: var(--action-primary);
  color: var(--text-inverse);
}
.kv-shop .btn-step.disable,
.kv-shop #oneStepCheckoutForm .btn-step.disable { opacity: .45; pointer-events: none; }

.kv-shop #oneStepCheckoutForm .uk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 52px;
  padding: 0 var(--space-10);
  border: var(--border-width) solid var(--action-primary);
  border-radius: var(--radius-control);
  background: var(--action-primary);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-inverse);
  cursor: pointer;
  transition: var(--transition-control);
}
.kv-shop #oneStepCheckoutForm .uk-button:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: #fff; }
.kv-shop #oneStepCheckoutForm .step-finish { display: grid; gap: var(--space-5); justify-items: center; text-align: center; }
.kv-shop #oneStepCheckoutForm .step-finish p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

/* Сообщения об ошибках шага. */
.kv-shop #step2errors,
.kv-shop #step3errors,
.kv-shop #step4errors { color: var(--red-500); font-size: var(--text-sm); }

/* Карточки подкатегорий на разделах без своих товаров. */
.kv-card__note { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-3); }
.kv-card__foot-arrow { color: var(--text-brand); display: flex; }

/* --- Оформление заказа: строки, которые не помещались ------------------- */

/* В строке адреса рядом с полем лежит блок карты (.pic_adress) шириной 560 px.
   Он забирал место, и на «Адрес доставки» оставалось 123 px.

   Переносить надо саму строку, а не .os-value: карта лежит не внутри неё,
   а рядом — оба они дети одной .uk-grid. Без переноса .pic_adress со своим
   «flex: 1 1 100%» съедала строку целиком и сжимала поле. Теперь поле
   занимает первую строку, карта уходит под него. */
.kv-shop #oneStepCheckoutForm .data-step .uk-grid { flex-wrap: wrap; }
.kv-shop #oneStepCheckoutForm .os-value { flex-wrap: wrap; }
.kv-shop #oneStepCheckoutForm .os-value > span:not(.requiredtext) {
  flex: 1 1 240px;
  min-width: 0;
}
.kv-shop #oneStepCheckoutForm .os-value > span:not(.requiredtext) > input,
.kv-shop #oneStepCheckoutForm .os-value > span:not(.requiredtext) > select,
.kv-shop #oneStepCheckoutForm .os-value > span:not(.requiredtext) > textarea { width: 100%; }
.kv-shop #oneStepCheckoutForm .pic_adress {
  flex: 1 1 100%;
  order: 3;
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
}

/* Кнопку «Выбрать на карте» и свёрнутую карту плагин показывает по своим
   правилам, а лежат они в стилях старого шаблона, которых у нас нет. Без них
   кнопка висела абсолютом поверх поля адреса, а пустая карта занимала 300 px
   и оставляла дыру посреди формы. Возвращаем кнопку в поток, карту прячем
   до нажатия — открывает её скрипт клиента, снимая класс close. */
.kv-shop #oneStepCheckoutForm .pic_adress .map-btn {
  position: static;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 40px;
  padding: 0 var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: var(--transition-control);
}
.kv-shop #oneStepCheckoutForm .pic_adress .map-btn:hover {
  border-color: var(--border-brand);
  color: var(--text-brand);
}
.kv-shop #oneStepCheckoutForm .pickmap {
  flex: 1 1 100%;
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.kv-shop #oneStepCheckoutForm .pickmap.close { display: none; }

/* Поле адреса плагин сжимает до 80 % селектором по двум id — обычному классу
   такое не перебить, поэтому и здесь селектор по id. А содержимое шага формы
   он центрирует, из-за чего поле вставало посреди строки, не совпадая по
   левому краю с телефоном и городом. Выравниваем поля влево — только поля,
   кнопки шага пусть остаются как есть. */
.kv-shop #oneStepCheckoutForm .os-value,
.kv-shop #oneStepCheckoutForm .os-name { text-align: left; }

/* Поле комментария плагин сужает до 80 % и центрирует обёрткой — из-за неё
   оно не совпадало по краям с полем адреса прямо над собой. */
.kv-shop #oneStepCheckoutForm .addinfohide { width: 100%; margin: 0; }

/* Дату и время доставки плагин раскладывает флоатами с процентными
   отступами. Строка у нас флексовая, и эти отступы сдвигали пару вправо,
   отрывая её от остальных полей формы. */
.kv-shop #oneStepCheckoutForm div#tr_field_ext_field_3,
.kv-shop #oneStepCheckoutForm div#tr_field_fax {
  position: relative;
  float: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.kv-shop #oneStepCheckoutForm div#tr_field_ext_field_3 .os-value,
.kv-shop #oneStepCheckoutForm div#tr_field_fax .os-value { width: 100%; }

/* Звёздочку у этой пары уводим к правому краю строки: в колонке она иначе
   встаёт отдельной строкой под полем и растит блок. */
.kv-shop #oneStepCheckoutForm div#tr_field_ext_field_3 span.requiredtext[rel="tooltip"],
.kv-shop #oneStepCheckoutForm div#tr_field_fax span.requiredtext[rel="tooltip"] {
  position: absolute;
  right: 0;
  bottom: 14px;
}
.kv-shop #oneStepCheckoutForm #tr_field_ext_field_2 textarea#ext_field_2 {
  width: 100%;
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control) !important;
}
.kv-shop #oneStepCheckoutForm .closemap-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.kv-shop #oneStepCheckoutForm .requiredtext { order: 2; }

/* Отметка обязательного поля. Плагин ставит <i class="uk-icon-warning">, но
   шрифта UIkit на сайте нет — выходил чужой значок. Рисуем звёздочку. */
.kv-shop #oneStepCheckoutForm .requiredtext i { display: none; }
.kv-shop #oneStepCheckoutForm .requiredtext::before {
  content: "*";
  color: var(--red-500);
  font-size: 18px;
  line-height: 1;
}

/* Подпись слева от поля — у даты и времени доставки. */
.kv-shop #oneStepCheckoutForm .os-name {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Дата и время доставки стоят в двух половинах строки — на узком экране
   пусть переносятся, а не сжимаются до нечитаемого. */
.kv-shop #oneStepCheckoutForm .check_repeat { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.kv-shop #oneStepCheckoutForm .check_repeat > .uk-grid { flex: 1 1 100%; }
.kv-shop #oneStepCheckoutForm .check_repeat > #tr_field_ext_field_3,
.kv-shop #oneStepCheckoutForm .check_repeat > #tr_field_fax { flex: 1 1 300px; }

/* Кнопка «Выбрать на карте» и крестик закрытия карты. */
.kv-shop #oneStepCheckoutForm .slide-btn.map-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 40px;
  padding: 0 var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
}
.kv-shop #oneStepCheckoutForm .slide-btn.map-btn:hover { border-color: var(--border-brand); color: var(--text-brand); }

/* Модуль ajax-корзины (позиция cart21). Нужен ради своей логики: он кладёт
   товар без перезагрузки и выдвигает панель .extern_wrap. Собственный
   значок корзины у него прячем — в шапке есть свой. */
.kv-legacy--cart21 { position: relative; }
/* Место в потоке модулю не нужно: панель .extern_wrap внутри — position:fixed,
   поэтому схлопываем контейнер, но overflow оставляем видимым. */
.kv-legacy--cart21 .ajax_cart_wl { height: 0; overflow: visible; }
/* !important — у модуля своё правило из четырёх классов, иначе не перебить. */
.kv-legacy--cart21 .mycart_wrapp .mini_cart_img { display: none !important; }

/* Плитка категорий на странице каталога: разделы крупнее, подкатегории мельче. */
.kv-tags--catalog { margin-bottom: var(--space-8); }

/* На узком экране в строку помещается одна плитка, и свёрнутый список
   выглядел как «Подарочные сертификаты» и «Ещё 17». Оставляем три ряда. */
@media (max-width: 640px) {
  .kv-tags.is-collapsed { max-height: 124px; }
  .kv-cattiles.is-collapsed { max-height: 134px; }
}
.kv-tag--sub {
  height: 30px;
  padding: 0 var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.productscatalog .kv-lead { margin: 0 0 var(--space-7); max-width: 820px; }

/* =========================================================================
   Постраничная навигация

   Разметку отдаёт Joomla: nav.pagination__wrapper > ul.pagination >
   li.page-item > a.page-link. Прежние правила были написаны под другую
   разметку и не применялись — список выводился маркерами в столбик.
   ========================================================================= */
.kv-pagination { margin-top: var(--space-9); }
.kv-pagination .pagination__wrapper { display: flex; justify-content: center; }
.kv-pagination ul.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kv-pagination li.page-item { display: flex; margin: 0; }
.kv-pagination .page-link {
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-control);
}
.kv-pagination a.page-link:hover { border-color: var(--border-brand); color: var(--text-brand); }
.kv-pagination .active .page-link {
  background: var(--action-primary);
  border-color: var(--action-primary);
  color: var(--text-inverse);
}
.kv-pagination .disabled .page-link { opacity: .4; }
/* Стрелки «в начало/назад/вперёд/в конец» — у Joomla это шрифтовые значки,
   которых в шаблоне нет. Рисуем стрелки текстом. */
.kv-pagination [class*="icon-angle"] { font-size: 0; line-height: 1; }
.kv-pagination .icon-angle-double-left::before { content: "\00AB"; font-size: 15px; }
.kv-pagination .icon-angle-left::before { content: "\2039"; font-size: 19px; }
.kv-pagination .icon-angle-right::before { content: "\203A"; font-size: 19px; }
.kv-pagination .icon-angle-double-right::before { content: "\00BB"; font-size: 15px; }

/* =========================================================================
   Панель корзины модуля — в оформлении сайта

   Разметку и логику даёт модуль (позиция cart21), мы её не трогаем:
   ниже только оформление по его классам.
   ========================================================================= */
.kv-legacy--cart21 .extern_wrap {
  width: 100%;
  max-width: 380px;
  border: 0;
  border-left: var(--border-width) solid var(--border-subtle);
  box-shadow: -18px 0 48px rgba(11, 58, 88, .16);
  background: var(--surface-page);
  margin-top: 0;
  /* display не трогаем: показом панели управляет сам модуль — он ставит
     инлайновый display:block. Своё значение здесь держало бы её открытой. */
  font-family: var(--font-ui);
}
.kv-legacy--cart21 .extern_wrap .btn-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--border-width) solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-muted);
  z-index: 2;
}
.kv-legacy--cart21 .extern_wrap .btn-close:hover { color: var(--text-brand); border-color: var(--border-brand); }
.kv-legacy--cart21 .extern_content {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 56px var(--space-6) var(--space-6);
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.kv-legacy--cart21 .extern_row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.kv-legacy--cart21 .extern_row img { width: 56px; height: 56px; object-fit: contain; }
.kv-legacy--cart21 .extern_row a { color: var(--text-strong); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
.kv-legacy--cart21 .extern_row .summ { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text-strong); white-space: nowrap; }
.kv-legacy--cart21 .extern_row .minus_quantity,
.kv-legacy--cart21 .extern_row .plus_quantity {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-body);
  cursor: pointer;
}
.kv-legacy--cart21 .extern_row input { width: 40px; height: 26px; text-align: center; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-control); }
.kv-legacy--cart21 .extern_bottom {
  padding: var(--space-6);
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--surface-card);
  display: grid;
  gap: var(--space-5);
}
.kv-legacy--cart21 .extern_bottom .total { font-size: var(--text-sm); color: var(--text-muted); }
.kv-legacy--cart21 .extern_bottom .summ_total,
.kv-legacy--cart21 .extern_bottom .total_qtty { font-family: var(--font-display); font-weight: var(--weight-extrabold); color: var(--text-strong); }
.kv-legacy--cart21 .extern_wrap .gotocart a,
.kv-legacy--cart21 .extern_wrap a.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: var(--radius-control);
  background: var(--action-primary);
  color: var(--text-inverse);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.kv-legacy--cart21 .extern_wrap .gotocart a:hover { background: var(--action-primary-hover); color: #fff; }
.kv-legacy--cart21 .extern_wrap .error_min_max_price_order,
.kv-legacy--cart21 .extern_wrap .minmaxprice { color: var(--red-500); font-size: var(--text-sm); }

/* =========================================================================
   Панель подбора (фильтры) сбоку от списка товаров
   ========================================================================= */
.kv-layout--flush { max-width: none; margin: 0; padding: 0; }
.kv-filters { gap: var(--space-6); }
.kv-filters__group {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-subtle);
}
.kv-filters__group:first-of-type { padding-top: 0; border-top: 0; }
.kv-filters__name {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kv-filters__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-body);
  cursor: pointer;
}
.kv-filters__row input { width: 16px; height: 16px; accent-color: var(--action-primary); cursor: pointer; }
.kv-filters__price { display: flex; align-items: center; gap: var(--space-4); }
.kv-filters__price input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  outline: none;
}
.kv-filters__price input:focus { border-color: var(--border-brand); box-shadow: var(--ring-focus); }
.kv-filters__actions { display: flex; align-items: center; gap: var(--space-5); }
.kv-filters__reset {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kv-filters__reset:hover { color: var(--text-brand); }

/* =========================================================================
   Значки Joomla и аддона кабинета

   Joomla помечает свои иконки классами icon-*, а рисует их шрифтом, который
   подключала прежняя тема. У нас его не было — кнопки выходили пустыми
   рамками. Самая заметная из них — «показать пароль» справа от поля пароля
   в кабинете. Подставляем те же знаки из FontAwesome, он уже подключён.
   ========================================================================= */
.icon-eye::before,
.icon-eye-slash::before,
.icon-eye-close::before,
.icon-checkbox::before,
.icon-checkbox-unchecked::before,
.icon-plus::before,
.icon-minus::before,
.icon-save::before,
.icon-cancel::before,
.icon-delete::before,
.icon-trash::before,
.icon-user::before,
.icon-lock::before,
.icon-calendar::before,
.icon-search::before {
  font-family: 'FontAwesome';
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  line-height: 1;
}
.icon-eye::before { content: "\f06e"; }
.icon-eye-slash::before,
.icon-eye-close::before { content: "\f070"; }
.icon-checkbox::before { content: "\f14a"; }
.icon-checkbox-unchecked::before { content: "\f0c8"; }
.icon-plus::before { content: "\f067"; }
.icon-minus::before { content: "\f068"; }
.icon-save::before { content: "\f0c7"; }
.icon-cancel::before { content: "\f00d"; }
.icon-delete::before,
.icon-trash::before { content: "\f2ed"; }
.icon-user::before { content: "\f007"; }
.icon-lock::before { content: "\f023"; }
.icon-calendar::before { content: "\f133"; }
.icon-search::before { content: "\f002"; }

/* Кнопка показа пароля: Joomla ставит её рядом с полем отдельным блоком. */
.kv-shop joomla-field-password,
.kv-content joomla-field-password { display: flex; align-items: center; gap: var(--space-4); width: 100%; }
.kv-shop joomla-field-password input,
.kv-content joomla-field-password input { flex: 1 1 auto; min-width: 0; }
.kv-shop .input-password-toggle,
.kv-content .input-password-toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-muted);
  cursor: pointer;
}
.kv-shop .input-password-toggle:hover,
.kv-content .input-password-toggle:hover { border-color: var(--border-brand); color: var(--text-brand); }

/* «Добавить» рядом с заголовком «Другой адрес доставки» — ссылка аддона. */
.kv-shop a.addad,
.kv-shop a.addsave,
.kv-shop a.add_del {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 36px;
  padding: 0 var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
}
.kv-shop a.addad:hover,
.kv-shop a.addsave:hover { border-color: var(--border-brand); color: var(--text-brand); }
.kv-shop a.add_del:hover { border-color: var(--red-500); color: var(--red-500); }

/* =========================================================================
   Оформление заказа: способы оплаты и блок «Возможно у вас заканчивается»
   ========================================================================= */

/* У способа оплаты рамку рисуем только снаружи: плагин подкрашивал ещё и
   саму подпись, из-за чего выходила «коробка в коробке». */
.kv-shop #oneStepCheckoutForm .payment_header label,
.kv-shop #oneStepCheckoutForm .shipping_header label {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Карусель товаров под кнопкой заказа. Ширину карточки считает скрипт
   модуля — на нашей ширине выходит около 143 px, и подписи ломались по
   одному слову в строку. Меняем не ширину (иначе собьётся его подсчёт
   страниц), а содержимое карточки: мельче шрифт, ниже картинка, подпись
   в две строки. */
.kv-shop .we_carusel { margin-top: var(--space-6); }

/* Скрипт модуля рассчитан на шесть видимых карточек, а товаров в блоке
   пять — при таком раскладе jCarouselLite считает ширины неверно, и
   карточки обрезались по краям полосы. Листать всё равно нечего, поэтому
   показываем товары обычной сеткой, а стрелки убираем. Инлайновые размеры,
   которые проставил скрипт, приходится перебивать !important — иначе они
   сильнее любого правила. */
/* Скрипт для кольцевой прокрутки клонирует карточки, и в сетке клоны
   вылезали вторым рядом. Отличить клон от товара нельзя — поэтому сетке
   задан ровно один ряд: первый берёт высоту по содержимому, все следующие
   получают нулевую и обрезаются. Виден один ряд настоящих товаров. */
.kv-shop .wec-wrapper { overflow: hidden !important; height: auto !important; }
.kv-shop .wec-items {
  position: static !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: 0;
  gap: var(--space-5);
}
.kv-shop .wec-items > li {
  width: auto !important;
  height: auto !important;
  float: none !important;
  /* Клоны попадают в ряды нулевой высоты — содержимое режется по ним. */
  overflow: hidden !important;
}
.kv-shop .wec_nav { display: none; }
.kv-shop .wec-block { padding: 0 var(--space-3); }
.kv-shop .wec-block .item {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  text-align: center;
}
.kv-shop .wec-block .catimg { display: block; }
.kv-shop .wec-block .catimg img {
  width: 100%;
  height: 92px;
  object-fit: contain;
}
.kv-shop .wec-block .item_info { flex: 1 1 auto; min-height: 0; }
.kv-shop .wec-block .item_info a,
.kv-shop .wec-block .name a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--text-strong);
  text-decoration: none;
}
.kv-shop .wec-block .item_price,
.kv-shop .wec-block .jshop_price {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.kv-shop .wec-block .buttons { margin-top: auto; }
.kv-shop .wec-block .button_buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
  border-radius: var(--radius-control);
  background: var(--action-primary);
  border: 0;
  color: var(--text-inverse);
  font-size: var(--text-xs);
  text-decoration: none;
}
.kv-shop .wec-block .button_buy:hover { background: var(--action-primary-hover); color: #fff; }

/* Стрелки карусели. */
.kv-shop .wec_nav .arrow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-muted);
  text-decoration: none;
}
.kv-shop .wec_nav .arrow a:hover { border-color: var(--border-brand); color: var(--text-brand); }
.kv-shop .order_module h3 {
  margin: var(--space-9) 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-strong);
}

/* Баллы в карточке товара. Разметку даёт бонусный плагин, оформляем по его
   же классам: строка начисления и строка допустимого списания. */
.kv-buybox .product_bonus {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-card);
  background: var(--amber-50, #fff8e6);
  border: var(--border-width) solid var(--amber-200, #f5dfa6);
  font-size: var(--text-sm);
  color: var(--text-body);
}
.kv-buybox .product_bonus .block_bonus {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  color: #8a5a00;
}

/* Залог за тару — подсказка в блоке покупки для воды в оборотной таре. */
.kv-deposit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-card);
  background: var(--surface-brand-soft);
  border: var(--border-width) solid var(--border-brand);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.kv-deposit__icon { flex: 0 0 auto; display: flex; color: var(--text-brand); }
.kv-deposit__link {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   Всплывающие окна: обратный звонок, вход, быстрый заказ
   =========================================================================
   Содержимое — модули клиента, те же, что открывались на старом сайте
   плагином arcticmodal. Здесь только оболочка и свой скрипт: тянуть чужой
   плагин ради одного окна незачем. */

.kv-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
/* Атрибут hidden — это всего лишь display:none из стилей браузера, и любой
   свой display его перебивает. Без этой строки окно висело раскрытым
   на каждой странице. */
.kv-modal[hidden] { display: none; }

/* Окно просмотра документа Phoca.

   Оно размечено под Bootstrap, а стилей бутстрапа в шаблоне нет — без
   правила display:none окно висело раскрытым внизу страницы сертификатов:
   пустая рамка с заголовком «Заголовок» и кнопкой «Закрыть», которая
   ничего не закрывала. Скрипт бутстрапа на странице есть и сам добавляет
   класс show, так что достаточно вернуть недостающие стили. Заодно даём
   рамке просмотра нормальную высоту: iframe с height="100%" без CSS
   схлопывался, и документ открывался нечитаемо мелким. */
.kv-content .modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  overflow: auto;
  background: rgba(10, 30, 41, .55);
}
.kv-content .modal.show { display: block; }
.kv-content .modal-dialog {
  max-width: min(1040px, calc(100vw - 32px));
  margin: 4vh auto;
}
.kv-content .modal-content {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  overflow: hidden;
}
.kv-content .modal-header,
.kv-content .modal-footer {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
}
.kv-content .modal-header { border-bottom: var(--border-width) solid var(--border-subtle); }
.kv-content .modal-footer { border-top: var(--border-width) solid var(--border-subtle); justify-content: flex-end; }
.kv-content .modal-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); }
.kv-content .modal-body { padding: 0; }
.kv-content .modal-body iframe { display: block; width: 100%; height: 76vh; border: 0; }
.kv-content .btn-close {
  width: 36px; height: 36px; margin-left: auto; padding: 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-body);
  cursor: pointer;
}
.kv-content .btn-close::before { content: "\00D7"; font-size: 20px; line-height: 1; }
.kv-content .btn-close:hover { border-color: var(--border-brand); color: var(--text-brand); }
.kv-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 41, .55);
}
.kv-modal__box {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 2 * var(--space-6));
  overflow-y: auto;
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  padding: var(--space-8);
}
.kv-modal__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-control);
}
.kv-modal__close:hover { background: var(--surface-brand-soft); color: var(--text-brand); }
.kv-modal__body { padding-top: var(--space-4); }
/* В форме клиента первое поле выключено (disabled) — оно осталось с старого
   сайта и не отправляется. В окне оно выглядело пустым квадратом со звёздочкой,
   поэтому прячем сам блок. Браузер без :has() просто покажет как было. */
[data-kv-modal="callback"] .rsform-block:has(input[disabled]) { display: none; }

/* Блок reCAPTCHA в форме есть, а виджет не рисуется — ключи не заданы,
   и в окне оставалась пустая строка со звёздочкой. Прячем. Насовсем поле
   убирается в самой форме: RSForm → «Вопросы» → поля. */
[data-kv-modal="callback"] .rsform-block-recaptcha,
[data-kv-modal="callback"] [class*="rsform-type-recaptcha"] { display: none; }

.kv-modal__done {
  margin: 0;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--status-instock-bg);
  color: var(--green-700);
  font-weight: var(--weight-semibold);
}

.kv-modal__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.kv-modal__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.kv-modal__foot a { color: var(--text-brand); font-weight: var(--weight-semibold); }

/* Модули клиента внутри окна: их собственная вёрстка рассчитана на широкую
   колонку, поэтому поля и кнопки растягиваем на всю ширину окна. */
.kv-modal__body input[type="text"],
.kv-modal__body input[type="tel"],
.kv-modal__body input[type="email"],
.kv-modal__body input[type="password"],
.kv-modal__body select,
.kv-modal__body textarea { width: 100%; max-width: 100%; }
.kv-modal__body .moduletable { margin: 0; }

/* Пока окно открыто, страница под ним не прокручивается. */
body.kv-modal-open { overflow: hidden; }

@media (max-width: 480px) {
  .kv-modal { padding: var(--space-4); }
  .kv-modal__box { padding: var(--space-7) var(--space-6); }
}

/* ============================ Отзывы и документы ==========================
   Блок отзывов, его пагинация и список документов товара. Раньше здесь была
   стандартная разметка JoomShopping без стилей.
   ------------------------------------------------------------------------ */

/* Врезка про бонус за отзыв: приходит от плагина магазина и раньше читалась
   как часть первого отзыва. */
.kv-reviews__note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px dashed var(--border-strong, #cfd8e3);
  border-radius: var(--radius-lg);
  background: var(--surface-muted, #f6f8fb);
  font-size: var(--text-sm); line-height: 1.5; color: var(--text-body);
}
.kv-reviews__note-icon { color: var(--brand-600, #1478c8); display: flex; flex: 0 0 auto; }
.kv-reviews__note p { margin: 0; }

.kv-review { padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.kv-review:last-of-type { border-bottom: 0; padding-bottom: 0; }
.kv-review__head { align-items: flex-start; }
.kv-review__avatar {
  display: grid; place-items: center;
  background: var(--brand-50, #e8f2fb); color: var(--brand-700, #0f5e9e);
  font-weight: var(--weight-bold); font-size: var(--text-sm);
}
.kv-review__mark { margin-left: auto; }

/* Пагинация: Joomla отдаёт её списком с иконочным шрифтом, которого у нас нет,
   поэтому стрелки рисуем символами. */
.kv-pager { margin-top: var(--space-4); }
.kv-pager nav, .kv-pager .pagination__wrapper { width: 100%; }
.kv-pager ul, .kv-pager .pagination {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.kv-pager .page-item { margin: 0; }
.kv-pager .page-link {
  display: grid; place-items: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 10px);
  background: var(--surface-card);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-body); text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.kv-pager a.page-link:hover { border-color: var(--brand-500, #1a86dd); color: var(--brand-700, #0f5e9e); }
.kv-pager .active .page-link {
  background: var(--brand-600, #1478c8); border-color: var(--brand-600, #1478c8); color: #fff;
}
.kv-pager .disabled .page-link { opacity: .4; }
.kv-pager [class^="icon-angle"]::before { font-family: inherit; font-size: 15px; line-height: 1; }
.kv-pager .icon-angle-left::before { content: "\2039"; }
.kv-pager .icon-angle-right::before { content: "\203A"; }
.kv-pager .icon-angle-double-left::before { content: "\00AB"; }
.kv-pager .icon-angle-double-right::before { content: "\00BB"; }

/* Форма отзыва спрятана под строку-переключатель: она нужна немногим,
   а места занимала больше, чем сами отзывы. */
.kv-review-form { margin-top: var(--space-6); }
.kv-review-form__toggle {
  cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--brand-700, #0f5e9e); list-style: none;
}
.kv-review-form__toggle::-webkit-details-marker { display: none; }
.kv-review-form__toggle::before { content: "+ "; }
.kv-review-form[open] .kv-review-form__toggle::before { content: "‘2 "; }
.kv-review-form__grid { display: grid; gap: 14px; margin-top: var(--space-5); }
.kv-review-form__row { display: grid; gap: 6px; }
.kv-review-form__text {
  width: 100%; min-height: 110px; padding: 12px 14px; resize: vertical;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-card); font: inherit; color: var(--text-body);
}
.kv-review-form__text:focus { outline: none; border-color: var(--brand-500, #1a86dd); }
.kv-review-form__stars { display: flex; gap: 4px; align-items: center; }
.kv-review-form__note { margin: 0; font-size: var(--text-2xs); color: var(--text-muted); }
.kv-review-form__note a { color: inherit; text-decoration: underline; }

/* Документы товара: сертификаты и паспорта качества. */
.kv-docs { display: grid; gap: 10px; }
.kv-doc {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.kv-doc__icon { color: var(--brand-600, #1478c8); display: flex; flex: 0 0 auto; }
.kv-doc__body { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; }
.kv-doc__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.kv-doc__ext { font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: .04em; }
.kv-doc__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.kv-doc__act {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--brand-600, #1478c8); border-radius: var(--radius-md, 10px);
  background: var(--brand-600, #1478c8); color: #fff;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none;
  transition: opacity .15s;
}
.kv-doc__act:hover { opacity: .88; }
.kv-doc__act--ghost { background: transparent; color: var(--brand-700, #0f5e9e); }

@media (max-width: 640px) {
  .kv-doc { align-items: flex-start; }
  .kv-doc__acts { width: 100%; }
  .kv-doc__act { flex: 1 1 auto; justify-content: center; }
}

/* ================================== Блог ==================================
   Список статей: плитки с картинкой, датой и лидом. До этого блог рисовало
   ядро Joomla своими бутстраповскими блоками — без картинок и с разъезжающейся
   пагинацией.
   ------------------------------------------------------------------------ */

.kv-blog { display: grid; gap: var(--space-7); }
.kv-blog__title {
  margin: 0;
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.kv-blog__intro { max-width: 70ch; }
.kv-blog__empty { margin: 0; color: var(--text-muted); }
.kv-blog__counter { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

.kv-posts {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.kv-post {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: box-shadow .18s, transform .18s;
}
.kv-post:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.kv-post__media {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--surface-muted, #f2f5f9);
}
.kv-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.kv-post:hover .kv-post__media img { transform: scale(1.04); }
.kv-post__stub {
  width: 100%; height: 100%;
  display: grid; place-items: center; color: var(--brand-300, #8dc4ea);
}

.kv-post__body { display: grid; gap: 10px; padding: var(--space-6); align-content: start; flex: 1 1 auto; }
.kv-post__date { font-size: var(--text-2xs); color: var(--text-muted); text-transform: lowercase; }
.kv-post__title { margin: 0; font-size: var(--text-lg); line-height: 1.3; font-weight: var(--weight-bold); }
.kv-post__title a { color: var(--text-strong); text-decoration: none; }
.kv-post__title a:hover { color: var(--text-brand); }
.kv-post__text { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text-body); }
.kv-post__more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 4px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-brand);
}
.kv-post:hover .kv-post__more { gap: 8px; }

/* Обложка над текстом статьи */
.kv-article__cover {
  margin: 0 0 var(--space-6); overflow: hidden;
  border-radius: var(--radius-xl); background: var(--surface-sunken);
}
.kv-article__cover img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* Содержимое статей и модулей приходит из редактора, и размеры там нередко
   заданы в пикселях: карта на «Доставке» — 843 px, таблица с иконками
   оплаты — 401 px. На телефоне из-за этого появлялась прокрутка вбок. */
.kv-article iframe,
.kv-article embed,
.kv-article video,
.custom iframe { max-width: 100%; }
.kv-article table { max-width: 100%; }
.kv-article table img { max-width: 100%; height: auto; }

.kv-pager--blog { justify-self: start; }
.kv-pager--blog .pagination { justify-content: flex-start; }

@media (max-width: 640px) {
  .kv-posts { grid-template-columns: minmax(0, 1fr); }
  .kv-blog__title { font-size: var(--text-2xl); }
}

/* Пустой результат поиска: подсказка и выход, а не тупик. */
.kv-empty {
  display: grid; gap: 10px; justify-items: start;
  padding: var(--space-8);
  border: 1px dashed var(--border-default); border-radius: var(--radius-xl);
  background: var(--surface-muted, #f6f8fb);
}
.kv-empty__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-strong); }
.kv-empty__text { margin: 0; font-size: var(--text-sm); color: var(--text-body); max-width: 60ch; }
.kv-empty__acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }

/* ===================== Карточка товара на телефоне ========================
   В две колонки карточка узкая, и строка «счётчик + В корзину» не помещалась:
   кнопка выезжала за край блока. Счётчик сжимается, кнопка остаётся значком.
   ------------------------------------------------------------------------ */
@media (max-width: 720px) {
  .kv-buyrow { gap: 8px; align-items: center; }

  /* Счётчик и кнопки на телефоне настраиваются в конце файла: базовые
     правила для них добавлены ниже этого блока, и при равной силе
     селектора отсюда они бы не сработали. */
}

/* Ничто в карточке не должно расширять её и вызывать горизонтальную прокрутку. */
.kv-card, .kv-card * { min-width: 0; }
.kv-card__name, .kv-card__title { overflow-wrap: anywhere; }

/* На странице товара JoomShopping рисует собственные кнопки «−» и «+» рядом
   с нашим счётчиком: они дублировали его и сдвигали «Итого» с ценой вправо.
   В карточке каталога эти же кнопки, наоборот, и работают счётчиком, поэтому
   прячем их только здесь. */
.kv-total .product_minus,
.kv-total .product_plus { display: none; }
.kv-total .kv-stepper input { width: 34px; }

/* ================= Мелочи мобильной вёрстки ===============================
   Строка сортировки и логотип в закреплённой полосе.
   ------------------------------------------------------------------------ */
@media (max-width: 720px) {
  /* Подпись «Сортировка» на телефоне занимает половину строки, и выпадающий
     список количества переносился на вторую. Значение селекта и так говорит,
     что это сортировка; подпись остаётся в title. */
  .kv-listbar__controls > .kv-listbar__field > .kv-listbar__label { display: none; }
  .kv-listbar__controls { flex-wrap: nowrap; }
  .kv-listbar__controls > .kv-listbar__field { min-width: 0; }
  .kv-listbar__controls > .kv-listbar__field:first-child { flex: 1 1 auto; }
  .kv-listbar__controls > .box_products_count_to_page { flex: 0 0 auto; }
}

/* Название в закреплённой полосе обрезалось посреди слова. Даём многоточие,
   а на совсем узких экранах оставляем один знак — он и ведёт на главную. */
.kv-navbar__logo { min-width: 0; }
.kv-navbar__logo span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 420px) {
  .kv-navbar__logo span { display: none; }
}

/* ================== Формы внутри всплывающих окон =========================
   Внутри окон живут модули клиента — вход по телефону, обратный звонок,
   быстрый заказ. Свой вид у них остался от старого шаблона: зелёные рамки,
   мелкие кнопки. Сами модули не трогаем, приводим к общему виду отсюда.
   ------------------------------------------------------------------------ */
.kv-modal__body { display: grid; gap: var(--space-5); }
.kv-modal__body .module,
.kv-modal__body .mainSmsForm { display: grid; gap: 12px; margin: 0; }
.kv-modal__body form { margin: 0; }

/* RSForm (быстрый заказ и обратный звонок) рисует поле, звёздочку
   обязательности и подпись ошибки соседними элементами. Сеткой их делать
   нельзя — звёздочка уезжает на свою строку. */
.kv-modal__body .formRow,
.kv-modal__body .formSpan12 { display: grid; gap: 12px; }
.kv-modal__body .rsform-block { margin: 0; }
.kv-modal__body .formBody { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Ширину задаёт flex, а не width: иначе поле занимает всю строку и
   звёздочка обязательности переносится под него. */
.kv-modal__body .formBody > input,
.kv-modal__body .formBody > textarea,
.kv-modal__body .formBody > select { flex: 1 1 0; width: auto; min-width: 0; }
.kv-modal__body .formRequired { flex: 0 0 auto; color: var(--red-500, #e05a4f); font-weight: var(--weight-bold); }
.kv-modal__body .formNoError { display: none; }
.kv-modal__body .formDescription:empty { display: none; }
.kv-modal__body .formDescription { margin: 0; width: 100%; }

.kv-modal__body input[type="text"],
.kv-modal__body input[type="tel"],
.kv-modal__body input[type="email"],
.kv-modal__body input[type="password"],
.kv-modal__body input[type="number"],
.kv-modal__body textarea,
.kv-modal__body select {
  width: 100%; box-sizing: border-box;
  height: 44px; padding: 0 14px;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font: inherit; font-size: var(--text-sm); color: var(--text-body);
  transition: var(--transition-control);
}
.kv-modal__body textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.kv-modal__body input:focus,
.kv-modal__body textarea:focus,
.kv-modal__body select:focus { outline: none; border-color: var(--border-brand); }

.kv-modal__body input[type="submit"],
.kv-modal__body button[type="submit"],
.kv-modal__body .rsform-submit-button,
.kv-modal__body .btn,
.kv-modal__body .button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 46px; padding: 0 var(--space-6);
  border: none; border-radius: var(--radius-control);
  background: var(--action-primary); color: var(--text-inverse);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer; transition: var(--transition-control);
}
.kv-modal__body input[type="submit"]:hover,
.kv-modal__body button[type="submit"]:hover,
.kv-modal__body .rsform-submit-button:hover,
.kv-modal__body .btn:hover,
.kv-modal__body .button:hover { filter: brightness(1.06); }

/* Служебные подписи и ссылки-переключатели («Войти по номеру телефона»). */
.kv-modal__body .top_text,
.kv-modal__body .top_login_text {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-strong); text-align: left;
}
.kv-modal__body .jsms_return_buttons,
.kv-modal__body .goto_standart,
.kv-modal__body .goto_sms { text-align: center; font-size: var(--text-sm); }
.kv-modal__body .jsms_return_buttons a { color: var(--text-brand); }
.kv-modal__body .err_j_phone:not(:empty) {
  padding: 10px 12px; border-radius: var(--radius-control);
  background: var(--red-50, #fdeced); color: var(--red-600, #c0392b);
  font-size: var(--text-sm);
}
.kv-modal__body .social_buttons_wrapper { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Кнопка отправки RSForm: её собственные стили специфичнее наших,
   поэтому здесь селектор длиннее. */
.kv-modal__body form .rsform-submit-button,
.kv-modal__body .rsform .rsform-submit-button { width: 100%; height: 46px; }
.kv-modal__body .rsform-block-submit .formBody,
.kv-modal__body .rsform-type-submitbutton .formBody { display: block; }

/* ============== Хвосты мобильной вёрстки со скриншотов клиента ============
   Строка цены в узкой карточке и таблицы кабинета.
   ------------------------------------------------------------------------ */

/* Со скидкой в строке три части: подпись, старая цена и новая. В узкой
   карточке они переносились как попало — «640» отрывалось от «₽».
   Разрешаем перенос между частями и запрещаем внутри каждой. */
.kv-card__foot { flex-wrap: wrap; gap: 2px var(--space-4); }
.kv-card__foot > span:last-child { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kv-price, .kv-price--old, .kv-card__foot-label { white-space: nowrap; }

/* Таблицы кабинета: бонусы, блокнот, список групп. На телефоне пять колонок
   не помещаются, и вбок уезжала вся страница. Теперь ездит только таблица. */
@media (max-width: 900px) {
  .eac_orders,
  .eac_bloknot,
  .eac_groups_list {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
  }
  .eac_orders > tbody,
  .eac_bloknot > tbody,
  .eac_groups_list > tbody {
    display: table; width: 100%; min-width: 520px;
  }
  .eac_orders th, .eac_orders td { white-space: normal; }
}

/* ============ Порядок блоков карточки товара на телефоне ==================
   На широком экране описание стоит в левой колонке, под галереей, — так
   заполняется пустота рядом с высоким блоком покупки. Но в одну колонку
   это ставит цену и «В корзину» после всего описания, и до кнопки нужно
   прокрутить экран текста. На телефоне порядок другой:
   галерея → цена и покупка → преимущества → описание.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .kv-product__left { display: contents; }
  .kv-product > .kv-product__left > .kv-product__gallery { order: 1; }
  .kv-product > .kv-product__aside { order: 2; }
  .kv-product > .kv-product__left > .kv-perks { order: 3; }
  .kv-product > .kv-product__left > .kv-product__desc { order: 4; }
}

/* ========================= Страница сертификатов =========================
   Галерею рисует Phoca Gallery. Её собственных стилей в шаблоне нет, и
   девять сертификатов шли в столбик карточками во всю ширину по 428 px
   высотой, а сама картинка внутри была 100×100. Приводим к сетке.
   ------------------------------------------------------------------------ */

.pg-cv .pg-category-desc { max-width: 70ch; }

/* Лента RSS на странице сертификатов ни к чему — иконка занимала 300 px. */
.pg-cv .pg-top-icons,
.pg-cv a[href*="format=feed"] { display: none; }

.pg-cv .pg-category-items-box {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Контейнер размечен как masonry: скрипт галереи расставляет карточки
   абсолютно и задаёт им размеры прямо в атрибуте. Сетке это мешает. */
.pg-cv .pg-category-items-box,
.pg-cv .pg-item-box {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important; top: auto !important;
  transform: none !important;
}

.pg-cv .pg-item-box {
  display: flex; flex-direction: column; overflow: hidden;
  margin: 0; padding: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: box-shadow .18s, transform .18s;
}
.pg-cv .pg-item-box:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.pg-cv .pg-item-box figure { margin: 0; }
/* Плитка фиксированной высоты, картинка вписывается целиком. Сетка здесь
   не годится: max-height у элемента сетки считается от дорожки, а она растёт
   по содержимому — картинка вылезала за плитку. */
.pg-cv .pg-item-box-image {
  display: flex; align-items: center; justify-content: center;
  height: 240px; padding: var(--space-5); overflow: hidden;
  background: var(--surface-muted, #f5f8fb);
}
.pg-cv .pg-image {
  width: auto !important; height: auto !important;
  max-width: 100%; max-height: 100%;
  object-fit: contain; box-shadow: none; border-radius: var(--radius-md, 8px);
}
.pg-cv figcaption { display: none; }

.pg-cv .pg-item-box-info { padding: var(--space-5); display: grid; gap: 8px; }
.pg-cv .pg-item-box-title {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong);
}
.pg-cv .pg-item-box-title a { color: inherit; text-decoration: none; }
.pg-cv .pg-item-box-icons-box { display: flex; gap: 10px; align-items: center; }
.pg-cv .pg-item-box-icons-box a { color: var(--text-brand); display: inline-flex; }
.pg-cv .ph-si { width: 18px; height: 18px; }

/* -------------------- Свой просмотрщик документов ------------------------
   Phoca открывает не оригинал, а миниатюру phoca_thumb_l_* высотой 480 px —
   сертификат в ней нечитаем. Показываем оригинал во весь экран.
   ------------------------------------------------------------------------ */
.kv-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(9, 22, 38, .92);
}
.kv-lightbox[hidden] { display: none !important; }
.kv-lightbox__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; color: #fff;
}
.kv-lightbox__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.kv-lightbox__count { font-size: var(--text-xs); opacity: .7; }
.kv-lightbox__body {
  display: flex; align-items: center; justify-content: center;
  padding: 0 18px; min-height: 0; overflow: auto;
}
.kv-lightbox__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-md, 8px); background: #fff;
}
.kv-lightbox__foot { display: flex; justify-content: center; gap: 10px; padding: 16px; }
.kv-lightbox__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1);
  color: #fff; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer; text-decoration: none;
}
.kv-lightbox__btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.kv-lightbox__btn[disabled] { opacity: .35; cursor: default; }
.kv-lightbox__close {
  width: 40px; height: 40px; padding: 0; justify-content: center; flex: 0 0 auto;
}
body.kv-lightbox-open { overflow: hidden; }

@media (max-width: 640px) {
  .pg-cv .pg-category-items-box { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pg-cv .pg-item-box-image { height: 170px; }
  .kv-lightbox__body { padding: 0 8px; }
}

/* Выключка по формату задана в самих статьях. На узком экране русские слова
   длинные, и между ними расходятся дыры в полстроки — читать тяжело.
   На телефоне выравниваем по левому краю. */
@media (max-width: 640px) {
  .kv-content [style*="justify"],
  .kv-article [style*="justify"],
  .pg-cv [style*="justify"] { text-align: left !important; }
}

/* --------------------------------------------------------------------------
   Верхняя полоса на самых узких экранах
   -------------------------------------------------------------------------- */
/* Строка остаётся одной, но плотнее: меньше шрифт, поля и значки. Подпись
   повтора при нехватке места обрезается многоточием — страница не должна
   ехать вбок ни при какой ширине экрана. */
@media (max-width: 374px) {
  .kv-topbar__inner { font-size: 11px; gap: 6px; }
  .kv-topbar__group { gap: 6px; }
  .kv-topbar__bonus, .kv-topbar__reorder { padding: 0 7px; gap: 4px; }
  .kv-topbar__reorder-text { min-width: 0; }
  .kv-topbar .kv-social { gap: 5px; }
  .kv-topbar .kv-social__link { width: 22px; height: 22px; }
}

/* ================= Окно быстрого заказа ==================================
   Форма приходит модулем клиента (RSForm) и рисует поле, звёздочку
   обязательности и подпись ошибки соседями в одной строке. В окне это
   выглядело набором безымянных рамок с красными звёздочками сбоку, а
   согласие на обработку данных стояло ниже кнопки, за краем видимой части.
   Модуль не трогаем — приводим к виду сайта отсюда.
   ------------------------------------------------------------------------ */

/* Свой файл стилей шаблон подключает раньше, чем RSForm — свой. При равной
   силе селектора выигрывает тот, что идёт позже, поэтому поля в окнах
   оставались с видом по умолчанию: рамка 1 px серого, скругление 3 px,
   высота в полторы строки. Здесь селекторы длиннее ровно настолько, чтобы
   перевесить, — сам модуль по-прежнему не трогаем. */
/* Отступ слева под подпись поля: RSForm держит там колонку в 22% ширины,
   хотя подписей в этих формах нет — поля просто стояли отодвинутыми вправо
   и не совпадали по левому краю ни с заголовком окна, ни с кнопкой. */
[data-kv-modal] .formResponsive .formHorizontal .formControls,
[data-kv-modal] form.formResponsive .formControls { margin-left: 0; }
[data-kv-modal] .formResponsive .formBody { margin: 0; }
[data-kv-modal] form.formResponsive .rsform-block { margin-left: 0; margin-right: 0; }

[data-kv-modal] .formResponsive input[type="text"],
[data-kv-modal] .formResponsive input[type="email"],
[data-kv-modal] .formResponsive input[type="tel"],
[data-kv-modal] .formResponsive input[type="number"],
[data-kv-modal] .formResponsive textarea {
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-body);
  box-shadow: none;
  transition: var(--transition-control);
}
/* У поля адреса в форме стоит rows="5" — в окне это половина экрана,
   и кнопка отправки уходила за нижний край. */
[data-kv-modal] .formResponsive textarea {
  height: 92px;
  min-height: 92px;
  padding: 12px 14px;
  resize: vertical;
}
[data-kv-modal] .formResponsive input[type="text"]:focus,
[data-kv-modal] .formResponsive input[type="email"]:focus,
[data-kv-modal] .formResponsive input[type="tel"]:focus,
[data-kv-modal] .formResponsive textarea:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: none;
}
[data-kv-modal] .formResponsive .rsform-submit-button {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  border: none;
  border-radius: var(--radius-control);
  background: var(--action-primary);
  color: var(--text-inverse);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-shadow: none;
  box-shadow: none;
}

.kv-modal__head { display: grid; gap: var(--space-2); }
.kv-modal__head .kv-modal__title { margin: 0; }
.kv-modal__lead {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-muted);
}

/* Порядок блоков. Согласие («rsform-block-header» с текстом) магазин ставит
   после кнопки — человек нажимал «Отправить», не увидев его. Поднимаем над
   кнопкой, саму кнопку опускаем в конец. */
[data-kv-modal="onebuy"] .formSpan12 > div { display: grid; gap: var(--space-4); }
[data-kv-modal="onebuy"] .rsform-block-header { order: 8; }
[data-kv-modal="onebuy"] .rsform-block-submit { order: 9; }

/* Звёздочки обязательности убираем: обязательны все поля, а красный столбик
   справа от рамок читался как ошибка. Заодно поля и кнопка встают в одну
   ширину — звёздочка отъедала у поля два десятка точек. Незаполненное поле
   подсветит проверка. */
[data-kv-modal] .formRequired { display: none; }

/* Поле товара. Оно только для чтения — название подставляет карточка,
   поэтому и выглядеть должно не как пустая рамка для ввода, а как строка
   заказа: с подписью и на подложке. */
[data-kv-modal="onebuy"] .rsform-block:has(#item_name) .formBody {
  display: grid;
  gap: 6px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-brand-soft, var(--surface-sunken));
}
[data-kv-modal="onebuy"] .rsform-block:has(#item_name) .formBody::before {
  content: "Ваш заказ";
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-brand);
}
[data-kv-modal="onebuy"] .formResponsive #item_name {
  height: auto;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  cursor: default;
}
[data-kv-modal="onebuy"] #item_name:focus { outline: none; }

/* Ширина форм в окнах на компьютере.

   Окно на компьютере показывало горизонтальную прокрутку, а поля и плашка
   «Ваш заказ» уходили за правый край. Причина — связка сетки и ширины auto.
   Тело окна и строки RSForm сверстаны сеткой, а колонка сетки по умолчанию
   не бывает уже самого широкого содержимого. У текстового поля ширина auto
   равна его «естественной» ширине из атрибутов cols и size — у поля адреса
   это шире окна, и вся колонка растягивалась вслед за ним.

   На телефоне RSForm сам ставит полям width:100% !important, а поле
   с процентной шириной в расчёт ширины колонки не входит — поэтому там
   всё было ровно, и дефект виден только на широком экране.

   Разрешаем колонкам сжиматься и возвращаем полям процентную ширину.
   Звёздочки обязательности в окнах скрыты, так что делить строку с полем
   больше некому. */
.kv-modal__body,
.kv-modal__body .module,
.kv-modal__body .mainSmsForm,
.kv-modal__body .formRow,
.kv-modal__body .formSpan12,
[data-kv-modal="onebuy"] .formSpan12 > div,
[data-kv-modal="onebuy"] .rsform-block:has(#item_name) .formBody {
  grid-template-columns: minmax(0, 1fr);
}
.kv-modal__body * { min-width: 0; }
.kv-modal__body .formBody > input,
.kv-modal__body .formBody > textarea,
.kv-modal__body .formBody > select,
[data-kv-modal] .formResponsive input[type="text"],
[data-kv-modal] .formResponsive input[type="email"],
[data-kv-modal] .formResponsive input[type="tel"],
[data-kv-modal] .formResponsive input[type="number"],
[data-kv-modal] .formResponsive textarea {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}
/* Страховка: если модуль клиента когда-нибудь принесёт что-то шире окна,
   пусть лучше обрежется у края, чем окно снова поедет вбок. */
.kv-modal__box { overflow-x: hidden; }

/* Пояснение в начале формы обратного звонка набрано в самой форме тегом h2.
   Рядом с заголовком окна получалось два заголовка подряд, причём второй
   крупнее первого. Текст клиента оставляем, вид — подзаголовка. */
[data-kv-modal] .rsform-block-header h1,
[data-kv-modal] .rsform-block-header h2,
[data-kv-modal] .rsform-block-header h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular, 400);
  line-height: 1.45;
  color: var(--text-muted);
}
[data-kv-modal] .rsform-block-header p:empty { display: none; }

/* Согласие на обработку данных: мелким, но ссылка различима. */
[data-kv-modal="onebuy"] .rsform-block-header p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
}
[data-kv-modal="onebuy"] .rsform-block-header a {
  color: var(--text-brand);
  text-decoration: underline;
}

/* Поле адреса в окне было высотой в половину экрана, и кнопка уходила
   за нижний край — окно приходилось прокручивать. */
[data-kv-modal="onebuy"] textarea { min-height: 84px; }

/* Ошибка проверки. RSForm вешает класс на блок и показывает свою подпись;
   без стилей она терялась среди полей. */
[data-kv-modal="onebuy"] .formError input,
[data-kv-modal="onebuy"] .formError textarea {
  border-color: var(--red-500, #e05a4f);
  background: var(--red-50, #fdeced);
}
[data-kv-modal="onebuy"] .formError .formNoError,
[data-kv-modal="onebuy"] .formValidation .formError {
  display: block;
  width: 100%;
  font-size: var(--text-xs);
  color: var(--red-600, #c0392b);
}

/* ================= Подсказки в строке поиска =============================
   Список выпадает под полем уже на первой букве. Данные приходят вместе
   со страницей, поэтому обращений к серверу при наборе нет.
   ------------------------------------------------------------------------ */

.kv-search__field { position: relative; }

.kv-suggest {
  position: absolute;
  z-index: 320;
  top: calc(100% + 6px);
  left: 0;
  /* Поле поиска в шапке узкое — около 220 px даже на широком экране, — и в
     его ширину названия не помещались: «Продукты из Черно…». Список шире
     поля, но не шире окна, иначе на телефоне он вылезал бы за край. */
  width: max(100%, 420px);
  max-width: calc(100vw - 2 * var(--space-6));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.kv-suggest[hidden] { display: none; }

.kv-suggest__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition-control);
}
.kv-suggest__item:hover,
.kv-suggest__item.is-active { background: var(--surface-brand-soft, var(--surface-sunken)); }

.kv-suggest__pic {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
}

.kv-suggest__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}
/* Совпавшая часть названия: подсветка без заливки — в строке их может быть
   восемь подряд, и жёлтые полосы превратили бы список в пестроту. */
.kv-suggest__name mark {
  background: none;
  color: var(--text-brand);
  font-weight: var(--weight-bold);
}

.kv-suggest__note {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  white-space: nowrap;
}

/* Раздел каталога — строка без картинки, поэтому её отмечаем подписью
   и приглушённым цветом: иначе она теряется среди товаров. */
.kv-suggest__item--cat .kv-suggest__name { font-weight: var(--weight-semibold); }
.kv-suggest__item--cat .kv-suggest__note {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium, 500);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* На телефоне строка поиска шире экрана не бывает, но список должен
   помещаться с запасом под клавиатуру. */
@media (max-width: 720px) {
  .kv-suggest { max-height: min(50vh, 320px); }
  .kv-suggest__pic { width: 30px; height: 30px; }
}

/* ================= Количество и кнопки в карточке ========================
   Счётчик стоит строкой под ценой и повторяет её раскладку: подпись слева,
   значение справа. Раньше он был растянут во всю ширину карточки наравне
   с кнопкой — числу от одного до четырёх столько места не нужно.
   ------------------------------------------------------------------------ */

.kv-card__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
  min-width: 0;
}
.kv-card__qty-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  /* nowrap без обрезки выводил подпись поверх счётчика: строка не переносится
     и просто вылезала за свою половину. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* В узкой карточке «Количество» не помещается рядом со счётчиком и
   обрезалось на «Колич». Там же стоит короткая форма. */
.kv-card__qty-short { display: none; }

/* Ширина по содержимому — примерно как у самой цены. Перебиваем и общее
   правило растяжения, и мобильные, где счётчик занимал всю строку. */
.kv-card .kv-card__qty .kv-stepper,
.kv-card .kv-card__qty .prod_qty_input,
.kv-card .kv-card__qty .prod_qty_input_flex {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}
.kv-card .kv-card__qty .kv-stepper { height: 34px; }
.kv-card .kv-card__qty .kv-stepper button { width: 28px; height: 34px; }
.kv-card .kv-card__qty .kv-stepper input { width: 32px; min-width: 32px; }

/* Скрипт магазина рисует свой счётчик и рядом кладёт тег script. */
.kv-card .kv-card__qty > script { display: none; }

/* Поле количества в счётчике не должно подчиняться общему виду полей ввода
   магазина: у тех рамка и отступы по 16 px, а ширина у счётчика — 32 px.
   Отступы съедали всю ширину, и число просто не помещалось в поле:
   на странице товара и в сводных списках счётчик выглядел пустым. */
.kv-shop .kv-stepper input,
.kv-card .kv-stepper input,
.kv-total .kv-stepper input {
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Кнопка быстрого заказа: та же форма и размер, что у «В корзину», текст
   по центру. Раньше это была ссылка, прижатая к левому краю карточки. */
.kv-card .kv-buyrow .onebuy_btn { text-align: center; }

/* --- Карточка на телефоне: счётчик и кнопки ---------------------------
   Блок стоит в самом конце: базовые правила счётчика добавлены ниже
   прежних мобильных, и при равной силе селектора выигрывал бы тот,
   что идёт позже. */
@media (max-width: 720px) {
  .kv-card .kv-card__qty { gap: var(--space-3); }
  .kv-card .kv-card__qty-long { display: none; }
  .kv-card .kv-card__qty-short { display: inline; }

  /* Подписи на кнопках длинные («Купить в 1 клик»), а карточка в две
     колонки — около 150 px. Ужимаем поля и убираем значок у второй кнопки,
     чтобы текст не упирался в края. */
  .kv-card .kv-buyrow .kv-btn { padding-left: 8px; padding-right: 8px; gap: 6px; }
  .kv-card .kv-buyrow .onebuy_btn .kv-i { display: none; }

  /* В карточке шириной около 130 px на подпись остаётся чуть больше сорока:
     дальше ужимать нечего, поэтому и шрифт мельче обычного. */
  .kv-card .kv-card__qty-label { font-size: 11px; }
  .kv-card .kv-card__qty .kv-stepper,
  .kv-card .kv-card__qty .prod_qty_input,
  .kv-card .kv-card__qty .prod_qty_input_flex { height: 32px; }
  .kv-card .kv-card__qty .kv-stepper button { width: 24px; height: 32px; }
  .kv-card .kv-card__qty .kv-stepper input { width: 24px; min-width: 24px; }
  .kv-card .kv-card__qty .prod_qty_center { padding: 0; }
  .kv-card .kv-card__qty .prod_qty_center input { width: 24px; min-width: 24px; padding: 0; }
  .kv-card .kv-card__qty .product_minus,
  .kv-card .kv-card__qty .product_plus { flex: 0 0 auto; width: 24px; height: 30px; }
}

/* =========================================================================
   Оформление заказа и страница «Заказ принят» — правки Владимира от 14.09

   Блок стоит в конце файла намеренно: он перекрывает прежние правила
   оформления заказа с той же силой селектора. Разметка — плагина
   onestepcheckout, её не трогаем.
   ========================================================================= */

/* --- Таблицы товаров: без сетки корзины ---------------------------------
   Строка товара в корзине (tr.jshop_prod_cart) у нас разложена сеткой в шесть
   колонок. Тот же класс плагин ставит строкам мини-корзины и таблицы на
   странице «Заказ принят» — и сетка корзины ломала им вёрстку: название
   сжималось в колонку под картинку, цена и количество налезали друг на
   друга, а шапка таблицы оставалась на своих местах. Здесь это обычные
   таблицы. */
.kv-shop #oneStepCheckoutForm table.minicart tr,
.kv-shop .finish-page table.minicart tr { display: table-row; padding: 0; border: 0; }
.kv-shop #oneStepCheckoutForm table.minicart tr > td,
.kv-shop #oneStepCheckoutForm table.minicart tr > th,
.kv-shop .finish-page table.minicart tr > td,
.kv-shop .finish-page table.minicart tr > th { display: table-cell; }
.kv-shop #oneStepCheckoutForm .carthide { overflow-x: auto; }

/* --- Полоса «Всего к оплате» -------------------------------------------- */
.kv-shop #oneStepCheckoutForm .slide-btn.cart-slide .fa-chevron-down { transition: transform var(--duration-fast, .15s) ease; }
.kv-shop #oneStepCheckoutForm .slide-btn.cart-slide.is-open .fa-chevron-down { transform: rotate(180deg); }

/* Плавающая полоса: координаты и ширину ставит скрипт по месту, где полоса
   стояла в форме. Ниже полосы меню (z-index 200), выше содержимого. */
.kv-shop #oneStepCheckoutForm a.cart-slide.is-floating {
  position: fixed;
  z-index: 150;
  margin: 0;
  box-sizing: border-box;
  box-shadow: var(--shadow-card-hover);
}

/* --- Дата и время доставки в одну строку ---------------------------------
   Оба поля — соседи внутри .jshop_nvg_register, обычного блока, поэтому
   каждое вставало своей строкой. Разрешаем этой обёртке раскладывать детей
   в ряд: все прочие строки формы по-прежнему во всю ширину, дата и время —
   пополам. */
.kv-shop #oneStepCheckoutForm .jshop_nvg_register {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--space-5);
}
.kv-shop #oneStepCheckoutForm .jshop_nvg_register > * { flex: 1 1 100%; min-width: 0; }
.kv-shop #oneStepCheckoutForm .jshop_nvg_register > div#tr_field_ext_field_3,
.kv-shop #oneStepCheckoutForm .jshop_nvg_register > div#tr_field_fax { flex: 1 1 0; }
/* Справа у полей формы оставлено место под звёздочку. У пары оставляем его
   только за вторым полем — тогда пара кончается там же, где поля выше. */
.kv-shop #oneStepCheckoutForm div#tr_field_ext_field_3 { padding-right: 0; }
.kv-shop #oneStepCheckoutForm div#tr_field_ext_field_3 .os-name,
.kv-shop #oneStepCheckoutForm div#tr_field_fax .os-name { margin-left: 0; padding-left: 0; }
/* Звёздочку ставим к подписи: в ряду двух полей отдельный столбик звёздочек
   между ними разрывал строку. */
.kv-shop #oneStepCheckoutForm div#tr_field_ext_field_3 span.requiredtext[rel="tooltip"],
.kv-shop #oneStepCheckoutForm div#tr_field_fax span.requiredtext[rel="tooltip"] { display: none; }
.kv-shop #oneStepCheckoutForm div#tr_field_ext_field_3 .os-name::after,
.kv-shop #oneStepCheckoutForm div#tr_field_fax .os-name::after { content: " *"; color: var(--red-500); }

/* --- Способы доставки и оплаты — «таблетки» в ряд, как на боевом сайте ---
   Раньше каждый способ был карточкой во всю ширину. Владимиру привычнее
   прежнее расположение: способы рядом, по центру, выбранный залит цветом.
   Сам переключатель прячем визуально — выбор виден по заливке, а нажимается
   вся таблетка (это label). */
.kv-shop #oneStepCheckoutForm #table_payments,
.kv-shop #oneStepCheckoutForm #table_shippings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.kv-shop #oneStepCheckoutForm #table_payments .data-mth,
.kv-shop #oneStepCheckoutForm #table_shippings .data-mth {
  display: flex;
  flex: 0 1 auto;
  width: auto;
  margin: 0;
  background: var(--surface-card);
  border-radius: var(--radius-control);
}
.kv-shop #oneStepCheckoutForm #table_payments .data-mth-inner,
.kv-shop #oneStepCheckoutForm #table_shippings .data-mth-inner { display: flex; padding: 0; }
.kv-shop #oneStepCheckoutForm #table_payments .payment_header,
.kv-shop #oneStepCheckoutForm #table_shippings .shipping_header { display: flex; }
.kv-shop #oneStepCheckoutForm #table_payments .payment_header label,
.kv-shop #oneStepCheckoutForm #table_shippings .shipping_header label {
  position: relative;
  gap: var(--space-4);
  min-height: 48px;
  padding: 0 var(--space-7);
  font-size: var(--text-sm);
  color: var(--text-strong);
}
.kv-shop #oneStepCheckoutForm #table_payments label b,
.kv-shop #oneStepCheckoutForm #table_shippings label b { font-weight: var(--weight-semibold); }
.kv-shop #oneStepCheckoutForm #table_payments label > input[type="radio"],
.kv-shop #oneStepCheckoutForm #table_shippings label > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.kv-shop #oneStepCheckoutForm #table_payments .data-mth:has(input:focus-visible),
.kv-shop #oneStepCheckoutForm #table_shippings .data-mth:has(input:focus-visible) { box-shadow: var(--ring-focus); }
.kv-shop #oneStepCheckoutForm #table_payments .payment_image img { display: block; max-height: 24px; }
/* Выбранный способ. Класс check-in переставляет скрипт плагина; :has —
   на случай, если скрипт не успел. */
.kv-shop #oneStepCheckoutForm #table_payments .data-mth.check-in,
.kv-shop #oneStepCheckoutForm #table_payments .data-mth:has(input:checked),
.kv-shop #oneStepCheckoutForm #table_shippings .data-mth.check-in,
.kv-shop #oneStepCheckoutForm #table_shippings .data-mth:has(input:checked) {
  border-color: var(--action-primary);
  background: var(--action-primary);
}
.kv-shop #oneStepCheckoutForm #table_payments .data-mth.check-in label,
.kv-shop #oneStepCheckoutForm #table_payments .data-mth:has(input:checked) label,
.kv-shop #oneStepCheckoutForm #table_shippings .data-mth.check-in label,
.kv-shop #oneStepCheckoutForm #table_shippings .data-mth:has(input:checked) label { color: var(--text-inverse); }
/* Логотипы платёжных систем на синей заливке теряются — даём им светлую
   подложку. */
.kv-shop #oneStepCheckoutForm #table_payments .data-mth.check-in .payment_image,
.kv-shop #oneStepCheckoutForm #table_payments .data-mth:has(input:checked) .payment_image {
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  background: #fff;
}

/* --- Оплата бонусами: слева «Оплатить бонусами», справа остаток --------- */
.kv-shop #oneStepCheckoutForm .bonus_payment {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-body);
}
.kv-shop #oneStepCheckoutForm .bonus_payment .bonus_block label,
.kv-shop #oneStepCheckoutForm .bonus_payment .mybonuss {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  margin: 0;
  padding: 0 var(--space-6);
  border-radius: var(--radius-control);
  box-shadow: none;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.kv-shop #oneStepCheckoutForm .bonus_payment .bonus_block label {
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-strong);
  cursor: pointer;
  transition: var(--transition-control);
}
.kv-shop #oneStepCheckoutForm .bonus_payment .bonus_block label:hover { border-color: var(--border-brand); }
.kv-shop #oneStepCheckoutForm .bonus_payment .bonus_block.checked label,
.kv-shop #oneStepCheckoutForm .bonus_payment .bonus_block:has(input:checked) label {
  border-color: var(--border-brand);
  background: var(--surface-brand-soft);
  color: var(--text-brand);
}
.kv-shop #oneStepCheckoutForm .bonus_payment .bonus_text { display: inline-flex; align-items: center; gap: var(--space-3); }
.kv-shop #oneStepCheckoutForm .bonus_payment .bonus_block input[type="checkbox"] { zoom: 1; width: 18px; height: 18px; margin: 0; }
.kv-shop #oneStepCheckoutForm .bonus_payment .bonus_summ { font-weight: var(--weight-bold); white-space: nowrap; }
.kv-shop #oneStepCheckoutForm .bonus_payment .mybonuss {
  background: var(--status-instock-bg);
  color: var(--green-700);
  font-weight: var(--weight-semibold);
}
.kv-shop #oneStepCheckoutForm .bonus_payment span.ball {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1;
  vertical-align: middle;
}

/* --- Страница «Заказ принят» ---------------------------------------------
   Её тоже отдаёт плагин, и выглядела она голым текстом: подписи и значения
   лесенкой, таблица товаров разъехалась. Собираем карточку: отметка об
   успехе, данные заказа двумя колонками, таблица товаров. */
.kv-shop .finish-page.uk-panel-box {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-8);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.kv-shop .finish-page .uk-panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  text-transform: none;
}
.kv-shop .finish-page .uk-panel-title::before {
  content: "";
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--status-instock-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157244' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.kv-shop .finish-page > br { display: none; }

.kv-shop .finish-page .uk-description-list-horizontal {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-4) var(--space-9);
  max-width: none;
  margin: var(--space-7) 0 0;
  padding: var(--space-7) 0 0;
  border-top: var(--border-width) solid var(--border-subtle);
}
.kv-shop .finish-page .uk-description-list-horizontal dt {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.kv-shop .finish-page .uk-description-list-horizontal dd,
.kv-shop .finish-page .uk-description-list-horizontal dt:nth-of-type(2) + dd {
  width: auto;
  margin: 0;
  padding: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.kv-shop .finish-page .uk-description-list-horizontal dt.productstitle {
  grid-column: 1 / -1;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.kv-shop .finish-page .uk-description-list-horizontal dd.productstable { grid-column: 1 / -1; overflow-x: auto; }

.kv-shop .finish-page table.minicart {
  width: 100%;
  margin: 0;
  border: var(--border-width) solid var(--border-subtle);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.kv-shop .finish-page table.minicart th {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border-left: 0;
  border-right: 0;
}
.kv-shop .finish-page table.minicart td {
  padding: var(--space-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-body);
  vertical-align: middle;
}
.kv-shop .finish-page table.minicart tbody tr:last-child td { border-bottom: 0; }
.kv-shop .finish-page table.minicart th:not(:first-child),
.kv-shop .finish-page table.minicart td:not(:first-child) { width: 1%; text-align: right; white-space: nowrap; }
.kv-shop .finish-page table.minicart td:first-child a { color: var(--text-strong); font-weight: var(--weight-semibold); text-decoration: none; }
.kv-shop .finish-page table.minicart td:first-child a:hover { color: var(--text-brand); }
.kv-shop .finish-page table.minicart td:last-child { font-weight: var(--weight-semibold); color: var(--text-strong); }

.kv-shop .finish-page .uk-alert:empty { display: none; }
.kv-shop .finish-page .uk-alert {
  margin: var(--space-7) 0 0;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-brand-soft);
  color: var(--text-body);
}
.kv-shop .finish-page .uk-grid-divider { margin: var(--space-7) 0 0; border: 0; border-top: var(--border-width) solid var(--border-subtle); }
.kv-shop .finish-page .uk-grid-divider:last-child { display: none; }
.kv-shop .finish-page #shipping_description,
.kv-shop .finish-page #payment_description { margin-top: var(--space-7); }
.kv-shop .finish-page .shipping_description_title,
.kv-shop .finish-page .payment_description_title {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.kv-shop .finish-page .uk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 48px;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--action-primary);
  color: var(--text-inverse);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.kv-shop .finish-page .uk-button:hover { background: var(--action-primary-hover); }

@media (max-width: 600px) {
  .kv-shop .finish-page.uk-panel-box { padding: var(--space-7) var(--space-6); }
  .kv-shop .finish-page .uk-panel-title { font-size: var(--text-xl); }
  .kv-shop .finish-page .uk-panel-title::before { width: 36px; height: 36px; background-size: 18px; }
  .kv-shop .finish-page .uk-description-list-horizontal { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv-shop .finish-page .uk-description-list-horizontal dt { margin-top: 0; }
  .kv-shop .finish-page .uk-description-list-horizontal dd { margin-bottom: var(--space-4); border-bottom: 0; }
  /* Четыре колонки в 300 px: подписи шапки без капса, поля ячеек уже —
     иначе «Сумма» уходила за край. */
  .kv-shop .finish-page table.minicart th { padding: var(--space-3) var(--space-3); font-size: 11px; letter-spacing: 0; text-transform: none; }
  .kv-shop .finish-page table.minicart td { padding: var(--space-4) var(--space-3); font-size: var(--text-xs); }
  .kv-shop .finish-page table.minicart th:first-child,
  .kv-shop .finish-page table.minicart td:first-child { padding-left: var(--space-4); }
  .kv-shop .finish-page table.minicart th:last-child,
  .kv-shop .finish-page table.minicart td:last-child { padding-right: var(--space-4); }

  /* Способы оплаты на телефоне — по одному в строку во всю ширину: так
     в них проще попасть пальцем. */
  .kv-shop #oneStepCheckoutForm #table_payments .data-mth,
  .kv-shop #oneStepCheckoutForm #table_shippings .data-mth { flex: 1 1 100%; }
  .kv-shop #oneStepCheckoutForm #table_payments .payment_header,
  .kv-shop #oneStepCheckoutForm #table_payments .payment_header label,
  .kv-shop #oneStepCheckoutForm #table_payments .data-mth-inner,
  .kv-shop #oneStepCheckoutForm #table_shippings .shipping_header,
  .kv-shop #oneStepCheckoutForm #table_shippings .shipping_header label,
  .kv-shop #oneStepCheckoutForm #table_shippings .data-mth-inner { flex: 1 1 auto; }
  .kv-shop #oneStepCheckoutForm .bonus_payment .bonus_block,
  .kv-shop #oneStepCheckoutForm .bonus_payment .bonus_block label,
  .kv-shop #oneStepCheckoutForm .bonus_payment .mybonuss { flex: 1 1 100%; justify-content: center; }

  /* Дата и время остаются в одну строку и на телефоне, как на боевом
     сайте, — ужимаем поля. */
  .kv-shop #oneStepCheckoutForm div#tr_field_ext_field_3 input[type="date"],
  .kv-shop #oneStepCheckoutForm div#tr_field_fax select { padding-left: 10px; padding-right: 6px; font-size: var(--text-sm); }
}

/* --- Счётчик количества в мини-корзине -----------------------------------
   Наши правила счётчика были, но проигрывали плагину по силе селектора:
   у него «#oneStepCheckoutForm div.quantity span.quantitymore». Плагин
   ставит кнопки абсолютом — узкой полоской 15 px справа от поля, одна над
   другой, со своими треугольниками. Поверх ложились наши значки плюса
   и минуса, сжатые в эту полоску, — выходила размазня. А поле растягивало
   общее правило текстовых полей формы.
   Здесь селекторы на ступень сильнее: кнопки — в ряд по бокам поля. */
.kv-shop #oneStepCheckoutForm div.quantity {
  position: static;
  display: inline-flex;
  align-items: stretch;
  width: auto;
}
.kv-shop #oneStepCheckoutForm div.quantity span.quantitymore,
.kv-shop #oneStepCheckoutForm div.quantity span.quantityless {
  position: static;
  display: block;
  flex: none;
  width: 34px;
  height: 38px;
  border: var(--border-width) solid var(--border-default);
  background-color: var(--surface-card);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
.kv-shop #oneStepCheckoutForm div.quantity span.quantitymore:after,
.kv-shop #oneStepCheckoutForm div.quantity span.quantityless:after { display: none; }
.kv-shop #oneStepCheckoutForm div.quantity span.quantitymore:hover,
.kv-shop #oneStepCheckoutForm div.quantity span.quantityless:hover { background-color: var(--surface-sunken); }
.kv-shop #oneStepCheckoutForm div.quantity input[id^="quantity"] {
  flex: none;
  width: 46px;
  min-width: 0;
  height: 38px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: var(--border-width) solid var(--border-default);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* --- Промокод ------------------------------------------------------------
   Плагин кладёт поле и кнопку в полосу с серым градиентом и рамкой, кнопка
   стояла под полем вплотную к нижнему краю. Делаем обычную строку: поле
   и кнопка рядом, без подложки. */
.kv-shop #oneStepCheckoutForm .carthide .uk-navbar {
  margin: var(--space-6) 0 0;
  padding: 0;
  border: 0;
  background: none;
}
.kv-shop #oneStepCheckoutForm .rabatt_input {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
}
.kv-shop #oneStepCheckoutForm .rabatt_input input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; height: 48px; margin: 0; }
.kv-shop #oneStepCheckoutForm .rabatt_input .uk-button { flex: none; height: 48px; margin: 0; padding: 0 var(--space-8); }

@media (max-width: 480px) {
  .kv-shop #oneStepCheckoutForm .rabatt_input { flex-wrap: wrap; }
  .kv-shop #oneStepCheckoutForm .rabatt_input input[type="text"],
  .kv-shop #oneStepCheckoutForm .rabatt_input .uk-button { flex: 1 1 100%; }
}

/* --- Кнопка «В корзину» в блоке «Возможно у вас заканчивается» ------------
   Две причины, почему значок стоял не по центру. Правило обрезки названия
   в три строки (.item_info a) задевало и эту кнопку — она тоже ссылка
   внутри .item_info — и превращало её в -webkit-box, где центровка флексом
   не работает: значок прилипал к верху. А тема модуля карусели давала значку
   отступ справа в 10 px под подпись, которой здесь нет. Кнопку делаем
   квадратной 40 × 40, значок — ровно посередине. */
.kv-shop .wec-block .item_info { align-items: center; gap: var(--space-4); }
.kv-shop .wec-block .item_info a.button_buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  -webkit-line-clamp: none;
}
.kv-shop .wec-block a.button_buy {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  line-height: 1;
}
.kv-shop .wec-block a.button_buy i {
  margin: 0;
  line-height: 1;
}
/* Размер значка — только у обычной кнопки: у товара, уже лежащего в корзине
   (a.incart), тема модуля нарочно гасит значок нулевым шрифтом. */
.kv-shop .wec-block a.button_buy:not(.incart) i { font-size: 17px !important; }

/* ================= Оформление заказа: адреса покупателя ==================
   Блоки выбора и сохранения адреса рисует аддон оформления заказа, его
   файлы не трогаем — правим вид отсюда. Стили аддона подключаются раньше
   нашего файла, поэтому хватает чуть более точного селектора.
   ------------------------------------------------------------------------ */

/* Ряд вкладок адресов и кнопка «Сохранить адрес» стояли с отступом слева
   около 80 px: у аддона эти блоки шириной 80% и выровнены по центру
   (margin: 0 auto), а поля формы — во всю ширину. Кнопка выглядела
   висящей отдельно от поля адреса, к которому относится. */
#oneStepCheckoutForm .add_adresses,
#oneStepCheckoutForm .save_adresses {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  justify-content: flex-start;
  gap: 8px;
}
#oneStepCheckoutForm .save_adresses { margin-top: 10px; margin-bottom: 16px; }

/* «Сохранено». Бледно-зелёная строка 15 px поверх нижнего края поля адреса
   мелькала и терялась. Теперь это заметная плашка: насыщенный зелёный,
   белый крупный текст с галочкой, тень и короткий «щелчок» при появлении,
   чтобы взгляд за неё зацепился. Держится она столько же, сколько задаёт
   скрипт аддона, — время показа мы не меняли. */
#oneStepCheckoutForm .save_text { position: relative; z-index: 2; }
#oneStepCheckoutForm .save_text span.was_added {
  position: absolute;
  left: auto;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: #1e9e4a;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(30, 158, 74, .38);
  /* backwards, а не both: иначе последний кадр анимации держал бы
     непрозрачность и перебивал плавное исчезание, которое делает скрипт. */
  animation: kv-saved-pop .45s cubic-bezier(.2, 1.4, .4, 1) backwards;
  pointer-events: none;
}
#oneStepCheckoutForm .save_text span.was_added::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e9e4a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}

@keyframes kv-saved-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(.85); }
  60%  { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #oneStepCheckoutForm .save_text span.was_added { animation: none; }
}

/* На телефоне плашка во всю ширину поля — справа ей тесно. */
@media (max-width: 720px) {
  #oneStepCheckoutForm .save_text span.was_added {
    left: 10px;
    right: 10px;
    justify-content: center;
    font-size: 16px;
  }
}

/* ================= Полоса меню на ширине 901–1280 px ======================
   На ноутбуках и планшетах в горизонтали пункты меню и телефон не влезали
   в одну строку: при 1024 px полоса переносилась на вторую строку (высота
   102 px вместо 56) и страница уезжала вбок на 24 px — внизу появлялась
   горизонтальная прокрутка. При прокрутке к полосе добавляется логотип,
   и тесно становилось уже до 1280 px.
   Проверено на 901, 960, 1000, 1024, 1100, 1180, 1200, 1280 px — в обычном
   и прилипшем состоянии полоса в одну строку, сдвига вбок нет.
   ------------------------------------------------------------------------ */
@media (min-width: 901px) and (max-width: 1280px) {
  .kv-nav { gap: 0; }
  .kv-nav__link { padding: 0 10px; font-size: 14px; }
  .kv-catalog__button { padding: 0 14px; }
  .kv-phone__button { font-size: 16px; padding: 0 8px; gap: 6px; }
  /* В прилипшей полосе оставляем значок логотипа без названия. */
  .kv-navbar.is-stuck .kv-navbar__logo span { display: none; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .kv-navbar__inner { gap: 8px; }
  .kv-nav__link { padding: 0 7px; font-size: 13px; }
  .kv-catalog__button { padding: 0 12px; }
  .kv-phone__button { font-size: 15px; padding: 0 4px; }
  .kv-phone__caret { display: none; }
}