/* ========== Kalina: база для всех страниц — шрифты, токены, теги, контейнер. Что где использовать — README.md. ========== */

/* ---------- Шрифты: Google Sans (400, 600) — интерфейс, Jun — заголовки и цифры ---------- */
@font-face { font-family: "Jun-kalina"; font-style: normal; font-weight: 100 900; src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("NotoSerif-Regular"); unicode-range: U+003C, U+003E, U+007C, U+00B1, U+00B7, U+00BC-00BE, U+00D7, U+00D8, U+2018-201E, U+2190-2193, U+2212;
}
@font-face { font-family: "Jun-kalina"; font-style: normal; font-weight: 100 900; src: url("../fonts/Jun/Jun-Regular.woff2") format("woff2"); font-display: swap;
}
/* Google Sans (Google Fonts, файлы на сайте): только 400 и 600 — других весов в стилях нет; курсива нет — значки <i> пустые.
   Наборы знаков как у Google: браузер качает только нужные (кириллица, латиница, ₽ — в latin-ext). */
@font-face { font-family: "GoogleSans-kalina"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/GoogleSans/GoogleSans-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "GoogleSans-kalina"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/GoogleSans/GoogleSans-400-latin-ext.woff2") format("woff2"); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "GoogleSans-kalina"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/GoogleSans/GoogleSans-400-latin.woff2") format("woff2"); 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; }
@font-face { font-family: "GoogleSans-kalina"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/GoogleSans/GoogleSans-600-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "GoogleSans-kalina"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/GoogleSans/GoogleSans-600-latin-ext.woff2") format("woff2"); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "GoogleSans-kalina"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/GoogleSans/GoogleSans-600-latin.woff2") format("woff2"); 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 {
    /* Цвета */
    --kln-red: #db272e;          /* акцент: главные кнопки, выбор, бейджи */
    --kln-red-hover: #c21f26;
    --kln-red-soft: #fff5f5;     /* фон промо-строки, наведение на второстепенную кнопку */
    --kln-ink: #1e1e1e;          /* заголовки, цены, суммы */
    --kln-text: #333;            /* основной текст */
    --kln-muted: #6b6b6b;        /* подписи, подсказки, ссылки меню; темнее #7a7a7a — контраст 4,5 и на сером фоне */
    --kln-faint: #b5b5b5;        /* неактивное, плейсхолдеры */
    --kln-line: #ececec;         /* рамки карточек и разделители */
    --kln-border: #dedede;       /* рамки полей и тихих кнопок */
    --kln-border-strong: #c9c9c9; /* они же при наведении */
    --kln-bg: #f5f5f5;           /* серый фон под белыми плашками */
    --kln-surface: #fafafa;      /* фон полей и служебных полос */
    --kln-soft: #faf7f6;         /* тёплая плашка: бонусы, описание доставки */
    --kln-success: #1e8a4c;
    --kln-success-soft: #e9f6ee;
    --kln-error: #b81f25;
    /* Шрифты: Proxima Nova 400 и 600 — интерфейс и текст, Jun — заголовки и крупные цифры */
    --kln-font: GoogleSans-kalina, sans-serif;
    --kln-font-head: Jun-kalina, Georgia, serif;
    /* Размеры текста */
    --kln-fs-xs: 12px;           /* подписи под иконками, бейджи, подписи капсом */
    --kln-fs-sm: 14px;           /* второстепенное, кнопки S */
    --kln-fs-md: 16px;           /* основной текст, поля, подписи полей, кнопки */
    --kln-fs-lg: 20px;           /* суммы, названия в итогах, подзаголовки */
    --kln-fs-xl: 26px;           /* заголовки блоков */
    --kln-fs-2xl: 36px;          /* заголовки секций, крупные цифры */
    --kln-fs-page: 44px;         /* заголовки страниц (h1) */
    --kln-fs-page-sm: 32px;      /* они же на телефоне */
    --kln-fs-display: 56px;      /* витринные цифры и баннеры главной */
    --kln-fs-display-sm: 44px;   /* они же поменьше */
    /* Скругления, высоты, тени */
    --kln-r-sm: 8px;             /* поля, кнопки, плитки, бейджи */
    --kln-r-md: 12px;            /* карточки и окна */
    --kln-h-control: 46px;       /* поля и обычные кнопки (M) */
    --kln-h-cta: 52px;
    --kln-h-small: 36px;         /* маленькие кнопки (S) */           /* главная кнопка страницы (L) */
    --kln-shadow-sm: 0 6px 24px rgba(0, 0, 0, .06);  /* наведение на карточку, липкая шапка */
    --kln-shadow-lg: 0 12px 40px rgba(0, 0, 0, .12); /* окна и выпадающие панели */
    --kln-ring: 0 0 0 1px var(--kln-ink);            /* фокус: чёрная линия 1px (у полей — рамка --kln-ink без кольца) */
}

/* ---------- Общие правила ---------- */
b, strong { font-weight: 600; }

/* Ссылки в тексте — красные с подчёркиванием. :where — чтобы класс любого компонента перебивал это правило.
   Цвет при наведении пока задан с силой a:hover (как было у подрядчика): на него опираются старые блоки. */
:where(a) { color: var(--kln-red); text-decoration: underline; }
a:hover { color: var(--kln-red-hover); }

/* Контейнер сайта: 1280px с полями 15px — по нему выровнены шапка, контент и подвал. */
.kln-container { margin: 0 auto; padding: 0 16px; }

/* Значок из SVG-маски: цвет берёт из color, форму — из --kln-icon. */
.kln-icon { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--kln-icon) no-repeat center / contain; mask: var(--kln-icon) no-repeat center / contain; }

/* ---------- Теги: сброс и типографика по умолчанию ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; outline: none !important; }
input { outline: none !important; }
input,
textarea,
select { font-family: var(--kln-font); }
*::-webkit-input-placeholder { opacity: 1; }
*:-moz-placeholder { opacity: 1; }
*::-moz-placeholder { opacity: 1; }
*:-ms-input-placeholder { opacity: 1; }
input:focus { outline: none; }
html { font-size: var(--kln-fs-md); }
/* Место под полосу прокрутки всегда за страницей: когда меню, фильтр или окно блокируют прокрутку (body.no-scroll),
   полоса пропадает, а вёрстка не сдвигается вправо. На телефонах и macOS с исчезающими полосами ничего не меняет. */
html { scrollbar-gutter: stable; }
body { background: #fff; font-size: var(--kln-fs-md); min-width: 320px; line-height: 1.4; font-family: var(--kln-font); font-weight: 400; font-style: normal; color: var(--kln-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Значки — пустые <i>: без этого браузер считает их курсивом и качает файл курсива. */
i[class*="icon"] { font-style: normal; }
h1,
h2,
h3,
h4,
h5,
h6 { font-family: Jun-kalina, serif; color: var(--kln-ink); }
.kln-icon_user { --kln-icon: url(../img/icons/user.svg); }
.kln-icon_search { --kln-icon: url(../img/icons/search.svg); }
.kln-icon_heart { --kln-icon: url(../img/icons/heart.svg); }
.kln-icon_gift { --kln-icon: url(../img/icons/gift.svg); } /* рисован на 48px: при этом размере линия 1px */

/* Переносы текста: по всему сайту pretty, у заголовков и коротких подписей — balance (см. также components.css). */
body { text-wrap-style: pretty; }
h1, h2, h3, h4, h5, h6, figcaption, label, dt, button { text-wrap-style: balance; }