/* Orthomol — вариант D, ред. 8. Токены из docs/03-design-system.md. */

/* Шрифты IBM Plex — локально (woff2, OFL), русский и латинский наборы. Файлы лежат в assets/fonts/. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-cyrillic-300.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-300.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-cyrillic-600.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-cyrillic-700.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
	--ink: #0B1F4B; --navy: #16306F; --text: #394461; --muted: #6B7389;
	--line: #E3E6ED; --field: #D5DAE4; --soft: #F6F4F0; --soft2: #F3F5F9;
	--lime: #A6C62B; --lime-bg: #F1F6E1; --green: #1E8E50; --wa: #1FA855;
	--amber-bg: #FFF4DB; --amber-ink: #7A5200; --success-bg: #E6F4EC; --success-ink: #146C3C;
	--danger: #C0392B;
	--ink-text: #fff; --ink-sub: #C9D2EA; --ink-mute: #8FA0C6;
	--font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
	--wrap: 1312px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); font: 400 16px/1.55 var(--font); display: flex; flex-direction: column; min-height: 100vh; }
img { max-width: 100%; height: auto; }
a { color: var(--navy); }
a:hover { color: var(--ink); }
[hidden] { display: none !important; }
.om-main { flex: 1 0 auto; }
.om-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.om-mono { font-family: var(--mono); }
.om-skip { position: absolute; left: -9999px; }
.om-skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }

/* Метка секции и заголовки */
.om-label { font: 400 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink-mute); text-transform: uppercase; }
.om-label--dark { color: var(--muted); }
.om-h1 { margin: 0 0 16px; color: var(--ink); font-size: 42px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.om-page { padding-top: 48px; padding-bottom: 72px; }
.om-prose { font-size: 17px; line-height: 1.65; }
.om-stub { padding: 72px 0 88px; background: var(--soft); }
.om-stub .om-h1 { margin-top: 14px; }

/* Кнопки */
.om-btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 12px; border: 1.5px solid transparent; font: 600 15px/1 var(--font); text-decoration: none; cursor: pointer; }
.om-btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.om-btn--primary:hover { background: var(--ink); color: #fff; }
.om-btn--outline { background: #fff; border-color: var(--navy); color: var(--navy); }
.om-btn--ghost { background: transparent; border-color: #C9D0DE; color: var(--navy); }
.om-btn--lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.om-btn--wa { height: 44px; padding: 0 18px; background: var(--wa); border-color: var(--wa); color: #fff; }
.om-btn--wa:hover { color: #fff; filter: brightness(.95); }

/* Верхняя полоса */
.om-topbar { background: var(--ink); color: var(--ink-sub); font-size: 13px; }
.om-topbar__in { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.om-topbar__lead, .om-topbar__right, .om-topbar__ship { display: flex; align-items: center; }
.om-topbar__lead { gap: 10px; }
.om-topbar__right { gap: 24px; }
.om-topbar__ship { gap: 8px; }
.om-topbar a { color: #fff; text-decoration: none; font-weight: 500; }
.om-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* Шапка */
.om-header { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.om-header__in { display: flex; align-items: center; gap: 36px; }
.om-logo { display: flex; align-items: center; flex: none; }
.om-logo img { height: 32px; width: auto; }
.om-nav { flex: 1 1 auto; display: flex; gap: 24px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.om-nav a { display: flex; align-items: center; gap: 4px; height: 80px; padding-top: 2px; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.om-nav a:hover, .om-nav a[aria-current="page"] { border-bottom-color: var(--lime); }
.om-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.om-lang { display: flex; align-items: center; gap: 6px; margin-right: 8px; font: 400 13px/1 var(--mono); color: var(--muted); }
.om-lang a { color: var(--muted); text-decoration: none; }
.om-lang a.is-on { color: var(--ink); font-weight: 500; }
.om-lang span { color: #C9D0DE; }
.om-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); }
.om-ico:hover { background: var(--soft2); color: var(--ink); }
.om-cart { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-left: 4px; border-radius: 12px; background: var(--navy); color: #fff; }
.om-cart:hover { background: var(--ink); color: #fff; }
.om-cart-count { position: absolute; top: -5px; right: -5px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 700; }
.om-wa-pill { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; margin-left: 10px; border-radius: 999px; background: var(--wa); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; }
.om-wa-pill:hover { color: #fff; filter: brightness(.95); }
.om-burger { display: none; width: 44px; height: 44px; margin-left: 4px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }

/* Подвал */
.om-footer { background: var(--ink); color: var(--ink-sub); }
.om-footer__in { padding-top: 56px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 40px; }
.om-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; }
.om-footer__brand { display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
.om-footer__brand img { align-self: flex-start; height: 30px; width: auto; }
.om-footer__brand span { max-width: 300px; }
.om-footer__brand .om-btn { align-self: flex-start; }
.om-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.om-footer__col a { color: #fff; text-decoration: none; }
.om-footer__col a:hover { text-decoration: underline; }
.om-footer__phone { font-size: 20px; font-weight: 600; }
.om-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid #263A6B; font-size: 13px; color: var(--ink-mute); }

/* Плавающая кнопка WhatsApp */
.om-wa-float { position: fixed; right: 28px; bottom: 28px; z-index: 30; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 10px 28px rgba(31,168,85,.35); }
.om-wa-float:hover { color: #fff; filter: brightness(.95); }

/* Окно заявки */
.om-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11,31,75,.55); }
.om-modal__box { position: relative; width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px rgba(11,31,75,.25); }
.om-modal__box h3 { margin: 0; font-size: 24px; color: var(--ink); }
.om-modal__sub { margin: 0; color: var(--muted); }
.om-modal__x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--soft2); font-size: 22px; cursor: pointer; color: var(--ink); }
.om-modal__box input[type=text], .om-modal__box input[type=tel] { height: 52px; padding: 0 16px; border: 1px solid var(--field); border-radius: 12px; font: 400 16px var(--font); }
.om-modal__msg { margin: 0; min-height: 20px; color: var(--danger); font-size: 14px; }
.om-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.om-btn--on-ink { border-color: #3B4F82; color: #fff; align-self: flex-start; height: 44px; }
.om-product__alt { margin: 0; }

/* Отслеживание заказа и проверка подлинности */
.om-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; padding: 0; counter-reset: s; }
.om-steps li { counter-increment: s; padding: 12px; border-radius: 12px; background: var(--soft2); color: var(--muted); font-size: 14px; }
.om-steps li::before { content: counter(s) ". "; }
.om-steps li.is-done { background: var(--success-bg); color: var(--success-ink); font-weight: 600; }
.om-track { margin-bottom: 32px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; }
.om-auth { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin-bottom: 32px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--soft2); }
.om-auth input { height: 52px; padding: 0 16px; border: 1px solid var(--field); border-radius: 12px; font: 400 16px var(--font); }
.om-auth .button { height: 52px; border: 0; border-radius: 12px; background: var(--navy); color: #fff; font: 600 16px var(--font); cursor: pointer; }
.om-auth__hint { margin: 0; font-size: 14px; color: var(--muted); }
.om-track-form .button { height: 52px; padding: 0 28px; border: 0; border-radius: 12px; background: var(--navy); color: #fff; font: 600 16px var(--font); cursor: pointer; }
.om-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.om-table th, .om-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.om-table th { color: var(--ink); font-weight: 600; background: var(--soft2); }

/* Планшет и телефон */
@media (max-width: 1100px) {
	.om-header__in { gap: 16px; }
	.om-lang, .om-wa-pill { display: none; }
	.om-burger { display: inline-flex; align-items: center; justify-content: center; }
	.om-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px 16px 16px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(11,31,75,.10); display: none; }
	.om-nav.is-open { display: flex; }
	.om-nav a { height: 52px; border-bottom: 1px solid var(--line); }
	.om-tools { margin-left: auto; }
}
@media (max-width: 760px) {
	.om-wrap { padding: 0 16px; }
	.om-topbar__ship { display: none; }
	.om-topbar__in { padding-top: 8px; padding-bottom: 8px; }
	.om-header__in { min-height: 64px; }
	.om-logo img { height: 28px; }
	.om-h1 { font-size: 28px; }
	.om-stub { padding: 44px 0 56px; }
	.om-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
	.om-footer__brand { grid-column: 1 / -1; }
	.om-footer__in { padding-top: 40px; }
	.om-wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; }
}
@media (max-width: 480px) {
	.om-footer__grid { grid-template-columns: 1fr; }
}