/* ============================================================
   Shnurka.ru — тема редизайна (design system)
   Шрифты: Unbounded (заголовки) + Manrope (текст)
   Две темы: светлая (по умолчанию) и тёмная (data-theme / prefers-color-scheme)
   Классы с префиксом sh- чтобы не конфликтовать со старым style.css во время миграции.
   ============================================================ */

/* ---------- Токены ---------- */
:root {
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Montserrat', 'Manrope', system-ui, sans-serif;

  /* Светлая тема */
  --bg:#fbfcfb; --surface:#ffffff; --surface-2:#f3f7f3; --surface-3:#e9efe9;
  --ink:#16201a; --muted:#5a655d; --muted-2:#7a857d;
  --border:#e2e8e3; --border-2:#dde3de; --border-3:#c9d2ca;
  --accent:#1f8546;          /* акцент-текст/ссылки на светлом (AA) */
  --accent-bright:#3fce6e;   /* акцент на тёмных плашках/hero */
  --btn:#2ba658; --btn-hover:#23904a; --btn-ink:#ffffff;
  --hero-ink:#ffffff; --hero-muted:#d7ded8;
  --shadow-1:0 1px 3px rgba(20,30,22,.05), 0 6px 18px rgba(20,45,25,.06);
  --shadow-2:0 14px 40px rgba(15,50,25,.14);

  --radius:16px; --radius-sm:10px; --radius-lg:20px; --radius-pill:100px;
  --maxw:1240px;
  --pad-x:clamp(16px, 4vw, 48px);

  color-scheme: light;
}

/* Тёмная тема: prefers-color-scheme (первый визит) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#17191c; --surface:#1f2227; --surface-2:#262a2f; --surface-3:#2e3339;
    --ink:#e9ebef; --muted:#a6adb5; --muted-2:#858c94;
    --border:#31363c; --border-2:#3b4046; --border-3:#3b4046;
    --accent:#3fce6e; --accent-bright:#3fce6e;
    --btn:#2ba658; --btn-hover:#31b563; --btn-ink:#06120a;
    --hero-ink:#ffffff; --hero-muted:#c3cec5;
    --shadow-1:0 1px 3px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.4);
    --shadow-2:0 16px 46px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
/* Тёмная тема: явный тумблер */
:root[data-theme="dark"] {
  --bg:#17191c; --surface:#1f2227; --surface-2:#262a2f; --surface-3:#2e3339;
  --ink:#e9ebef; --muted:#a6adb5; --muted-2:#858c94;
  --border:#31363c; --border-2:#3b4046; --border-3:#3b4046;
  --accent:#3fce6e; --accent-bright:#3fce6e;
  --btn:#2ba658; --btn-hover:#31b563; --btn-ink:#06120a;
  --hero-ink:#ffffff; --hero-muted:#c3cec5;
  --shadow-1:0 1px 3px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.4);
  --shadow-2:0 16px 46px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { margin:0; font-family:var(--font-display); font-weight:600; line-height:1.15; }
p { margin:0; }
:focus-visible { outline:3px solid var(--btn); outline-offset:2px; border-radius:4px; }

.sh-wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.sh-section { padding-block:clamp(40px,6vw,72px); }
.sh-eyebrow { font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.sh-h2 { font-size:clamp(1.5rem,1.2rem+1.2vw,1.75rem); }
.sh-tabular { font-variant-numeric:tabular-nums; }

/* ---------- Кнопки ---------- */
.sh-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:700; font-size:15px; line-height:1;
  padding:14px 26px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s; }
.sh-btn:hover { transform:translateY(-2px); }
.sh-btn--primary { background:var(--btn); color:var(--btn-ink); font-weight:800; box-shadow:var(--shadow-1); }
.sh-btn--primary:hover { background:var(--btn-hover); box-shadow:var(--shadow-2); }
.sh-btn--outline { background:transparent; color:var(--ink); border-color:var(--border-3); }
.sh-btn--outline:hover { border-color:var(--btn); color:var(--accent); }
.sh-btn--onhero { color:var(--hero-ink); border-color:rgba(255,255,255,.4); background:rgba(10,16,11,.32); }
.sh-btn--onhero:hover { background:rgba(10,16,11,.5); }

.sh-icon { width:1.05em; height:1.05em; flex:none; }

/* ---------- Шапка ---------- */
.sh-header { position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.sh-header__row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:16px; }
.sh-brand { display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.sh-brand__mark { display:block; height:38px; width:auto; }
.sh-brand__name { font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
/* Знак: светлая версия (чёрный аглет) на светлом фоне, тёмная (белый аглет) — на тёмном */
.sh-emblem-dark { display:none; }
:root[data-theme="dark"] .sh-emblem-light { display:none; }
:root[data-theme="dark"] .sh-emblem-dark { display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sh-emblem-light { display:none; }
  :root:not([data-theme="light"]) .sh-emblem-dark { display:block; }
}
.sh-nav ul { list-style:none; display:flex; align-items:center; gap:2px; margin:0; padding:0; }
.sh-nav a { display:block; font-size:13.5px; font-weight:600; color:var(--muted); padding:8px 10px; border-radius:8px; white-space:nowrap; transition:color .2s, background .2s; }
.sh-nav a:hover { color:var(--ink); background:var(--surface-2); }
.sh-nav li.active > a, .sh-nav a.active { color:var(--accent); }
/* выпадающее подменю (Продукция) */
.sh-nav .sh-has-sub { position:relative; }
.sh-nav .sh-has-sub > a::after { content:"▾"; margin-left:5px; opacity:.5; font-size:.85em; }
.sh-submenu { position:absolute; top:calc(100% + 8px); left:0; min-width:250px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-2); padding:8px; margin:0; list-style:none; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s, transform .18s, visibility .18s; }
.sh-has-sub:hover .sh-submenu, .sh-has-sub:focus-within .sh-submenu { opacity:1; visibility:visible; transform:translateY(0); }
.sh-submenu a { color:var(--ink); }
.sh-header__actions { display:flex; align-items:center; gap:10px; }
.sh-phone-btn { border:1px solid var(--border-3); color:var(--ink); font-weight:700; font-size:14px; padding:12px 22px; border-radius:8px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sh-phone-btn:hover { border-color:var(--btn); color:var(--accent); }
.sh-phones { display:flex; flex-direction:column; gap:1px; text-align:right; }
.sh-phones a { font-weight:700; font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.32; }
.sh-phones a:hover { color:var(--accent); }
.sh-theme { display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--muted); cursor:pointer; }
.sh-theme:hover { color:var(--ink); border-color:var(--border-3); }
.sh-theme .sh-sun { display:none; } .sh-theme .sh-moon { display:block; }
:root[data-theme="dark"] .sh-theme .sh-sun { display:block; } :root[data-theme="dark"] .sh-theme .sh-moon { display:none; }
.sh-burger { display:none; width:44px; height:44px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); cursor:pointer; align-items:center; justify-content:center; }
/* видны только в мобильной панели меню */
.sh-nav__close, .sh-nav__foot { display:none; }

/* ---------- Hero ---------- */
.sh-hero { padding:8px var(--pad-x) 0; }
.sh-hero__box { position:relative; max-width:var(--maxw); margin-inline:auto; border-radius:var(--radius-lg); overflow:hidden; height:clamp(380px,52vw,520px); }
.sh-hero__img, .sh-hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--surface-3); display:block; }
.sh-hero__video { opacity:0; transition:opacity .6s ease; z-index:0; }
.sh-hero__video.is-active { opacity:1; }
.sh-hero__overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,16,11,.92) 0%, rgba(10,16,11,.7) 45%, rgba(10,16,11,.14) 100%); }
.sh-hero__inner { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,5vw,56px); max-width:680px; color:var(--hero-ink); }
.sh-hero__eyebrow { font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-bright); margin-bottom:18px; }
.sh-hero h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(1.75rem,1.2rem+2.4vw,2.5rem); line-height:1.18; margin-bottom:20px; color:var(--hero-ink); }
.sh-hero__lede { font-size:clamp(1rem,.95rem+.2vw,1.05rem); line-height:1.65; color:var(--hero-muted); max-width:520px; margin-bottom:30px; }
.sh-hero__actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Преимущества ---------- */
.sh-adv { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); padding-block:clamp(36px,5vw,48px); }
.sh-adv__item { border-top:1px solid var(--border-2); padding-top:16px; }
.sh-adv__item b { display:block; font-family:var(--font-body); font-weight:800; font-size:17px; color:var(--accent); margin-bottom:5px; }
.sh-adv__item p { font-size:14px; line-height:1.6; color:var(--muted); }

/* ---------- Каталог ---------- */
.sh-cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.sh-cat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1); color:var(--ink); display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s, border-color .18s; }
.sh-cat:hover { transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--border-3); }
.sh-cat img { width:100%; height:175px; object-fit:cover; background:var(--surface-3); }
.sh-cat__body { padding:17px 19px; }
.sh-cat__body b { display:block; font-weight:800; font-size:16.5px; margin-bottom:3px; }
.sh-cat__body span { display:block; font-size:13px; color:var(--muted-2); margin-bottom:10px; }
.sh-cat__more { font-size:13.5px; font-weight:700; color:var(--accent); display:inline-flex; gap:6px; transition:gap .2s; }
.sh-cat:hover .sh-cat__more { gap:10px; }

/* ---------- Клиенты ---------- */
.sh-clients { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:clamp(36px,5vw,56px); }
.sh-clients__logos { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sh-clients__logos > span { font-size:13.5px; font-weight:700; color:var(--muted-2); }
.sh-clients__logos img { height:54px; width:auto; object-fit:contain; border-radius:10px; border:1px solid var(--border); padding:4px; background:#fff; }
.sh-clients__note { font-size:14px; line-height:1.6; color:var(--muted); max-width:440px; }

/* ---------- CTA / контакт ---------- */
.sh-cta { border-top:1px solid var(--border-2); background:var(--surface-2); }
.sh-cta__row { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding-block:clamp(40px,5vw,52px); }
.sh-cta__label { font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; }
.sh-cta__phone { display:inline-block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,1.2rem+2.6vw,2.6rem); color:var(--accent); margin-bottom:20px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sh-cta__links { display:flex; gap:10px; flex-wrap:wrap; }
.sh-cta__links a { border:1px solid var(--border-3); background:var(--surface); color:var(--ink); font-weight:700; font-size:14px; padding:12px 24px; border-radius:var(--radius-sm); }
.sh-cta__links a:hover { border-color:var(--btn); color:var(--accent); }
.sh-cta__addr { margin-top:22px; font-size:13.5px; color:var(--muted-2); }
.sh-cta__mark { width:clamp(190px,23vw,300px); height:auto; filter:drop-shadow(10px 10px 0 rgba(43,166,88,.2)); }

/* ---------- Форма (модалка/контакты) ---------- */
.sh-form { display:flex; flex-direction:column; gap:14px; }
.sh-field { display:flex; flex-direction:column; gap:6px; }
.sh-field label { font-size:13px; font-weight:600; color:var(--muted); }
.sh-field input, .sh-field textarea { font:inherit; font-size:15px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-3); background:var(--surface); color:var(--ink); width:100%; }
.sh-field input:focus, .sh-field textarea:focus { outline:none; border-color:var(--btn); }
.sh-consent { font-size:12px; color:var(--muted-2); display:flex; gap:8px; align-items:flex-start; }

/* ---------- Футер ---------- */
.sh-footer { background:var(--surface-2); border-top:1px solid var(--border-2); color:var(--ink); }
.sh-footer__cols { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px; padding-block:clamp(40px,5vw,60px); }
.sh-footer__brand .sh-brand { margin-bottom:14px; }
.sh-footer h4 { font-family:var(--font-body); font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; }
.sh-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.sh-footer a { color:var(--muted); }
.sh-footer a:hover { color:var(--accent); }
.sh-footer__contact li { display:flex; gap:9px; color:var(--muted); line-height:1.45; }
.sh-footer__bottom { border-top:1px solid var(--border-2); }
.sh-footer__bottom .sh-wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:18px; font-size:12.5px; color:var(--muted-2); }

/* ---------- Мобильное меню ---------- */
@media (max-width:1200px) {
  .sh-nav { position:fixed; inset:0 0 0 auto; width:min(320px,86vw); background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-2); transform:translateX(100%); transition:transform .25s ease; z-index:70; padding:14px 16px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto; display:flex; flex-direction:column; }
  .sh-nav.is-open { transform:translateX(0); }
  .sh-nav ul { flex-direction:column; align-items:stretch; gap:2px; }
  .sh-nav a { padding:12px 14px; font-size:15px; }
  /* крестик на месте бургера — панель его перекрывает */
  .sh-nav__close { display:inline-grid; place-items:center; flex:0 0 auto; width:44px; height:44px; margin:0 0 10px auto; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); cursor:pointer; }
  /* телефоны: в шапке они спрятаны, значит нужны здесь */
  .sh-nav__foot { display:flex; flex-direction:column; gap:6px; margin-top:auto; padding-top:18px; border-top:1px solid var(--border); }
  .sh-nav__foot a { padding:6px 0; font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
  .sh-nav__foot a:hover { color:var(--accent); background:none; }
  .sh-submenu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 0 12px; min-width:0; }
  .sh-nav .sh-has-sub > a::after { display:none; }
  .sh-burger { display:inline-flex; }
  .sh-phone-btn, .sh-phones { display:none; }
  .sh-nav-backdrop { position:fixed; inset:0; background:rgba(6,12,8,.5); opacity:0; visibility:hidden; transition:opacity .25s; z-index:65; }
  .sh-nav-backdrop.is-open { opacity:1; visibility:visible; }
}

/* ---------- Адаптив сеток ---------- */
@media (max-width:960px) {
  .sh-cat-grid { grid-template-columns:repeat(2,1fr); }
  .sh-adv { grid-template-columns:1fr; gap:0; }
  .sh-adv__item { padding-block:16px; }
  .sh-cta__row { grid-template-columns:1fr; }
  .sh-cta__mark { display:none; }
  .sh-footer__cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .sh-cat-grid { grid-template-columns:1fr; }
  .sh-footer__cols { grid-template-columns:1fr; }
  .sh-clients { flex-direction:column; align-items:flex-start; }
}

/* ==================== ВНУТРЕННИЕ СТРАНИЦЫ ==================== */
.sh-page { padding-block:clamp(20px,3vw,36px) clamp(40px,6vw,72px); }
/* Хлебные крошки + H1 */
.sh-pagehead { padding-block:clamp(20px,3vw,30px) clamp(10px,1.5vw,16px); }
.sh-crumbs .breadcrumb, .sh-crumbs ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; padding:0; font-size:13px; color:var(--muted-2); }
.sh-crumbs li { display:flex; align-items:center; gap:8px; }
.sh-crumbs li:not(:last-child)::after { content:"/"; color:var(--border-3); }
.sh-crumbs a { color:var(--muted); }
.sh-crumbs a:hover { color:var(--accent); }
.sh-pagehead h1, .sh-pagehead .catalog-title { font-family:var(--font-display); font-weight:600; font-size:clamp(1.55rem,1.15rem+1.6vw,2.2rem); margin:0; }
/* Сетка товаров */
.sh-goods { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.sh-good { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1); color:var(--ink); transition:transform .18s, box-shadow .18s, border-color .18s; }
.sh-good:hover { transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--border-3); }
.sh-good__img { display:block; aspect-ratio:4/3; overflow:hidden; }
.sh-good__img img { width:100%; height:100%; object-fit:cover; background:var(--surface-3); }
.sh-good__body { padding:16px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.sh-good__title { font-family:var(--font-display); font-weight:600; font-size:16px; line-height:1.25; color:var(--ink); }
.sh-good__desc { font-size:13.5px; color:var(--muted); flex:1; }
.sh-good__more { font-size:13.5px; font-weight:700; color:var(--accent); display:inline-flex; gap:6px; margin-top:4px; }
.sh-good:hover .sh-good__more { gap:10px; }
/* Пагинация */
.sh-pagination { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; padding:0; }
.sh-pagination li a { display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 10px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--ink); font-weight:600; font-size:14px; }
.sh-pagination li a:hover { border-color:var(--btn); color:var(--accent); }
.sh-pagination li.active a { background:var(--btn); color:var(--btn-ink); border-color:var(--btn); }
/* Контент-проза (тексты страниц, карточка товара, новость) */
.sh-prose-wrap { overflow-x:auto; }
.sh-prose { max-width:840px; font-size:16px; line-height:1.7; color:var(--ink); }
.sh-prose > * + * { margin-top:1em; }
.sh-prose h2,.sh-prose h3,.sh-prose h4 { font-family:var(--font-display); font-weight:600; line-height:1.2; margin-top:1.4em; }
.sh-prose h2 { font-size:1.5rem; } .sh-prose h3 { font-size:1.2rem; }
.sh-prose a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.sh-prose img { border-radius:var(--radius); margin-block:1em; height:auto; }
.sh-prose ul,.sh-prose ol { padding-left:1.3em; } .sh-prose li { margin-top:.4em; }
/* Контактная информация — список без таблиц и рамок */
.sh-contactlist { display:grid; gap:16px; margin:18px 0 0; }
.sh-contactlist__row { display:grid; grid-template-columns:150px 1fr; gap:4px 18px; align-items:start; }
.sh-contactlist dt { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); padding-top:3px; }
.sh-contactlist dd { margin:0; color:var(--ink); line-height:1.55; }
.sh-contactlist dd a { color:var(--accent); font-weight:600; }
.sh-contactlist dd a:hover { text-decoration:underline; }
@media (max-width:560px) { .sh-contactlist__row { grid-template-columns:1fr; gap:2px; } }

.sh-prose table { width:100%; border-collapse:collapse; font-size:14px; }
.sh-prose th,.sh-prose td { border:1px solid var(--border); padding:8px 12px; text-align:left; }
.sh-prose thead th { background:var(--surface-2); }
/* Контакты */
.sh-contacts { display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(24px,4vw,44px); align-items:start; }
.sh-contacts__map { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); margin-bottom:22px; }
.sh-contacts__map iframe, .sh-contacts__map > * { width:100% !important; display:block; border:0; }
.sh-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:clamp(20px,3vw,28px); }
.sh-card h4 { font-family:var(--font-display); font-weight:600; font-size:18px; margin-bottom:14px; }
.sh-form__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sh-form__success { color:var(--accent); font-weight:700; padding:10px 0 0; }
/* Модалка */
.sh-modal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; }
.sh-modal.is-open { display:flex; }
.sh-modal__backdrop { position:absolute; inset:0; background:rgba(6,12,8,.6); }
.sh-modal__dialog { position:relative; width:min(520px,100%); max-height:90vh; overflow-y:auto; background:var(--surface); color:var(--ink); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); padding:clamp(22px,3vw,34px); }
.sh-modal__close { position:absolute; top:14px; right:14px; width:38px; height:38px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.sh-modal__close:hover { border-color:var(--border-3); }
.sh-modal h3 { font-family:var(--font-display); font-weight:600; font-size:20px; margin-bottom:6px; }
.sh-modal__lead { color:var(--muted); font-size:14px; margin-bottom:16px; }
/* Карточка товара */
.sh-product { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,4vw,48px); align-items:start; }
.sh-product__media img { width:100%; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--surface-3); }
.sh-product__info { display:flex; flex-direction:column; gap:18px; }
/* характеристики */
.sh-specs { display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sh-spec { display:flex; justify-content:space-between; gap:16px; padding:11px 16px; font-size:14px; }
.sh-spec:nth-child(odd) { background:var(--surface-2); }
.sh-spec span { color:var(--muted); }
.sh-spec b { font-weight:700; text-align:right; }
/* форма заказа */
.sh-order { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(18px,2.5vw,24px); }
.sh-order h3 { font-family:var(--font-display); font-weight:600; font-size:18px; margin-bottom:14px; }
.sh-field select, .char-item select { font:inherit; font-size:15px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-3); background:var(--surface); color:var(--ink); width:100%; }
.sh-field select:focus { outline:none; border-color:var(--btn); }
.char-item { margin-bottom:12px; }
.char-item__label { font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; }
/* инфо-блоки товара */
.sh-prodinfo { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(28px,4vw,40px); }
.sh-prodinfo__item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--shadow-1); }
.sh-prodinfo__item img { width:40px; height:40px; flex:none; }
.sh-prodinfo__item b { font-weight:700; font-size:14px; line-height:1.4; }
.sh-deliv { margin-top:24px; }
.sh-deliv h3 { font-family:var(--font-display); font-weight:600; font-size:18px; margin-bottom:10px; }
/* Галерея альбомов (цветовые карты, портфолио) */
.sh-album { margin-bottom:clamp(30px,5vw,48px); }
.sh-album .sh-h2 { margin-bottom:18px; }
.sh-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.sh-gallery__item { display:block; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-1); transition:transform .15s, box-shadow .15s; }
.sh-gallery__item:hover { transform:translateY(-3px); box-shadow:var(--shadow-2); }
.sh-gallery__item img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--surface-3); }
.sh-gallery__cap { display:block; padding:8px 12px; font-size:13px; color:var(--muted); }
@media (max-width:560px){ .sh-gallery { grid-template-columns:repeat(2,1fr); } }
/* Отзывы */
.sh-reviews { margin-top:clamp(28px,4vw,44px); }
.sh-reviews__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin-top:18px; }
.sh-review { margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:12px; }
.sh-review__quote { font-family:var(--font-display); font-weight:700; font-size:46px; line-height:.6; color:var(--accent); }
.sh-review__text { margin:0; color:var(--ink); line-height:1.62; flex:1; }
.sh-review__author { display:flex; align-items:center; gap:12px; }
.sh-review__author img { width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; }
.sh-review__author b { display:block; font-weight:700; }
.sh-review__author span { font-size:13px; color:var(--muted); }
@media (max-width:960px){ .sh-goods{ grid-template-columns:repeat(2,1fr) } .sh-contacts{ grid-template-columns:1fr } .sh-product{ grid-template-columns:1fr } .sh-prodinfo{ grid-template-columns:1fr } }
@media (max-width:560px){ .sh-goods{ grid-template-columns:1fr } .sh-form__row{ grid-template-columns:1fr } }

/* ==================== СОВМЕСТИМОСТЬ: старые контент-страницы (.wrapper) ==================== */
.wrapper { display:block; }
.wrapper .container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.wrapper .content { padding-block:clamp(20px,3vw,44px); }
.wrapper .row, .wrapper .sub_content { display:block; margin-bottom:clamp(18px,3vw,30px); }
.wrapper h1,.wrapper h2,.wrapper h3 { font-family:var(--font-display); font-weight:600; line-height:1.18; margin:1.1em 0 .5em; }
.wrapper .dividerHeading h4, .wrapper h4 { font-family:var(--font-display); font-weight:600; font-size:1.35rem; line-height:1.25; margin:1.1em 0 .6em; color:var(--ink); }
.wrapper p { margin:0 0 1em; line-height:1.72; }
.wrapper a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.wrapper ul,.wrapper ol { padding-left:1.3em; margin:0 0 1em; }
.wrapper li { margin:.4em 0; }
.wrapper img { max-width:100%; height:auto; border-radius:var(--radius); }
.wrapper table { width:100%; border-collapse:collapse; margin:1em 0; font-size:14px; }
.wrapper th,.wrapper td { border:1px solid var(--border); padding:8px 12px; text-align:left; }
.wrapper [class*="col-"] { width:100%; margin-bottom:16px; }
/* картинки-схемы с текстом читаемы на тёмной теме: фон = цвет страницы, схема инвертируется в светлую */
:root[data-theme="dark"] .wrapper img.full,
:root[data-theme="dark"] .sh-prose img.full { filter: invert(0.9) hue-rotate(180deg); }
.wrapper .who { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); align-items:start; }
.wrapper .who [class*="col-"] { margin-bottom:0; }
.wrapper .textaboutComp { grid-column:1 / -1; }
@media (max-width:760px){ .wrapper .who { grid-template-columns:1fr; } }

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