/* input(1349,1): run-time error CSS1019: Unexpected token, found '}' */
/* Self-hosted шрифты (вариативные woff2) вместо Google Fonts CDN.
   Быстрее, приватнее (99-З), без внешних доменов в CSP.
   Кириллица и латиница разделены через unicode-range — браузер грузит только нужный субсет. */

/* ---- Inter (body / UI) ---- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-cyrillic-var.woff2?v=3MRlQe1C8mBzVSezSZtFPuxQgHM") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin-var.woff2?v=3MRlQe1C8mBzVSezSZtFPuxQgHM") 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Manrope (display / headings) ---- */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/manrope-cyrillic-var.woff2?v=3MRlQe1C8mBzVSezSZtFPuxQgHM") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/manrope-latin-var.woff2?v=3MRlQe1C8mBzVSezSZtFPuxQgHM") 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================
   Reset
   =========================== */

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

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg-cream); /* Premium Apothecary: тёплая канва, белые карточки «всплывают» */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:root {
    /* ============================================================
       Палитра — NSP Green
       Основан на фирменной зелёной палитре Nature's Sunshine
       ============================================================ */
    --color-primary:        #00873E;   /* фирменная NSP зелень */
    --color-primary-dark:   #006A30;   /* hover/active */
    --color-primary-soft:   #E8F5EE;   /* пастельная подсветка */
    --color-accent:         #B7E168;   /* лайм, для CTA-акцентов */
    --color-accent-soft:    #F0F9DA;

    /* Фоны */
    --color-bg:             #FEFCF7;   /* тёплый off-white — Premium Apothecary */
    --color-bg-soft:        #F7F3EA;   /* тёплый off-white (Premium Apothecary, гармонирует с cream) */
    --color-bg-section:     #F1EBDD;   /* тёплая секция «о нас», подвал */

    /* Premium Apothecary — тёплая «аптечная» палитра (направление редизайна, DESIGN.md) */
    --color-bg-cream:       #FBF8F2;   /* тёплая кремовая канва */
    --color-bg-cream-deep:  #F4EEE2;   /* кремовая секция-разделитель */
    --color-primary-deep:   #0B3D2E;   /* глубокий лес — премиальные заголовки/акценты */
    --color-botanical:      #5B7C5A;   /* приглушённый травяной — для ботанических мотивов */

    /* Текст */
    --color-text:           #1A2E1F;   /* темно-зелёный, не чёрный */
    --color-text-strong:    #0E1A11;
    --color-muted:          #5C6B5F;
    --color-border:         #E5EBE3;
    --color-border-strong:  #D2DBCF;

    /* Семантика */
    --color-success:        #16A34A;
    --color-success-soft:   #DCFCE7;
    --color-success-dark:   #15803D;
    --color-warning:        #D97706;
    --color-warning-soft:   #FEF3C7;
    --color-warning-dark:   #B45309;
    --color-danger:         #DC2626;
    --color-danger-soft:    #FEE2E2;
    --color-danger-dark:    #B91C1C;
    --color-info:           #0284C7;
    --color-info-soft:      #DBEAFE;
    --color-info-dark:      #0369A1;
    --color-secondary-hover: #DCEEE3;
    --color-star:           #F59E0B;   /* янтарный — звёзды рейтинга */

    /* ============================================================
       Типографика
       ============================================================ */
    --font-base:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Manrope", "Inter", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-28: 1.75rem;
    --fs-32: 2rem;
    --fs-40: 2.5rem;
    --fs-48: 3rem;
    --fs-56: 3.5rem;
    --fs-64: 4rem;      /* Premium Apothecary — крупный hero */
    --fs-72: 4.5rem;

    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.5;
    --lh-relaxed: 1.75;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ============================================================
       Layout
       ============================================================ */
    --container-max:    1240px;
    --container-narrow: 800px;
    --header-height:    auto;

    --gap-2:  2px;
    --gap-4:  4px;
    --gap-6:  6px;
    --gap-8:  8px;
    --gap-12: 12px;
    --gap-16: 16px;
    --gap-20: 20px;
    --gap-24: 24px;
    --gap-28: 28px;
    --gap-32: 32px;
    --gap-40: 40px;
    --gap-48: 48px;
    --gap-64: 64px;
    --gap-80: 80px;

    --radius-4:  4px;
    --radius-6:  6px;
    --radius-8:  8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(26, 46, 31, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 46, 31, 0.08);
    --shadow-lg: 0 12px 32px rgba(26, 46, 31, 0.12);
    --shadow-ring-primary: 0 0 0 3px rgba(0, 135, 62, 0.15);

    /* ============================================================
       Брейкпоинты (для справки в JS — медиа-запросы пишем числами)
       ============================================================ */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* ============================================================
       Анимация
       ============================================================ */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 320ms ease;

    /* Экспоненциальные ease-out кривые (методика motion: без bounce/elastic) */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --transition-reveal: 640ms var(--ease-out-expo);

    /* ============================================================
       Z-index слои
       ============================================================ */
    --z-dropdown: 100;
    --z-header:   200;
    --z-overlay:  900;
    --z-modal:    1000;
    --z-toast:    1100;
}

/* ===========================
   Layout: контейнер, хедер, футер, навбар, типографика
   =========================== */

.container {
    width: min(var(--container-max), 100% - 2rem);
    margin-inline: auto;
}

.container--narrow {
    width: min(var(--container-narrow), 100% - 2rem);
    margin-inline: auto;
}

/* =====================================================================
   ШАПКА
   ===================================================================== */
.header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

/* Тонкая верхняя плашка */
.header__strip {
    background: var(--color-primary-dark);
    color: #DCEEE3;
    font-size: var(--fs-13);
}
.header__strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: var(--gap-16);
}
.header__strip a {
    color: #fff;
    font-weight: var(--fw-semibold);
}
.header__strip-right {
    display: flex;
    align-items: center;
    gap: var(--gap-12);
}
.header__strip-messenger {
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
    font-weight: normal;
}
.header__strip-messenger:hover { opacity: 1; }
.header__strip-messenger-label {
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    color: #fff;
}
.mobile-menu__contact--viber { color: #7360f2 !important; }

/* Основная строка шапки */
.header__main {
    padding: var(--gap-16) 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--gap-24);
}

/* Лого (бренд) */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-12);
    text-decoration: none;
    color: var(--color-text-strong);
}
.brand__logo {
    height: 52px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
    font-family: var(--font-heading);
    font-size: var(--fs-18);
    font-weight: 800;
    color: var(--color-primary-dark);
    letter-spacing: -0.01em;
}
.brand__tagline {
    font-size: 11px;
    font-weight: var(--fw-medium);
    color: var(--color-muted);
    letter-spacing: 0.03em;
}

/* Поиск в шапке */
.header__search {
    position: relative;
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
}
.header__search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-bg-soft);
    font-size: var(--fs-14);
    transition: all var(--transition-fast);
}
.header__search-input:focus {
    outline: none;
    background: var(--color-bg);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-ring-primary);
}
.header__search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
}

/* Действия (корзина, аккаунт) */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
}

.icon-btn {
    position: relative;
    width: 44px; height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-strong);
    cursor: pointer;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.icon-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}
.icon-btn__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: var(--fw-bold);
    display: grid;
    place-items: center;
    line-height: 1;
}

.icon-btn__label {
    display: none;
    margin-left: 6px;
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
}
@media (min-width: 1024px) {
    .icon-btn--with-label {
        width: auto;
        height: 40px;
        padding: 0 14px;
        gap: 6px;
    }
    .icon-btn--with-label .icon-btn__label { display: inline; }
}

/* Кнопка-войти как primary */
.header__actions .btn { white-space: nowrap; }

/* Нижняя строка — каталог-навигация */
.header__nav {
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}
.header__nav-inner {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
    padding: 6px 0;
    flex-wrap: wrap;
}
.header__nav a {
    padding: 8px 14px;
    border-radius: var(--radius-8);
    color: var(--color-text);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    transition: all var(--transition-fast);
}
.header__nav a:hover,
.header__nav a.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* Гамбургер для мобильных */
.navbar__toggle {
    display: none;
    width: 44px; height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    place-items: center;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.navbar__toggle:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

/* Иконки гамбургера: три полоски / крестик */
.navbar__icon-close { display: none; }
.navbar__toggle[aria-expanded="true"] .navbar__icon-open  { display: none; }
.navbar__toggle[aria-expanded="true"] .navbar__icon-close { display: block; }

/* Мобильное меню — анимация через max-height */
.mobile-menu {
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.28s ease;
}
.mobile-menu.is-open {
    max-height: 800px;
    padding: var(--gap-12) 0;
    border-top: 1px solid var(--color-border);
}
.mobile-menu a,
.mobile-menu button {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
    padding: 10px 14px;
    border-radius: var(--radius-8);
    color: var(--color-text);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
    text-decoration: none;
}
.mobile-menu a:hover,
.mobile-menu button:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

/* Разделитель и ссылки на мессенджеры в мобильном меню */
.mobile-menu__divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--gap-4) 0;
}
.mobile-menu__contact { color: var(--color-muted) !important; }

@media (max-width: 768px) {
    .header__strip { display: none; }
}

/* Адаптив шапки */
@media (max-width: 1024px) {
    .header__main {
        grid-template-columns: auto auto;
        gap: var(--gap-12);
    }
    .header__search { grid-column: 1 / -1; order: 3; }
    .header__nav { display: none; }
    .navbar__toggle { display: grid; }
    .icon-btn--account-text { display: none; }
}
@media (max-width: 480px) {
    .brand__text { display: none; }
    .header__main { gap: var(--gap-8); }
}

/* =====================================================================
   ПОДВАЛ
   ===================================================================== */
.footer {
    background: var(--color-primary-deep);
    border-top: 1px solid var(--color-primary-deep);
    color: rgba(255, 255, 255, 0.82);
    margin-top: var(--gap-80);
}

.footer__top {
    padding: var(--gap-48) 0 var(--gap-32);
    display: grid;
    gap: var(--gap-32);
    grid-template-columns: 2fr 1fr 1fr 1fr;
}
@media (max-width: 768px) {
    .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .footer__top { grid-template-columns: 1fr; }
}

.footer__col-title {
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: var(--gap-16);
}

.footer__about p,
.footer__about-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-14);
    line-height: var(--lh-relaxed);
    max-width: 360px;
    margin-top: var(--gap-16);
}

.footer__list { display: grid; gap: var(--gap-8); }
.footer__list a {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-14);
    transition: color var(--transition-fast);
}
.footer__list a:hover { color: var(--color-accent); }

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: var(--gap-20) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-16);
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.68);
    font-size: var(--fs-13);
}
.footer__bottom a { color: rgba(255, 255, 255, 0.82); transition: color var(--transition-fast); }
.footer__bottom a:hover { color: var(--color-accent); }

.footer__bottom-meta {
    display: flex;
    align-items: center;
    gap: var(--gap-16);
    flex-wrap: wrap;
}
.footer__bottom p { color: rgba(255, 255, 255, 0.68); }
.footer__credit { color: rgba(255, 255, 255, 0.68); }
.footer__version {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    color: rgba(255, 255, 255, 0.55);
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* =====================================================================
   ТИПОГРАФИКА
   ===================================================================== */
.h1, h1 {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-28), 4vw, var(--fs-48));
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--color-text-strong);
}

.h2, h2 {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-24), 3vw, var(--fs-32));
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    color: var(--color-text-strong);
}

.h3, h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-20);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--color-text-strong);
}

.h4, h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
}

p { font-size: var(--fs-16); color: var(--color-text); line-height: var(--lh-normal); }
.lead { font-size: var(--fs-18); color: var(--color-muted); line-height: var(--lh-relaxed); }
.muted { color: var(--color-muted); }

a { color: var(--color-primary-dark); }
a:hover { color: var(--color-primary); }

/* =====================================================================
   ОБЩЕЕ ОБЁРТЫВАНИЕ КОНТЕНТА
   ===================================================================== */
.main { padding-block: var(--gap-32); min-height: 60vh; }

.section          { padding-block: var(--gap-48); }
.section--soft    { background: var(--color-bg-soft); }
.section--section { background: var(--color-bg-section); }

.section__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--gap-16);
    margin-bottom: var(--gap-24);
    flex-wrap: wrap;
}
.section__header .h1,
.section__header .h2,
.section__header h1,
.section__header h2 { margin: 0; }

.section__title-group { display: grid; gap: var(--gap-4); }
.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}
.section__eyebrow svg {
    flex-shrink: 0;
    animation: eyebrow-glow 2.4s ease-in-out infinite;
}
@keyframes eyebrow-glow {
    0%, 100% { filter: drop-shadow(0 0 0px currentColor); opacity: 1; }
    50%       { filter: drop-shadow(0 0 6px currentColor); opacity: 0.85; }
}

.section__actions {
    margin-top: var(--gap-24);
    display: flex;
    gap: var(--gap-12);
    flex-wrap: wrap;
}

/* Сетки */
.grid { display: grid; gap: var(--gap-20); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Хлебные крошки */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-6);
    align-items: center;
    font-size: var(--fs-13);
    color: var(--color-muted);
    padding: var(--gap-12) 0;
}
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-primary-dark); }
.breadcrumbs__sep { opacity: 0.6; }
.breadcrumbs__current { color: var(--color-text); font-weight: var(--fw-medium); }

/* ===========================
   Компоненты: кнопки, формы, таблицы, бейджи, карточки, чипы, алерты
   =========================== */

/* =====================================================================
   КНОПКИ
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-8);
    padding: 10px 18px;
    border-radius: var(--radius-8);
    border: 1px solid transparent;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base),
                border-color var(--transition-base), box-shadow var(--transition-base),
                transform var(--transition-fast);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-14);
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring-primary);
}

.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--primary,
a.btn--primary,
a.btn--primary:visited {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.btn--primary:hover,
a.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

.btn--secondary {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-soft);
    color: var(--color-primary-dark);
}
.btn--secondary:hover {
    background: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
}

.btn--ghost {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.btn--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.btn--accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-strong);
}
.btn--accent:hover {
    background: #A4D44C;
    border-color: #A4D44C;
}

.btn--danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}
.btn--danger:hover { background: var(--color-danger-dark); border-color: var(--color-danger-dark); }

.btn--info  { background: var(--color-info); border-color: var(--color-info); color: #fff; }
.btn--info:hover { background: var(--color-info-dark); border-color: var(--color-info-dark); }

.btn--link {
    background: transparent;
    border-color: transparent;
    color: var(--color-primary);
    padding-inline: 0;
}
.btn--link:hover { color: var(--color-primary-dark); text-decoration: underline; }

.btn--block { width: 100%; }
.btn--lg { padding: 14px 24px; font-size: var(--fs-16); border-radius: var(--radius-10); }
.btn--sm { padding: 6px 12px; font-size: var(--fs-13); }
.btn--xs { padding: 4px 8px;  font-size: var(--fs-12); border-radius: var(--radius-6); }

.btn--icon {
    width: 40px; height: 40px;
    padding: 0;
    border-radius: var(--radius-full);
}
.btn--icon.btn--sm { width: 32px; height: 32px; }

/* =====================================================================
   ФОРМЫ
   ===================================================================== */
.form { display: grid; gap: var(--gap-16); }

.form__row { display: grid; gap: var(--gap-12); }

.form__row--checkbox {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
}

.form__row--between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-8);
    flex-wrap: wrap;
}

.form__link--muted {
    font-size: var(--fs-13);
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.form__link--muted:hover { color: var(--color-primary); text-decoration: underline; }

.form__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-8);
}
.form__radio-label {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-6);
    padding: 8px 14px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast),
                color var(--transition-fast);
}
.form__radio-label:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}
.form__radio-label input[type="radio"] {
    display: none;
}
.form__radio-label:has(input[type="radio"]:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.forgot-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--gap-12);
    margin-top: var(--gap-16);
}
.forgot-contacts__item {
    display: flex;
    align-items: center;
    gap: var(--gap-10);
    padding: var(--gap-12) var(--gap-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-10);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    transition: border-color var(--transition-fast), color var(--transition-fast),
                background var(--transition-fast);
}
.forgot-contacts__item:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.form__checkbox { width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }

.form__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-8);
    font-size: var(--fs-14);
    color: var(--color-text);
    cursor: pointer;
    line-height: 1.5;
}

.form__checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-8) var(--gap-16);
}

.form__checkboxes .form__checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-14);
    color: var(--color-text);
    cursor: pointer;
    width: auto;
    height: auto;
}

.form__checkboxes .form__checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    cursor: pointer;
}

@media (min-width: 768px) {
    .form__row--2 { grid-template-columns: 1fr 1fr; }
    .form__row--3 { grid-template-columns: repeat(3, 1fr); }
    .form__row--4 { grid-template-columns: repeat(4, 1fr); }
}

.form__group { display: grid; gap: var(--gap-6); }

.form__label {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-14);
    color: var(--color-text);
}
.form__hint { font-size: var(--fs-13); color: var(--color-muted); }

.form__input,
.form__select,
.form__textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-8);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--fs-14);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
                background var(--transition-fast);
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--color-muted); }

.form__input:hover,
.form__select:hover,
.form__textarea:hover { border-color: var(--color-text); }

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-ring-primary);
}

.form__textarea { min-height: 110px; resize: vertical; }

.form__input--invalid,
.form__select--invalid,
.form__textarea--invalid {
    border-color: var(--color-danger);
}

.form__error,
.field-validation-error,
span.field-validation-error,
.text-danger {
    color: var(--color-danger);
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-12);
    margin-top: var(--gap-8);
}

/* =====================================================================
   ТАБЛИЦЫ
   ===================================================================== */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-12);
    overflow: hidden;
}

.table th,
.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
    font-size: var(--fs-14);
}

.table thead th {
    background: var(--color-bg-soft);
    font-weight: var(--fw-semibold);
    color: var(--color-muted);
    font-size: var(--fs-13);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-primary-soft); }

.table--striped tbody tr:nth-child(even) { background: var(--color-bg-soft); }
.table--striped tbody tr:nth-child(even):hover { background: var(--color-primary-soft); }

.table .text-right { text-align: right; }
.table .text-center { text-align: center; }

.table__actions { display: inline-flex; gap: var(--gap-4); }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =====================================================================
   БЕЙДЖИ / ЧИПЫ
   ===================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-4);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

.badge--success { background: var(--color-success-soft); color: var(--color-success-dark); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning-dark); }
.badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger-dark); }
.badge--info    { background: var(--color-info-soft);    color: var(--color-info-dark); }
.badge--neutral { background: var(--color-bg-soft);      color: var(--color-muted); }
.badge--primary { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--inline  { padding: 1px 5px; font-size: var(--fs-12); vertical-align: middle; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-6);
    padding: 6px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
}
.chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}
.chip--active,
.chip[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* =====================================================================
   КАРТОЧКИ (универсальные)
   ===================================================================== */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-12);
    padding: var(--gap-20);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card--hoverable:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.card--soft { background: var(--color-bg-soft); border-color: transparent; }
.card--flat { box-shadow: none; }
.card--padless { padding: 0; overflow: hidden; }

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-12);
    margin-bottom: var(--gap-12);
    padding-bottom: var(--gap-12);
    border-bottom: 1px solid var(--color-border);
}
.card__title { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-semibold); }
.card__body { display: grid; gap: var(--gap-12); }
.card__footer {
    margin-top: var(--gap-16);
    padding-top: var(--gap-16);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--gap-8);
    flex-wrap: wrap;
}

/* =====================================================================
   АЛЕРТЫ
   ===================================================================== */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-10);
    border: 1px solid transparent;
    font-size: var(--fs-14);
    line-height: var(--lh-snug);
}
.alert--success { background: var(--color-success-soft); color: var(--color-success-dark); border-color: rgba(22, 163, 74, 0.2); }
.alert--warning {
    background: var(--color-bg-cream-deep);
    color: var(--color-text);
    border-color: var(--color-border);
    border-left-width: 3px;
    border-left-color: var(--color-warning);
}
.alert--error,
.alert--danger  { background: var(--color-danger-soft); color: var(--color-danger-dark); border-color: rgba(220, 38, 38, 0.2); }
.alert--info    {
    background: var(--color-primary-soft);
    color: var(--color-text);
    border-color: var(--color-border);
    border-left-width: 3px;
    border-left-color: var(--color-primary);
}
.alert:empty    { display: none; }

/* =====================================================================
   EMPTY STATES (заглушки пустых разделов)
   ===================================================================== */
.empty-state {
    text-align: center;
    padding: var(--gap-48) var(--gap-24);
    background: var(--color-bg-soft);
    border-radius: var(--radius-12);
    color: var(--color-muted);
}
.empty-state__icon {
    width: 64px; height: 64px;
    margin: 0 auto var(--gap-16);
    display: grid;
    place-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-full);
}
.empty-state__title {
    color: var(--color-text);
    font-size: var(--fs-20);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--gap-8);
}
.empty-state__text {
    margin-bottom: var(--gap-20);
    max-width: 480px;
    margin-inline: auto;
}

/* =====================================================================
   УТИЛИТЫ
   ===================================================================== */
.text-right    { text-align: right; }
.text-center   { text-align: center; }
.text-muted    { color: var(--color-muted); }
.text-success  { color: var(--color-success); }
.text-danger   { color: var(--color-danger); }
.text-bold     { font-weight: var(--fw-bold); }

.flex          { display: flex; }
.flex-between  { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-12); }
.flex-center   { display: flex; justify-content: center; align-items: center; }
.flex-wrap     { flex-wrap: wrap; }
.gap-4         { gap: var(--gap-4); }
.gap-8         { gap: var(--gap-8); }
.gap-12        { gap: var(--gap-12); }
.gap-16        { gap: var(--gap-16); }

.mt-0          { margin-top: 0; }
.mt-8          { margin-top: var(--gap-8); }
.mt-12         { margin-top: var(--gap-12); }
.mt-16         { margin-top: var(--gap-16); }
.mt-20         { margin-top: var(--gap-20); }
.mt-24         { margin-top: var(--gap-24); }
.mt-32         { margin-top: var(--gap-32); }
.mt-40         { margin-top: var(--gap-40); }
.mt-48         { margin-top: var(--gap-48); }
.mt-64         { margin-top: var(--gap-64); }
.mb-0          { margin-bottom: 0; }
.mb-8          { margin-bottom: var(--gap-8); }
.mb-12         { margin-bottom: var(--gap-12); }
.mb-16         { margin-bottom: var(--gap-16); }
.mb-20         { margin-bottom: var(--gap-20); }
.mb-24         { margin-bottom: var(--gap-24); }
.mb-32         { margin-bottom: var(--gap-32); }
.mb-40         { margin-bottom: var(--gap-40); }
.mb-48         { margin-bottom: var(--gap-48); }
.mb-64         { margin-bottom: var(--gap-64); }
.ml-8          { margin-left: var(--gap-8); }

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

/* Visible focus for accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* =====================================================================
   TOAST УВЕДОМЛЕНИЯ
   ===================================================================== */
.toast-container {
    position: fixed;
    bottom: var(--gap-24);
    right: var(--gap-24);
    z-index: 1500;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--gap-8);
    max-width: min(340px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--gap-10);
    padding: var(--gap-12) var(--gap-16);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius-12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--color-text-strong);
    line-height: 1.4;
    animation: toast-slide-in 0.25s ease both,
               toast-slide-out 0.3s ease 2.8s both;
}

.toast--success { border-left-color: var(--color-primary); }
.toast--info    { border-left-color: var(--color-info-dark, #2563EB); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--danger  { border-left-color: var(--color-danger); }

.toast__icon { flex-shrink: 0; }

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(calc(100% + 24px)); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-slide-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(calc(100% + 24px)); }
}

@media (max-width: 480px) {
    .toast-container {
        left: var(--gap-16);
        right: var(--gap-16);
        bottom: var(--gap-16);
    }
    @keyframes toast-slide-in {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes toast-slide-out {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(16px); }
    }
}

/* ============================================================
   Confirm-модал
   ============================================================ */
.confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-16);
    animation: fadeIn 0.15s ease both;
}
.confirm-modal-backdrop[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.confirm-modal {
    background: var(--color-bg);
    border-radius: var(--radius-16);
    padding: var(--gap-24) var(--gap-28);
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.18s ease both;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.confirm-modal__msg {
    margin: 0 0 var(--gap-20);
    color: var(--color-text-strong);
    font-size: var(--fs-16);
    line-height: 1.5;
    font-weight: var(--fw-medium);
}
.confirm-modal__actions {
    display: flex;
    gap: var(--gap-8);
    justify-content: flex-end;
}

/* Базовый .product-card теперь определён в home.css.
   Файл оставлен для обратной совместимости импортов в site.css. */

/* ============================================================
   Корзина: layout с боковой сводкой
   ============================================================ */

.cart-page {
    display: grid;
    gap: var(--gap-32);
    grid-template-columns: 1fr;
    margin-block: var(--gap-24) var(--gap-48);
}
@media (min-width: 992px) {
    .cart-page { grid-template-columns: 1fr 320px; align-items: start; }
}

.cart-list {
    display: grid;
    gap: var(--gap-12);
}

.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--gap-16);
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-16);
}
@media (max-width: 600px) {
    .cart-item { grid-template-columns: 64px 1fr; }
    .cart-item__price-col { grid-column: 1 / -1; }
}

.cart-item__image {
    width: 80px; height: 80px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-8);
    display: grid; place-items: center;
    overflow: hidden;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
}
.cart-item__image img { width: 100%; height: 100%; object-fit: contain; }

.cart-item__name {
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    margin: 0 0 4px;
    text-decoration: none;
    display: block;
}
.cart-item__name:hover { color: var(--color-primary-dark); }

.cart-item__unit {
    font-size: var(--fs-13);
    color: var(--color-muted);
}

.cart-item__qty {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-4);
    margin-top: var(--gap-8);
}
.cart-item__qty .qty-btn {
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    display: grid; place-items: center;
    transition: all var(--transition-fast);
}
.cart-item__qty .qty-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}
.cart-item__qty-input {
    width: 48px;
    height: 32px;
    text-align: center;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-15);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    padding: 0 4px;
    -moz-appearance: textfield;
}
.cart-item__qty-input::-webkit-inner-spin-button,
.cart-item__qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item__qty-input:focus { outline: 2px solid var(--color-primary); border-color: transparent; }

.cart-item__price-col {
    text-align: right;
    display: grid;
    gap: var(--gap-4);
    align-content: center;
}
.cart-item__total {
    font-family: var(--font-heading);
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    line-height: 1;
}
.cart-item__remove {
    background: none;
    border: 0;
    color: var(--color-muted);
    cursor: pointer;
    font-size: var(--fs-13);
    text-decoration: underline;
    padding: 0;
    margin-top: var(--gap-4);
}
.cart-item__remove:hover { color: var(--color-danger); }

/* Сводка */
.cart-summary {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-20);
    position: sticky;
    top: calc(var(--header-height, 88px) + 16px);
}
@media (max-width: 991px) {
    .cart-summary { position: static; top: auto; }
}
.cart-summary__title {
    margin: 0 0 var(--gap-16);
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
}
.cart-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    color: var(--color-text);
}
.cart-summary__row--total {
    border-top: 1px solid var(--color-border);
    margin-top: var(--gap-8);
    padding-top: var(--gap-12);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
}
.cart-summary__row--total .cart-summary__value {
    font-size: var(--fs-24);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
}
.cart-summary__btn {
    width: 100%;
    margin-top: var(--gap-16);
}
.cart-summary__clear {
    width: 100%;
    margin-top: var(--gap-8);
}

/* ============================================================
   Мои заказы — карточки + таймлайн статуса
   ============================================================ */

.orders-list {
    display: grid;
    gap: var(--gap-16);
    margin-block: var(--gap-24) var(--gap-32);
}

.order-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-20);
}

.order-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap-12);
    padding-bottom: var(--gap-16);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--gap-16);
}
.order-card__id {
    font-family: var(--font-heading);
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
}
.order-card__date { color: var(--color-muted); font-size: var(--fs-13); }
.order-card__total {
    font-family: var(--font-heading);
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
}

.order-card__items {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--gap-16);
    display: grid;
    gap: 6px;
    color: var(--color-text);
    font-size: var(--fs-14);
}

.order-card__hint {
    margin: var(--gap-8) 0 0;
    font-size: var(--fs-13);
    color: var(--color-muted);
}

/* =====================================================================
   Таймлайн статуса заказа
   ===================================================================== */
.order-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: var(--gap-12);
    overflow-x: auto;
    padding-bottom: var(--gap-8);
}
.order-timeline__step {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}
.order-timeline__step + .order-timeline__step::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -50%;
    right: 50%;
    height: 2px;
    background: var(--color-border-strong);
    z-index: 0;
}
.order-timeline__step.is-done + .order-timeline__step::before,
.order-timeline__step.is-current + .order-timeline__step.is-done::before {
    background: var(--color-primary);
}

.order-timeline__dot {
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-bg);
    border: 2px solid var(--color-border-strong);
    display: grid; place-items: center;
    color: var(--color-muted);
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    z-index: 1;
    position: relative;
}
.order-timeline__step.is-done .order-timeline__dot {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.order-timeline__step.is-current .order-timeline__dot {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.order-timeline__label {
    font-size: var(--fs-12);
    color: var(--color-muted);
    text-align: center;
    line-height: 1.2;
}
.order-timeline__step.is-done .order-timeline__label,
.order-timeline__step.is-current .order-timeline__label {
    color: var(--color-text-strong);
    font-weight: var(--fw-semibold);
}

.order-timeline--cancelled {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    padding: 12px 16px;
    border-radius: var(--radius-10);
    text-align: center;
    font-weight: var(--fw-semibold);
}

.orders-summary {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-16);
    padding: var(--gap-16) var(--gap-20);
    background: var(--color-bg-soft);
    border-radius: var(--radius-16);
    color: var(--color-text);
    flex-wrap: wrap;
}
.orders-summary strong { color: var(--color-text-strong); }

.order-card__meta {
    display: flex;
    align-items: center;
    gap: var(--gap-12);
    flex-wrap: wrap;
}

/* ============================================================
   Checkout: 2 колонки — форма + сводка справа
   ============================================================ */

.checkout-page {
    display: grid;
    gap: var(--gap-32);
    grid-template-columns: 1fr;
    margin-block: var(--gap-24) var(--gap-48);
}
@media (min-width: 992px) {
    .checkout-page { grid-template-columns: 1fr 360px; align-items: start; }
}

.checkout-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-24);
}
.checkout-card + .checkout-card { margin-top: var(--gap-16); }
.checkout-card__title {
    margin: 0 0 var(--gap-16);
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    display: flex;
    align-items: center;
    gap: var(--gap-12);
}
.checkout-card__step {
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    display: grid; place-items: center;
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
}

.checkout-summary {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-20);
    position: sticky;
    top: calc(var(--header-height, 88px) + 16px);
}
.checkout-summary__title {
    margin: 0 0 var(--gap-12);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
}
.checkout-summary__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--gap-12);
    display: grid;
    gap: var(--gap-8);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--gap-12);
}
.checkout-summary__item {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-8);
    font-size: var(--fs-13);
    color: var(--color-text);
}
.checkout-summary__item-name { color: var(--color-muted); }
.checkout-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: var(--color-text);
}
.checkout-summary__row--total {
    border-top: 1px solid var(--color-border);
    margin-top: var(--gap-8);
    padding-top: var(--gap-12);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
}
.checkout-summary__row--total strong {
    font-size: var(--fs-20);
    color: var(--color-text-strong);
    font-family: var(--font-heading);
}
@media (max-width: 991px) {
    .checkout-summary { position: static; top: auto; }
}

.checkout-summary__item--hidden { display: none; }
.checkout-summary__toggle {
    width: 100%;
    margin-bottom: var(--gap-8);
    font-size: var(--fs-13);
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
    text-decoration: underline;
}

/* ============================================================
   Страница успешного заказа
   ============================================================ */

.order-success {
    text-align: center;
    padding: var(--gap-48) 0;
}
.order-success__badge {
    width: 88px; height: 88px;
    margin: 0 auto var(--gap-24);
    border-radius: var(--radius-full);
    background: var(--color-success-soft);
    color: var(--color-success);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.08);
}
.order-success__title {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-28), 4vw, var(--fs-40));
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--gap-12);
}
.order-success__lead {
    color: var(--color-muted);
    font-size: var(--fs-18);
    margin: 0 auto var(--gap-32);
    max-width: 560px;
}
.order-success__number {
    display: inline-block;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-20);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--gap-32);
}
.order-success__next-steps {
    max-width: 480px;
    margin: var(--gap-32) auto 0;
    text-align: left;
    background: var(--color-bg-soft);
    border-radius: var(--radius-12);
    padding: var(--gap-20) var(--gap-24);
}
.order-success__next-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    margin: 0 0 var(--gap-12);
}
.order-success__steps-list {
    margin: 0;
    padding-left: var(--gap-20);
    display: grid;
    gap: var(--gap-8);
    color: var(--color-text);
    font-size: var(--fs-15);
    line-height: var(--lh-relaxed);
}
.order-success__actions {
    display: flex;
    justify-content: center;
    gap: var(--gap-12);
    margin-top: var(--gap-24);
    flex-wrap: wrap;
}

/* ============================================================
   Страницы 404 / 500 / Access Denied
   ============================================================ */

.error-page,
.access-denied {
    text-align: center;
    padding: var(--gap-64) 0;
    max-width: 640px;
    margin-inline: auto;
}

.error-page__code {
    font-family: var(--font-heading);
    font-size: clamp(96px, 18vw, 180px);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 var(--gap-16);
}

.error-page__title {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-24), 3vw, var(--fs-32));
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--gap-12);
}

.error-page__text {
    color: var(--color-muted);
    font-size: var(--fs-16);
    line-height: var(--lh-relaxed);
    margin: 0 auto var(--gap-32);
    max-width: 520px;
}

.error-page__actions {
    display: flex;
    justify-content: center;
    gap: var(--gap-12);
    flex-wrap: wrap;
}

.access-denied .section__actions {
    margin-top: var(--gap-24);
    display: flex;
    justify-content: center;
    gap: var(--gap-16);
    flex-wrap: wrap;
}

/* ============================================================
   Страницы авторизации/регистрации
   ============================================================ */

.auth-page {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--gap-48) 0;
}

.auth-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.auth-card__header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    padding: var(--gap-32);
    text-align: center;
}
.auth-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-28);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--gap-8);
    color: #fff;
}
.auth-card__subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-14);
    margin: 0;
}

.auth-card__body { padding: var(--gap-32); }

.auth-card__footer {
    padding: var(--gap-16) var(--gap-32) var(--gap-24);
    text-align: center;
    color: var(--color-muted);
    font-size: var(--fs-14);
    border-top: 1px solid var(--color-border);
}
.auth-card__footer a {
    color: var(--color-primary-dark);
    font-weight: var(--fw-semibold);
}
.auth-card__footer a:hover { text-decoration: underline; }

/* Блок ручного ввода ключа / кодов восстановления */
.auth-code-block {
    background: var(--color-bg-soft);
    border-radius: var(--radius-8);
    padding: var(--gap-12);
    margin-bottom: var(--gap-24);
    font-family: var(--font-mono);
    font-size: var(--fs-14);
    word-break: break-all;
    text-align: center;
    letter-spacing: 1px;
}

.auth-codes-list {
    background: var(--color-bg-soft);
    border-radius: var(--radius-8);
    padding: var(--gap-16);
    margin-bottom: var(--gap-24);
}

.auth-code-item {
    font-family: var(--font-mono);
    font-size: var(--fs-14);
    padding: 3px 0;
    letter-spacing: 1px;
}

.auth-hint {
    font-size: var(--fs-13);
    color: var(--color-muted);
    margin-bottom: var(--gap-8);
}

/* Выделенный блок формы (NSP ID) */
.form__group--highlight {
    background: var(--color-primary-soft);
    border-radius: var(--radius-12);
    padding: var(--gap-16);
}
.form__group--highlight .form__input { background: var(--color-bg); }

/* Строка label + badge */
.form__group-label-row {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
    margin-bottom: var(--gap-8);
}
.form__group-label-row .form__label { margin: 0; }

/* Пометка «необязательно» внутри label */
.form__label-optional { font-weight: 400; color: var(--color-muted); }

/* ============================================================
   Профиль пользователя
   ============================================================ */

.profile-page { display: grid; gap: var(--gap-24); margin-block: var(--gap-24) var(--gap-48); }

.profile-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-24);
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--gap-24);
    align-items: center;
}
@media (max-width: 600px) {
    .profile-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

.profile-avatar {
    width: 96px; height: 96px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--fs-32);
    font-weight: var(--fw-bold);
    display: grid; place-items: center;
    box-shadow: var(--shadow-md);
}

.profile-info__name {
    font-family: var(--font-heading);
    font-size: var(--fs-24);
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--gap-4);
}
.profile-info__email {
    color: var(--color-muted);
    font-size: var(--fs-14);
    margin: 0 0 var(--gap-12);
}
.profile-info__actions { display: flex; gap: var(--gap-8); flex-wrap: wrap; }

.profile-links {
    display: grid;
    gap: var(--gap-16);
    grid-template-columns: 1fr;
}
@media (min-width: 600px) { .profile-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .profile-links { grid-template-columns: repeat(3, 1fr); } }

.profile-link {
    display: flex;
    align-items: center;
    gap: var(--gap-16);
    padding: var(--gap-20);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    color: var(--color-text-strong);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.profile-link:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--color-primary-dark);
}
.profile-link__icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--radius-12);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.profile-link__title { font-weight: var(--fw-semibold); font-size: var(--fs-16); margin-bottom: 2px; }
.profile-link__sub { color: var(--color-muted); font-size: var(--fs-13); }

/* Блок 2FA в профиле */
.profile-2fa__header {
    display: flex;
    align-items: center;
    gap: var(--gap-8);
    margin-bottom: var(--gap-8);
}
.profile-2fa__actions {
    display: flex;
    gap: var(--gap-8);
    flex-wrap: wrap;
}

/* Ограничение ширины форм в ЛК (внутри container--narrow = 800px) */
.card--form         { max-width: 560px; }
.card--form-compact { max-width: 480px; }

/* Избранное: кнопка «Добавить всё» */
.wishlist__actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--gap-16);
}

/* ============================================================
   Каталог: layout с сайдбаром, фильтры, сортировка, пагинация
   ============================================================ */

.catalog__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-32);
    margin-top: var(--gap-24);
}
@media (min-width: 992px) {
    .catalog__layout {
        grid-template-columns: 260px 1fr;
        align-items: start;
    }
}

/* Cap at 3 cols in sidebar layout (992–1279px) — 4 cols is too tight at ~808px main width */
@media (min-width: 992px) and (max-width: 1279px) {
    .catalog__layout .product-lane {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================================================================
   САЙДБАР с фильтрами
   ===================================================================== */
.catalog__sidebar {
    display: grid;
    gap: var(--gap-20);
}
@media (min-width: 992px) {
    .catalog__sidebar {
        position: sticky;
        top: calc(var(--header-height, 88px) + 16px);
        max-height: calc(100vh - var(--header-height, 88px) - 32px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--color-border-strong) transparent;
    }
}

.filter {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-12);
    padding: var(--gap-20);
}

.filter__title {
    font-size: var(--fs-13);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin: 0 0 var(--gap-12);
}

.filter__list { display: grid; gap: var(--gap-4); }

.filter__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-8);
    padding: 8px 12px;
    border-radius: var(--radius-8);
    color: var(--color-text);
    font-size: var(--fs-14);
    transition: all var(--transition-fast);
}
.filter__link:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}
.filter__link.is-active {
    background: var(--color-primary);
    color: #fff;
    font-weight: var(--fw-semibold);
}
.filter__link .filter__count {
    font-size: var(--fs-12);
    color: var(--color-muted);
    background: var(--color-bg-soft);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}
.filter__link.is-active .filter__count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.filter__check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--fs-14);
    margin-bottom: var(--gap-8);
}
.filter__check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.filter__price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-8);
    margin-bottom: var(--gap-12);
}

/* =====================================================================
   ОСНОВНАЯ КОЛОНКА: тулбар + сетка + пагинация
   ===================================================================== */
.catalog__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-16);
    flex-wrap: wrap;
    padding: 0 0 var(--gap-16);
    margin-bottom: var(--gap-20);
    border-bottom: 1px solid var(--color-border);
}

.catalog__count {
    color: var(--color-muted);
    font-size: var(--fs-14);
}
.catalog__count strong { color: var(--color-text-strong); font-weight: var(--fw-semibold); }

.catalog__sort {
    display: flex;
    align-items: center;
    gap: var(--gap-12);
    margin: 0;
}
.catalog__sort label {
    color: var(--color-muted);
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.catalog__sort select {
    padding: 8px 36px 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text-strong);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300873E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: all var(--transition-fast);
}
.catalog__sort select:hover {
    border-color: var(--color-primary);
}
.catalog__sort select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-ring-primary);
}

.catalog__active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-8);
    margin-bottom: var(--gap-20);
}

/* =====================================================================
   ПАГИНАЦИЯ — лёгкая, pill-shaped
   ===================================================================== */
.pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: var(--gap-32) auto 0;
    padding: 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    flex-wrap: wrap;
    width: fit-content;
}
/* Контейнер вокруг — для центрирования */
.pagination-wrap {
    display: flex;
    justify-content: center;
}

.pagination a,
.pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.pagination a:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}
.pagination .active,
.pagination span.active {
    background: var(--color-primary);
    color: #fff;
    font-weight: var(--fw-semibold);
}
.pagination span.disabled {
    color: var(--color-border-strong);
    cursor: not-allowed;
}
.pagination__ellipsis {
    color: var(--color-muted);
    background: transparent !important;
    cursor: default !important;
}
.pagination__ellipsis:hover {
    background: transparent !important;
    color: var(--color-muted) !important;
}

/* =====================================================================
   Мобильный toggle для фильтров
   ===================================================================== */
.catalog__filter-toggle {
    display: none;
    width: 100%;
    margin-bottom: var(--gap-12);
}
@media (max-width: 991px) {
    .catalog__filter-toggle { display: flex; }
    .catalog__sidebar {
        grid-template-columns: 1fr;
    }
    .catalog__sidebar.is-hidden { display: none; }
}

.product-card__partner-hint {
    font-size: var(--fs-13);
    color: var(--color-muted);
}

/* =====================================================================
   Иконки кнопки «Фильтры» — переключение через aria-expanded
   ===================================================================== */
.filter-toggle-icon--close { display: none; }
.catalog__filter-toggle[aria-expanded="true"] .filter-toggle-icon--open  { display: none; }
.catalog__filter-toggle[aria-expanded="true"] .filter-toggle-icon--close { display: block; }

/* ===========================
   Утилиты для legacy-партиалов:
   — _CategoryList.cshtml использует .category-grid + .card--active
   Базовый .card живёт в components.css.
   =========================== */

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gap-16);
}

.card--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 135, 62, 0.15);
}

.category-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-8);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    margin-bottom: var(--gap-8);
    transition: background var(--transition-fast);
}
.card--active .category-card__icon,
.card__link:hover .category-card__icon {
    background: var(--color-primary);
    color: #fff;
}

/* ============================================================
   Текстовые информационные страницы (Как купить, Возврат и т.п.)
   ============================================================ */

.info-page {
    max-width: 800px;
    margin-inline: auto;
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

.info-page > h1 {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-28), 4vw, var(--fs-40));
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--gap-24);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.info-page > h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-24);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    margin: var(--gap-32) 0 var(--gap-12);
    line-height: 1.25;
}
.info-page > h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 22px;
    background: var(--color-primary);
    border-radius: 2px;
    margin-right: var(--gap-12);
    vertical-align: middle;
}

.info-page > p { margin: 0 0 var(--gap-16); font-size: var(--fs-16); }

.info-page ul {
    margin: 0 0 var(--gap-20);
    padding-left: 1.5rem;
}
.info-page ul li {
    margin-bottom: var(--gap-8);
    font-size: var(--fs-16);
}
.info-page ul li::marker { color: var(--color-primary); }

.info-page a { color: var(--color-primary-dark); font-weight: var(--fw-medium); }
.info-page a:hover { color: var(--color-primary); text-decoration: underline; }

.info-callout {
    background: var(--color-primary-soft);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-8);
    padding: var(--gap-16) var(--gap-20);
    margin: var(--gap-20) 0;
    color: var(--color-text);
}

.info-steps {
    display: grid;
    gap: var(--gap-16);
    margin-block: var(--gap-24);
}
.info-step {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-20);
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--gap-16);
    align-items: start;
}
.info-step__num {
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    display: grid; place-items: center;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-18);
}
.info-step__title {
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    font-size: var(--fs-16);
    margin: 4px 0 4px;
}
.info-step__text { color: var(--color-muted); margin: 0; }

/* Сервисные центры (авторизованные) */
.sc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--gap-16);
    margin-block: var(--gap-24);
}
.sc-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-20);
}
.sc-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-12);
    margin-bottom: var(--gap-12);
}
.sc-card__badge {
    flex-shrink: 0;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    padding: 3px 8px;
    border-radius: var(--radius-4);
    margin-top: 2px;
}
.sc-card__title {
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    margin: 0;
    line-height: 1.3;
}
.sc-card__info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px var(--gap-12);
    font-size: var(--fs-14);
    margin: 0;
}
.sc-card__info dt {
    color: var(--color-muted);
    white-space: nowrap;
}
.sc-card__info dd {
    color: var(--color-text);
    margin: 0;
}
.sc-card__info a { color: var(--color-primary-dark); }
.sc-card__info a:hover { color: var(--color-primary); }

.sc-card__map {
    display: inline-block;
    margin-bottom: var(--gap-12);
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    color: var(--color-primary-dark);
    text-decoration: none;
}
.sc-card__map:hover { color: var(--color-primary); text-decoration: underline; }

/* FAQ-аккордеон (нативный details/summary, без JS) */
.faq {
    display: flex;
    flex-direction: column;
    gap: var(--gap-8);
    margin-block: var(--gap-16);
}
.faq__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-12);
    background: var(--color-bg);
    padding: var(--gap-12) var(--gap-16);
}
.faq__q {
    cursor: pointer;
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    list-style: none;
    position: relative;
    padding-right: var(--gap-24);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "+";
    position: absolute;
    right: 0;
    top: -2px;
    font-size: var(--fs-20);
    color: var(--color-primary);
    line-height: 1;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a {
    margin: var(--gap-12) 0 0;
    color: var(--color-text);
    font-size: var(--fs-14);
    line-height: var(--lh-normal);
}

/* Список городов для анонимов */
.sc-cities {
    font-size: var(--fs-18);
    font-weight: var(--fw-medium);
    color: var(--color-text-strong);
    margin-block: var(--gap-16);
    letter-spacing: 0.01em;
}
.sc-note {
    font-size: var(--fs-14);
    color: var(--color-muted);
    margin-top: var(--gap-8);
}

/* Кнопка внутри callout — отступ сверху */
.info-callout .btn { display: inline-block; margin-top: var(--gap-8); }

/* Дата-штамп под заголовком страниц (Политика конфиденциальности и др.) */
.info-page-date {
    margin-top: -8px;
    margin-bottom: var(--gap-24);
    font-size: var(--fs-14);
    color: var(--color-muted);
}

/* ============================================================
   Контакты
   ============================================================ */

.contacts-grid {
    display: grid;
    gap: var(--gap-20);
    grid-template-columns: 1fr;
    margin-block: var(--gap-24) var(--gap-32);
}
@media (min-width: 600px) { .contacts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .contacts-grid { grid-template-columns: repeat(4, 1fr); } }

.contact-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-24);
    display: grid;
    gap: var(--gap-8);
}
.contact-card__icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--radius-12);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    margin-bottom: var(--gap-8);
}
.contact-card__title {
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin: 0;
}
.contact-card__text {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
}
.contact-card__text a { color: var(--color-primary-dark); }
.contact-card__text a:hover { color: var(--color-primary); text-decoration: underline; }

.contacts-map {
    border-radius: var(--radius-16);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--gap-32);
}
.contacts-map iframe { display: block; border: 0; width: 100%; }

.contacts-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .contacts-grid--2 { grid-template-columns: 1fr; } }

/* ============================================================
   Бейдж времени работы
   ============================================================ */
.hours-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-8);
    padding: 8px 18px;
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    margin-bottom: var(--gap-40);
}
.hours-badge svg { color: var(--color-primary); flex-shrink: 0; }

/* ============================================================
   Команда консультантов
   ============================================================ */
.team-section {
    margin-block: var(--gap-40) var(--gap-48);
}
.team-section__title {
    font-family: var(--font-heading);
    font-size: var(--fs-24);
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    margin: 0 0 var(--gap-8);
}
.team-section__sub {
    color: var(--color-muted);
    font-size: var(--fs-15);
    margin: 0 0 var(--gap-24);
}

.team-grid {
    display: grid;
    gap: var(--gap-20);
    grid-template-columns: 1fr;
}
@media (min-width: 600px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }

.team-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-24);
    display: grid;
    gap: var(--gap-8);
    text-align: center;
    transition: box-shadow var(--transition-fast);
}
.team-card:hover { box-shadow: var(--shadow-sm); }

.team-card__avatar {
    width: 64px; height: 64px;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    display: grid; place-items: center;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-24);
    margin: 0 auto var(--gap-4);
}
.team-card__name {
    font-weight: var(--fw-bold);
    font-size: var(--fs-18);
    color: var(--color-text-strong);
    margin: 0;
}
.team-card__role {
    color: var(--color-muted);
    font-size: var(--fs-14);
    margin: 0;
}
.team-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-8);
    margin-top: var(--gap-8);
}
.team-card__tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-8);
}
.team-card__tg-soon {
    font-size: var(--fs-13);
    color: var(--color-muted);
    padding: 10px 0;
}
.team-card__messengers {
    display: flex;
    gap: var(--gap-8);
}
.team-card__messengers .btn { flex: 1; justify-content: center; }

.btn--wa {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-6);
}
.btn--wa:hover { background: #1EBE59; border-color: #1EBE59; color: #fff; }

.btn--viber {
    background: #7360F2;
    border-color: #7360F2;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-6);
}
.btn--viber:hover { background: #5E4ED4; border-color: #5E4ED4; color: #fff; }

/* ============================================================
   Страница товара: галерея, информация, табы, рекомендации
   ============================================================ */

.product-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-32);
    margin-block: var(--gap-24) var(--gap-48);
}
@media (min-width: 900px) {
    .product-page { grid-template-columns: 1.05fr 1fr; gap: var(--gap-48); }
}

/* =====================================================================
   ГАЛЕРЕЯ
   ===================================================================== */
.gallery { display: grid; gap: var(--gap-12); align-content: start; }
@media (min-width: 900px) {
    .gallery {
        position: sticky;
        top: calc(var(--header-height, 88px) + 16px);
    }
}

.gallery__main {
    aspect-ratio: 3 / 4;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 24px;
}
.gallery__main img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform var(--transition-slow);
}
.gallery__main:hover img { transform: scale(1.04); }

.gallery__placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-accent-soft) 100%);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: clamp(var(--fs-32), 6vw, var(--fs-56));
    letter-spacing: 0.05em;
}

.gallery__thumbs {
    display: grid;
    gap: var(--gap-8);
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.gallery__thumb {
    aspect-ratio: 1/1;
    background: var(--color-bg-soft);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-8);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    padding: 0;
}
.gallery__thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.gallery__thumb:hover { border-color: var(--color-primary); }
.gallery__thumb.is-active { border-color: var(--color-primary); }

/* =====================================================================
   ИНФОРМАЦИЯ О ТОВАРЕ
   ===================================================================== */
.product-info { display: grid; gap: var(--gap-16); align-content: start; }

.product-info__category {
    font-size: var(--fs-13);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-dark);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}
.product-info__category:hover { color: var(--color-primary); }

.product-info__title {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-24), 3vw, var(--fs-40));
    font-weight: var(--fw-bold);
    line-height: 1.15;
    color: var(--color-text-strong);
    margin: 0;
}

.product-info__short {
    color: var(--color-muted);
    font-size: var(--fs-16);
    line-height: var(--lh-relaxed);
    margin: 0;
}

.product-info__price-block {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-20) var(--gap-24);
    display: flex;
    align-items: center;
    gap: var(--gap-16);
    flex-wrap: wrap;
}
.product-info__price {
    font-family: var(--font-heading);
    font-size: var(--fs-32);
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    line-height: 1;
}
.product-info__currency {
    font-size: var(--fs-16);
    color: var(--color-muted);
    font-weight: var(--fw-medium);
    margin-left: 4px;
}
.product-info__stock {
    color: var(--color-success);
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.product-info__stock--out {
    color: var(--color-danger);
}

.product-info__prices {
    display: flex;
    gap: var(--gap-24);
    flex-wrap: wrap;
    align-items: flex-end;
}
.product-info__price-label {
    display: block;
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    color: var(--color-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.product-info__price-label--partner {
    color: var(--color-primary);
}
.product-info__price--partner {
    font-size: var(--fs-24);
    color: var(--color-primary);
}
.product-info__price-group--muted { opacity: 0.6; }
.product-info__price--muted { color: var(--color-muted); }
.product-info__pv {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-primary-soft, #e8f5ee);
    color: var(--color-primary);
    border-radius: var(--radius-6);
    padding: 2px 8px;
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
}
.product-info__price-note {
    flex-basis: 100%;
    font-size: var(--fs-12);
    color: var(--color-muted);
    margin: var(--gap-8) 0 0;
    opacity: 0.8;
}

.product-info__buy {
    display: flex;
    gap: var(--gap-12);
    flex-wrap: wrap;
    align-items: stretch;
}
.qty-input {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-8);
    overflow: hidden;
    background: var(--color-bg);
}
.qty-input button {
    width: 44px;
    background: var(--color-bg);
    border: 0;
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    transition: background var(--transition-fast);
}
.qty-input button:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.qty-input input {
    width: 56px;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
}
.qty-input input::-webkit-inner-spin-button,
.qty-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input input[type=number] { -moz-appearance: textfield; }

.product-info__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-12);
    margin-top: var(--gap-8);
}
@media (max-width: 600px) { .product-info__features { grid-template-columns: 1fr; } }
.product-info__feature {
    display: flex;
    align-items: center;
    gap: var(--gap-12);
    padding: var(--gap-12) var(--gap-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-10);
    background: var(--color-bg);
}
.product-info__feature-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.product-info__feature-text {
    font-size: var(--fs-13);
    color: var(--color-text);
    line-height: var(--lh-snug);
}
.product-info__feature-text strong {
    display: block;
    color: var(--color-text-strong);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-14);
}

/* =====================================================================
   ТАБЫ
   ===================================================================== */
.tabs { margin-bottom: var(--gap-48); }

.tabs__nav {
    display: flex;
    gap: var(--gap-4);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--gap-24);
    overflow-x: auto;
}
.tabs__btn {
    border: 0;
    background: transparent;
    padding: 14px 20px;
    font-size: var(--fs-15, 0.9375rem);
    font-weight: var(--fw-semibold);
    color: var(--color-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tabs__btn:hover { color: var(--color-text); }
.tabs__btn.is-active {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary);
}

.tabs__panel { display: none; line-height: var(--lh-relaxed); color: var(--color-text); }
.tabs__panel.is-active { display: block; }
.tabs__panel h3 { margin-top: 0; }
/* ul/ol — отступ; list-style сброшен, задаётся через data-list (Quill 2) или ul (legacy) */
.tabs__panel ul, .tabs__panel ol,
.tab-prose ul, .tab-prose ol,
.product-info__short-html ul, .product-info__short-html ol { padding-left: 1.5rem; list-style: none; }
.tabs__panel li, .tab-prose li, .product-info__short-html li { margin-bottom: 0.35em; }
/* legacy <ul><li> (данные до Quill) */
.tabs__panel ul, .tab-prose ul, .product-info__short-html ul { list-style: disc; }
/* Quill 2: оба типа списка — <ol>, тип задаётся data-list на <li> */
li[data-list="bullet"] { list-style-type: disc; }
li[data-list="ordered"] { list-style-type: decimal; }
.product-info__short-html p { margin-bottom: 0.5em; }

.attr-table { width: 100%; border-collapse: collapse; }
.attr-table tr { border-bottom: 1px solid var(--color-border); }
.attr-table tr:last-child { border-bottom: 0; }
.attr-table th,
.attr-table td { text-align: left; padding: 10px 0; font-size: var(--fs-14); }
.attr-table th { color: var(--color-muted); font-weight: var(--fw-medium); width: 40%; }
.attr-table td { color: var(--color-text); font-weight: var(--fw-semibold); }

/* =====================================================================
   РЕЙТИНГ (звёзды)
   ===================================================================== */
.rating-stars {
    display: inline-flex;
    gap: 1px;
    color: var(--color-star);
    line-height: 1;
}
.rating-stars--lg svg { width: 20px; height: 20px; }

.product-info__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-8);
    margin-top: -4px;
}
.product-info__rating--empty { color: var(--color-border-strong); }
.product-info__rating--empty .rating-stars { color: var(--color-border); }

.rating-meta {
    color: var(--color-muted);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
}

/* =====================================================================
   ОТЗЫВЫ
   ===================================================================== */
.reviews { display: grid; gap: var(--gap-24); }

.reviews__summary {
    display: flex;
    align-items: center;
    gap: var(--gap-16);
    background: var(--color-bg-soft);
    border-radius: var(--radius-12);
    padding: var(--gap-20);
}
.reviews__average {
    display: flex;
    align-items: center;
    gap: var(--gap-12);
    flex-wrap: wrap;
}
.reviews__avg-num {
    font-family: var(--font-heading);
    font-size: var(--fs-32);
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    line-height: 1;
}
.reviews__avg-meta {
    color: var(--color-muted);
    font-size: var(--fs-14);
}

.review-form {
    display: grid;
    gap: var(--gap-12);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-12);
    padding: var(--gap-20);
}
.review-form__title {
    margin: 0;
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
}

.rating-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--gap-12);
}
.rating-input__label {
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--color-muted);
    transition: color var(--transition-fast);
    min-width: 90px;
}

/* Star input — radio group, отображает справа налево чтобы hover работал */
.rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}
.rating-input input { display: none; }
.rating-input label {
    color: var(--color-border);
    cursor: pointer;
    transition: color var(--transition-fast);
    line-height: 1;
}
.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input:checked ~ label {
    color: var(--color-star);
}

.reviews__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--gap-12);
}
.review {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-10);
    padding: var(--gap-16);
}
.review__head {
    display: flex;
    align-items: center;
    gap: var(--gap-12);
    flex-wrap: wrap;
    margin-bottom: var(--gap-8);
}
.review__author {
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
}
.review__date {
    color: var(--color-muted);
    font-size: var(--fs-13);
    margin-left: auto;
}
.review__text {
    margin: 0;
    color: var(--color-text);
    line-height: var(--lh-relaxed);
}

.product-info__nsp-hint {
    font-size: var(--fs-13);
    color: var(--color-muted);
    margin-top: var(--gap-4);
}

.product-info__short-list {
    margin: 0;
    padding-left: var(--gap-20);
    color: var(--color-muted);
    font-size: var(--fs-16);
    line-height: var(--lh-relaxed);
}
.product-info__short-list li + li {
    margin-top: var(--gap-4);
}

.product-info__admin-edit {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-4);
    font-size: var(--fs-13);
    color: var(--color-muted);
    text-decoration: none;
    margin-bottom: var(--gap-8);
    opacity: 0.7;
    transition: opacity 0.15s;
}
.product-info__admin-edit:hover {
    opacity: 1;
    color: var(--color-primary);
}

.tab-list {
    margin: 0;
    padding-left: var(--gap-24);
    line-height: var(--lh-relaxed);
}
.tab-list li + li {
    margin-top: var(--gap-8);
}

.tab-prose {
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

/* ============================================================
   Главная страница: hero, benefits, categories, product lanes
   ============================================================ */

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
    position: relative;
    background: transparent; /* бесшовно на кремовой канве — воздух */
    overflow: hidden;
    margin-bottom: var(--gap-64);
}

/* Ботанический мотив — крупный лист в углу, очень деликатный */
.hero__botanical {
    position: absolute;
    top: -40px;
    right: -40px;
    width: clamp(220px, 32vw, 420px);
    height: auto;
    color: var(--color-botanical);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 767px) { .hero__botanical { opacity: 0.08; right: -80px; } }

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-32);
    align-items: center;
    padding: var(--gap-48) var(--gap-32);
}
@media (min-width: 768px) {
    .hero__inner { grid-template-columns: 1.05fr 1fr; padding: clamp(var(--gap-48), 6vw, 88px) var(--gap-64); }
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-8);
    color: var(--color-botanical);
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--gap-24);
}
.hero__eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.hero__title {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-40), 6vw, var(--fs-64));
    font-weight: var(--fw-bold);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-primary-deep);
    margin: 0 0 var(--gap-24);
}
.hero__title-accent { color: var(--color-primary); }

.hero__lead {
    font-size: var(--fs-18);
    color: var(--color-muted);
    line-height: var(--lh-relaxed);
    max-width: 52ch;
    margin: 0 0 var(--gap-32);
}

.hero__actions { display: flex; gap: var(--gap-12); flex-wrap: wrap; }

.hero__media {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-16);
    overflow: hidden;
    border: 1px solid var(--color-border);
    /* мягкая подложка — белые фото товаров «выбиваются» */
    background: linear-gradient(160deg, var(--color-primary-soft) 0%, var(--color-bg-cream) 70%);
}

/* Деликатное появление при загрузке (методика motion, с уважением к reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    .hero__text > * { opacity: 0; transform: translateY(16px); animation: apoReveal var(--transition-reveal) forwards; }
    .hero__eyebrow { animation-delay: 60ms; }
    .hero__title   { animation-delay: 140ms; }
    .hero__lead    { animation-delay: 220ms; }
    .hero__actions { animation-delay: 300ms; }
    .hero__media   { opacity: 0; animation: apoReveal var(--transition-reveal) 360ms forwards; }
}
@keyframes apoReveal {
    to { opacity: 1; transform: translateY(0); }
}

.hero__media .swiper { width: 100%; height: 100%; }
.hero__media .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: var(--gap-24);
}
.hero__media .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}
.hero__media .swiper-pagination-bullet-active { background: var(--color-primary); }

.hero__placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-32), 5vw, var(--fs-56));
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    text-align: center;
    padding: var(--gap-32);
}

/* =====================================================================
   INFO BANNER — "не интернет-магазин"
   ===================================================================== */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-12);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-left-color: var(--color-primary);
    border-radius: var(--radius-12);
    padding: var(--gap-16) var(--gap-20);
    margin-bottom: var(--gap-32);
    color: var(--color-text);
    font-size: var(--fs-14);
    line-height: 1.5;
}
.info-banner svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }
.info-banner a { color: var(--color-primary-dark); font-weight: var(--fw-medium); text-decoration: underline; }
.info-banner a:hover { color: var(--color-primary); }

/* =====================================================================
   BENEFITS — преимущества (4 колонки)
   ===================================================================== */
.benefits {
    display: grid;
    gap: var(--gap-20);
    grid-template-columns: 1fr;
    margin-bottom: var(--gap-64);
}
@media (min-width: 600px) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .benefits { grid-template-columns: repeat(4, 1fr); } }

.benefit {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--gap-28) 0 0;
    transition: none;
}
.benefit:hover { box-shadow: none; transform: none; }
.benefit__icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--radius-full);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-primary);
    margin-bottom: var(--gap-16);
}
.benefit__icon--blue  { background: rgba(2, 132, 199, 0.10); color: #0284C7; }
.benefit__icon--amber { background: rgba(217, 119, 6, 0.10); color: #D97706; }
.benefit__icon--teal  { background: rgba(13, 148, 136, 0.10); color: #0D9488; }
.benefit__title {
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    margin: 0 0 var(--gap-6);
}
.benefit__text {
    font-size: var(--fs-14);
    color: var(--color-muted);
    line-height: var(--lh-snug);
    margin: 0;
}

/* =====================================================================
   CATEGORIES — витрина
   ===================================================================== */
.cat-grid {
    display: grid;
    gap: var(--gap-16);
    grid-template-columns: 1fr;
}
@media (min-width: 480px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .cat-grid { grid-template-columns: repeat(4, 1fr); } }

.cat-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    padding: var(--gap-28) var(--gap-24);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color var(--transition-base), background var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--gap-12);
    position: relative;
    overflow: hidden;
}
.cat-card:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-cream);
    color: var(--color-primary-deep);
}

.cat-card__icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    color: var(--color-botanical);
    margin-bottom: var(--gap-8);
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.cat-card:hover .cat-card__icon { border-color: var(--color-primary); transform: translateY(-2px); }
.cat-card__icon svg { width: 28px; height: 28px; }
.cat-card__name { font-family: var(--font-heading); font-size: var(--fs-18); font-weight: var(--fw-semibold); margin: 0; }
.cat-card__count { color: var(--color-muted); font-size: var(--fs-13); }

/* =====================================================================
   PRODUCT LANE — лента товаров (responsive grid)
   ===================================================================== */
.product-lane {
    display: grid;
    gap: var(--gap-20);
    grid-template-columns: 1fr;
}
@media (min-width: 480px)  { .product-lane { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .product-lane { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .product-lane { grid-template-columns: repeat(4, 1fr); } }

/* =====================================================================
   PRODUCT CARD — общая карточка товара
   ===================================================================== */
.product-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-slow), border-color var(--transition-base);
}
.product-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.product-card__image-wrap { position: relative; }

.product-card__image-link {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-bg-cream);
    border-bottom: 1px solid var(--color-border);
    padding: var(--gap-24);
}

.product-card__wish {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

.wish-btn {
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    border: 0;
    background: rgba(255,255,255,0.92);
    color: var(--color-muted);
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: color var(--transition-fast), transform var(--transition-fast),
                background var(--transition-fast);
}
.wish-btn:hover {
    color: var(--color-danger);
    background: #fff;
    transform: scale(1.06);
}
.wish-btn.is-on { color: var(--color-danger); }
.wish-btn.is-on:hover { color: var(--color-danger); }

.product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-star);
    margin-bottom: 2px;
}
.product-card__rating .rating-stars { display: inline-flex; gap: 1px; }
.product-card__rating .rating-text {
    color: var(--color-muted);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
}

.product-card__image {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform var(--transition-slow);
}
.product-card:hover .product-card__image { transform: scale(1.04); }

.product-card__image--placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-accent-soft) 100%);
}
.product-card__image--placeholder span {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-32);
    color: var(--color-primary);
    letter-spacing: 0.05em;
}

.product-card__body {
    padding: var(--gap-16);
    display: flex;
    flex-direction: column;
    gap: var(--gap-8);
    flex: 1;
}

.product-card__badges {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.product-card__category {
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}

.product-card__title-link { color: inherit; }
.product-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    margin: 0;
    line-height: var(--lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card__title-link:hover .product-card__title { color: var(--color-primary-dark); }

.product-card__desc {
    font-size: var(--fs-13);
    color: var(--color-muted);
    line-height: var(--lh-snug);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-8);
    flex-wrap: wrap;
    padding-top: var(--gap-12);
    border-top: 1px solid var(--color-border);
}

.product-card__price {
    font-family: var(--font-heading);
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    line-height: 1;
}
.product-card__currency {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    color: var(--color-muted);
}

.product-card__form { margin: 0; }

.product-card__prices {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.product-card__price--partner {
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    line-height: 1;
}
.product-card__price--partner::before {
    content: "↓ ";
    opacity: 0.7;
}

.product-card__name-en {
    display: block;
    font-size: var(--fs-12);
    color: var(--color-muted);
    font-weight: var(--fw-regular);
    letter-spacing: 0.01em;
    margin-top: 2px;
}

/* =====================================================================
   DISCOUNT PROMO — промо-блок «Получить дисконтный номер»
   ===================================================================== */
.discount-promo {
    position: relative;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-20);
    padding: var(--gap-40) var(--gap-32);
    margin-bottom: var(--gap-48);
    overflow: hidden;
    color: #fff;
}
@media (min-width: 768px) { .discount-promo { padding: var(--gap-48) var(--gap-64); } }

.discount-promo__bg-circle {
    position: absolute;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.discount-promo__bg-circle--tl { top: -80px; left: -80px; width: 220px; height: 220px; }
.discount-promo__bg-circle--br { bottom: -100px; right: -60px; width: 280px; height: 280px; }

.discount-promo__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-32);
    align-items: center;
}
@media (min-width: 900px) {
    .discount-promo__inner { grid-template-columns: 1fr 1fr; gap: var(--gap-48); }
}

.discount-promo__eyebrow {
    display: inline-block;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--gap-20);
}

.discount-promo__title {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-24), 3vw, var(--fs-32));
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 var(--gap-28);
}
.discount-promo__br { display: none; }
@media (min-width: 900px) { .discount-promo__br { display: block; } }

.discount-promo__cta {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary-dark);
    font-weight: var(--fw-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-8);
}
.discount-promo__cta:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-dark);
}

.discount-promo__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-20);
}

.dp-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-12);
}
.dp-feature__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--radius-12);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.dp-feature__title {
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    color: #fff;
    margin: 0 0 var(--gap-2);
    line-height: var(--lh-snug);
}
.dp-feature__text {
    font-size: var(--fs-13);
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: var(--lh-snug);
}

/* =====================================================================
   ABOUT NSP — большой баннер
   ===================================================================== */
.about-nsp {
    background: var(--color-bg-cream-deep);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-20);
    padding: var(--gap-48) var(--gap-32);
    margin-block: var(--gap-64);
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) { .about-nsp { padding: clamp(var(--gap-48), 5vw, 72px); } }

/* Деликатный ботанический мотив в углу */
.about-nsp__botanical {
    position: absolute;
    bottom: -50px; right: -30px;
    width: clamp(180px, 26vw, 320px);
    height: auto;
    color: var(--color-botanical);
    opacity: 0.14;
    pointer-events: none;
}

.about-nsp__inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
}
.about-nsp__title {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-28), 3.5vw, var(--fs-40));
    font-weight: var(--fw-bold);
    color: var(--color-primary-deep);
    margin: 0 0 var(--gap-16);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.about-nsp__text {
    font-size: var(--fs-16);
    line-height: var(--lh-relaxed);
    color: var(--color-muted);
    margin: 0 0 var(--gap-24);
    max-width: 60ch;
}
.about-nsp .btn { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.about-nsp .btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

/* =====================================================================
   CERT BADGES — значки сертификации (внутри .about-nsp)
   ===================================================================== */
.cert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-12);
    margin-top: var(--gap-28);
}
.cert-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-6);
    padding: 6px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-primary-deep);
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.cert-badge svg { flex-shrink: 0; color: var(--color-primary); }

.about-nsp__certs-label {
    margin-top: var(--gap-28);
    margin-bottom: calc(-1 * var(--gap-16));
    font-size: var(--fs-13);
    color: var(--color-muted);
}

/* Кликабельный бейдж сертификата (кнопка/ссылка) */
.cert-badge--link {
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.cert-badge--link:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    transform: translateY(-1px);
}

/* Модалка просмотра сертификата */
.cert-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-24);
    background: rgba(0, 0, 0, 0.72);
}
.cert-modal[hidden] { display: none; }
.cert-modal__dialog {
    position: relative;
    margin: 0;
    max-width: min(900px, 100%);
    max-height: 90vh;
    background: #fff;
    border-radius: var(--radius-12);
    padding: var(--gap-16);
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.cert-modal__img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--radius-8);
}
.cert-modal__caption {
    margin-top: var(--gap-12);
    text-align: center;
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
}
.cert-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-bg-soft);
    color: var(--color-text-strong);
    font-size: var(--fs-18);
    cursor: pointer;
    line-height: 1;
}
.cert-modal__close:hover { background: var(--color-border); }

/* =====================================================================
   STATS BAR — статистика компании (3 числа)
   ===================================================================== */
.stats-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap-12) var(--gap-32);
    padding: var(--gap-32) 0;
    margin-bottom: var(--gap-32);
}
@media (min-width: 600px) {
    .stats-bar { gap: var(--gap-12) var(--gap-48); }
}
.stat-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 90px;
}
.stat-item + .stat-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--gap-16));
    top: 10%;
    height: 80%;
    width: 1px;
    background: var(--color-border-strong);
}
@media (min-width: 600px) {
    .stat-item { min-width: 100px; }
    .stat-item + .stat-item::before { left: calc(-1 * var(--gap-24)); }
}
.stat-item__value {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-40), 5vw, 3.75rem);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}
.stat-item__label {
    font-size: var(--fs-14);
    color: var(--color-muted);
    text-align: center;
    font-weight: var(--fw-medium);
}

/* =====================================================================
   HOW IT WORKS — как это работает (4 шага)
   ===================================================================== */
.how-it-works {
    display: grid;
    gap: var(--gap-20);
    grid-template-columns: 1fr;
    margin-bottom: var(--gap-8);
}
@media (min-width: 600px) { .how-it-works { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .how-it-works { grid-template-columns: repeat(4, 1fr); } }

.how-step {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    padding: var(--gap-28) var(--gap-24);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
}
.how-step__num {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--radius-full);
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary-deep);
    font-family: var(--font-heading);
    font-size: var(--fs-20);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}
.how-step__title {
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    margin: 0;
    line-height: var(--lh-snug);
}
.how-step__text {
    font-size: var(--fs-14);
    color: var(--color-muted);
    line-height: var(--lh-snug);
    margin: 0;
}

/* Premium Apothecary: единый приглушённый травяной тон для eyebrow секций
   (вместо «радужных» акцентов — спокойствие и консистентность) */
.section__eyebrow--fire,
.section__eyebrow--purple,
.section__eyebrow--info,
.section__eyebrow--teal { color: var(--color-botanical); }

/* ========== Posts list grid ========== */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap-24);
}

.posts-grid--home {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ========== Post card ========== */
.post-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base);
}

.post-card:hover {
    box-shadow: var(--shadow-md);
}

.post-card__cover-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: var(--color-bg-soft);
}

.post-card__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.post-card__cover-link:hover .post-card__cover {
    transform: scale(1.03);
}

.post-card__body {
    padding: var(--gap-20);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-card__date {
    font-size: var(--fs-12);
    color: var(--color-muted);
    text-transform: capitalize;
}

.post-card__pinned {
    display: inline-block;
    margin-bottom: var(--gap-8);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
}

.post-card__title {
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    margin: var(--gap-8) 0;
    line-height: var(--lh-snug);
}

.post-card__title a {
    color: var(--color-text);
    text-decoration: none;
}

.post-card__title a:hover {
    color: var(--color-primary);
}

.post-card__excerpt {
    font-size: var(--fs-14);
    color: var(--color-muted);
    line-height: 1.5;
    flex: 1;
}

/* ========== Post detail ========== */
.post-detail {
    max-width: 760px;
    margin: 0 auto;
}

.post-detail__cover {
    display: block;
    max-width: 100%;
    max-height: 520px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto var(--gap-32);
    border-radius: var(--radius-16);
}

.post-detail__header {
    margin-bottom: var(--gap-32);
}

.post-detail__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: var(--gap-8) 0 var(--gap-16);
}

.post-detail__lead {
    font-size: var(--fs-18);
    color: var(--color-muted);
    line-height: 1.6;
}

.post-detail__footer {
    margin-top: var(--gap-48);
    padding-top: var(--gap-24);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-16);
    flex-wrap: wrap;
}

/* ========== Prose (rich text body) ========== */
.prose {
    font-size: var(--fs-16);
    line-height: 1.75;
    color: var(--color-text);
}

.prose h2 {
    font-size: var(--fs-24);
    font-weight: 700;
    margin: var(--gap-32) 0 var(--gap-16);
}

.prose h3 {
    font-size: var(--fs-20);
    font-weight: 600;
    margin: var(--gap-24) 0 var(--gap-12);
}

.prose p {
    margin-bottom: var(--gap-16);
}

.prose ul,
.prose ol {
    padding-left: 1.5rem;
    margin-bottom: var(--gap-16);
}

.prose li {
    margin-bottom: var(--gap-8);
}

.prose blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--gap-16);
    margin: var(--gap-24) 0;
    color: var(--color-muted);
    font-style: italic;
}

.prose img {
    max-width: 100%;
    border-radius: var(--radius-8);
    margin: var(--gap-16) 0;
}

.prose a {
    color: var(--color-primary);
    text-decoration: underline;
}

.prose code {
    background: var(--color-bg-soft);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

.prose pre {
    background: var(--color-bg-soft);
    padding: var(--gap-16);
    border-radius: var(--radius-8);
    overflow-x: auto;
    margin-bottom: var(--gap-16);
}

/* ========== Admin post form grid ========== */
.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--gap-16);
    align-items: start;
}

.card-section-title {
    font-size: var(--fs-14);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin: 0 0 var(--gap-16);
}

@media (max-width: 900px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-form-side {
        order: -1;
    }
}

/* ========== Post reactions ========== */
.post-reactions {
    display: flex;
    align-items: center;
    gap: var(--gap-12);
}

/* ========== Like button ========== */
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-6);
    background: none;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: var(--color-muted);
    cursor: pointer;
    transition: border-color var(--transition-base), color var(--transition-base),
                background var(--transition-base), transform var(--transition-fast);
}

.like-btn:hover {
    border-color: #e0245e;
    color: #e0245e;
    background: #fff5f8;
}

.like-btn:active { transform: scale(0.93); }

.like-btn--active {
    border-color: #e0245e;
    color: #e0245e;
    background: #fff5f8;
}

.like-btn:disabled { opacity: 0.6; cursor: default; }

.like-display {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-6);
    font-size: var(--fs-14);
    color: var(--color-muted);
}

/* ========== TG channel link ========== */
.tg-channel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: #e8f4fd;
    color: #2AABEE;
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base),
                transform var(--transition-fast);
}

.tg-channel-link:hover {
    background: #2AABEE;
    color: #fff;
    transform: scale(1.1);
}

/* ============================================================
   Страница отзывов покупателей
   ============================================================ */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap-20);
    margin-bottom: var(--gap-40);
}

.testimonial-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-12);
    padding: var(--gap-20);
    display: flex;
    flex-direction: column;
    gap: var(--gap-12);
}

.testimonial-card__header {
    display: flex;
    align-items: center;
    gap: var(--gap-12);
}

.testimonial-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-16);
    flex-shrink: 0;
}

.testimonial-card__name {
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    font-size: var(--fs-15);
    margin: 0;
}

.testimonial-card__date {
    font-size: var(--fs-13);
    color: var(--color-muted);
}

.testimonial-card__body {
    font-size: var(--fs-15);
    color: var(--color-text);
    line-height: var(--lh-relaxed);
    margin: 0;
}

.testimonials-empty {
    text-align: center;
    color: var(--color-muted);
    padding: var(--gap-40) 0;
    font-size: var(--fs-16);
}

/* Форма */
.testimonials-form-wrap {
    max-width: 600px;
    margin-top: var(--gap-40);
    padding-top: var(--gap-32);
    border-top: 1px solid var(--color-border);
}

.testimonials-form-wrap__title {
    font-family: var(--font-heading);
    font-size: var(--fs-22);
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
    margin: 0 0 var(--gap-20);
}

.testimonials-form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
}

/* ============================================================
   Страница программ здоровья (Index + Details)
   ============================================================ */

/* =====================================================================
   СПИСОК ПРОГРАММ (Programs/Index)
   ===================================================================== */
.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap-24);
    margin-top: var(--gap-32);
}

.program-card {
    display: flex;
    align-items: center;
    gap: var(--gap-16);
    padding: var(--gap-24);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-base), border-color var(--transition-base),
                transform var(--transition-base);
}
.program-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.program-card__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--color-primary-soft);
    border-radius: var(--radius-12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-28);
}

.program-card__body { flex: 1; min-width: 0; }

.program-card__title {
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--gap-4);
    color: var(--color-text);
}

.program-card__desc {
    font-size: var(--fs-14);
    color: var(--color-muted);
    margin: 0 0 var(--gap-8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.program-card__count {
    font-size: var(--fs-13);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.program-card__arrow {
    flex-shrink: 0;
    font-size: var(--fs-20);
    color: var(--color-muted);
    transition: color var(--transition-base), transform var(--transition-base);
}
.program-card:hover .program-card__arrow {
    color: var(--color-primary);
    transform: translateX(4px);
}

/* =====================================================================
   ДЕТАЛЬНАЯ СТРАНИЦА (Programs/Details)
   ===================================================================== */
.program-hero {
    display: flex;
    gap: var(--gap-48);
    align-items: flex-start;
    padding: var(--gap-32) 0 var(--gap-40);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--gap-32);
}

.program-hero h1 { margin: 0 0 var(--gap-12); }

.program-hero__text { flex: 1; }

.program-hero__lead {
    font-size: var(--fs-18);
    color: var(--color-muted);
    margin: 0 0 var(--gap-16);
    line-height: var(--lh-relaxed);
}

.program-hero__desc {
    color: var(--color-muted);
    line-height: var(--lh-relaxed);
}

.program-hero__action {
    flex-shrink: 0;
    padding: var(--gap-24);
    background: var(--color-primary-soft);
    border-radius: var(--radius-16);
    text-align: center;
    min-width: 240px;
}

.program-hero__note {
    font-size: var(--fs-13);
    color: var(--color-muted);
    margin-top: var(--gap-8);
}

@media (max-width: 768px) {
    .program-hero { flex-direction: column; gap: var(--gap-24); }
    .program-hero__action { width: 100%; min-width: 0; }
}


.main {
    padding: var(--gap-24) 0;
}

.section {
    padding: var(--gap-24) 0;
}

.section--soft {
    background: var(--color-bg-soft);
}

.section--hero {
    padding: var(--gap-32) 0;
    text-align: center;
}

.section--hero .h1 {
    margin-bottom: var(--gap-16);
}

.section__actions {
    margin-top: var(--gap-24);
    display: flex;
    gap: var(--gap-12);
    flex-wrap: wrap;
}

.section__title-group h1,
.section__title-group .h1 { margin: 0; }

/* =====================================================================
   ФИЛЬТР ЗАЯВОК В ЛК
   ===================================================================== */
.orders-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-8);
    margin-bottom: var(--gap-20);
}

/* =====================================================================
   ПАГИНАЦИЯ (общая, используется в ЛК и каталоге)
   ===================================================================== */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--gap-4);
    justify-content: center;
    padding: var(--gap-20) 0;
    flex-wrap: wrap;
}
.pagination__btn {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--gap-8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-8);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.pagination__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}
.pagination__btn--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    pointer-events: none;
}
.pagination__btn--disabled {
    color: var(--color-muted);
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================================
   Плавающая кнопка Telegram (на всех страницах)
   ============================================================ */
.float-contact {
    position: fixed;
    bottom: var(--gap-24);
    right: var(--gap-24);
    z-index: 200;
}
.float-contact__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-8);
    padding: 13px 20px;
    background: #2AABEE;
    color: #fff;
    border-radius: var(--radius-full);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-14);
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(42, 171, 238, 0.45);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}
.float-contact__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(42, 171, 238, 0.55);
    color: #fff;
}
.float-contact__btn svg { flex-shrink: 0; }

@media (max-width: 600px) {
    .float-contact { bottom: var(--gap-16); right: var(--gap-16); }
    .float-contact__btn { padding: 13px; }
    .float-contact__btn span { display: none; }
}

/* ============================================================
   Cookie-consent баннер
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-toast);
    background: var(--color-text-strong);
    color: rgba(255, 255, 255, 0.9);
    padding: var(--gap-16) var(--gap-24);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-16);
    flex-wrap: wrap;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
}
.cookie-banner__text {
    margin: 0;
    font-size: var(--fs-14);
    line-height: var(--lh-normal);
    color: rgba(255, 255, 255, 0.88);
}
.cookie-banner__link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-banner__link:hover { color: #fff; }
.cookie-banner__actions {
    display: flex;
    gap: var(--gap-8);
    flex-shrink: 0;
}
/* На тёмном фоне баннера ghost-кнопка по умолчанию сливается — делаем читаемой */
.cookie-banner .btn--ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: transparent;
}
.cookie-banner .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* ============================================================
   Доступность: уважение к prefers-reduced-motion (DESIGN.md — обязательно)
   Глобально гасим анимации, переходы и плавный скролл для пользователей,
   запросивших уменьшение движения. Грузится последним — перекрывает всё.
   ============================================================ */
@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 !important; }
}