/* KERONA — фундамент: токены дизайн-системы, шрифт, сетка, базовые элементы.
   Источник токенов: дизайн-система KERONA (см. D:\Vibecoding\KERONA\KERONA-handoff.md). */

@font-face {
  font-family: "Manrope";
  src: url("/assets/reference/fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 200 800;
  font-display: optional;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/reference/fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/reference/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Цвет */
  --primary: #ed6133;
  --on-primary: #ffffff; /* решение заказчика: на оранжевом текст всегда светлый — на кнопках, баннерах, в корзине, везде */
  --on-primary-large: #ffffff;
  --primary-hover: #f17a52;
  --primary-pressed: #b24926;
  --primary-deep: #82351c;
  --primary-tint: #fef2ef;
  --ink: #181008;
  --ink-muted: #5c5044;
  --ink-subtle: #746a5e;
  --canvas: #ffffff;
  --surface-1: #f6f2ee;
  --surface-2: #e8e0d7;
  --hairline: #e0d7cc;
  --hairline-strong: #181008;
  --inverse-canvas: #1c140d;
  --inverse-surface-1: #2b2018;
  --inverse-ink: #ffffff;
  --inverse-ink-muted: #cabcae;
  --success: #1a7a42;
  --warning: #8a5a00;
  --warning-tint: #fff7e6;   /* фон плашки-предупреждения в описании товара */
  --warning-line: #e6cf9c;   /* её тонкая рамка */
  --error: #9f1c3f;
  --info: #47576b;
  /* Точка «нерабочее время» (решение 29.09): жёлтая, 3.1:1 к белому как графика */
  --status-away: #c28500;

  /* Шрифт */
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* Отступы (4px-сетка) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-96: 96px;

  /* Радиусы — ГЛОБАЛЬНОЕ ПРАВИЛО заказчика (29.09): такие же, как на старом kerona.shop.
     Новых значений не вводить, брать из этой шкалы. Круглое (50%) — только для кнопок-иконок и точек. */
  --radius-none: 0px;
  --radius-badge: 4px;   /* плашки ХИТ / НОВИНКА / скидка */
  --radius-btn: 5px;     /* кнопки */
  --radius-sm: 6px;      /* выпадающие списки, пункты меню */
  --radius-input: 7px;   /* поле поиска и поля ввода */
  --radius-tile: 8px;    /* плашки разделов, блоки, фото новостей и нижние баннеры */
  --radius-md: 10px;     /* баннеры, кнопки-иконки */
  --radius-card: 12px;   /* карточка товара */
  --radius-lg: 14px;     /* большие панели и уведомления */
  --radius-modal: 18px;  /* окна и всплывающие панели */
  --radius-pill: 9999px; /* круглое: кнопка чата и т. п. */

  /* Тени */
  --shadow-focus: 0 0 0 2px #ed6133;
  --shadow-tooltip: 0 4px 16px rgba(24, 16, 8, 0.16);
  --shadow-card-hover: 0 10px 28px rgba(24, 16, 8, 0.12);

  /* Линия под шапкой и над подвалом — как на старом сайте: тонкая и светлая */
  --hairline-soft: #eef0ee;

  /* Кнопки «в избранное» / «в сравнение» на карточке — цвета с 3drops.ru */
  --tool-bg: #f7f7f7;
  --tool-ink: #777777;
  --tool-fav: #10c44c;
  --tool-compare: #ff595a;

  /* Сетка (решение 29.09: 1440 как на старом сайте) */
  --container: 1440px;
  --gutter: 24px;

  /* Движение: характер Corporate */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 280ms;

  /* Слои */
  --z-header: 40;
  --z-dropdown: 50;
  --z-tabbar: 45;
  --z-drawer: 90;
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Якоря не прячутся под липкую шапку (72 px + воздух) */
  scroll-padding-top: 88px;
}
@media (max-width: 1023px) {
  html { scroll-padding-top: 76px; }
}
/* Пока курсор в строке поиска шапки, отступ под шапку отключён: иначе браузер на каждую набранную букву
   «показывает каретку» (она лежит в зоне отступа) и подкручивает страницу вверх на 62 px. */
html:has([data-search-input]:focus) { scroll-padding-top: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Без 300 мс задержки нажатия на телефонах */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Подвал всегда прижат к низу окна: на коротких страницах (контакты, избранное, корзина) под ним не остаётся белой полосы */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: -100px;
  z-index: 100;
  padding: var(--space-12) var(--space-16);
  background: var(--ink);
  color: var(--inverse-ink);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
}
.skip-link:focus { top: var(--space-8); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Типографика (цвет задаётся по месту) */
.display-xl { font-size: 76px; line-height: 1.1; font-weight: 300; letter-spacing: -0.5px; }
.display-lg { font-size: 60px; line-height: 1.12; font-weight: 300; letter-spacing: -0.4px; }
.display-md { font-size: 42px; line-height: 1.2; font-weight: 300; }
.headline { font-size: 32px; line-height: 1.25; font-weight: 500; }
.hero-banner { font-size: 28px; line-height: 1.2; font-weight: 700; }
.card-title { font-size: 24px; line-height: 1.3; font-weight: 500; }
.subhead { font-size: 20px; line-height: 1.4; font-weight: 400; }
.body-lg { font-size: 18px; line-height: 1.5; font-weight: 400; }
.body { font-size: 16px; line-height: 1.5; font-weight: 400; }
.body-sm { font-size: 14px; line-height: 1.4; font-weight: 400; }
.body-emphasis { font-size: 14px; line-height: 1.4; font-weight: 700; }
.price-old { font-size: 13px; line-height: 1.3; font-weight: 500; }
.price-current { font-size: 20px; line-height: 1.2; font-weight: 700; }
.caption { font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0.2px; }
.button { font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 0.2px; }
.eyebrow { font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }

/* Кнопки (система: primary / secondary / ghost / disabled, радиус sm) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: 12px var(--space-16);
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary-pressed); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-deep); }
/* Оранжевое кольцо на оранжевой кнопке не видно — отделяем его белым зазором */
.btn.primary:focus-visible { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--primary); }
.btn.secondary { background: var(--ink); color: var(--inverse-ink); }
.btn.ghost { background: transparent; color: var(--primary-pressed); border: 1px solid var(--hairline); }
.btn.disabled, .btn:disabled { background: var(--surface-2); color: var(--ink-subtle); cursor: not-allowed; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Галочка согласия в формах (не отмечена заранее, ссылки на документы открываются в новой вкладке) */
.pcheck { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.pcheck input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primary); cursor: pointer; }
.pcheck a { text-decoration: underline; text-underline-offset: 2px; }