/* vit_vitrina.css v2.0 — стили сайта кассовое-оборудование.онлайн (подсистема ВИТ).
   Редизайн под макет claude.ai/design (Каталог_кассового_оборудования_dc.html):
   палитра Apple-стиль, синий акцент, тёмная тема (html[data-theme="dark"],
   выбор в localStorage 'vit-theme', по умолчанию — системная), липкая шапка
   с логотипом/поиском/темой/контактами, блоки главной-хаба.
   Внешний файл: /css/vit_vitrina.css, кешируется один раз на все страницы.
   Деплой: статика на домене витрины, кладётся вручную (модуль публикации не управляет).
   Доктрина: Премиум 2026. JS — прогрессивное улучшение (подсказки поиска, тема);
   все страницы полностью работают без JS.

   v2.0 — Редизайн под макет: новая палитра (light+dark), липкая шапка (.head) с
          логотипом-SVG, поиском с подсказками (.search__drop) и переключателем темы,
          блоки главной (.hero, .chips, .feat, .tiles), секции (.sect). Цены — цветом
          текста (акцент только на действиях). Классы старых страниц (.head__tag,
          .search__input/.search__btn, .card, .results, .pager, .foot) сохранены —
          опубликованные 23k страниц выглядят корректно до перепубликации.
   v1.2 — Блок списка результатов поиска (.results*).
   v1.1 — Переименование vitrina.css → vit_vitrina.css; поле поиска в шапке.
   v1.0 — Первый внешний файл. */

:root{
  --bg:#ffffff;
  --bg2:#ffffff;
  --surface:#f5f5f7;
  --surface2:#ececee;
  --text:#1d1d1f;
  --text2:#86868b;
  --text3:#6e6e73;
  --border:#d2d2d7;
  --line:rgba(0,0,0,.10);
  --line2:rgba(0,0,0,.07);
  --line3:rgba(0,0,0,.09);
  --line4:rgba(0,0,0,.16);
  --accent:#0A4E9E;
  --header-bg:rgba(255,255,255,.72);
  --hover:rgba(0,0,0,.05);
  --mixbase:#ffffff;
  --ok:#1a8a3e;
  --btn-dark-bg:#1d1d1f;
  --btn-dark-text:#ffffff;
  --radius:12px;
  --radius-lg:18px;
  --maxw:1120px;
  --pad:22px;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101012;
  --bg2:#1c1c1f;
  --surface:#26262a;
  --surface2:#313136;
  --text:#f5f5f7;
  --text2:#9a9aa1;
  --text3:#b4b4bb;
  --border:#3a3a40;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.08);
  --line3:rgba(255,255,255,.12);
  --line4:rgba(255,255,255,.18);
  --header-bg:rgba(18,18,20,.72);
  --hover:rgba(255,255,255,.08);
  --mixbase:#1c1c1f;
  --ok:#41d16a;
  --btn-dark-bg:#f5f5f7;
  --btn-dark-text:#1d1d1f;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;}
::selection{background:color-mix(in srgb, var(--accent) 28%, var(--mixbase));}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* ── Шапка (липкая, блюр) ─────────────────────────────────────── */
.head{position:sticky;top:0;z-index:200;background:var(--header-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);}
.head__in{max-width:1200px;margin:0 auto;min-height:64px;padding:10px clamp(12px,4vw,22px);display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;}
.head__logo{display:flex;align-items:center;gap:11px;flex:none;color:var(--text);font-size:17px;font-weight:600;letter-spacing:-0.01em;}
.head__logo:hover{text-decoration:none;}
.head__logo b{color:var(--accent);font-weight:600;}
.head__mark{height:27px;width:auto;flex:none;display:block;color:var(--text);}
.head__brand{display:flex;align-items:center;gap:11px;}
.head__sep{width:1px;height:30px;background:var(--line4);flex:none;}
.head__brandcol{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.head__name{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--text);line-height:1.1;white-space:nowrap;}
.head__domain{font-size:10px;font-weight:500;letter-spacing:.005em;color:var(--text2);margin-top:3px;white-space:nowrap;}
.head__tag{font-size:13px;color:var(--text2);} /* наследие страниц v1.2 до перепубликации */
.head__nav{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto;}
.head__link{font-size:13px;color:var(--text);padding:7px 13px;border-radius:8px;}
.head__link:hover{background:var(--hover);text-decoration:none;}
.head__theme{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--text3);}
.head__theme:hover{background:var(--hover);}
.head__sun{display:none;}
html[data-theme="dark"] .head__sun{display:block;}
html[data-theme="dark"] .head__moon{display:none;}
.head__cta{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;padding:8px 15px;border-radius:980px;background:var(--btn-dark-bg);color:var(--btn-dark-text);margin-left:6px;white-space:nowrap;}
.head__cta:hover{opacity:.85;text-decoration:none;}

/* ── Поиск в шапке + подсказки ────────────────────────────────── */
.search{position:relative;flex:1 1 300px;min-width:min(100%,220px);}
.search__box{display:flex;align-items:center;gap:9px;height:42px;padding:0 6px 0 14px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.search__icon{flex:none;color:var(--text2);}
.search__input{flex:1;border:none;outline:none;background:none;font:inherit;font-size:15px;min-width:0;color:var(--text);}
.search__input::placeholder{color:var(--text2);}
.search__kbd{font-size:11px;color:var(--text2);background:var(--surface);border:1px solid var(--line2);border-radius:5px;padding:3px 6px;flex:none;font-family:inherit;}
.search__btn{height:32px;padding:0 15px;border-radius:9px;background:var(--accent);color:#fff;font-size:13px;font-weight:500;flex:none;}
.search__btn:hover{opacity:.88;}
.search__drop{position:absolute;top:calc(100% + 9px);left:0;right:0;background:var(--bg2);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.18);padding:8px;text-align:left;max-height:70vh;overflow:auto;z-index:60;}
.search__grouplabel{font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--text2);padding:8px 12px 6px;text-transform:uppercase;}
.search__sug{width:100%;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;text-align:left;color:var(--text);}
.search__sug:hover,.search__sug.is-active{background:var(--hover);text-decoration:none;}
.search__sugname{flex:1;min-width:0;display:block;font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search__sugprice{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;}
.search__all{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;padding:11px;border-radius:10px;background:color-mix(in srgb, var(--accent) 8%, var(--mixbase));color:var(--accent);font-size:14px;font-weight:500;}
.search__all:hover{background:color-mix(in srgb, var(--accent) 14%, var(--mixbase));}
.search__empty{padding:20px 12px;text-align:center;color:var(--text2);font-size:14px;}

/* ── Главная: герой + чипы ────────────────────────────────────── */
.hero{max-width:var(--maxw);margin:0 auto;padding:28px var(--pad) 6px;}
.hero__title{font-size:clamp(21px,6vw,26px);line-height:1.15;font-weight:600;letter-spacing:-.02em;margin:0;}
.hero__sub{font-size:14px;color:var(--text2);margin:7px 0 0;}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;}
.chips__label{font-size:13px;color:var(--text2);}
.chips__item{font-size:13px;color:var(--text);background:var(--surface);padding:7px 14px;border-radius:980px;}
.chips__item:hover{background:var(--surface2);text-decoration:none;}

/* ── Преимущества ─────────────────────────────────────────────── */
.feat{max-width:var(--maxw);margin:0 auto;padding:26px var(--pad) 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;}
.feat__item{display:flex;align-items:flex-start;gap:13px;padding:18px 20px;background:var(--surface);border-radius:16px;}
.feat__icon{width:38px;height:38px;flex:none;border-radius:11px;background:var(--bg2);color:var(--accent);display:flex;align-items:center;justify-content:center;}
.feat__title{display:block;font-size:14.5px;font-weight:600;color:var(--text);}
.feat__text{display:block;font-size:13px;color:var(--text3);margin-top:3px;line-height:1.45;}

/* ── Секции с заголовком и ссылкой справа ─────────────────────── */
.sect{max-width:var(--maxw);margin:0 auto;padding:34px var(--pad) 10px;}
.sect__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;}
.sect__h2{font-size:clamp(19px,5.5vw,24px);font-weight:600;letter-spacing:-.02em;margin:0;}
.sect__more{font-size:14px;font-weight:500;color:var(--accent);display:flex;align-items:center;gap:6px;white-space:nowrap;}
.popular{background:var(--surface);padding:44px 0 54px;margin-top:34px;}
.popular .sect{padding-top:0;padding-bottom:0;}
.popular .card{border-color:var(--line);}

/* ── Плитки категорий ─────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,248px),1fr));gap:14px;}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:20px;background:var(--bg2);border:1px solid var(--line3);border-radius:var(--radius-lg);text-align:left;min-height:132px;color:var(--text);transition:transform .18s ease, box-shadow .18s ease;}
.tile:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.10);}
.tile__icon{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb, var(--accent) 10%, var(--mixbase));color:var(--accent);display:flex;align-items:center;justify-content:center;}
.tile__name{margin-top:auto;display:block;font-size:15px;font-weight:600;color:var(--text);line-height:1.28;}

/* ── Хлебные крошки / основной блок ───────────────────────────── */
.crumbs{font-size:13px;color:var(--text2);padding:16px 0 0;}
.crumbs a{color:var(--text2);}
.crumbs a:hover{color:var(--accent);}
.crumbs__sep{margin:0 7px;color:var(--border);}
.main{padding:8px 0 56px;}

/* ── Сообщения страницы поиска ────────────────────────────────── */
.note{font-size:15px;color:var(--text2);padding:14px 0 4px;}
.subhead{font-size:16px;font-weight:600;color:var(--text);margin:24px 0 12px;}

/* ── Список результатов поиска ────────────────────────────────── */
.results{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line);}
.results__item{border-bottom:1px solid var(--line);}
.results__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 2px;color:var(--text);}
.results__row:hover{background:var(--hover);text-decoration:none;}
.results__name{font-size:15px;font-weight:500;line-height:1.4;min-width:0;}
.results__row:hover .results__name{color:var(--accent);}
.results__price{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ── Страница товара ──────────────────────────────────────────── */
.product{padding:18px 0 0;max-width:760px;}
.product__title{font-size:30px;font-weight:600;line-height:1.18;letter-spacing:-0.01em;margin:8px 0 4px;}
.product__alt{font-size:15px;color:var(--text2);margin:0 0 20px;}
.product__buy{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin:4px 0 22px;}
.product__price{font-size:26px;font-weight:700;color:var(--text);letter-spacing:-0.01em;font-variant-numeric:tabular-nums;}
.product__status{font-size:13px;font-weight:500;color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--mixbase));padding:5px 11px;border-radius:999px;}
.product__cta{margin-left:auto;display:inline-block;background:var(--accent);color:#fff;font-weight:600;font-size:15px;padding:11px 20px;border-radius:10px;}
.product__cta:hover{opacity:.88;text-decoration:none;}
.product__desc{font-size:16px;color:var(--text3);max-width:65ch;}
.product__desc p{margin:0 0 12px;}

/* ── Каталог (листинг) ────────────────────────────────────────── */
.cat__head{padding:16px 0 6px;}
.cat__h1{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:6px 0 2px;}
.cat__sub{font-size:14px;color:var(--text2);margin:0 0 18px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px;}
.card{display:flex;flex-direction:column;min-height:128px;padding:16px;background:var(--bg2);border:1px solid var(--line3);border-radius:var(--radius-lg);color:var(--text);transition:border-color .15s ease,box-shadow .15s ease;}
.card:hover{border-color:var(--accent);box-shadow:0 8px 26px rgba(0,0,0,.08);text-decoration:none;}
.card__title{font-size:15px;font-weight:500;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card__foot{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.card__price{font-size:17px;font-weight:700;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;}
.card__status{font-size:12px;color:var(--text2);white-space:nowrap;}

/* ── Пагинатор ────────────────────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:center;gap:18px;padding:34px 0 0;}
.pager__btn{font-size:14px;font-weight:500;padding:9px 16px;border:1px solid var(--border);border-radius:10px;color:var(--text);}
.pager__btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}
.pager__pos{font-size:13px;color:var(--text2);font-variant-numeric:tabular-nums;}

/* ── Подвал ───────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);margin-top:30px;padding:26px 0 40px;font-size:13px;color:var(--text2);}
.foot__in{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;}
.foot a{color:var(--text2);}
.foot a:hover{color:var(--accent);}

/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width:760px){
  .head__brand{display:none;}
  .head__link{display:none;}
}
@media (max-width:680px){
  .search__kbd{display:none;}
}
@media (max-width:560px){
  :root{--pad:16px;}
  .product__title{font-size:25px;}
  .product__buy{gap:12px;}
  .product__cta{margin-left:0;width:100%;text-align:center;}
  .cat__h1{font-size:23px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}