/* Детали в духе Apple для всего сайта (design-md/apple). 22.10.2026.
   Подключается из shared-header.js, поэтому действует на всех страницах с общей шапкой,
   включая страницы товаров и разделов. Композиция, цвета и тексты не меняются.
   Элементы размечает apple-site.js по их виду: data-at="btn|ghost|soft|icon|field|wrap|group|card|panel".
   Особенности главной — в apple-touches.css. Всё под html.at. */

html.at {
  --at-ease: cubic-bezier(.25, .1, .25, 1);
  --at-spring: cubic-bezier(.2, .8, .2, 1);
  --at-pill: 980px;
  --at-blue: #1D58D8;
  --at-focus: 0 0 0 4px rgba(29, 88, 216, .18);
}
html.at body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.at ::selection { background: rgba(29, 88, 216, .22); }
html.at input[type="checkbox"], html.at input[type="radio"] { accent-color: var(--at-blue); }

/* ── Типографика: плотные заголовки 600 с отрицательным трекингом (под IBM Plex мягче, чем было у Inter: −.03/−.022/−.015 → −.02/−.015/−.01, 23.10.2026) ── */
html.at main h1, html.at #dc-root h1, html.at body > div h1 { font-weight: 600 !important; letter-spacing: -.02em !important; }
html.at main h2, html.at #dc-root h2 { letter-spacing: -.015em !important; }
html.at main h3, html.at #dc-root h3 { letter-spacing: -.01em !important; }

/* ── Кнопки ── */
/* Сплошные (синие, чёрные): таблетка, светлее при наведении, сжатие при нажатии */
html.at [data-at="btn"] {
  border-radius: var(--at-pill) !important;
  transition: transform .18s var(--at-ease), filter .25s var(--at-ease), background-color .25s var(--at-ease), color .25s var(--at-ease), box-shadow .25s var(--at-ease) !important;
}
html.at [data-at="btn"]:not(:disabled):hover { filter: brightness(1.12); }
/* Контурные: таблетка, при наведении контур темнеет */
html.at [data-at="ghost"] {
  border-radius: var(--at-pill) !important;
  transition: transform .18s var(--at-ease), background-color .25s var(--at-ease), border-color .25s var(--at-ease), color .25s var(--at-ease) !important;
}
html.at [data-at="ghost"]:not(:disabled):hover { border-color: currentColor !important; }
/* Светлые без контура (вторичные, сегменты): таблетка с мягкой подсветкой */
html.at [data-at="soft"] {
  border-radius: var(--at-pill) !important;
  transition: transform .18s var(--at-ease), background-color .25s var(--at-ease), color .25s var(--at-ease) !important;
}
html.at [data-at="soft"]:not(:disabled):hover { filter: brightness(.97); }
/* Квадратные кнопки-значки: круг */
html.at [data-at="icon"] {
  border-radius: 50% !important;
  transition: transform .18s var(--at-ease), background-color .2s var(--at-ease), border-color .2s var(--at-ease) !important;
}
html.at [data-at="btn"]:not(:disabled):active, html.at [data-at="ghost"]:not(:disabled):active,
html.at [data-at="soft"]:not(:disabled):active { transform: scale(.96) !important; }
html.at [data-at="icon"]:not(:disabled):active { transform: scale(.9) !important; }

/* ── Поля ввода: мягкое скругление и кольцо фокуса ── */
html.at [data-at="field"] {
  border-radius: 12px !important;
  transition: border-color .2s var(--at-ease), box-shadow .2s var(--at-ease), background-color .2s var(--at-ease) !important;
}
html.at [data-at="field"][data-at-pill] { border-radius: var(--at-pill) !important; }
html.at textarea[data-at="field"] { border-radius: 14px !important; }
html.at [data-at="field"]:focus { border-color: var(--at-blue) !important; box-shadow: var(--at-focus) !important; outline: none !important; }
/* Поле без своей рамки внутри рамки-обёртки (поиск в каталоге и т. п.) */
html.at [data-at="wrap"] { border-radius: var(--at-pill) !important; transition: border-color .2s var(--at-ease), box-shadow .2s var(--at-ease) !important; }
html.at [data-at="wrap"]:focus-within { border-color: var(--at-blue) !important; box-shadow: var(--at-focus) !important; }
/* Группы управления (счётчик количества, переключатели сортировки): капсула */
html.at [data-at="group"] { border-radius: var(--at-pill) !important; overflow: hidden; }
html.at [data-at="group"] > button { border-radius: var(--at-pill) !important; transition: background-color .25s var(--at-ease), color .25s var(--at-ease), box-shadow .25s var(--at-ease) !important; }
html.at [data-at="group"] > button:active { transform: scale(.96); }

/* ── Карточки и панели: скругление 18px ── */
html.at [data-at="card"] {
  border-radius: 18px !important;
  transition: transform .5s var(--at-spring), box-shadow .5s var(--at-spring), border-color .3s var(--at-ease) !important;
}
html.at [data-at="card"]:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10, 14, 20, .09); }
html.at [data-at="card"]:active { transform: scale(.985); transition-duration: .15s !important; }
html.at [data-at="card"] img { transition: transform .9s var(--at-spring); }
html.at [data-at="card"]:hover img { transform: scale(1.03); }
html.at [data-at="panel"] { border-radius: 18px !important; }

/* ── Общая шапка ── */
html.at #shared-header { transition: background-color .3s var(--at-ease), box-shadow .3s var(--at-ease) !important; }
html.at.at-scrolled #shared-header {
  background: rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08) !important;
}
html.at #shared-header .sh-hover-43, html.at #shared-header form button {
  border-radius: var(--at-pill) !important;
  transition: transform .18s var(--at-ease), filter .25s var(--at-ease), background-color .25s var(--at-ease) !important;
}
html.at #shared-header .sh-hover-43:hover { filter: brightness(1.12); }
html.at #shared-header .sh-hover-43:active, html.at #shared-header form button:active { transform: scale(.95) !important; }
html.at #shared-header form input {
  border-radius: var(--at-pill) !important;
  padding-left: 40px !important;
  transition: border-color .2s var(--at-ease), box-shadow .2s var(--at-ease), background-color .2s var(--at-ease) !important;
}
html.at #shared-header form input:focus { background: #fff !important; border-color: var(--at-blue) !important; box-shadow: var(--at-focus) !important; outline: none !important; }
html.at #shared-header form button { right: 4px; }
/* Меню: вместо скользящей подложки — синяя линия, вырастающая из центра слова (вариант 1 из nav-hover-demo.html) */
html.at #shared-header nav > span[aria-hidden] { display: none !important; }
html.at #shared-header nav a { transition: color .2s var(--at-ease) !important; background: none !important; }
/* Цвет текста не меняется — двигается только линия */
html.at #shared-header nav a, html.at #shared-header nav a:hover, html.at #shared-header nav a:focus, html.at #shared-header nav a[aria-current=page] { color: #1f2329 !important; }
html.at #shared-header nav a > span {
  display: block !important; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: 50% 50% !important;
  transition: transform .35s var(--at-spring) !important;
}
html.at #shared-header nav a:hover > span, html.at #shared-header nav a:focus-visible > span, html.at #shared-header nav a[aria-current=page] > span { transform: scaleX(1); }
/* Пункты меню чуть крупнее (13,4px вместо 13px). Чтобы не отнимать место у поиска, поля пунктов
   с 6px до 4px и трекинг -0.01em: меню выходит уже прежнего. До 1280px всё как было. */
@media (min-width: 1281px) {
  html.at body[data-ui-theme] #shared-header nav { font-size: 13.4px !important; letter-spacing: -.01em; }
  html.at body[data-ui-theme] #shared-header nav a { padding-inline: 4px !important; }
  html.at #shared-header nav a > span { left: 4px; right: 4px; }
}
html.at #shared-header > div:first-child { font-size: 12px; letter-spacing: -.01em; }
html.at #shared-header > div:first-child a:hover { color: var(--at-blue) !important; }
html.at #shared-header header > div > div:last-child > a { border-radius: 50%; transition: background-color .2s var(--at-ease), transform .18s var(--at-ease); }
html.at #shared-header header > div > div:last-child > a:hover { background: rgba(0, 0, 0, .05); }
html.at #shared-header header > div > div:last-child > a:active { transform: scale(.9); }

/* ── Общий подвал: остаётся тёмным, только детали ── */
html.at #site-footer .sf-phone { font-weight: 600 !important; letter-spacing: -.025em !important; }
html.at #site-footer .sf-directions { color: #2997ff !important; }
html.at #site-footer nav a, html.at #site-footer .sf-email { transition: color .2s var(--at-ease), opacity .2s var(--at-ease) !important; }
html.at #site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
html.at #site-footer .sf-messenger { border-radius: var(--at-pill) !important; }
html.at #site-footer .sf-top { border-radius: var(--at-pill) !important; transition: background-color .2s var(--at-ease), transform .18s var(--at-ease) !important; }
html.at #site-footer .sf-top:hover { background: rgba(255, 255, 255, .08) !important; }
html.at #site-footer .sf-top:active { transform: scale(.95); }

/* ── Фокус с клавиатуры ── */
html.at :focus-visible { outline: 2px solid var(--at-blue) !important; outline-offset: 3px !important; }
/* The illustration is not a control; keep visible focus on its actual controls. */
html.at .hero-lift-iso > svg.lift-svg:focus-visible,
html.at .scene > svg.lift-svg:focus-visible { outline: none !important; }

/* ── Появление при прокрутке ── */
html.at [data-at-rv] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--at-spring), transform 1s var(--at-spring); transition-delay: var(--at-d, 0ms); }
html.at [data-at-rv="in"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.at [data-at-rv] { opacity: 1; transform: none; transition: none; }
  html.at [data-at="card"], html.at [data-at="card"] img { transition: none !important; }
  html.at [data-at="card"]:hover, html.at [data-at="card"]:hover img { transform: none; }
}

/* Загрузка страницы: без CSS-переходов (класс снимает apple-site.js через 250 мс после DOMContentLoaded) */
/* :is(*, #a#a#a) совпадает со всем, но весит как три id — перекрывает правила шапки с !important */
html.at-load :is(*, #at-load#at-load#at-load), html.at-load :is(*, #at-load#at-load#at-load)::before, html.at-load :is(*, #at-load#at-load#at-load)::after { transition: none !important; }

/* Облегчённый режим для слабых компьютеров (класс at-lite ставит apple-site.js): размытие фона и бесконечные
   анимации — самое дорогое для старых видеокарт. Сцену главной (.hero-*) не трогаем. */
html.at-lite.at-scrolled #shared-header { background: rgba(255, 255, 255, .98) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.at-lite .hl-cap, html.at-lite .lift-panel .lift-visual > span { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.at-lite [data-at-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
html.at-lite .podbor-frame::after { animation: none !important; }