/* ==========================================================================
   ZIPVRN — современная «дочерняя» тема поверх July (ocStore 2.3)  · v2
   Подключается автоматически: header.tpl July уже содержит проверку
   is_file(.../stylesheet/mycustom.css). Файлы темы July не меняются.
   Удалите этот файл — и сайт вернётся к прежнему виду.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --z-blue: #1a56ff;
  --z-blue-dark: #0f2fa8;
  --z-blue-soft: #e8efff;
  --z-navy: #0b1b3f;
  --z-orange: #ff6b1a;
  --z-orange-dark: #e5560a;
  --z-yellow: #ffc531;
  --z-green: #12b76a;
  --z-red: #e5484d;
  --z-bg: #f2f5fc;
  --z-card: #ffffff;
  --z-text: #1b2437;
  --z-muted: #6b7590;
  --z-line: #e3e8f4;
  --z-radius: 16px;
  --z-shadow: 0 2px 10px rgba(16, 37, 94, .07);
  --z-shadow-hover: 0 14px 32px rgba(16, 37, 94, .16);
  --z-tile-a: .72;            /* прозрачность цветных плиток категорий: 1 = сплошные, 0.5 = очень бледные */
}

/* ---------- 0. Убираем устаревшее «праздничное» окно ---------- */
#overlay { display: none !important; }

/* ---------- 1. База ---------- */
body {
  font-family: 'Manrope', 'Roboto', Arial, sans-serif !important;
  background: var(--z-bg) !important;
  color: var(--z-text);
  -webkit-font-smoothing: antialiased;
}
body #container.container { background: transparent !important; box-shadow: none; }
h1, h2, h3, h4, h5, .title_h3, legend {
  font-family: 'Manrope', 'Roboto', Arial, sans-serif !important;
  color: var(--z-navy);
  letter-spacing: -.01em;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
a { transition: color .15s ease; }
a:hover { color: var(--z-orange); }
button, .btn, .button { font-family: 'Manrope', 'Roboto', Arial, sans-serif !important; }

/* ---------- 2. Верхняя полоса ---------- */
body #top { background: var(--z-navy) !important; border: 0; min-height: 0; }
body #top, body #top a, body #top .btn-link,
body #top-links > ul > li, body #top-links > ul > li > a,
body #top .contactinfo, body #top .contactinfo a {
  color: #cfd8f3 !important;
  font-size: 13px;
}
body #top a:hover, body #top-links > ul > li > a:hover { color: var(--z-yellow) !important; }
body #top .contactinfo { font-weight: 700; }

/* ---------- 3. Шапка ---------- */
body #header { background: #fff !important; box-shadow: var(--z-shadow); position: relative; z-index: 20; margin-bottom: 0; }
body #header header { padding: 14px 0; }
body.z-scrolled #header { box-shadow: 0 6px 24px rgba(16, 37, 94, .14); }
body #header #logo img { max-height: 64px; width: auto; }

/* Выравниваем логотип, поиск и корзину по одной линии (на десктопе) */
@media (min-width: 992px) {
  body #header header .row { display: flex; align-items: center; }
  body #header header .row:before, body #header header .row:after { display: none; }
  body #header #logo,
  body #header .topinfo #search,
  body #header #cart { margin-top: 0; margin-bottom: 0; }
}

/* Поиск */
body #header .topinfo #search { z-index: 7; --z-sh: 50px; display: flex; align-items: stretch; width: 100%; }
body #header .topinfo #search .input-lg {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  float: none;
  margin: 0;
  height: var(--z-sh);
  padding: 1px 20px 1px 24px;
  border: 2px solid var(--z-blue) !important;
  border-right: 0 !important;
  border-radius: 999px 0 0 999px !important;
  font-size: 15px;
  box-shadow: none !important;
  background: #fff;
}
body #header .topinfo #search .input-lg:focus { border-color: var(--z-orange) !important; }
body #header .topinfo #search span.input-group-btn {
  position: static;
  display: flex;
  flex: none;
  width: auto;
  height: var(--z-sh);
  line-height: 1;
  font-size: 0;
}
body #header .topinfo #search .btn {
  height: var(--z-sh);
  width: 68px;
  margin: 0;
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--z-blue) !important;
  color: #fff !important;
  font-size: 18px;
  transition: background .15s ease;
}
body #header .topinfo #search .btn:hover { background: var(--z-orange) !important; }
body #header .topinfo #search .btn .fa { font-size: 18px; }

/* Корзина: иконка + сумма в одну строку по центру */
body #header #cart > .btn {
  display: flex !important;
  align-items: center;
  gap: 10px;
  float: none;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  line-height: 1.2;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--z-orange) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(255, 107, 26, .35);
  transition: transform .15s ease, background .15s ease;
}
body #header #cart > .btn:hover { background: var(--z-orange-dark) !important; transform: translateY(-1px); }
body #header #cart > .btn > div {
  float: none;
  flex: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;   /* убираем белый квадрат */
}
body #header #cart > .btn > div:after { font-size: 22px; line-height: 1; color: #fff !important; }
body #header #cart #cart-total {
  display: block;
  margin: 0;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body #header #cart .july-cart-title { display: none; }
/* короткая сумма для телефона (создаётся в mycustom.js) */
body #header #cart #z-cart-short { display: none; color: #fff; font-size: 13px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
body #header #cart .btn #cart-top-fixed {
  left: 30px; top: -9px;
  width: 22px; height: 22px; line-height: 22px;
  background: var(--z-green) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px #fff;
}
body #header #cart .btn #cart-top-fixed .fa { font-size: 11px; color: #fff; }
body #cart .dropdown-menu {
  border: 0; border-radius: var(--z-radius); box-shadow: var(--z-shadow-hover); padding: 8px; top: 56px;
}

/* ---------- 4. Главное меню ---------- */
body .menufix, body #mobile-header {
  background: linear-gradient(90deg, var(--z-blue-dark), var(--z-blue)) !important;
}
body .menufix.z-menu-empty { display: none !important; }   /* пустую полосу прячем (см. mycustom.js) */
body #menu { background: transparent !important; border: 0; margin-bottom: 0; }
body #menu > ul > li > a, body #mobile-header #responsive-menu-button {
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  text-transform: none !important;
}
body #menu > ul > li:hover, body #menu > ul > li > a:hover, body #menu > ul > li:hover > a {
  background: var(--z-orange) !important;
  color: #fff !important;
}
body #menu > ul > li > .submenu, body #menu > ul > li > div {
  border: 0 !important;
  border-radius: 0 0 var(--z-radius) var(--z-radius);
  box-shadow: var(--z-shadow-hover);
  overflow: hidden;
}
body #menu > ul > li > .submenu > ul > li > a:hover { color: var(--z-orange) !important; background: #fff4ec !important; }

/* ---------- 5. Категории-плитки (модуль «julycategory») ---------- */
body .featur_categ { background: transparent !important; padding: 18px 0 0; }
/* Плитки идут ровными рядами: flex вместо float, в каждом ряду одинаковая высота */
body .featur_categ .vtabs.nav-tabs {
  display: flex; flex-wrap: wrap; align-items: stretch;
  background: transparent !important; border: 0; padding: 0 !important;
}
body .featur_categ .vtabs.nav-tabs:before, body .featur_categ .vtabs.nav-tabs:after { display: none; }
body .featur_categ .vtabs > div { padding: 8px; float: none; display: flex; }

body .featur_categ .vtabs .link-category {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 190px;
  margin-bottom: 0;
  padding: 16px 14px 14px;
  border: 0;
  border-radius: 22px;
  text-align: center;
  color: #fff;
  flex: 1 1 auto;
  width: 100%;
  background: linear-gradient(145deg, rgba(26, 86, 255, var(--z-tile-a)), rgba(15, 47, 168, var(--z-tile-a)));
  box-shadow: var(--z-shadow);
  overflow: visible;
  transition: transform .2s ease, box-shadow .2s ease;
}
body .featur_categ .vtabs .link-category:hover { transform: translateY(-6px); box-shadow: var(--z-shadow-hover); }

/* Цветовой ритм плиток */
body .featur_categ .vtabs > div:nth-child(6n+2) .link-category { background: linear-gradient(145deg, rgba(255, 138, 61, var(--z-tile-a)), rgba(229, 86, 10, var(--z-tile-a))); }
body .featur_categ .vtabs > div:nth-child(6n+3) .link-category { background: linear-gradient(145deg, rgba(36, 196, 134, var(--z-tile-a)), rgba(11, 143, 85, var(--z-tile-a))); }
body .featur_categ .vtabs > div:nth-child(6n+4) .link-category { background: linear-gradient(145deg, rgba(139, 92, 246, var(--z-tile-a)), rgba(91, 47, 208, var(--z-tile-a))); }
body .featur_categ .vtabs > div:nth-child(6n+5) .link-category { background: linear-gradient(145deg, rgba(255, 207, 77, var(--z-tile-a)), rgba(242, 161, 0, var(--z-tile-a))); }
body .featur_categ .vtabs > div:nth-child(6n+6) .link-category { background: linear-gradient(145deg, rgba(255, 92, 138, var(--z-tile-a)), rgba(214, 42, 94, var(--z-tile-a))); }
/* лёгкая тень текста, чтобы белые названия читались на более светлом фоне */
body .featur_categ .vtabs .link-category a.text-category { text-shadow: 0 1px 2px rgba(11, 27, 63, .35); }
body .featur_categ .vtabs > div:nth-child(6n+5) a.text-category { text-shadow: none; }

/* Круглая подложка под фото; белые фоны картинок «растворяются» */
body .featur_categ .vtabs .link-category > a:first-child {
  flex: none;
  width: 108px; height: 108px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  padding: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
body .featur_categ .vtabs .link-category > a:first-child img {
  width: 100%; height: 100%; margin: 0; object-fit: contain;
  mix-blend-mode: multiply;
}

/* Название: по центру свободного места, без «прижатия» влево */
body .featur_categ .vtabs .link-category a.text-category {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 4px 38px;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-transform: none !important;
}
body .featur_categ .vtabs > div:nth-child(6n+5) a.text-category { color: var(--z-navy) !important; }
body .featur_categ .vtabs .link-category a.text-category:hover { color: var(--z-navy) !important; }

/* Кнопка-стрелка: было розовым квадратом из старой схемы */
body .featur_categ .vtabs .link-category a.transzone {
  right: 12px; bottom: 12px;
  width: 38px; height: 38px; line-height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .24) !important;
  color: #fff !important;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
body .featur_categ .vtabs .link-category a.transzone:hover { background: #fff !important; color: var(--z-orange) !important; transform: scale(1.08); }
body .featur_categ .vtabs > div:nth-child(6n+5) a.transzone { color: var(--z-navy) !important; background: rgba(11, 27, 63, .12) !important; }

body .featur_categ .sub-category {
  border: 0; border-radius: var(--z-radius); box-shadow: var(--z-shadow-hover);
  background: #fff !important; text-align: left; z-index: 20;
}
body .featur_categ .sub-category a { color: var(--z-text) !important; font-weight: 600; }
body .featur_categ .sub-category a:hover { color: var(--z-orange) !important; }

/* ---------- 6. Заголовки блоков и вкладки ---------- */
body h3.h3modul {
  background: transparent !important;
  color: var(--z-navy) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  padding: 0 0 0 16px !important;
  margin: 34px 0 18px;
  border: 0;
  position: relative;
  text-transform: none;
}
body h3.h3modul:before {
  content: "";
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 6px; border-radius: 6px;
  background: linear-gradient(var(--z-orange), var(--z-yellow));
}
body .nav-tabs { background: transparent !important; border-bottom: 2px solid var(--z-line); padding-left: 0 !important; }
body .nav-tabs > li > a {
  border: 0 !important; border-radius: 999px !important;
  margin-right: 6px; padding: 8px 16px; font-weight: 700; color: var(--z-muted) !important;
}
body .nav-tabs > li.active > a, body .nav-tabs > li > a:hover {
  background: var(--z-blue) !important; color: #fff !important;
}

/* ==========================================================================
   7. КАРТОЧКИ ТОВАРОВ
   ========================================================================== */

/* --- общий вид (сетка, списки, боковые колонки) --- */
body .product-thumb {
  position: relative;
  background: var(--z-card);
  border: 0 !important;
  border-radius: var(--z-radius);
  box-shadow: var(--z-shadow) !important;
  overflow: hidden;
  padding: 0;
  margin-bottom: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
body .product-thumb:hover { box-shadow: var(--z-shadow-hover) !important; }
body .product-thumb .image { position: relative; margin-bottom: 4px; padding: 14px 14px 0; }
body .product-thumb .image img { border-radius: 10px; transition: transform .3s ease; }
body .product-thumb:hover .image img { transform: scale(1.04); }
body .product-thumb .image a:hover { opacity: 1; }

/* Название */
body .product-thumb h4 { height: auto !important; margin: 8px 0 6px; overflow: visible; line-height: 1.35; }
body .product-thumb h4 a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--z-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
body .product-thumb h4 a:hover { color: var(--z-orange) !important; }
body .product-thumb .descr { color: var(--z-muted); font-size: 12px; }
body .product-thumb .caption { padding: 0 14px; }
body .product-thumb .rating { padding-bottom: 2px; }

/* Цена */
body .product-thumb .price {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  border: 0 !important;
  color: var(--z-navy) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.2;
}
body .product-thumb > .price { padding: 0 14px; }
body .product-thumb .price-new { color: var(--z-orange-dark); margin-right: 6px; }
body .product-thumb .price-old { color: var(--z-muted) !important; font-size: 14px; font-weight: 500; }

/* Значки «в избранное / сравнить / быстрый просмотр» — столбиком справа вверху */
body .product-thumb .image .wishcomp {
  top: 8px; right: 8px; bottom: auto;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0;
}
body .product-thumb:hover .image .wishcomp { opacity: 1; }
body .product-thumb .wishcomp > div { float: none; }
body .product-thumb .wishcomp > div a {
  width: 34px; height: 34px; line-height: 34px;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--z-muted) !important;
  box-shadow: var(--z-shadow);
}
body .product-thumb .wishcomp > div a:hover { background: var(--z-orange) !important; color: #fff !important; }
@media (hover: none) { body .product-thumb .image .wishcomp { opacity: 1; } }

/* Шильдики «Новинка / Скидка» */
body .july-stickers { top: 10px; left: 10px; }
body .july-stickers div { border-radius: 999px !important; font-weight: 800; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }

/* --- КНОПКА «КУПИТЬ» (везде одинаково) --- */
body .product-thumb .button-group { display: block; overflow: visible; padding: 12px 14px 14px; border: 0; background: transparent; }
body .product-thumb .caption .button-group { padding: 12px 0 14px; }

body .product-thumb .button-group button,
body .product-thumb .quantity_box button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--z-orange) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-transform: none !important;
  box-shadow: 0 6px 14px rgba(255, 107, 26, .30);
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
body .product-thumb .button-group button:before {
  content: "\f07a";                      /* иконка корзины Font Awesome */
  font-family: FontAwesome;
  font-size: 16px;
  font-weight: normal;
}
body .product-thumb .button-group button:hover,
body .product-thumb .quantity_box button:hover {
  background: var(--z-orange-dark) !important;
  box-shadow: 0 8px 18px rgba(255, 107, 26, .42);
}
body .product-thumb .button-group button:active,
body .product-thumb .quantity_box button:active { transform: scale(.98); }

/* «Нет в наличии» */
body .product-thumb .button-group button.disabled,
body .product-thumb .quantity_box button.disabled,
body .product-thumb .button-group .btn.disabled {
  background: #e7ebf5 !important;
  color: var(--z-muted) !important;
  box-shadow: none;
  cursor: default;
}
body .product-thumb .button-group button.disabled:before,
body .product-thumb .quantity_box button.disabled:before { content: none; }

/* «Выбрать опции» — второстепенная кнопка */
body .product-thumb button.optionmodal {
  margin-top: 8px;
  background: var(--z-blue-soft) !important;
  color: var(--z-blue) !important;
  box-shadow: none;
}
body .product-thumb button.optionmodal:before { content: none; }

/* «Быстрый заказ» (иконка телефона) — квадрат справа от «Купить» */
body .product-thumb .fastorder { position: absolute; right: 14px; bottom: 14px; float: none; z-index: 2; }
body .product-thumb .fastorder a {
  width: 44px; height: 44px; line-height: 44px;
  border-radius: 12px;
  background: var(--z-blue-soft) !important;
  color: var(--z-blue) !important;
  transition: background .15s ease, color .15s ease;
}
body .product-thumb .fastorder a:hover { background: var(--z-blue) !important; color: #fff !important; }
body .product-thumb .fastorder a:before { font-size: 17px; }
body .product-thumb > .fastorder ~ .button-group,
body .product-thumb > .fastorder ~ .quantity_box { padding-right: 68px; }
body .product-thumb .caption .fastorder ~ .button-group,
body .product-thumb .caption .fastorder ~ .quantity_box { padding-right: 54px; }

/* Блок «количество + корзина» (если включён в настройках July) */
body .product-thumb .quantity_box { display: flex; align-items: center; gap: 8px; padding: 12px 14px 14px; }
body .product-thumb .caption .quantity_box { padding: 12px 0 14px; }
body .product-thumb .july_qu_div {
  width: auto !important; height: 44px !important;
  display: inline-flex !important; align-items: center;
  margin: 0 !important;
  border: 1.5px solid var(--z-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
body .product-thumb .july_qu_div .minus,
body .product-thumb .july_qu_div .plus {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 28px; height: 100% !important; padding: 0 !important;
  border: 0 !important; background: #f4f6fc !important; color: var(--z-muted);
}
body .product-thumb input.july_quantity {
  width: 34px; height: 100%; margin: 0 !important;
  border: 0 !important; background: transparent; font-weight: 700; color: var(--z-text);
}
body .product-thumb .quantity_box button.small-grid {
  flex: 1 1 auto; width: auto !important; height: 44px !important; padding: 0 !important;
}
body .product-thumb .quantity_box button.small-grid:before { content: none; }  /* иконка уже есть в :after у July */
body .product-thumb .quantity_box button.small-grid:after { font-size: 18px !important; line-height: 1 !important; }

/* --- РАСКЛАДКА ТОЛЬКО ДЛЯ СЕТКИ: одинаковая высота, кнопка прижата к низу --- */
@media (min-width: 768px) {
  body #content .grid-july:not(.list):not(.list-small),
  body #content .box-product.row { display: flex; flex-wrap: wrap; }
  body #content .grid-july:not(.list):not(.list-small):before,
  body #content .grid-july:not(.list):not(.list-small):after,
  body #content .box-product.row:before,
  body #content .box-product.row:after { display: none; }
  body #content .grid-july:not(.list):not(.list-small) > .product-layout,
  body #content .box-product.row > .product-layout { display: flex; float: none; }
}
body #content .grid-july:not(.list):not(.list-small) .product-thumb,
body #content .box-product.row .product-thumb {
  display: flex; flex-direction: column;
  width: 100%;
  min-height: 100%;
}
body #content .grid-july:not(.list):not(.list-small) .product-thumb:hover,
body #content .box-product.row .product-thumb:hover { transform: translateY(-5px); }
body #content .grid-july:not(.list):not(.list-small) .product-thumb > .caption,
body #content .box-product.row .product-thumb > .caption { flex: 1 1 auto; }
body #content .grid-july:not(.list):not(.list-small) .product-thumb .caption,
body #content .box-product.row .product-thumb .caption { display: flex; flex-direction: column; }
body #content .grid-july:not(.list):not(.list-small) .product-thumb .july_view5 { flex: 1 1 auto; }
body #content .grid-july:not(.list):not(.list-small) .product-thumb .button-group,
body #content .grid-july:not(.list):not(.list-small) .product-thumb .quantity_box,
body #content .box-product.row .product-thumb .button-group,
body #content .box-product.row .product-thumb .quantity_box { margin-top: auto; }
/* квадратное поле под фото, чтобы карточки выглядели ровно */
body #content .grid-july:not(.list):not(.list-small) .product-thumb .image > a:not(.imgan),
body #content .box-product.row .product-thumb .image > a:not(.imgan) {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
}
body #content .grid-july:not(.list):not(.list-small) .product-thumb .image > a:not(.imgan) img,
body #content .box-product.row .product-thumb .image > a:not(.imgan) img {
  width: 100%; height: 100%; object-fit: contain;
}

/* Панель сортировки над сеткой */
body .product-filter { border: 0; border-radius: var(--z-radius); background: #fff; box-shadow: var(--z-shadow); }
body .product-filter > div { background: transparent; }
body .product-filter .display { border-radius: 10px; border-color: var(--z-line); }

/* ---------- 8. Страница товара ---------- */
body .thumbnails .thumbnail, body .image-additional a {
  border: 1px solid var(--z-line); border-radius: var(--z-radius); background: #fff;
}
body .thumbnails .image-additional { border-radius: var(--z-radius); }
body .list-unstyled .price h2, body #product .price h2 {
  color: var(--z-navy) !important; font-size: 34px; font-weight: 800; letter-spacing: -.02em;
}
body .list-unstyled .price span { font-size: 18px; color: var(--z-muted); }
body .product-description {
  border: 0; border-radius: var(--z-radius); background: #fff; box-shadow: var(--z-shadow);
}
body .product-description .outstock {
  border-radius: 999px; padding: 3px 12px; background: #e6f8ef; color: #0a7a47; font-weight: 700;
}
body .product-description .outstock.no-stock { background: #fde8e9; color: var(--z-red); }
body #product .options {
  border: 0; border-radius: var(--z-radius); background: #fff; box-shadow: var(--z-shadow);
}

body #product .cart {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 16px 0 0; margin-bottom: 20px;
}
body #product #input-quantity {
  height: 52px; width: 56px; padding: 0 6px;
  border: 1.5px solid var(--z-line); border-radius: 0; text-align: center; font-weight: 700;
}
body #product #decrease, body #product #increase {
  height: 52px; width: 38px; line-height: 52px;
  background: #f4f6fc; color: var(--z-muted); border: 1.5px solid var(--z-line);
}
body #product #decrease { border-radius: 12px 0 0 12px; }
body #product #increase { border-radius: 0 12px 12px 0; }
body #product button#button-cart, body #product button.nostock {
  flex: 1 1 220px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; margin: 0 !important; padding: 0 24px;
  border: 0 !important; border-radius: 14px !important;
  background: var(--z-orange) !important; color: #fff !important;
  font-size: 16px; font-weight: 800; line-height: 1; text-transform: none !important;
  box-shadow: 0 8px 20px rgba(255, 107, 26, .38);
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
body #product button#button-cart:before {
  content: "\f07a"; font-family: FontAwesome; font-size: 18px; font-weight: normal;
}
body #product button#button-cart:hover { background: var(--z-orange-dark) !important; box-shadow: 0 10px 24px rgba(255, 107, 26, .5); }
body #product button#button-cart:active { transform: scale(.98); }
body #product button.nostock { background: #e7ebf5 !important; color: var(--z-muted) !important; box-shadow: none; }
body #product .singleclick {
  height: 52px; margin: 0 !important; padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px; background: var(--z-blue-soft); color: var(--z-blue) !important; font-weight: 800;
}
body #product .singleclick:hover { background: var(--z-blue); color: #fff !important; }
body #product .links { margin: 0 10px 0 0; }

/* Окно «Товар добавлен в корзину» */
body #notification .alert { border-radius: 22px; }
body #notification .alert-success {
  border: 0; background: #fff; color: var(--z-text);
  padding: 38px 26px 26px; box-shadow: 0 24px 60px rgba(11, 27, 63, .35);
}
body #notification .alert-success a { color: var(--z-blue); font-weight: 700; }
body #notification .alert-success .btn { margin-top: 12px; }

/* ---------- 9. Кнопки, формы, пагинация ---------- */
body .btn-primary, body .btn-default, body .button, body button.btn { border-radius: 12px !important; font-weight: 700; }
body .btn-primary { background: var(--z-blue) !important; border-color: var(--z-blue) !important; color: #fff !important; }
body .btn-primary:hover { background: var(--z-orange) !important; border-color: var(--z-orange) !important; }
body .btn-primary-2, body .button.registr { background: var(--z-orange) !important; color: #fff !important; border-radius: 12px !important; }
body .form-control { border: 1.5px solid var(--z-line); border-radius: 12px; box-shadow: none; height: 42px; }
body textarea.form-control { height: auto; }
body .form-control:focus { border-color: var(--z-blue); box-shadow: 0 0 0 3px rgba(26, 86, 255, .15); }

body .pagination > li > a, body .pagination > li > span {
  border: 0 !important; border-radius: 10px !important; margin: 0 3px;
  background: #fff !important; color: var(--z-text) !important; box-shadow: var(--z-shadow);
}
body .pagination > .active > a, body .pagination > .active > span, body .pagination > li > a:hover {
  background: var(--z-blue) !important; color: #fff !important;
}
body .breadcrumb { background: transparent; padding-left: 0; font-size: 13px; }
body .breadcrumb a { color: var(--z-muted) !important; }
body .breadcrumb a:hover { color: var(--z-orange) !important; }

body ul.box-category > li, body .list-group > a {
  background: #fff !important; border: 0; border-radius: 12px; margin-bottom: 6px; box-shadow: var(--z-shadow);
}
body ul.box-category > li > a:hover, body ul.box-category > li > a.active {
  color: #fff !important; background: var(--z-blue) !important; border-radius: 12px;
}

/* ---------- 10. Подвал ---------- */
body footer { background: var(--z-navy) !important; color: #aeb9d9 !important; margin-top: 50px; border-radius: 28px 28px 0 0; }
body footer .custom-footer { background: rgba(255, 255, 255, .06) !important; border-radius: 28px 28px 0 0; }
body footer .custom-footer, body footer .custom-footer a { color: #fff !important; font-weight: 600; }
body footer h5, body footer .title_h3 { color: #fff !important; font-weight: 800; font-size: 16px; text-transform: none; }
body footer a { color: #aeb9d9 !important; }
body footer a:hover { color: var(--z-yellow) !important; }
body #powered { background: rgba(0, 0, 0, .25) !important; color: #8e9bbf !important; }
body #powered a { color: #8e9bbf !important; }
body #topcontrol { background: var(--z-orange) !important; border-radius: 50% !important; }

/* ---------- 11. Адаптив ---------- */
@media (max-width: 991px) {
  body #header header { padding: 10px 0; }
  body h3.h3modul { font-size: 22px !important; margin-top: 24px; }
  body #header #cart > .btn { height: 46px; }
  body #header .topinfo #search { --z-sh: 46px; }
}
@media (max-width: 767px) {
  body .featur_categ .vtabs > div { width: 50%; float: left; padding: 5px; }
  body .featur_categ .vtabs .link-category { min-height: 150px; padding: 12px 8px 10px; border-radius: 18px; }
  body .featur_categ .vtabs .link-category > a:first-child { width: 78px; height: 78px; padding: 8px; margin-bottom: 6px; }
  body .featur_categ .vtabs .link-category a.text-category { font-size: 13px !important; padding: 2px 4px 30px; }
  body .featur_categ .vtabs .link-category a.transzone { width: 30px; height: 30px; line-height: 30px; right: 8px; bottom: 8px; }
  body .product-thumb .price { font-size: 18px !important; }
  body .product-thumb h4 a { font-size: 13px !important; }
  body .product-thumb .button-group button { height: 42px; font-size: 13px; }
  body .product-thumb .fastorder a { width: 42px; height: 42px; line-height: 42px; }
  body #product .cart { gap: 10px; }
  body #product button#button-cart { flex-basis: 100%; }
  body footer { border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   v3 — шапка на телефоне/планшете, панель покупки на странице товара
   ========================================================================== */

/* --- 12. Шапка: поиск занимает всё свободное место, корзина — по содержимому --- */
@media (max-width: 991px) {
  body #header header .row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; }
  body #header header .row:before, body #header header .row:after { display: none; }
  body #header header .row > .topinfo { float: none; padding-left: 8px; padding-right: 8px; }
  body #header header .row > .topinfo:first-child { flex: 0 0 100%; max-width: 100%; }
  body #header header .row > .cap-center { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
  body #header header .row > .topinfo:last-child { flex: 0 0 auto; width: auto; max-width: none; }
  body #header .topinfo #search, body #header #cart { margin: 0; }
}
@media (max-width: 767px) {
  /* в корзине — иконка + короткая сумма, длинный текст прячем */
  body #header #cart > .btn { width: auto; min-width: 0; padding: 0 14px; gap: 8px; }
  body #header #cart #cart-total { display: none; }
  body #header #cart #z-cart-short { display: block; }
  body #header #cart .btn #cart-top-fixed { left: auto; right: -6px; }

  /* выпадающая корзина не должна быть шире экрана */
  body #header #cart .dropdown-menu {
    left: auto; right: 0;
    width: calc(100vw - 16px); max-width: 420px; min-width: 0;
  }
  body #header #cart .dropdown-menu li > div { min-width: 0 !important; width: 100%; }
  body #header #cart .dropdown-menu table { width: 100%; }
}

/* --- 13. Панель «количество + В корзину» на странице товара --- */
body #product .form-group.cart {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  margin: 16px 0 20px;
  padding: 18px !important;
  background: #fff !important;          /* была голубая из настроек July */
  border: 0 !important;
  border-radius: 20px;
  box-shadow: var(--z-shadow-hover);
}
body #product .form-group.cart:before, body #product .form-group.cart:after { display: none; }

/* Количество — одна «таблетка» вместо трёх отдельных коробок */
body #product .form-group.cart .decrease,
body #product .form-group.cart .quantity-number,
body #product .form-group.cart .increase { float: none; flex: none; margin: 0; padding: 0; }
body #product .form-group.cart #decrease,
body #product .form-group.cart #increase {
  width: 42px; height: 52px; padding: 0; margin: 0;
  border: 1.5px solid var(--z-line);
  background: #f4f6fc; color: var(--z-navy);
  font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body #product .form-group.cart #decrease { border-radius: 14px 0 0 14px; border-right: 0; }
body #product .form-group.cart #increase { border-radius: 0 14px 14px 0; border-left: 0; }
body #product .form-group.cart #decrease:hover,
body #product .form-group.cart #increase:hover { background: var(--z-blue); border-color: var(--z-blue); color: #fff; }
body #product .form-group.cart #input-quantity {
  width: 56px; height: 52px; margin: 0; padding: 0;
  border: 1.5px solid var(--z-line); border-radius: 0;
  background: #fff; color: var(--z-text);
  text-align: center; font-size: 16px; font-weight: 800;
}

/* «В корзину» занимает всё оставшееся место в той же строке */
body #product .form-group.cart button#button-cart {
  flex: 1 1 150px; width: auto; min-width: 0;
  margin: 0 0 0 12px !important;
}
body #product .form-group.cart button.nostock { flex: 1 1 100%; margin: 0 !important; }
body #product .form-group.cart .singleclick { flex: 1 1 100%; width: 100%; margin: 12px 0 0 !important; }

/* «В закладки» и «В сравнение» — две аккуратные кнопки в ряд */
body #product .form-group.cart .links {
  flex: 0 0 100%; display: flex; gap: 8px;
  margin: 16px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--z-line);
}
body #product .form-group.cart .links > span { flex: 1 1 0; float: none; display: block; margin: 0; }
body #product .form-group.cart .links > span a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 10px;
  border-radius: 12px;
  background: #f4f6fc;
  color: var(--z-text) !important;
  font-size: 13px; font-weight: 700; line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
body #product .form-group.cart .links > span a:hover { background: var(--z-blue-soft); color: var(--z-blue) !important; }
body #product .form-group.cart .minimum { flex: 0 0 100%; margin-top: 10px; color: var(--z-muted); font-size: 12px; }

@media (max-width: 767px) {
  body #product .form-group.cart { padding: 14px !important; border-radius: 18px; }
  body #product .form-group.cart #decrease, body #product .form-group.cart #increase { width: 38px; }
  body #product .form-group.cart #input-quantity { width: 48px; }
  body #product .form-group.cart button#button-cart { flex-basis: 120px; margin-left: 10px !important; padding: 0 12px; font-size: 15px; }
  body #product .form-group.cart .links > span a { font-size: 12px; padding: 0 6px; }
}

/* --- 14. Вкладки и описание товара --- */
body .nav-tabs > li > a { padding: 9px 18px !important; line-height: 1.2; }
/* описания часто вставлены с чужим шрифтом (Times) — приводим к единому виду */
body #tab-description, body #tab-description *:not(.fa):not([class^="fa-"]) {
  font-family: 'Manrope', 'Roboto', Arial, sans-serif !important;
}
body #tab-description { line-height: 1.65; }

/* --- 15. Сворачиваемые описания (товар и категория), кнопка «Показать полностью» ---
   Число видимых строк задаётся переменной Z_LINES в mycustom.js */
body .z-collapse-inner { position: relative; overflow: hidden; transition: max-height .35s ease; }
body .z-collapse-inner.z-collapsed:after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 64px;
  pointer-events: none;
}
/* плавное «затухание» текста в цвет фона под ним */
body .z-collapse-product .z-collapse-inner.z-collapsed:after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%); }
body .z-collapse-cat .z-collapse-inner.z-collapsed:after { background: linear-gradient(to bottom, rgba(242, 245, 252, 0), #f2f5fc 85%); }

body .z-collapse-cat { font-size: 14px; color: var(--z-text); line-height: 1.6; }
body .z-collapse-cat .z-collapse-inner { font-size: 14px; line-height: 1.6; }

body .z-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px 0 0; padding: 9px 18px;
  border: 0; border-radius: 999px;
  background: var(--z-blue-soft); color: var(--z-blue);
  font-family: 'Manrope', 'Roboto', Arial, sans-serif; font-size: 13px; font-weight: 800; line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
body .z-more:hover, body .z-more:focus { background: var(--z-blue); color: #fff; outline: 0; }
body .z-more .fa { font-size: 16px; transition: transform .25s ease; }
body .z-collapse-host.is-open .z-more .fa { transform: rotate(180deg); }