/*
 * Шаблон «Магазин» — магазин техники в духе oskins.kg: белое полотно, тёмная полоса меню
 * разделов, карточки в рамке с брендом над названием, зелёные кнопки и тёмный подвал.
 * Повторяет оформление integrations/opencart2/theme/oskins-pro.css, чтобы после переезда
 * с OpenCart покупатели узнали свой магазин.
 */
:root {
  --bg-light: #ffffff;         --bg-dark: #111317;
  --surface-light: #ffffff;    --surface-dark: #181b21;
  --surface-2-light: #f6f7f9;  --surface-2-dark: #20242c;
  --border-light: #e5e7eb;     --border-dark: #2a2e37;
  --text-light: #1f2328;       --text-dark: #eceef2;
  --muted-light: #6b7280;      --muted-dark: #9aa1ae;

  /* Зелёный — цвет кнопок магазина; свой цвет владельца по-прежнему его перекрывает. */
  --accent-light: #16803c;          --accent-dark: #22a050;
  --accent-contrast-light: #ffffff; --accent-contrast-dark: #ffffff;

  --container: 1200px;
  --grid-min: 210px;
  --card-ratio: 1 / 1;
  --card-fit: contain;
  --gap: 18px;
  --logo-h: 48px;

  --h1: 26px;
  --h2: 20px;

  --menu-bg: #1d1f23;
  --menu-text: rgba(255, 255, 255, .86);
}

/* ---------- Шапка ---------- */

/* Шапка уезжает при прокрутке, а полоса меню остаётся вверху экрана: вся шапка заняла бы
   полэкрана телефона. Липкий элемент не выходит за пределы родителя, поэтому шапка
   растворяется (display: contents), и полоса меню становится ребёнком страницы. Фон шапки
   во всю ширину рисует сама строка шапки — тенью без размытия, обрезанной по высоте. */
.header { display: contents; }
.header-row { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); }
.nav-bar { position: sticky; top: 0; z-index: 20; }
.gallery { top: 68px; }
.header-row { min-height: 84px; gap: 20px; }
/* Логотип не сжимается никогда: место уступают поиск и кнопки, а не имя магазина. */
.brand { flex: none; }
.brand-text { overflow: visible; }
.search input { border-radius: 8px 0 0 8px; }
.search button { border-radius: 0 8px 8px 0; }
.header-phone { font-size: 14px; }

/* В шапке кружки той же высоты, что переключатель темы и избранное: ряд кнопок ровный.
   Отступ справа отделяет мессенджеры от кнопок самого магазина. */
.header .socials { gap: 8px; margin: 0 6px 0 0; }
.header .social { --social-size: 42px; }
.header .social svg { width: 19px; height: 19px; }
/* Подвал тёмный в обеих темах: кнопки — полупрозрачные на нём, а не цвета полотна. */
.footer .social { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); }
.footer .social:hover { background: var(--social-brand); border-color: var(--social-brand); color: #fff; }

.cart-link { border-radius: 999px; font-weight: 600; }
/* Все круглые кнопки шапки одного размера: переключатель темы, избранное, мессенджеры. */
:root[data-js] .theme-switch { border-radius: 50%; }
.cart-link[data-fav-link] { width: 42px; height: 42px; padding: 0; justify-content: center; }
.cart-link[data-fav-link] .cart-count { position: absolute; top: -6px; right: -6px; }

/* ---------- Меню разделов: тёмная полоса во всю ширину ---------- */

.nav-bar { background: var(--menu-bg); }
.nav-bar .nav { padding: 0 20px; gap: 0; flex-wrap: wrap; }
.nav-bar .chip {
  border: 0; border-radius: 0; background: transparent;
  color: var(--menu-text); font-size: clamp(13px, 1.15vw, 14px); font-weight: 600;
  padding: 15px clamp(10px, 1.1vw, 16px);
}
.nav-bar .chip:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-bar .chip[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-bar .submenu { top: 100%; border-radius: 0 0 8px 8px; }
/* Пункты, не поместившиеся в строку, nav.js прячет атрибутом hidden — он должен
   перебить display у пунктов и ссылок списка. */
.nav-bar [hidden] { display: none !important; }
/* Со скриптом полоса не переносится: разделы, которым нет места, прячутся — все они есть
   в списке под «Все товары». */
.nav-bar.nav-fit .nav { flex-wrap: nowrap; }
/* Текущий раздел спрятан из полосы — подсвечиваем «Все товары», где он теперь лежит. */
.nav-bar .nav-all[data-has-current] > .chip { background: rgba(255, 255, 255, .12); color: #fff; }
/* Каталог бывает длинным: список прокручивается сам и не уходит за нижний край экрана.
   Прокручивается внутренний блок: у самого списка overflow обрезал бы панель подразделов. */
.nav-all > .submenu { min-width: 280px; padding: 0; }
.nav-all .submenu-scroll { max-height: calc(100vh - 160px); overflow-y: auto; padding: 6px; }
.nav-all.open > .submenu { display: block; }
.nav-all .submenu a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav-all .submenu-scroll > a:first-child { border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 4px; padding-bottom: 9px; }
/* Раздел с подразделами: стрелка справа, а подразделы — панелью сбоку при наведении. */
.nav-all .submenu-parent { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-all .submenu-parent svg { flex: none; color: var(--muted); }
.nav-all .submenu-group:hover > .submenu-parent { background: var(--surface-2); color: var(--accent); }
.nav-all .submenu-group:hover > .submenu-parent svg { color: var(--accent); }
/* Панель подразделов привязана к .submenu (ближайшему позиционированному предку) и выглядит
   так же, как на главной, — общие правила ниже, у .sh-fly. */
/* В меню «Все товары» панель — продолжение списка, а не отдельная карточка: список прижат
   к полосе меню прямыми верхними углами, и парящая рядом скруглённая карточка с зазором
   смотрелась бы чужой. Поэтому панель встаёт вплотную, их разделяет одна общая линия,
   верх тоже прямой, а скругление только у нижнего внешнего угла. Нижний правый угол
   списка на это время тоже прямой — вместе они читаются как одно меню. */
.nav-all .nav-fly {
  top: -1px; left: 100%; min-height: calc(100% + 2px);
  border-radius: 0 0 var(--radius-sm) 0;
  /* Тень панели не должна ложиться на список слева. */
  clip-path: inset(0 -60px -60px 0);
  animation-name: fly-fade;
}
.nav-all .nav-fly::before { content: none; }
.nav-all > .submenu:has(.submenu-group:hover) { border-bottom-right-radius: 0; }
@keyframes fly-fade { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) { .nav-all .submenu-group:hover > .nav-fly { display: block; } }

/* Средняя ширина: поиск уходит второй строкой шапки во всю ширину, а не сжимает логотип
   и не выдавливает кнопки за край. */
@media (min-width: 761px) and (max-width: 1179px) {
  .header-row { flex-wrap: wrap; row-gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .search { order: 3; flex-basis: 100%; }
}
@media (min-width: 761px) and (max-width: 979px) {
  /* Тема берётся из системы, как на телефоне: так ряд кнопок помещается рядом с логотипом. */
  :root[data-js] .theme-switch { display: none; }
}

/* Телефон: меню кнопкой «Меню», разделы — список во всю ширину. Подразделы и «Все товары»
   с каталогом в списке не показываем: список и так полный, а короткий он, как в магазине на OpenCart. */
@media (max-width: 760px) {
  .nav-toggle {
    display: block; width: max-content; margin: 0 auto; padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px;
    color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
  }
  .nav-bar { padding: 10px 0; }
  .nav-open { display: block; position: absolute; opacity: 0; pointer-events: none; }
  .nav-open:focus-visible + .nav-toggle { outline: 2px solid #fff; outline-offset: 2px; }
  .nav-bar .nav { display: none; flex-direction: column; flex-wrap: nowrap; overflow: visible; padding: 10px 0 0; }
  /* Меню закреплено вверху: длинный список прокручивается сам, иначе нижние разделы не достать. */
  .nav-open:checked ~ .nav { display: flex; margin-bottom: -10px; max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; }
  .nav-bar .nav-all { display: none !important; }
  .nav-bar .submenu { display: none !important; }
  .nav-bar .chip {
    padding: 13px 20px; border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
    -webkit-tap-highlight-color: transparent;
  }
  /* Раздел с подразделами обёрнут в .nav-item: без этого его строка короче остальных, и
     подсветка текущего раздела выглядит обрезанной кнопкой. */
  .nav-bar .nav-item > .chip { flex: 1; }
  .nav-bar .chip-more { display: none; }
}

/* ---------- Карточки каталога ---------- */

.card { border: 1px solid var(--border); border-radius: 10px; box-shadow: none; }
.card:hover { border-color: #d1d5db; box-shadow: 0 6px 20px rgba(17, 24, 39, .08); }
.card-photo { background: #fff; padding: 12px; }
.card-photo img { transform: none; }
.card:hover .card-photo img { transform: none; }
.card-body { padding: 12px 14px 14px; gap: 6px; }

.card-brand {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.card-name {
  font-size: 14px; font-weight: 500; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.8em;
}
.card:hover .card-name { color: var(--text); }
.card .stock { font-size: 12px; }
.price { font-size: 18px; }
.card .btn-wide { border-radius: 8px; font-weight: 600; }

/* ---------- Главная: витрина магазина техники ---------- */

/* Первый экран как у больших магазинов электроники: каталог слева, баннер в центре,
   плитки акций справа. На средней ширине плитки уходят строкой под баннер, а каталог
   прячется — разделы и так есть в полосе меню. */
.sh-top { display: grid; gap: 16px; grid-template-columns: 260px minmax(0, 1fr) 280px; margin-bottom: 16px; }
.sh-cats { position: relative; padding: 6px 0 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sh-cats-head { padding: 10px 16px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; }
.sh-cats ul { list-style: none; margin: 0; padding: 0; }
.sh-cat > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; font-size: 14px; color: var(--text); }
.sh-cat > a svg { flex: none; color: var(--muted); }
.sh-cat:hover > a, .sh-cat:focus-within > a { background: var(--surface-2); color: var(--accent); }
.sh-cat:hover > a svg { color: var(--accent); }
/* Панель подразделов — отдельная карточка рядом со списком: с отступом, скруглённая со всех
   сторон и с мягкой тенью, а не приклеенная к краю. Во всю высоту списка, чтобы курсор,
   идущий вправо с любого раздела, попадал на неё. Зазор перекрыт невидимой перемычкой
   (::before): без неё наведение терялось бы по пути и панель закрывалась. */
.sh-fly, .nav-fly {
  display: none; position: absolute; z-index: 15; top: -1px; left: calc(100% + 8px);
  width: 300px; min-height: calc(100% + 2px); padding: 14px 10px 10px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow);
  animation: fly-in .12s ease-out;
}
.sh-fly::before, .nav-fly::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; }
@keyframes fly-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sh-fly, .nav-fly { animation: none; } }
@media (hover: hover) { .sh-cat:hover > .sh-fly { display: block; } }
.sh-fly .sh-fly-title, .nav-fly .sh-fly-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 6px; padding: 4px 10px 12px; border-bottom: 1px solid var(--border); border-radius: 0;
  font-size: 15px; font-weight: 700; color: var(--text); background: transparent;
}
.sh-fly-title::after { content: "Все"; font-size: 12px; font-weight: 600; color: var(--accent); }
.sh-fly .sh-fly-title:hover, .nav-fly .sh-fly-title:hover { color: var(--accent); background: transparent; }
.sh-fly-list a, .nav-fly .sh-fly-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text);
}
.sh-fly-list a:hover, .nav-fly .sh-fly-list a:hover { background: var(--surface-2); color: var(--accent); }
.sh-fly-list span {
  flex: none; min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2);
  font-size: 12px; text-align: center; color: var(--muted);
}
.sh-fly-list a:hover span { background: var(--surface); }

.sh-hero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 380px;
  border-radius: 12px; color: #fff;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 52%),
    radial-gradient(circle at 70% 110%, rgba(56, 120, 255, .35), transparent 45%),
    linear-gradient(135deg, #1d1f23, #2c313a);
}
.sh-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-hero.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .15)); }
.sh-hero-body { position: relative; z-index: 1; max-width: 580px; padding: 36px 40px; }
.sh-hero h1 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; color: #fff; }
.sh-hero p { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.sh-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-hero .btn { height: 46px; padding: 0 24px; border-radius: 8px; font-weight: 600; }
.sh-hero .sh-btn-light { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.sh-hero .sh-btn-light:hover { background: rgba(255, 255, 255, .2); }
.sh-hero-facts {
  display: flex; flex-wrap: wrap; gap: 8px 32px; list-style: none; margin: 28px 0 0; padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16); font-size: 13px; color: rgba(255, 255, 255, .72);
}
.sh-hero-facts b { display: block; font-size: 22px; line-height: 1.2; color: #fff; }

/* Слайды на месте баннера: высоту задаёт строка сетки, а не пропорция картинки. */
.sh-slider { display: block; aspect-ratio: auto; min-height: 380px; margin: 0; border-radius: 12px; }
.sh-slider .slider-dots { bottom: 18px; }
.sh-promos { display: grid; gap: 16px; grid-auto-rows: 1fr; }
.sh-promo {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 22px;
  border-radius: 12px; color: #fff; transition: transform .15s ease, box-shadow .15s ease;
}
.sh-promo:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17, 24, 39, .18); color: #fff; }
/* Крупный круг в углу — чтобы плитка читалась как баннер, а не как кнопка. */
.sh-promo::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.sh-promo-sale { background: linear-gradient(135deg, #e11d48, #f97316); }
.sh-promo-new { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #0b1f14)); }
.sh-promo-brands { background: linear-gradient(135deg, #334155, #0f172a); }
.sh-promo-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.sh-promo-title { font-size: 26px; font-weight: 800; line-height: 1.15; }
.sh-promo-text { font-size: 14px; opacity: .9; }
.sh-promo-go { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 600; }

/* Условия покупки — одна полоса с иконками. Ячейки разделены просветом сетки, поэтому
   черта между ними не рвётся при переносе на вторую строку. */
.sh-benefits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; overflow: hidden;
  margin-bottom: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--border);
}
.sh-benefit { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface); color: var(--text); }
a.sh-benefit:hover b { color: var(--accent); }
.sh-benefit svg {
  flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sh-benefit b { display: block; font-size: 14px; font-weight: 600; }
.sh-benefit span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }

.sh-section { margin-bottom: 44px; scroll-margin-top: 70px; }
.sh-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.sh-head h2 { margin: 0 auto 0 0; font-size: 22px; }
.sh-head-count { margin-left: 4px; font-size: 15px; font-weight: 500; color: var(--muted); vertical-align: 2px; }
.sh-all { font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.sh-all:hover { text-decoration: underline; }
.sh-rail-nav { display: flex; gap: 6px; }
.sh-rail-nav[hidden] { display: none; }
.sh-rail-nav button {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer;
}
.sh-rail-nav button:hover:not(:disabled) { border-color: var(--menu-bg); background: var(--menu-bg); color: #fff; }
.sh-rail-nav button:disabled { opacity: .35; cursor: default; }
.sh-rail-nav [data-rail-prev] svg { transform: rotate(180deg); }

/* Лента товаров: те же карточки, что в каталоге, только в одну прокручиваемую строку. */
.sh-rail .grid {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--gap)) / 5);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.sh-rail .grid::-webkit-scrollbar { display: none; }
.sh-rail .card { scroll-snap-align: start; }

.sh-sections { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); align-items: start; }
.sh-section-card {
  display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease;
}
.sh-section-card:hover { border-color: #d1d5db; box-shadow: 0 6px 20px rgba(17, 24, 39, .08); }
.sh-section-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: var(--text); }
.sh-section-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-section-title { font-size: 16px; font-weight: 700; line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }
.sh-section-main:hover .sh-section-title { color: var(--accent); }
.sh-section-count { font-size: 13px; color: var(--muted); }
.sh-section-photo { flex: none; width: 96px; height: 96px; border-radius: 10px; background: #fff; }
.sh-section-photo img { width: 100%; height: 100%; object-fit: contain; }
.sh-section-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sh-section-links a { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; color: var(--text); }
.sh-section-links a:hover { background: var(--menu-bg); color: #fff; }
.sh-section-links .sh-more { background: transparent; color: var(--muted); }

.sh-brands { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sh-brand {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 84px; padding: 14px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); text-align: center; color: var(--text);
}
.sh-brand:hover { border-color: var(--menu-bg); box-shadow: 0 6px 20px rgba(17, 24, 39, .08); }
.sh-brand-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sh-brand:hover .sh-brand-name { color: var(--accent); }
.sh-brand-count { font-size: 12px; color: var(--muted); }

@media (max-width: 1179px) {
  .sh-top { grid-template-columns: 240px minmax(0, 1fr); }
  .sh-promos { grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: 1fr; grid-auto-rows: auto; }
  .sh-rail .grid { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); }
}
@media (max-width: 1023px) {
  .sh-top { grid-template-columns: minmax(0, 1fr); }
  .sh-cats { display: none; }
  .sh-rail .grid { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
}
@media (max-width: 760px) {
  .sh-top { gap: 10px; margin-bottom: 10px; }
  .sh-hero { min-height: 0; }
  .sh-slider { aspect-ratio: 16 / 9; min-height: 0; }
  .sh-hero-body { padding: 26px 20px 22px; }
  .sh-hero p { font-size: 15px; margin-bottom: 18px; }
  .sh-hero .btn { height: 42px; padding: 0 18px; }
  .sh-hero-facts { gap: 6px 22px; margin-top: 20px; padding-top: 14px; }
  .sh-hero-facts b { font-size: 18px; }
  .sh-promos { gap: 10px; }
  .sh-promo { padding: 14px; gap: 3px; }
  .sh-promo-kicker { font-size: 10px; }
  .sh-promo-title { font-size: 18px; }
  .sh-promo-text { font-size: 12px; }
  .sh-promo-go { font-size: 13px; padding-top: 6px; }
  /* На телефоне условия — лента вбок: пять строк подряд заняли бы целый экран. */
  .sh-benefits { display: flex; overflow-x: auto; gap: 0; margin-bottom: 32px; scrollbar-width: none; background: var(--surface); }
  .sh-benefits::-webkit-scrollbar { display: none; }
  .sh-benefit { flex: 0 0 auto; max-width: 250px; padding: 12px 14px; }
  .sh-benefit + .sh-benefit { border-left: 1px solid var(--border); }
  .sh-benefit svg { width: 34px; height: 34px; padding: 7px; }
  .sh-section { margin-bottom: 32px; }
  .sh-head { margin-bottom: 12px; }
  .sh-head h2 { font-size: 19px; }
  .sh-rail-nav { display: none; }
  /* Видна часть следующей карточки — понятно, что ленту можно листать. */
  .sh-rail .grid { grid-auto-columns: calc((100% - 10px) / 2.15); }
  .sh-sections { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sh-section-card { padding: 14px; }
  .sh-section-photo { width: 72px; height: 72px; }
  .sh-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sh-brand { min-height: 68px; }
}

/* ---------- Страница товара ---------- */

/* Как в OpenCart: фото всегда в квадрате на белом фоне. Широкий снимок не превращается
   в узкую полоску, а рамка не прыгает при переключении фотографий. */
.gallery-main { aspect-ratio: 1 / 1; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.gallery-main img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.gallery-thumbs button { border-radius: 8px; background: #fff; }
.gallery-thumbs img { object-fit: contain; padding: 4px; }
.detail h1 { font-size: 24px; line-height: 1.3; margin-bottom: 6px; }
/* Бренд под названием, отделённый чертой, — как на странице товара в OpenCart. */
.detail-brand {
  display: block; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* Цена системным шрифтом, как в OpenCart: в Inter крупные цифры выходят слишком широкими. */
.detail .price { font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; }
/* Единица и условия получения в магазине техники лишние: всё продаётся поштучно, а доставка
   и оплата расписаны на странице «Информация». */
.detail .price-unit, .detail .panel-delivery { display: none; }
.panel { border-radius: 10px; }
.buy .btn { height: 48px; padding: 0 28px; border-radius: 8px; font-weight: 600; }

/* ---------- Страница раздела ---------- */

/* Крошки, заголовок, подразделы и сортировка — плотным блоком: товары начинаются сразу,
   а не через полэкрана воздуха. Счётчики товаров магазину не нужны. */
.main { padding-top: 18px; }
.crumbs { margin-bottom: 8px; }
.catalog-count, .toolbar-count { display: none; }
.toolbar { justify-content: flex-end; margin-bottom: 14px; }

/* Небольшие овальные кнопки в строку — как .sub_section в oskins-pro.css, а не плитки главной. */
.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px !important; }
.subcats .tile {
  display: inline-block; min-height: 0; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--text);
}
.subcats .tile:hover { border-color: var(--menu-bg); background: var(--menu-bg); color: #fff; }

/* ---------- Подвал ---------- */

.footer { background: var(--menu-bg); color: rgba(255, 255, 255, .7); border-top: 0; }
.footer a { color: rgba(255, 255, 255, .7); }
.footer a:hover { color: #fff; }
.footer-title { color: #fff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); }

/* ---------- Телефон: как мобильная версия oskins.kg ---------- */

@media (max-width: 760px) {
  /* Шапка — как исходная мобильная версия oskins.kg: поиск сверху, ниже по центру логотип,
     телефоны, мессенджеры и корзина во всю ширину. Кнопки шапки становятся ячейками сетки,
     чтобы встать по своим рядам, а не переноситься как придётся. */
  .header-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-items: center;
    align-items: center; gap: 12px 10px; min-height: 0; padding-top: 12px; padding-bottom: 16px;
  }
  .header-actions { display: contents; }
  .search { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .search input, .search button { height: 40px; }
  .brand { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  .brand.has-tagline, .brand-tagline { align-items: center; text-align: center; }
  .header-phones { display: flex; grid-column: 1 / -1; grid-row: 3; align-items: center; gap: 2px; }
  .header-phone { font-size: 16px; gap: 8px; line-height: 1.6; }
  .phone-icon { width: 15px; height: 15px; }
  .header .socials { grid-column: 1 / -1; grid-row: 4; gap: 14px; margin: 2px 0; }
  .header .social { --social-size: 42px; }
  /* Тема на телефоне берётся из системы: третья круглая кнопка в ряду лишняя. */
  :root[data-js] .theme-switch { display: none; }
  .header-actions > .cart-link:last-child { grid-column: 1; grid-row: 5; justify-self: stretch; justify-content: center; padding: 11px 18px; font-size: 15px; }
  .cart-link[data-fav-link] { grid-column: 2; grid-row: 5; width: 44px; height: 44px; }

  /* Каталог — две карточки в ряд, как в магазине на OpenCart, а не одна во весь экран. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-photo { padding: 8px; }
  .card-body { padding: 10px; gap: 5px; }
  .card-brand { font-size: 11px; }
  .card-name { font-size: 13px; }
  .price { font-size: 16px; }
  .price-row { gap: 4px; }
  .price-row .muted { font-size: 12px; }
  .card .btn-wide { height: 36px; padding: 0 8px; font-size: 13px; }
  .fav-corner { transform: scale(.85); transform-origin: top right; }
  .badge { font-size: 11px; padding: 3px 7px; }

  /* Разделы на главной — компактно, по два в ряд. */
  .tiles:not(.subcats) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tiles:not(.subcats) .tile { min-height: 56px; padding: 10px; font-size: 14px; }
}