/**
 * Performance overlay + scroll optimizations + универсальный custom checkbox дизайн.
 * Подгружается после system.css/chrome.css/motion.css.
 *
 * Что делает:
 * 1. Reduced-motion overlay (a11y).
 * 2. content-visibility: auto на секциях ниже fold — браузер скипает rendering
 *    off-screen content. Снижает scroll-jank и main-thread time.
 * 3. contain: content на повторяющихся блоках (карточки товаров, listing tiles,
 *    reveal-элементы) — изолирует layout/paint subtree.
 * 4. contain-intrinsic-size для предотвращения layout shift при отложенной отрисовке.
 * 5. Custom checkboxes/radios (Plum + SVG галочка).
 */

/* ─── 1. Reduced-motion overlay ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: auto; }
html:focus-within { scroll-behavior: smooth; }

/* ─── 2. Scroll optimizations — content-visibility (СНЯТО) ─────────────────
   Ранее `content-visibility: auto` + `contain-intrinsic-size: auto 600px`
   висели на `main > section:nth-child(n+3), .island, footer`. Это давало
   рваный скролл: реальные высоты секций 159–984px сильно расходятся с оценкой
   600px → при входе секции во viewport высота пересчитывается, суммарная высота
   страницы прыгает → стуттер скролл-бара. Убрано целиком.
   `contain: content` на карточках (ниже) безопасен и оставлен.
*/

/* ─── 3. CSS containment — изоляция layout/paint subtrees ────────────────
   `contain: content` на повторяющихся однотипных блоках. Браузер обрабатывает
   их как изолированные subtree — изменение внутри одного не пересчитывает
   layout/paint всей страницы.

   Особенно полезно для:
   - .cat-product (48 карточек в листинге)
   - .reveal элементов (анимация при scroll)
   - .island контрастных островов
*/
.cat-product,
.cat-subcat,
.cl-tile,
[data-reveal],
.reveal {
  contain: content;
}

/* ─── 4. CSS containment для image grid'ов ────────────────────────────────
   Картинки товаров обрезаются `aspect-ratio` — `contain: layout style`
   гарантирует что image-load не триггерит layout пересчёт у соседей.
*/
.cat-product-photo,
.cat-subcat-photo,
img[loading="lazy"] {
  contain: layout style;
}

/* ─── 5. will-change на reveal-анимациях — hint для compositor ──────────
   Только на элементах которые точно анимируются при scroll. НЕ глобально —
   будет утечка GPU memory.
*/
.reveal,
[data-reveal] {
  will-change: opacity, transform;
}

/* После завершения reveal-анимации (когда .is-in добавляется) — снимаем
   will-change. Это делается через JS unobserve, но CSS-fallback тоже полезен. */
.reveal.is-in,
[data-reveal].is-in {
  will-change: auto;
}

/* ═══ Универсальный custom checkbox (Plum + SVG галочка) ═══
   Покрывает все checkbox на сайте: .form-agree, .field, .filter, cart selects.
   Применяется ко всем `<input type="checkbox">` если не explicitly opt-out через
   data-native-checkbox или класс .native-checkbox.
*/
input[type="checkbox"]:not(.native-checkbox):not([data-native-checkbox]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid var(--border-2, #d8d2c8);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s var(--ease-soft, ease),
              border-color 0.2s var(--ease-soft, ease),
              box-shadow 0.2s var(--ease-soft, ease);
}

input[type="checkbox"]:not(.native-checkbox):not([data-native-checkbox]):hover {
  border-color: var(--accent, #7e6c89);
}

input[type="checkbox"]:not(.native-checkbox):not([data-native-checkbox]):checked {
  background-color: var(--accent, #7e6c89);
  border-color: var(--accent, #7e6c89);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

input[type="checkbox"]:not(.native-checkbox):not([data-native-checkbox]):checked:hover {
  background-color: var(--accent-hover, #6a5876);
  border-color: var(--accent-hover, #6a5876);
}

input[type="checkbox"]:not(.native-checkbox):not([data-native-checkbox]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #7e6c89) 30%, transparent);
}

input[type="checkbox"]:not(.native-checkbox):not([data-native-checkbox]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══ Custom radio button (тот же стиль, круглый) ═══ */
input[type="radio"]:not(.native-radio):not([data-native-radio]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  border: 1.5px solid var(--border-2, #d8d2c8);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s, border-color 0.2s;
}

input[type="radio"]:not(.native-radio):not([data-native-radio]):hover {
  border-color: var(--accent, #7e6c89);
}

input[type="radio"]:not(.native-radio):not([data-native-radio]):checked {
  border-color: var(--accent, #7e6c89);
  background-color: #fff;
}

input[type="radio"]:not(.native-radio):not([data-native-radio]):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, #7e6c89);
  transform: translate(-50%, -50%);
}

input[type="radio"]:not(.native-radio):not([data-native-radio]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #7e6c89) 30%, transparent);
}