/* ════════════════════════════════════════════════════════════════════
   coderstar.ru — site.css
   Style direction: «Кабинет эксперта» (warm trust)
   See design-system/MASTER.md for the full system.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. Tokens (light theme by default) ─────────────────────────── */

:root {
    /* Surfaces */
    --c-bg:           #FAF7F2;
    --c-surface:      #FFFFFF;
    --c-surface-2:    #F2EDE5;

    /* Text */
    --c-ink:          #1A1A1A;
    --c-ink-2:        #4A4A48;
    --c-ink-muted:    #7A7672;

    /* Borders */
    --c-border:       #E5DFD3;
    --c-border-strong:#C9B79C;

    /* Accent (deep teal) */
    --c-accent:       #0F5257;
    --c-accent-hover: #0A3D40;
    --c-accent-soft:  #E0EDED;
    --c-on-accent:    #FFFFFF;

    /* Semantic */
    --c-success:      #2E7D4F;
    --c-warning:      #B8731A;
    --c-danger:       #A83232;
    --c-success-soft: #DCEDE2;
    --c-warning-soft: #F7EAD4;
    --c-danger-soft:  #F5DEDE;

    /* Spacing scale (4pt) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    /* Radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-full: 9999px;

    /* Shadows */
    --sh-sm: 0 1px 2px rgb(28 25 21 / 0.04);
    --sh-md: 0 4px 12px -2px rgb(28 25 21 / 0.06), 0 2px 4px -1px rgb(28 25 21 / 0.04);
    --sh-lg: 0 12px 24px -8px rgb(28 25 21 / 0.10), 0 4px 8px -2px rgb(28 25 21 / 0.06);
    --sh-xl: 0 24px 48px -12px rgb(28 25 21 / 0.18);

    /* Animation */
    --anim-fast: 120ms;
    --anim-base: 200ms;
    --anim-slow: 320ms;
    --ease-out:  cubic-bezier(0.2, 0, 0, 1);
    --ease-in:   cubic-bezier(0.4, 0, 1, 1);

    /* Type scale */
    --fs-display:  clamp(30px, 7vw, 72px);
    --fs-h1:       clamp(26px, 5vw, 48px);
    --fs-h2:       clamp(22px, 3.5vw, 36px);
    --fs-h3:       clamp(19px, 2vw, 22px);
    --fs-h4:       18px;
    --fs-body-lg:  clamp(17px, 1.4vw, 19px);
    --fs-body:     16px;
    --fs-body-sm:  14px;
    --fs-meta:     13px;
    --fs-label:    12px;

    /* Layout */
    --container-max: 1200px;
    --reading-max:   68ch;

    /* Bootstrap overrides */
    --bs-body-bg: var(--c-bg);
    --bs-body-color: var(--c-ink);
    --bs-body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: var(--fs-body);
    --bs-body-line-height: 1.6;
    --bs-link-color: var(--c-accent);
    --bs-link-hover-color: var(--c-accent-hover);
    --bs-border-color: var(--c-border);
    --bs-primary: var(--c-accent);
    --bs-primary-rgb: 15, 82, 87;
}

/* ─── 2. Tokens (dark theme) ─────────────────────────────────────── */

html.theme-dark {
    --c-bg:           #1A1614;
    --c-surface:      #26211D;
    --c-surface-2:    #2F2925;
    --c-ink:          #F2EDE5;
    --c-ink-2:        #C7BFB5;
    --c-ink-muted:    #8E867C;
    --c-border:       #3A332E;
    --c-border-strong:#5C4F40;
    --c-accent:       #5FAFB3;
    --c-accent-hover: #7BC5C8;
    --c-accent-soft:  #0F2F30;
    --c-on-accent:    #0A1F20;
    --c-success:      #52B57D;
    --c-warning:      #D69947;
    --c-danger:       #D96868;
    --c-success-soft: #1A2F22;
    --c-warning-soft: #2F2316;
    --c-danger-soft:  #2F1A1A;
    --sh-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --sh-md: 0 4px 12px -2px rgb(0 0 0 / 0.35), 0 2px 4px -1px rgb(0 0 0 / 0.25);
    --sh-lg: 0 12px 24px -8px rgb(0 0 0 / 0.5), 0 4px 8px -2px rgb(0 0 0 / 0.3);
    --sh-xl: 0 24px 48px -12px rgb(0 0 0 / 0.6);
}

@media (prefers-color-scheme: dark) {
    /* Auto theme: html без явного класса -> применяем dark */
    html:not(.theme-light) {
        --c-bg:           #1A1614;
        --c-surface:      #26211D;
        --c-surface-2:    #2F2925;
        --c-ink:          #F2EDE5;
        --c-ink-2:        #C7BFB5;
        --c-ink-muted:    #8E867C;
        --c-border:       #3A332E;
        --c-border-strong:#5C4F40;
        --c-accent:       #5FAFB3;
        --c-accent-hover: #7BC5C8;
        --c-accent-soft:  #0F2F30;
        --c-on-accent:    #0A1F20;
        --c-success:      #52B57D;
        --c-warning:      #D69947;
        --c-danger:       #D96868;
        --c-success-soft: #1A2F22;
        --c-warning-soft: #2F2316;
        --c-danger-soft:  #2F1A1A;
        --sh-sm: 0 1px 2px rgb(0 0 0 / 0.3);
        --sh-md: 0 4px 12px -2px rgb(0 0 0 / 0.35), 0 2px 4px -1px rgb(0 0 0 / 0.25);
        --sh-lg: 0 12px 24px -8px rgb(0 0 0 / 0.5), 0 4px 8px -2px rgb(0 0 0 / 0.3);
        --sh-xl: 0 24px 48px -12px rgb(0 0 0 / 0.6);
    }
}

/* ─── 3. Base ────────────────────────────────────────────────────── */

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

html {
    color-scheme: light dark;
    -webkit-text-size-adjust: 100%;
    /* clip (не hidden!) — режет горизонтальное переполнение, но НЕ создаёт
       scroll-context, поэтому position: sticky у потомков продолжает работать.
       Browser support: Chrome/Edge 90+, Firefox 81+, Safari 16+. */
    overflow-x: clip;
}
body { overflow-x: clip; }

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--fs-body);
    line-height: 1.6;
    font-feature-settings: "ss01", "cv11";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Тонкая бумажная текстура поверх кремового фона — атмосфера, не плоский цвет */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.65;
    mix-blend-mode: multiply;
}

html.theme-dark body::before,
html:not(.theme-light) body::before {
    mix-blend-mode: screen;
    opacity: 0.35;
}

/* Skip-link */
.skip-link {
    position: absolute;
    left: var(--sp-3);
    top: var(--sp-3);
    z-index: 1000;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-accent);
    color: var(--c-on-accent);
    border-radius: var(--r-md);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--anim-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ─── 4. Typography ──────────────────────────────────────────────── */

.font-serif {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Fraunces', 'PT Serif', Georgia, serif;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.015em;
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.18; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.3; font-family: 'Manrope', sans-serif; letter-spacing: -0.005em; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.4; font-family: 'Manrope', sans-serif; letter-spacing: 0; font-weight: 600; }

p { margin: 0 0 var(--sp-4); }

.lead {
    font-size: var(--fs-body-lg);
    color: var(--c-ink-2);
    line-height: 1.55;
    font-weight: 400;
}

.text-muted { color: var(--c-ink-muted) !important; }

.eyebrow {
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    display: inline-block;
    margin-bottom: var(--sp-3);
}

.tabular { font-variant-numeric: tabular-nums; }

/* Reading body для длинных текстов (база знаний, описание разработки) */
.reading-flow {
    max-width: var(--reading-max);
    font-size: var(--fs-body-lg);
    line-height: 1.7;
}
.reading-flow h2 { margin-top: var(--sp-12); }
.reading-flow h3 { margin-top: var(--sp-10); }
.reading-flow img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: var(--sp-6) 0; }
.reading-flow ul, .reading-flow ol { padding-left: 1.4em; }
.reading-flow li { margin-bottom: var(--sp-2); }
.reading-flow blockquote {
    border-left: 3px solid var(--c-accent);
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
    margin: var(--sp-8) 0;
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 1.2em;
    font-style: italic;
    color: var(--c-ink-2);
}

/* ─── 5. Links ───────────────────────────────────────────────────── */

a {
    color: var(--c-accent);
    text-decoration: none;
    transition: color var(--anim-fast) var(--ease-out);
}
a:hover { color: var(--c-accent-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

a.link-quiet { color: var(--c-ink); text-decoration: none; }
a.link-quiet:hover { color: var(--c-accent); text-decoration: none; }

/* ─── 6. Focus ───────────────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
    /* Halo за пределами outline (с зазором: outline 2-4px от элемента, halo 4-6px) —
       создаёт двойное кольцо. На любой подложке (cream / surface-2 / dark cards)
       accent-кольцо остаётся различимым, что выполняет WCAG 2.4.11 (Focus Appearance). */
    box-shadow: 0 0 0 6px var(--c-bg);
}

/* ─── 7. Containers & layout ─────────────────────────────────────── */

.container, .container-lg, .container-xl, .container-xxl {
    max-width: var(--container-max);
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
}
@media (min-width: 480px) {
    .container, .container-lg, .container-xl, .container-xxl {
        padding-left: var(--sp-5);
        padding-right: var(--sp-5);
    }
}
@media (min-width: 768px) {
    .container, .container-lg, .container-xl, .container-xxl {
        padding-left: var(--sp-8);
        padding-right: var(--sp-8);
    }
}

.section { padding: var(--sp-16) 0; }
.section-lg { padding: var(--sp-20) 0; }
@media (min-width: 768px) {
    .section { padding: var(--sp-20) 0; }
    .section-lg { padding: var(--sp-24) 0; }
}

.bg-surface  { background: var(--c-surface); }
.bg-surface-2{ background: var(--c-surface-2); }

.rule-faint { border: 0; height: 1px; background: var(--c-border); margin: 0; }

/* ─── 8. Buttons ─────────────────────────────────────────────────── */

.btn {
    --btn-h: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: var(--btn-h);
    padding: 0 var(--sp-6);
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--anim-fast) var(--ease-out),
                border-color var(--anim-fast) var(--ease-out),
                color var(--anim-fast) var(--ease-out),
                transform 80ms var(--ease-out);
    white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-busy="true"] { opacity: 0.75; cursor: wait; pointer-events: none; }

/* ─── Password strength meter (signup, password reset confirm) ─────── */
.pwd-strength { margin-top: var(--sp-2); }
.pwd-strength__bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    height: 4px;
}
.pwd-strength__bars > span {
    background: var(--c-border);
    border-radius: 2px;
    transition: background var(--anim-fast) var(--ease-out);
}
.pwd-strength__label {
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    margin: 4px 0 0;
    min-height: 1em;
}
.pwd-strength.is-1 .pwd-strength__bars > span:nth-child(1) { background: var(--c-danger); }
.pwd-strength.is-1 .pwd-strength__label { color: var(--c-danger); }
.pwd-strength.is-2 .pwd-strength__bars > span:nth-child(-n+2) { background: var(--c-danger); }
.pwd-strength.is-2 .pwd-strength__label { color: var(--c-danger); }
.pwd-strength.is-3 .pwd-strength__bars > span:nth-child(-n+3) { background: var(--c-warning); }
.pwd-strength.is-3 .pwd-strength__label { color: var(--c-warning); }
.pwd-strength.is-4 .pwd-strength__bars > span { background: var(--c-success); }
.pwd-strength.is-4 .pwd-strength__label { color: var(--c-success); }

.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    /* !important — чтобы выиграть у глобального prefers-reduced-motion правила
       ниже в файле, которое селектором * и !important убивает все анимации.
       Спиннер обязан крутиться, иначе пользователь не понимает что идёт отправка. */
    animation: btn-spin 0.6s linear infinite !important;
    vertical-align: middle;
}
@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    /* При reduced-motion крутим медленнее (1.6s вместо 0.6s) — заметно, но не раздражает */
    .btn-spinner { animation-duration: 1.6s !important; }
}

.btn-lg { --btn-h: 52px; padding: 0 var(--sp-8); font-size: var(--fs-body-lg); }
.btn-sm { --btn-h: 36px; padding: 0 var(--sp-4); font-size: var(--fs-body-sm); }

.btn-primary {
    background: var(--c-accent);
    color: var(--c-on-accent);
    border-color: var(--c-accent);
}
.btn-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: var(--c-on-accent); }

.btn-outline-primary {
    background: transparent;
    color: var(--c-accent);
    border-color: var(--c-accent);
}
.btn-outline-primary:hover { background: var(--c-accent); color: var(--c-on-accent); }

.btn-ghost {
    background: transparent;
    color: var(--c-ink);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }

.btn-success {
    background: var(--c-success);
    color: #FFFFFF;
    border-color: var(--c-success);
}
.btn-success:hover { background: color-mix(in srgb, var(--c-success) 88%, black); border-color: color-mix(in srgb, var(--c-success) 88%, black); }

.btn-link {
    background: transparent;
    color: var(--c-accent);
    border-color: transparent;
    padding: 0;
    height: auto;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* ─── 9. Forms ───────────────────────────────────────────────────── */

.form-control, .form-select {
    display: block;
    width: 100%;
    background: var(--c-surface);
    color: var(--c-ink);
    /* Заметная граница: 1px тонко на cream-фоне теряется, поэтому 1.5px
       + средне-насыщенный коричневый, чётко читается, не агрессивно. */
    border: 1.5px solid #B5A186;
    border-radius: var(--r-md);
    min-height: 44px;
    padding: var(--sp-3) var(--sp-4);
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-body);
    transition: border-color var(--anim-fast) var(--ease-out),
                box-shadow var(--anim-fast) var(--ease-out);
}
html.theme-dark .form-control,
html.theme-dark .form-select,
html:not(.theme-light) .form-control,
html:not(.theme-light) .form-select {
    border-color: #6E5F4D;
    /* Принудительный высококонтрастный цвет текста: на тёмной поверхности
       (#26211D) — близкий к белому, чтобы введённое значение было ярко видно.
       Браузерный дефолт для input иногда пробивает наш color: var(--c-ink),
       поэтому здесь дублируем явно. */
    color: #F2EDE5;
    background: #2A241F;  /* чуть светлее чем --c-surface для отделения от фона */
}
html.theme-dark .form-control::placeholder,
html:not(.theme-light) .form-control::placeholder {
    color: #9E958A;       /* брайтнее --c-ink-muted: #8E867C — лучше читается на dark */
    opacity: 1;            /* Firefox по умолчанию ставит opacity:0.5 → ещё хуже */
}
.form-control:focus, .form-select:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
    outline: none;
}
.form-control::placeholder { color: var(--c-ink-muted); opacity: 1; }

/* Chrome autofill — он подкрашивает фон в холодный синий и убивает наш
   тёплый cream-look. Перебиваем через box-shadow inset (стандартный трюк):
   браузер не даёт менять background при autofill, но box-shadow inset
   рисует поверх. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset;
    box-shadow: 0 0 0 1000px var(--c-surface) inset;
    -webkit-text-fill-color: var(--c-ink);
    caret-color: var(--c-ink);
    transition: background-color 5000s ease-in-out 0s;
}
.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset,
                        0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
    box-shadow: 0 0 0 1000px var(--c-surface) inset,
                0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
}

/* Кастомный chevron у нативного <select> (НЕ Tom Select wrapper).
   Нативный браузерный прижимается к бордеру — подменяем на свой SVG.
   :not(.ts-wrapper) важно: иначе наш chevron накладывается поверх
   Tom Select'овского, получается «гармошка» из 2-3 стрелок. */
select.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7672' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    padding-right: 40px;
}
html.theme-dark select.form-select,
html:not(.theme-light) select.form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E867C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.form-label {
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--c-ink-2);
    margin-bottom: var(--sp-2);
    display: block;
}

/* ─── 10. Badges ─────────────────────────────────────────────────── */

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    background: transparent;
    color: var(--c-ink-2);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-full);
    font-size: var(--fs-meta);
    font-weight: 500;
    line-height: 1.3;
}

.badge-bestseller {
    background: var(--c-warning-soft);
    border-color: color-mix(in srgb, var(--c-warning) 40%, transparent);
    color: var(--c-warning);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}

.badge-demo {
    background: var(--c-accent-soft);
    border-color: color-mix(in srgb, var(--c-accent) 35%, transparent);
    color: var(--c-accent);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-config {
    font-family: 'Manrope', sans-serif;
    font-variant-numeric: tabular-nums;
    background: var(--c-surface-2);
    border-color: var(--c-border);
    color: var(--c-ink-2);
}

.badge-subscription {
    background: var(--c-success-soft);
    color: var(--c-success);
    border: 1px solid color-mix(in srgb, var(--c-success) 40%, transparent);
    border-radius: var(--r-full);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-meta);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

/* ─── 11. Header / Site Nav ──────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--c-bg) 92%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--c-border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: 64px;
    min-width: 0;
}
@media (min-width: 768px) {
    .site-header__inner { gap: var(--sp-6); }
}
.site-header__brand {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    text-decoration: none;
    color: var(--c-ink);
    flex-shrink: 1;
    min-width: 0;
}
.site-header__brand-name { white-space: nowrap; }
.site-header__brand-tag {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 480px) {
    /* На самом узком mobile прячем подпись бренда — освобождаем место для иконок */
    .site-header__brand-tag { display: none; }
}
.site-header__brand-name {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
}
.site-header__brand-tag {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--c-ink-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 2px;
}
.site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex: 1;
}
.site-header__nav a {
    color: var(--c-ink-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    font-size: var(--fs-body-sm);
    font-weight: 500;
    transition: background var(--anim-fast) var(--ease-out), color var(--anim-fast) var(--ease-out);
}
.site-header__nav a:hover, .site-header__nav a[aria-current="page"] {
    background: var(--c-surface-2);
    color: var(--c-ink);
    text-decoration: none;
}
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-shrink: 0;
    margin-left: auto;
}
@media (min-width: 768px) {
    .site-header__actions { gap: var(--sp-2); }
}
.site-header__icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    color: var(--c-ink-2);
    cursor: pointer;
    transition: background var(--anim-fast) var(--ease-out), color var(--anim-fast) var(--ease-out);
    text-decoration: none;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .site-header__icon-btn { width: 40px; height: 40px; }
}
.site-header__icon-btn:hover {
    background: var(--c-surface-2);
    color: var(--c-ink);
}
.site-header__icon-btn .ic { width: 20px; height: 20px; }
.site-header__cart-count {
    position: absolute;
    top: 4px; right: 4px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    border-radius: var(--r-full);
    min-width: 18px; height: 18px;
    font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px;
}
.site-header__cart { position: relative; }

/* Скрываем поиск/профиль на мобиле — они доступны через раскрытое меню */
@media (max-width: 767.98px) {
    .site-header__icon-btn--md-up { display: none; }
}
@media (max-width: 991.98px) {
    .site-header__nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: var(--sp-4); background: var(--c-surface); border-bottom: 1px solid var(--c-border); gap: var(--sp-1); box-shadow: var(--sh-md); }
    .site-header__nav.is-open { display: flex; }
    .site-header__nav a { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); }
    .site-header__menu-toggle { display: inline-flex !important; }
}
@media (min-width: 992px) {
    .site-header__menu-toggle { display: none !important; }
}

/* ─── 12. Footer ─────────────────────────────────────────────────── */

.site-footer {
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-border);
    padding: var(--sp-16) 0 var(--sp-10);
    margin-top: var(--sp-24);
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
}
.site-footer h6 {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--c-ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.site-footer a { color: var(--c-ink-2); }
.site-footer a:hover { color: var(--c-accent); }
.site-footer__bottom {
    margin-top: var(--sp-12);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-border);
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* ─── 13. Hero ───────────────────────────────────────────────────── */

.hero {
    position: relative;
    padding: var(--sp-12) 0 var(--sp-10);
    overflow: hidden;
}
@media (min-width: 768px) {
    .hero { padding: var(--sp-24) 0 var(--sp-20); }
}

.hero::after {
    content: "";
    position: absolute;
    top: var(--sp-16); bottom: var(--sp-12);
    left: var(--sp-8);
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--c-border-strong) 30%, var(--c-border-strong) 70%, transparent);
    pointer-events: none;
    display: none;
}
@media (min-width: 768px) and (max-width: 1279px) {
    .hero::after { display: block; }
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-12);
    align-items: end;
}
@media (min-width: 992px) {
    .hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--sp-16);
    }
}

.hero__lead {
    animation: hero-rise 600ms var(--ease-out) both;
}
.hero__title {
    font-size: var(--fs-display);
    line-height: 1.06;
    letter-spacing: -0.022em;
    margin: 0 0 var(--sp-5);
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: normal;
    hyphens: manual;
    -webkit-hyphens: manual;
    word-break: normal;
}
@media (min-width: 768px) {
    .hero__title { line-height: 1.02; letter-spacing: -0.025em; margin-bottom: var(--sp-6); }
}
/* Em внутри hero-заголовка может переноситься; для коротких связок
   (например, «без переписывания») используй &nbsp; в HTML. */
.hero__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--c-accent);
    font-feature-settings: "ss01";
}
.hero__sub {
    font-size: var(--fs-body-lg);
    color: var(--c-ink-2);
    line-height: 1.55;
    max-width: 56ch;
    margin: 0 0 var(--sp-8);
}
.hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-10);
}
.hero__trust {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
.hero__trust .ic { width: 14px; height: 14px; }

.hero__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: var(--sh-sm);
    animation: hero-rise 600ms 120ms var(--ease-out) both;
}
@media (min-width: 768px) {
    .hero__stats { gap: var(--sp-6) var(--sp-8); padding: var(--sp-8); border-radius: var(--r-xl); }
}
.hero__stat-num {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
    display: block;
    margin-bottom: var(--sp-2);
}
.hero__stat-num small {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 0.5em;
    font-weight: 600;
    color: var(--c-accent);
    margin-left: 4px;
    vertical-align: super;
}
.hero__stat-label {
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    letter-spacing: 0.02em;
    line-height: 1.3;
}

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── 13b. Team section (главная) ────────────────────────────────── */

.team-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    margin-bottom: var(--sp-16);
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid var(--c-border);
}
@media (min-width: 992px) {
    .team-intro {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--sp-16);
        align-items: end;
    }
}
.team-intro__title {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
}
.team-intro__lead {
    max-width: 60ch;
}

.team-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-10);
}
@media (min-width: 640px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10) var(--sp-8); }
}
@media (min-width: 992px) {
    .team-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); }
}

.team-member {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.team-member__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--r-lg);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    display: block;
    /* Тёплый фильтр для единообразия фото с разной цветностью.
       Можно убрать когда будут одинаковые студийные снимки. */
    filter: saturate(0.92) contrast(1.02);
}

html.theme-dark .team-member__photo,
html:not(.theme-light) .team-member__photo {
    filter: saturate(0.85) contrast(1.05) brightness(0.92);
}

.team-member__info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.team-member__name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--c-ink);
}
.team-member__role {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    margin: 0;
}
.team-member__years {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    letter-spacing: 0.01em;
    margin: var(--sp-1) 0 0;
}

/* ─── 13c. Catalog page ──────────────────────────────────────────── */

.catalog-hero {
    padding: var(--sp-12) 0 var(--sp-10);
}
@media (min-width: 768px) {
    .catalog-hero { padding: var(--sp-16) 0 var(--sp-12); }
}
.catalog-hero__title {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: var(--sp-3) 0 var(--sp-5);
    text-wrap: balance;
}
.catalog-hero__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--c-accent);
    font-feature-settings: "ss01";
    font-variant-numeric: tabular-nums;
}
.catalog-hero__lead {
    color: var(--c-ink-2);
    font-size: var(--fs-body-lg);
    line-height: 1.55;
    max-width: 68ch;
    margin: 0;
}

/* 6 преимуществ */
.catalog-pillars {
    padding: var(--sp-10) 0 var(--sp-12);
    border-top: 1px solid var(--c-border);
}
.catalog-pillars__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6) var(--sp-8);
}
@media (min-width: 640px) {
    .catalog-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .catalog-pillars__grid { grid-template-columns: repeat(3, 1fr); }
}
.catalog-pillar {
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
    border-left: 2px solid var(--c-accent);
}
.catalog-pillar__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 var(--sp-2);
    letter-spacing: -0.01em;
    color: var(--c-ink);
}
.catalog-pillar__text {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    line-height: 1.55;
    margin: 0;
}

/* CTA-блок про абонемент */
.catalog-subs-cta {
    padding: var(--sp-10) 0;
}
.catalog-subs-cta__inner {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: var(--sp-8) var(--sp-6);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    align-items: center;
    box-shadow: var(--sh-sm);
}
@media (min-width: 768px) {
    .catalog-subs-cta__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: var(--sp-10) var(--sp-10);
        gap: var(--sp-8);
    }
}
.catalog-subs-cta__title {
    font-size: clamp(24px, 2.5vw, 32px);
    margin: var(--sp-2) 0 var(--sp-3);
    letter-spacing: -0.01em;
}
.catalog-subs-cta__lead {
    color: var(--c-ink-2);
    font-size: var(--fs-body);
    line-height: 1.55;
    margin: 0;
    max-width: 60ch;
}

/* Фильтры */
.catalog-results { padding: var(--sp-10) 0 var(--sp-16); }

.catalog-filters {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-8);
}
.catalog-filters__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    align-items: stretch;
}
@media (min-width: 640px) {
    .catalog-filters__row { grid-template-columns: 1fr 220px; }
}
/* Input и select в одной строке должны иметь одинаковую высоту.
   Базовый .form-control имеет height: 44px (фикс), а .form-select
   считает высоту от padding+line-height (≈51px) — отсюда визуальный
   рассинхрон. Принудительно выравниваем оба контрола на 48px (≥44 — WCAG touch). */
.catalog-filters__row .form-control,
.catalog-filters__row .form-select {
    height: 48px;
    min-height: 48px;
}

.catalog-filters__more {
    margin-top: var(--sp-4);
    border-top: 1px solid var(--c-border);
    padding-top: var(--sp-4);
}
.catalog-filters__more summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--c-ink);
    user-select: none;
}
.catalog-filters__more summary::-webkit-details-marker { display: none; }
.catalog-filters__more summary::before {
    content: "+";
    color: var(--c-accent);
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 20px;
    line-height: 0.7;
    transition: transform var(--anim-base) var(--ease-out);
}
.catalog-filters__more[open] summary::before { transform: rotate(45deg); }

.catalog-filters__active-count {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    border-radius: var(--r-full);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.catalog-filters__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}
@media (min-width: 640px) {
    .catalog-filters__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .catalog-filters__grid { grid-template-columns: repeat(4, 1fr); }
}

.catalog-filters__checks {
    margin-top: var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.catalog-filters__check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    font-size: var(--fs-body-sm);
    color: var(--c-ink-2);
    user-select: none;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: border-color var(--anim-fast) var(--ease-out);
}
.catalog-filters__check:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-weight: 600;
}
.catalog-filters__check input { accent-color: var(--c-accent); }

.catalog-filters__actions {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.catalog-filters__found {
    margin-left: auto;
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
}
.catalog-filters__found strong { color: var(--c-ink); }

/* Toolbar: переключатель grid/list + select «N на странице» */
.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-6);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--c-border);
}
.catalog-toolbar__view {
    display: inline-flex;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 3px;
    gap: 2px;
}
.catalog-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--c-ink-muted);
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--anim-fast) var(--ease-out), color var(--anim-fast) var(--ease-out);
}
.catalog-toolbar__btn:hover { color: var(--c-ink); background: var(--c-surface-2); }
.catalog-toolbar__btn.is-active {
    background: var(--c-accent);
    color: var(--c-on-accent);
}
.catalog-toolbar__per-page {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
}
.catalog-toolbar__per-page-label {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: 0;
    white-space: nowrap;
}
.catalog-toolbar__select {
    width: auto;
    min-height: 36px;
    padding: 4px var(--sp-3);
    font-size: var(--fs-body-sm);
}

/* List-режим карточки разработки.
   На мобиле (<768px) карточка остаётся в обычном вертикальном виде
   (просто col-12 = во всю ширину). Горизонтальная раскладка с ценой
   справа применяется только на ≥768px, где есть место. */
@media (min-width: 768px) {
    .catalog-grid--list .card-product {
        position: relative;
        flex-direction: row;
        align-items: stretch;
        flex-wrap: wrap;
        gap: var(--sp-2) var(--sp-6);
        padding-right: calc(180px + var(--sp-6) + var(--sp-6));
    }
    .catalog-grid--list .card-product__head {
        flex-basis: 100%;
        min-height: 0;
        margin-bottom: 0;
    }
    .catalog-grid--list .card-product__title {
        flex: 1 1 60%;
        margin: 0;
        align-self: center;
    }
    .catalog-grid--list .card-product__intro {
        flex-basis: 100%;
        margin: 0;
        flex-grow: 0;
    }
    .catalog-grid--list .card-product__configs {
        flex-basis: 100%;
        margin: 0;
    }
    .catalog-grid--list .card-product__meta {
        flex-basis: 100%;
        margin: 0;
    }
    .catalog-grid--list .card-product__price-row {
        position: absolute;
        top: var(--sp-6);
        right: var(--sp-6);
        bottom: var(--sp-6);
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        border-top: 0;
        border-left: 1px solid var(--c-border);
        padding: 0 0 0 var(--sp-6);
        margin: 0;
        justify-content: center;
        min-width: 180px;
    }
}

/* Empty state */
.catalog-empty {
    text-align: center;
    padding: var(--sp-16) var(--sp-4);
    background: var(--c-surface);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-lg);
}
.catalog-empty h3 { font-size: 24px; margin-bottom: var(--sp-3); }
.catalog-empty p { max-width: 50ch; margin: 0 auto var(--sp-5); }

/* Pagination */
.catalog-pagination {
    margin-top: var(--sp-12);
    display: flex;
    justify-content: center;
}
.catalog-pagination__list {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin: 0;
}
.catalog-pagination__link {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-3) var(--sp-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-ink);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    text-decoration: none !important;
    transition: border-color var(--anim-fast) var(--ease-out), background var(--anim-fast) var(--ease-out);
}
.catalog-pagination__link:hover {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent);
}
.catalog-pagination__current {
    color: var(--c-ink-muted);
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-body-lg);
    font-weight: 700;
    padding: 0 var(--sp-3);
}
.catalog-pagination__current span:first-child { color: var(--c-ink); }
.catalog-pagination__sep { color: var(--c-border-strong); margin: 0 4px; }

/* ─── 13d. Subs landing /subs/ ──────────────────────────────────── */

.subs-hero {
    padding: var(--sp-12) 0 var(--sp-16);
}
@media (min-width: 768px) {
    .subs-hero { padding: var(--sp-16) 0 var(--sp-20); }
}
.subs-hero__title {
    font-size: clamp(34px, 5.5vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: var(--sp-3) 0 var(--sp-5);
    text-wrap: balance;
}
.subs-hero__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--c-accent);
    font-feature-settings: "ss01";
}
.subs-hero__sub {
    font-size: var(--fs-body-lg);
    color: var(--c-ink-2);
    line-height: 1.55;
    max-width: 64ch;
    margin: 0 0 var(--sp-8);
}
.subs-hero__sub strong { color: var(--c-ink); font-weight: 700; }
.subs-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
}
.subs-hero__cta-aux {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    max-width: 56ch;
}
.subs-hero__cta-aux a { color: var(--c-accent); }
.subs-hero__cta-aux strong { color: var(--c-ink); }

.subs-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3) var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-6);
    font-size: var(--fs-body-sm);
    line-height: 1.5;
}
.subs-status--active {
    background: var(--c-success-soft);
    color: var(--c-success);
    border: 1px solid color-mix(in srgb, var(--c-success) 30%, transparent);
}
.subs-status strong { font-weight: 700; }
.subs-status__link { margin-left: auto; font-weight: 600; }

/* «Что входит» — список 5 преимуществ с крупными цифрами */
.subs-includes {
    padding: var(--sp-16) 0;
    border-top: 1px solid var(--c-border);
}
.subs-includes h2 {
    font-size: clamp(28px, 3vw, 40px);
    margin-bottom: var(--sp-10);
    letter-spacing: -0.015em;
}
.subs-includes__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
}
@media (min-width: 640px) {
    .subs-includes__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .subs-includes__list { grid-template-columns: repeat(3, 1fr); }
}
.subs-includes__list > li {
    padding-left: var(--sp-6);
    border-left: 2px solid var(--c-accent);
}
.subs-includes__num {
    display: block;
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--sp-3);
}
.subs-includes__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 var(--sp-2);
    color: var(--c-ink);
    letter-spacing: -0.005em;
}
.subs-includes__text {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    line-height: 1.55;
    margin: 0;
}

/* Сравнительная таблица */
.subs-compare {
    padding: var(--sp-16) 0;
    border-top: 1px solid var(--c-border);
}
.subs-compare h2 {
    font-size: clamp(28px, 3vw, 40px);
    margin-bottom: var(--sp-8);
}
.subs-compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.subs-compare__table th, .subs-compare__table td {
    padding: var(--sp-4) var(--sp-5);
    text-align: left;
    border-bottom: 1px solid var(--c-border);
    vertical-align: top;
}
.subs-compare__table thead th {
    background: var(--c-surface-2);
    color: var(--c-ink);
    font-weight: 700;
    font-size: var(--fs-body-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}
.subs-compare__table tbody th {
    font-weight: 600;
    color: var(--c-ink-2);
    width: 35%;
}
.subs-compare__table tbody td { color: var(--c-ink); }
.subs-compare__table tbody tr:last-child th,
.subs-compare__table tbody tr:last-child td { border-bottom: 0; }
.subs-compare__highlight {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-weight: 600;
}
.subs-compare__table thead th.subs-compare__highlight { color: var(--c-accent); }

/* Mobile: переворачиваем таблицу в карточки. Каждая строка становится
   блоком с заголовком (вопрос) и двумя данными (поштучно / абонемент)
   с подписями через data-label. */
@media (max-width: 639.98px) {
    .subs-compare__table,
    .subs-compare__table thead,
    .subs-compare__table tbody,
    .subs-compare__table tr,
    .subs-compare__table th,
    .subs-compare__table td {
        display: block;
        width: 100%;
        border-radius: 0;
    }
    .subs-compare__table { border: 0; background: transparent; }
    .subs-compare__table thead { display: none; } /* заголовки колонок дублируются через data-label */

    .subs-compare__table tbody tr {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--r-lg);
        margin-bottom: var(--sp-4);
        overflow: hidden;
    }
    .subs-compare__table tbody tr:last-child { margin-bottom: 0; }

    .subs-compare__table tbody th {
        width: auto;
        background: var(--c-surface-2);
        color: var(--c-ink);
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        font-size: var(--fs-body-sm);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: var(--sp-3) var(--sp-4);
        border-bottom: 1px solid var(--c-border);
    }

    .subs-compare__table tbody td {
        padding: var(--sp-3) var(--sp-4);
        border-bottom: 1px solid var(--c-border);
        position: relative;
    }
    .subs-compare__table tbody td:last-child { border-bottom: 0; }

    /* Подпись «По одной разработке» / «Годовой абонемент» перед значением */
    .subs-compare__table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--c-ink-muted);
        margin-bottom: var(--sp-1);
    }
    .subs-compare__highlight {
        background: var(--c-accent-soft);
    }
    .subs-compare__highlight::before {
        color: var(--c-accent) !important;
    }
}

/* Калькулятор окупаемости */
.subs-payback {
    padding: var(--sp-16) 0;
    border-top: 1px solid var(--c-border);
}
.subs-payback__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-xl);
    padding: var(--sp-10) var(--sp-8);
    text-align: center;
    box-shadow: var(--sh-sm);
    max-width: 800px;
    margin: 0 auto;
}
.subs-payback__lead {
    color: var(--c-ink-2);
    font-size: var(--fs-body-lg);
    margin: 0 0 var(--sp-5);
}
.subs-payback__big {
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.15;
    margin: 0 0 var(--sp-5);
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.subs-payback__big em {
    font-style: italic;
    color: var(--c-accent);
    font-weight: 700;
}
.subs-payback__aux {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    line-height: 1.55;
    margin: 0;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}

/* Способы оплаты */
.subs-payment {
    padding: var(--sp-16) 0;
    border-top: 1px solid var(--c-border);
}
.subs-payment h2 {
    font-size: clamp(28px, 3vw, 40px);
    margin-bottom: var(--sp-8);
}
.subs-payment__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}
@media (min-width: 640px) {
    .subs-payment__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .subs-payment__list { grid-template-columns: repeat(3, 1fr); }
}
.subs-payment__list > li {
    padding: var(--sp-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}
.subs-payment__list strong {
    display: block;
    font-weight: 700;
    color: var(--c-ink);
    margin-bottom: var(--sp-1);
}
.subs-payment__list span {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    line-height: 1.5;
}

/* Финальный CTA */
.subs-final-cta {
    padding: var(--sp-16) 0 var(--sp-20);
    border-top: 1px solid var(--c-border);
}
.subs-final-cta__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    align-items: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: var(--sp-10) var(--sp-8);
    box-shadow: var(--sh-md);
}
@media (min-width: 768px) {
    .subs-final-cta__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--sp-10);
        padding: var(--sp-12) var(--sp-10);
    }
}
.subs-final-cta__inner h2 {
    font-size: clamp(26px, 3vw, 36px);
    margin: 0 0 var(--sp-3);
}
.subs-final-cta__lead {
    color: var(--c-ink-2);
    font-size: var(--fs-body-lg);
    margin: 0 0 var(--sp-4);
    max-width: 50ch;
}
.subs-final-cta__legal {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    line-height: 1.6;
    margin: 0;
    max-width: 56ch;
}

/* ─── 13e. Course UT 11 landing /kurs-ut11/ ─────────────────────── */

.course-hero {
    padding: var(--sp-12) 0 var(--sp-16);
}
@media (min-width: 768px) {
    .course-hero { padding: var(--sp-16) 0 var(--sp-20); }
}
.course-hero__title {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.022em;
    margin: var(--sp-3) 0 var(--sp-5);
    text-wrap: balance;
}
.course-hero__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--c-accent);
    font-feature-settings: "ss01";
}
.course-hero__lead {
    font-size: var(--fs-body-lg);
    color: var(--c-ink-2);
    line-height: 1.55;
    max-width: 64ch;
    margin: 0 0 var(--sp-8);
}

.course-hero__progress {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-5);
    max-width: 600px;
}
.course-hero__progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.course-hero__progress-label {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.course-hero__progress-num { color: var(--c-ink-2); font-size: var(--fs-body); }
.course-hero__progress-num strong { color: var(--c-accent); font-weight: 700; }
.course-hero__progress-bar {
    height: 8px;
    background: var(--c-surface-2);
    border-radius: var(--r-full);
    overflow: hidden;
}
.course-hero__progress-fill {
    display: block;
    height: 100%;
    background: var(--c-accent);
    border-radius: var(--r-full);
    transition: width var(--anim-base) var(--ease-out);
}

.course-hero__cta { max-width: 600px; }
.course-hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Этапы */
.course-stages {
    padding: var(--sp-12) 0 var(--sp-16);
    border-top: 1px solid var(--c-border);
}
.course-stages__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-10);
}

.course-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}
@media (min-width: 768px) {
    .course-stage {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
        gap: var(--sp-10);
    }
}

.course-stage__head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
}
.course-stage__num {
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    width: 60px;
    text-align: right;
}
.course-stage__head-text { min-width: 0; flex: 1; }
.course-stage__title {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    margin: var(--sp-2) 0 var(--sp-2);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.course-stage__meta {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: 0;
    line-height: 1.4;
}
.course-stage__meta strong { color: var(--c-success); font-weight: 700; }

.course-stage__lessons {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.course-lesson { border-bottom: 1px solid var(--c-border); }
.course-lesson:last-child { border-bottom: 0; }

.course-lesson__link {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    color: var(--c-ink);
    text-decoration: none !important;
    transition: background var(--anim-fast) var(--ease-out);
}
.course-lesson__link:hover { background: var(--c-surface-2); color: var(--c-ink); }

.course-lesson__num {
    flex-shrink: 0;
    width: 28px;
    color: var(--c-ink-muted);
    font-weight: 600;
    font-size: var(--fs-body-sm);
}
.course-lesson__title {
    flex: 1;
    font-weight: 500;
    line-height: 1.4;
}
.course-lesson__check {
    flex-shrink: 0;
    color: var(--c-success);
    display: inline-flex;
}
.course-lesson__arrow {
    flex-shrink: 0;
    color: var(--c-border-strong);
    font-size: 18px;
    transition: transform var(--anim-fast) var(--ease-out), color var(--anim-fast) var(--ease-out);
}
.course-lesson__link:hover .course-lesson__arrow {
    color: var(--c-accent);
    transform: translateX(3px);
}

/* CTA блок про каталог в конце курса */
.course-cta-subs {
    padding: var(--sp-16) 0;
    border-top: 1px solid var(--c-border);
}
.course-cta-subs__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    align-items: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: var(--sp-10) var(--sp-8);
    box-shadow: var(--sh-md);
}
@media (min-width: 768px) {
    .course-cta-subs__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--sp-10);
        padding: var(--sp-12) var(--sp-10);
    }
}
.course-cta-subs__title {
    font-size: clamp(24px, 2.6vw, 32px);
    margin: var(--sp-3) 0 var(--sp-4);
    letter-spacing: -0.015em;
}
.course-cta-subs__lead {
    color: var(--c-ink-2);
    line-height: 1.55;
    margin: 0;
    max-width: 56ch;
}
.course-cta-subs__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    flex-shrink: 0;
}

/* ─── 13f. Lesson detail ────────────────────────────────────────── */

/* Метка «пройден» в meta-row урока */
.lesson-meta-completed {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--c-success);
    font-weight: 600;
}

/* Sticky-навигация между уроками */
.lesson-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    align-items: stretch;
    margin-bottom: var(--sp-8);
}
@media (min-width: 768px) {
    .lesson-nav {
        grid-template-columns: 1fr auto 1fr;
        gap: var(--sp-3);
    }
}

.lesson-nav__btn {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-ink);
    text-decoration: none !important;
    transition: border-color var(--anim-fast) var(--ease-out),
                background var(--anim-fast) var(--ease-out);
    min-width: 0;
}
.lesson-nav__btn:hover {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-ink);
}
.lesson-nav__btn--next {
    text-align: right;
    flex-direction: row-reverse;
}
.lesson-nav__arrow {
    flex-shrink: 0;
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 22px;
    color: var(--c-accent);
    line-height: 1;
}
.lesson-nav__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.lesson-nav__label {
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.lesson-nav__title {
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-nav__form { display: contents; }
.lesson-nav__form .btn { width: 100%; }
@media (min-width: 768px) {
    .lesson-nav__form .btn { width: auto; }
}

.lesson-nav__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    background: var(--c-success-soft);
    color: var(--c-success);
    border: 1px solid color-mix(in srgb, var(--c-success) 30%, transparent);
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: var(--fs-body-sm);
}

.lesson-nav__guest-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-accent);
    font-weight: 600;
    font-size: var(--fs-body-sm);
    text-decoration: none;
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--r-md);
}
.lesson-nav__guest-link:hover { background: var(--c-surface-2); }

.lesson-nav__center-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3);
    color: var(--c-ink-muted);
    font-weight: 600;
    font-size: var(--fs-body-sm);
    text-decoration: none;
}
.lesson-nav__center-link:hover { color: var(--c-accent); text-decoration: underline; }

/* Компактная мини-нав сверху урока: ← пред · к программе · след → */
.lesson-mininav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-8);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: var(--fs-body-sm);
}
.lesson-mininav__link {
    display: inline-flex;
    align-items: center;
    color: var(--c-ink);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--anim-fast) var(--ease-out);
    min-width: 0;
}
.lesson-mininav__link:hover { color: var(--c-accent); }
.lesson-mininav__link--prev { justify-self: start; }
.lesson-mininav__link--next { justify-self: end; }
.lesson-mininav__link--disabled {
    color: var(--c-ink-muted);
    opacity: 0.5;
    cursor: default;
}
.lesson-mininav__link--disabled:hover { color: var(--c-ink-muted); }
.lesson-mininav__center {
    justify-self: center;
    color: var(--c-ink-muted);
    text-decoration: none;
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    text-align: center;
    transition: color var(--anim-fast) var(--ease-out);
}
.lesson-mininav__center:hover { color: var(--c-accent); }

@media (max-width: 640px) {
    .lesson-mininav {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "center center"
            "prev   next";
        row-gap: var(--sp-2);
    }
    .lesson-mininav__center { grid-area: center; }
    .lesson-mininav__link--prev { grid-area: prev; }
    .lesson-mininav__link--next { grid-area: next; }
}

/* Блок «Отметить пройденным» — после контента урока */
.lesson-complete {
    margin-top: var(--sp-12);
    padding: var(--sp-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    text-align: center;
}
.lesson-complete__form {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    justify-content: center;
}
.lesson-complete__hint {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
}
.lesson-complete__done {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    background: var(--c-success-soft);
    color: var(--c-success);
    border: 1px solid color-mix(in srgb, var(--c-success) 30%, transparent);
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: var(--fs-body-sm);
}
.lesson-complete__guest {
    display: inline-block;
    color: var(--c-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.lesson-complete__guest:hover { color: var(--c-accent-hover); }

/* Видео-блок урока (legacy — оставлен для обратной совместимости) */
.lesson-video {
    position: relative;
    margin: 0 0 var(--sp-8);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-surface-2);
    aspect-ratio: 16 / 9;
}
.lesson-video iframe,
.lesson-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ─── Универсальный video-block (file / youtube / tabs) ──────────── */
.video-block {
    margin: 0 0 var(--sp-10);
}
.video-block__title {
    font-size: var(--fs-h3);
    margin: 0 0 var(--sp-4);
    color: var(--c-ink);
}
/* Bootstrap-grid имеет .ratio, но добавим базу на случай если grid не загрузился */
.video-block .ratio {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
}
.video-block .ratio iframe,
.video-block .ratio video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Табы для случая «файл + YouTube» */
.video-tabs__nav {
    display: flex;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}
.video-tabs__btn {
    background: transparent;
    border: 0;
    padding: var(--sp-3) var(--sp-4);
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--c-ink-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--anim-fast) var(--ease-out),
                border-color var(--anim-fast) var(--ease-out);
}
.video-tabs__btn:hover { color: var(--c-ink); }
.video-tabs__btn.is-active {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}
.video-tabs__panel[hidden] { display: none; }

/* ─── 13b. База знаний: список и статья ──────────────────────────── */

/* Список статей */
.kb-hero {
    padding: var(--sp-12) 0 var(--sp-8);
}
.kb-hero__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
    color: var(--c-ink);
    margin: var(--sp-4) 0 var(--sp-4);
    max-width: 780px;
}
.kb-hero__title em {
    font-style: italic;
    color: var(--c-accent);
    font-weight: 400;
}
.kb-hero__lead {
    font-size: var(--fs-body-lg);
    color: var(--c-ink-2);
    max-width: 720px;
    margin: 0 0 var(--sp-6);
}

.kb-search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    max-width: 720px;
}
.kb-search__input {
    flex: 1 1 280px;
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-body);
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    color: var(--c-ink);
}
.kb-search__input:focus {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-color: var(--c-accent);
}
.kb-search__count {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: var(--sp-4) 0 0;
}

.kb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--c-border);
}
.kb-list__item { border-bottom: 1px solid var(--c-border); }
.kb-list__link {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-6) 0 var(--sp-6) var(--sp-4);
    color: var(--c-ink);
    text-decoration: none;
    transition: padding-left var(--anim-base) var(--ease-out),
                color var(--anim-base) var(--ease-out);
}
.kb-list__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--sp-6);
    bottom: var(--sp-6);
    width: 2px;
    background: var(--c-accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--anim-base) var(--ease-out);
}
@media (min-width: 768px) {
    .kb-list__link {
        grid-template-columns: 1fr 140px;
        gap: var(--sp-2) var(--sp-6);
        align-items: baseline;
    }
}
.kb-list__link:hover,
.kb-list__link:focus-visible {
    color: var(--c-ink);
    text-decoration: none;
    padding-left: var(--sp-6);
}
.kb-list__link:hover::before,
.kb-list__link:focus-visible::before { transform: scaleY(1); }
.kb-list__title {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.25;
    margin: 0;
    color: var(--c-ink);
    font-weight: 600;
    transition: color var(--anim-base) var(--ease-out);
}
.kb-list__link:hover .kb-list__title,
.kb-list__link:focus-visible .kb-list__title { color: var(--c-accent); }
.kb-list__excerpt {
    color: var(--c-ink-2);
    margin: 0;
    line-height: 1.55;
    grid-column: 1;
}
.kb-list__date {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    grid-column: 1;
}
@media (min-width: 768px) {
    .kb-list__date {
        grid-column: 2;
        grid-row: 1 / span 2;
        text-align: right;
        align-self: start;
    }
}

.kb-empty {
    text-align: center;
    padding: var(--sp-16) var(--sp-6);
    color: var(--c-ink-muted);
}
.kb-empty__hint { margin-top: var(--sp-3); }

/* Страница статьи */
.article-head {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-8);
}

.article-grid {
    --gutter: var(--sp-12);
}
@media (min-width: 992px) {
    .article-grid { gap: var(--gutter); }
}

.article-aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    margin-top: var(--sp-8);
}
@media (min-width: 992px) {
    .article-aside {
        margin-top: 0;
        position: sticky;
        top: 100px;
        align-self: start;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

.article-author-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-5);
}
.article-author-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.article-author-card__head img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.article-author-card__name {
    font-size: var(--fs-h4);
    margin: var(--sp-1) 0 0;
    line-height: 1.2;
}
.article-author-card__bio {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    line-height: 1.55;
    margin: var(--sp-3) 0 0;
}

.article-cta-card {
    background: var(--c-accent-soft);
    border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
    border-radius: var(--r-md);
    padding: var(--sp-5);
}
.article-cta-card__title {
    font-size: var(--fs-h4);
    margin: var(--sp-2) 0;
    color: var(--c-accent);
}
.article-cta-card__lead {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    line-height: 1.55;
    margin: 0 0 var(--sp-4);
}

.article-related {
    margin-top: var(--sp-16);
    border-top: 1px solid var(--c-border);
}
.article-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-1);
}
@media (min-width: 768px) {
    .article-related__list {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-4) var(--sp-6);
    }
}
.article-related__item { border-bottom: 1px solid var(--c-border); }
.article-related__link {
    display: block;
    padding: var(--sp-5) 0;
    color: var(--c-ink);
    text-decoration: none;
    transition: color var(--anim-fast) var(--ease-out);
}
.article-related__link:hover { color: var(--c-accent); }
.article-related__title {
    font-size: var(--fs-h4);
    line-height: 1.3;
    margin: 0 0 var(--sp-2);
    color: inherit;
    font-weight: 600;
}
.article-related__excerpt {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    line-height: 1.55;
    margin: 0 0 var(--sp-2);
}
.article-related__date {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* ─── 13c. Корзина / Checkout / Payment-статусы ──────────────────── */

/* Шапки */
.cart-head, .checkout-head {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-8);
}

/* Пустая корзина */
.cart-empty {
    text-align: center;
    padding: var(--sp-16) var(--sp-6);
    max-width: 520px;
    margin: 0 auto;
    color: var(--c-ink);
}
.cart-empty svg { color: var(--c-ink-muted); margin-bottom: var(--sp-4); }
.cart-empty__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0 0 var(--sp-3);
}
.cart-empty__lead {
    color: var(--c-ink-2);
    margin: 0 0 var(--sp-6);
    line-height: 1.55;
}
.cart-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
}

/* Сетка корзины и checkout */
.cart-grid, .checkout-grid {
    --gutter: var(--sp-8);
}
@media (min-width: 992px) {
    .cart-grid, .checkout-grid { gap: var(--gutter); }
}

/* Список позиций */
.cart-items {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--c-border);
}
.cart-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--sp-3) var(--sp-5);
    align-items: center;
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--c-border);
}
.cart-item--subscription {
    background: linear-gradient(to right, var(--c-accent-soft) 0%, transparent 60%);
    margin: 0 calc(-1 * var(--sp-3));
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
    border-radius: var(--r-sm);
}
.cart-item__main { min-width: 0; }
.cart-item__kind {
    display: inline-block;
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: var(--sp-2);
}
.cart-item__kind--update { color: var(--c-accent); }
.cart-item__title {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    line-height: 1.3;
    margin: 0 0 var(--sp-2);
    font-weight: 600;
}
.cart-item__title a {
    color: var(--c-ink);
    text-decoration: none;
}
.cart-item__title a:hover { color: var(--c-accent); text-decoration: none; }
.cart-item__meta {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    margin: 0;
}
.cart-item__price {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-weight: 600;
    color: var(--c-ink);
    white-space: nowrap;
    align-self: start;
    padding-top: var(--sp-1);
}
.cart-item__remove { display: contents; }
.cart-item__remove-btn {
    background: transparent;
    border: 0;
    padding: var(--sp-2);
    color: var(--c-ink-muted);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: color var(--anim-fast) var(--ease-out),
                background var(--anim-fast) var(--ease-out);
    align-self: start;
    margin-top: var(--sp-1);
}
.cart-item__remove-btn:hover {
    color: var(--c-danger);
    background: var(--c-surface-2);
}

@media (max-width: 540px) {
    .cart-item {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "main remove"
            "price price";
        gap: var(--sp-2) var(--sp-3);
    }
    .cart-item__main { grid-area: main; }
    .cart-item__price { grid-area: price; padding-top: 0; }
    .cart-item__remove { display: contents; }
    .cart-item__remove-btn { grid-area: remove; }
}

.cart-keep-shopping {
    margin-top: var(--sp-6);
}
.cart-keep-shopping__link {
    color: var(--c-ink-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-body-sm);
}
.cart-keep-shopping__link:hover { color: var(--c-accent); text-decoration: none; }

/* Sticky-итог справа (cart) */
.cart-summary-col, .checkout-summary-col {
    margin-top: var(--sp-8);
}
@media (min-width: 992px) {
    .cart-summary-col, .checkout-summary-col {
        margin-top: 0;
    }
}

.cart-summary, .checkout-summary {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-6);
}
@media (min-width: 992px) {
    .cart-summary, .checkout-summary {
        position: sticky;
        top: 100px;
    }
}
.cart-summary__title, .checkout-summary__title {
    font-size: var(--fs-h3);
    margin: 0 0 var(--sp-4);
    line-height: 1.2;
}
.cart-summary__total, .checkout-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-4);
}
.cart-summary__total span, .checkout-summary__total span {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.cart-summary__total strong, .checkout-summary__total strong {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--c-accent);
    font-weight: 600;
    line-height: 1;
}
.cart-summary__note {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: 0 0 var(--sp-4);
    line-height: 1.5;
}
.cart-summary__note--small { font-size: var(--fs-meta); margin-top: var(--sp-3); }
.cart-summary__cta { width: 100%; }

.cart-summary__perks {
    list-style: none;
    margin: var(--sp-5) 0 0;
    padding: var(--sp-5) 0 0;
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.cart-summary__perks li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-body-sm);
    color: var(--c-ink-2);
}
.cart-summary__perks svg { color: var(--c-accent); flex-shrink: 0; }

/* Checkout summary — позиции */
.checkout-summary__items {
    list-style: none;
    margin: 0 0 var(--sp-2);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.checkout-summary__item {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    align-items: baseline;
}
.checkout-summary__item-title {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    flex: 1;
}
.checkout-summary__item-price {
    color: var(--c-ink);
    font-weight: 600;
    white-space: nowrap;
    font-size: var(--fs-body-sm);
}
.checkout-summary__cta { width: 100%; margin-top: var(--sp-3); }
.checkout-summary__cancel {
    display: block;
    text-align: center;
    margin-top: var(--sp-3);
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    text-decoration: none;
}
.checkout-summary__cancel:hover { color: var(--c-ink); text-decoration: underline; }

/* Checkout — секции с нумерацией */
.checkout-section {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-5);
    overflow: hidden;
}
.checkout-section__head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6) 0;
}
.checkout-section__num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}
.checkout-section__title {
    font-size: var(--fs-h3);
    margin: var(--sp-1) 0 0;
    line-height: 1.2;
}
.checkout-section__sub {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: var(--sp-1) 0 0;
}
.checkout-section__body {
    padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

/* Сворачиваемая секция (реквизиты) */
.checkout-section--collapsible .checkout-section__body {
    display: none;
}
.checkout-section--collapsible.is-open .checkout-section__body {
    display: block;
}

/* Поля */
.checkout-field {
    margin-bottom: var(--sp-4);
}
.checkout-field:last-child { margin-bottom: 0; }
.checkout-field__label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--sp-2);
    color: var(--c-ink);
    font-size: var(--fs-body-sm);
}
.checkout-field__req { color: var(--c-accent); }
.checkout-field__hint {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin: var(--sp-2) 0 0;
}
.checkout-field__hint--ok { color: var(--c-success); }
.checkout-field__error {
    color: var(--c-danger);
    font-size: var(--fs-meta);
    margin: var(--sp-2) 0 0;
}

/* Способы оплаты — radio как карточки */
.checkout-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--sp-5);
}
.checkout-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
}
@media (min-width: 540px) {
    .checkout-methods { grid-template-columns: 1fr 1fr; }
}
.checkout-method__label {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color var(--anim-fast) var(--ease-out),
                background var(--anim-fast) var(--ease-out);
    margin: 0;
}
.checkout-method__label:hover {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}
.checkout-method__label:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    box-shadow: inset 0 0 0 1px var(--c-accent);
}
.checkout-method__label input[type="radio"] {
    accent-color: var(--c-accent);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.checkout-method__text {
    font-size: var(--fs-body-sm);
    line-height: 1.3;
    font-weight: 500;
    color: var(--c-ink);
}

.checkout-alert {
    background: color-mix(in srgb, var(--c-danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent);
    color: var(--c-danger);
    padding: var(--sp-4);
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-5);
    font-weight: 500;
}

/* Payment status pages (success / pending / fail) */
.payment-status {
    max-width: 600px;
    margin: var(--sp-12) auto var(--sp-16);
    text-align: center;
    padding: var(--sp-10) var(--sp-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}
.payment-status__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--sp-5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.payment-status--success .payment-status__icon {
    background: var(--c-success-soft);
    color: var(--c-success);
}
.payment-status--pending .payment-status__icon {
    background: var(--c-accent-soft);
    color: var(--c-accent);
}
.payment-status--fail .payment-status__icon {
    background: color-mix(in srgb, var(--c-danger) 12%, transparent);
    color: var(--c-danger);
}
.payment-status__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 0 0 var(--sp-4);
    line-height: 1.15;
    color: var(--c-ink);
}
.payment-status__lead {
    font-size: var(--fs-body-lg);
    color: var(--c-ink);
    margin: 0 0 var(--sp-4);
    line-height: 1.5;
}
.payment-status__text {
    color: var(--c-ink-2);
    margin: 0 0 var(--sp-3);
    line-height: 1.55;
}
.payment-status__text--small {
    font-size: var(--fs-body-sm);
    color: var(--c-ink-muted);
    margin-top: var(--sp-6);
}
.payment-status__alert {
    background: color-mix(in srgb, var(--c-danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-danger) 30%, transparent);
    color: var(--c-danger);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-body-sm);
}
.payment-status__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}
.payment-status__debug {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin-top: var(--sp-6);
}
.payment-status__debug code {
    background: var(--c-surface-2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* ─── 13d. Личный кабинет ────────────────────────────────────────── */

.lk-head {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-6);
}

/* ВАЖНО: НЕ ставить gap на .lk-grid (это Bootstrap .row).
   .row уже flex-контейнер с col-*-N, чьи ширины в сумме = 100% (col-md-4+col-md-8 = 100%).
   Любой gap на flex-row добавляется к ширине → суммарно > 100% → второй col падает на
   новую строку. Промежутки между колонками даёт Bootstrap через --bs-gutter-x (cols
   получают padding-left/right), увеличить можно через утилитарный класс g-* на .row. */
.lk-grid { --bs-gutter-x: var(--sp-8); }

/* На мобильном (<768px) сайдбар сверху, контент снизу — стандартный порядок Bootstrap.
   На md+ (>=768px) сайдбар уезжает влево от контента. */
.lk-sidebar-col { margin-bottom: var(--sp-6); }
@media (min-width: 768px) {
    .lk-sidebar-col {
        margin-bottom: 0;
    }
}

/* Расширяем контейнер на ЛК / dash / партнёрских страницах: стандартный 1200px
   на md (768-991) даёт сайдбар 240px + контент 480px, а на lg+ (>=992) сайдбар
   270px + контент 810px — для дашборда с табличками и счётчиками всё равно
   тесно. Поднимаем максимум до 1400px на lg+. Селектор :has() (CSS Selectors L4)
   автоматически распознаёт «контейнер с .row.lk-grid внутри» — не нужно править
   все 14 шаблонов вручную. */
@media (min-width: 992px) {
    .container.lk-head,
    .container:has(> .row.lk-grid),
    .container:has(> .dash-messages) {
        max-width: 1400px;
    }
}

/* Сайдбар-навигация */
.lk-nav {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-4);
}
@media (min-width: 992px) {
    .lk-nav {
        position: sticky;
        top: 100px;
    }
}
.lk-nav__head {
    padding: var(--sp-2) var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-3);
}
.lk-nav__user {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 1.125rem;
    color: var(--c-ink);
    margin: var(--sp-1) 0 0;
    line-height: 1.3;
    word-break: break-word;
}
.lk-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lk-nav__divider {
    height: 1px;
    background: var(--c-border);
    margin: var(--sp-2) 0;
}
.lk-nav__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    color: var(--c-ink);
    text-decoration: none;
    border-radius: var(--r-sm);
    font-size: var(--fs-body-sm);
    font-weight: 500;
    transition: background var(--anim-fast) var(--ease-out),
                color var(--anim-fast) var(--ease-out);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.lk-nav__link svg {
    color: var(--c-ink-muted);
    flex-shrink: 0;
    transition: color var(--anim-fast) var(--ease-out);
}
.lk-nav__link:hover {
    background: var(--c-surface-2);
    color: var(--c-ink);
    text-decoration: none;
}
.lk-nav__link:hover svg { color: var(--c-accent); }
.lk-nav__link.is-active {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-weight: 600;
}
.lk-nav__link.is-active svg { color: var(--c-accent); }
.lk-nav__link--external svg { color: var(--c-ink-muted); }

/* Бейджик-счётчик в навигации */
.lk-nav__badge {
    margin-left: auto;
    background: var(--c-surface-2);
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    min-width: 24px;
    text-align: center;
}
.lk-nav__link.is-active .lk-nav__badge {
    background: rgba(255, 255, 255, 0.45);
    color: var(--c-accent);
}
.lk-nav__badge--attention {
    background: color-mix(in srgb, #B7861E 18%, transparent);
    color: #8A641A;
}
.lk-nav__link--logout { color: var(--c-ink-muted); }
.lk-nav__link--logout:hover { color: var(--c-danger); }
.lk-nav__link--logout:hover svg { color: var(--c-danger); }
.lk-nav__logout-form { margin: 0; }

/* Контентная область */
.lk-content-col { min-width: 0; }

/* Карточка ЛК (универсальная) */
.lk-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-5);
    overflow: hidden;
}
.lk-card--accent {
    background: var(--c-accent-soft);
    border-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
}
.lk-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--c-border);
}
.lk-card--accent .lk-card__head { border-bottom-color: color-mix(in srgb, var(--c-accent) 25%, transparent); }
.lk-card__head--clickable { cursor: pointer; user-select: none; }
.lk-card__head--clickable:hover { background: var(--c-surface-2); }
.lk-card__title {
    font-size: var(--fs-h3);
    margin: 0;
    line-height: 1.2;
    color: var(--c-ink);
}
.lk-card__sub {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: var(--sp-1) 0 0;
}
.lk-card__count {
    color: var(--c-ink-muted);
    font-weight: 400;
    font-size: 0.85em;
}
.lk-card__chevron {
    color: var(--c-ink-muted);
    transition: transform var(--anim-base) var(--ease-out);
    display: inline-flex;
}
.lk-card.is-open .lk-card__chevron { transform: rotate(180deg); }
.lk-card__body {
    padding: var(--sp-6);
}
.lk-card__body--flush { padding: 0; }
.lk-card__text {
    color: var(--c-ink-2);
    margin: var(--sp-3) 0 0;
    line-height: 1.5;
    font-size: var(--fs-body-sm);
}
.lk-card__cta { width: 100%; margin-top: var(--sp-4); }
.lk-card__submit { margin-top: var(--sp-4); }

/* Свёртываемая карточка */
.lk-card--collapsible .lk-card__body { display: none; }
.lk-card--collapsible.is-open .lk-card__body { display: block; }

/* Карточка абонемента */
.lk-sub-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    padding: var(--sp-6);
    margin-bottom: var(--sp-5);
}
@media (min-width: 768px) {
    .lk-sub-card {
        grid-template-columns: 1fr auto;
        gap: var(--sp-6);
        align-items: start;
    }
}
.lk-sub-card--active {
    background: linear-gradient(135deg,
        var(--c-accent-soft) 0%,
        var(--c-surface) 70%);
    border-color: color-mix(in srgb, var(--c-accent) 20%, transparent);
}
.lk-sub-card__head { min-width: 0; }
.lk-sub-card__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: var(--sp-3) 0 var(--sp-2);
    line-height: 1.15;
}
.lk-sub-card__meta {
    color: var(--c-ink-2);
    margin: 0;
    font-size: var(--fs-body-sm);
    line-height: 1.5;
}
.lk-sub-card__price {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-1);
}
@media (max-width: 767px) {
    .lk-sub-card__price { align-items: flex-start; text-align: left; }
}
.lk-sub-card__price-label {
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.lk-sub-card__price strong {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--c-ink);
    font-weight: 600;
    line-height: 1;
}
.lk-sub-card__price-final { color: var(--c-accent) !important; }
.lk-sub-card__price-strike {
    color: var(--c-ink-muted);
    text-decoration: line-through;
    font-size: var(--fs-body);
    font-weight: 500;
}
.lk-sub-card__note {
    grid-column: 1 / -1;
    color: var(--c-ink-2);
    margin: 0;
    line-height: 1.5;
    font-size: var(--fs-body-sm);
}

.lk-renew__lead {
    font-size: var(--fs-body-lg);
    margin: 0 0 var(--sp-4);
}
.lk-renew__strike {
    color: var(--c-ink-muted);
    text-decoration: line-through;
    font-weight: 500;
    margin-left: var(--sp-2);
}

/* Баннеры */
.lk-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-success-soft);
    border: 1px solid color-mix(in srgb, var(--c-success) 30%, transparent);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-5);
}
.lk-banner__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-success) 20%, transparent);
    color: var(--c-success);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lk-banner__body { flex: 1; min-width: 220px; }
.lk-banner__title {
    font-weight: 600;
    margin: 0 0 var(--sp-1);
    color: var(--c-ink);
}
.lk-banner__text {
    color: var(--c-ink-2);
    margin: 0;
    font-size: var(--fs-body-sm);
    line-height: 1.5;
}

/* Таблицы ЛК */
.lk-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.lk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body-sm);
}
.lk-table thead {
    background: var(--c-surface-2);
}
.lk-table th {
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-bottom: 1px solid var(--c-border);
}
.lk-table td {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-ink);
    vertical-align: middle;
}
.lk-table tbody tr:last-child td { border-bottom: 0; }
.lk-table__num-col { text-align: right; white-space: nowrap; }
.lk-table__action-col { text-align: right; white-space: nowrap; width: 1px; }
.lk-table__link {
    color: var(--c-ink);
    text-decoration: none;
    font-weight: 500;
}
.lk-table__link:hover { color: var(--c-accent); text-decoration: none; }
.lk-table__total-row td {
    border-top: 2px solid var(--c-border);
    padding-top: var(--sp-4);
    font-size: var(--fs-body);
}
.lk-table__total {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: var(--c-accent);
    font-weight: 600;
}
.lk-table__discount-row td {
    color: var(--c-ink-muted);
    border-bottom: 1px dashed var(--c-border);
}

.lk-order-line {
    line-height: 1.4;
    padding: 1px 0;
}
.lk-order-line--more {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin-top: var(--sp-1);
}

/* Адаптивная таблица: на мобильном превращается в карточки */
@media (max-width: 640px) {
    .lk-table thead { display: none; }
    .lk-table, .lk-table tbody, .lk-table tr, .lk-table td {
        display: block;
        width: 100%;
    }
    /* На мобильном таблица обычно живёт внутри .lk-card__body--flush
       (padding: 0). Без горизонтального паддинга на строках содержимое
       прилипало бы к краю карточки. Даём отступ на самом ряду — это сохраняет
       работу с блоковым layout'ом и pseudo-элементом data-label. */
    .lk-table tr {
        padding: var(--sp-4);
        border-bottom: 1px solid var(--c-border);
    }
    .lk-table tbody tr:last-child { border-bottom: 0; }
    .lk-table td {
        border-bottom: 0;
        padding: var(--sp-1) 0;
        text-align: left;
        white-space: normal;
        word-break: break-word;
    }
    .lk-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 110px;
        color: var(--c-ink-muted);
        font-size: var(--fs-meta);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
        margin-right: var(--sp-2);
    }
    .lk-table__num-col, .lk-table__action-col {
        text-align: left;
        width: auto;
    }
}

/* Бейджи статусов */
.lk-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--fs-meta);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.lk-badge--ok {
    background: var(--c-success-soft);
    color: var(--c-success);
}
.lk-badge--warn {
    background: color-mix(in srgb, #B7861E 15%, transparent);
    color: #8A641A;
}
.lk-badge--err {
    background: var(--c-danger-soft);
    color: var(--c-danger);
}
.lk-badge--neutral {
    background: var(--c-surface-2);
    color: var(--c-ink-muted);
}
.lk-badge--accent {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    margin-right: var(--sp-1);
}
.lk-badge--lg {
    padding: 6px 14px;
    font-size: var(--fs-body-sm);
}

/* Партнёрский — статистические карточки */
.lk-stat-grid { margin-bottom: var(--sp-6); }
.lk-stat {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.lk-stat__num {
    font-size: clamp(2.25rem, 5vw, 3rem);
    line-height: 1;
    margin: var(--sp-2) 0 var(--sp-1);
    color: var(--c-accent);
    font-weight: 600;
}
.lk-stat__label {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    margin: 0 0 var(--sp-3);
    line-height: 1.4;
}
.lk-stat__sub {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: 0 0 var(--sp-4);
}
.lk-stat__sub strong { color: var(--c-ink); }
.lk-stat__link {
    margin-top: auto;
    color: var(--c-accent);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--fs-body-sm);
}
.lk-stat__link:hover { text-decoration: underline; }

/* Блок «К выплате» */
.lk-payout-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
    padding: var(--sp-6);
}
.lk-payout-cta__body { min-width: 220px; flex: 1; }
.lk-payout-cta__amount {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--c-accent);
    margin: var(--sp-2) 0 var(--sp-1);
    line-height: 1;
}
.lk-payout-cta__meta {
    color: var(--c-ink-2);
    margin: 0;
    font-size: var(--fs-body-sm);
}

/* Tabs (фильтр по статусу) */
.lk-tabs {
    list-style: none;
    margin: 0 0 var(--sp-5);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--c-border);
}
.lk-tabs__link {
    display: inline-block;
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-ink-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    border-bottom: 2px solid transparent;
    transition: color var(--anim-fast) var(--ease-out),
                border-color var(--anim-fast) var(--ease-out);
    margin-bottom: -1px;
}
.lk-tabs__link:hover {
    color: var(--c-ink);
    text-decoration: none;
}
.lk-tabs__link.is-active {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

/* Дополнительные элементы таблиц ЛК */
.lk-table__sub {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin-top: 2px;
}

/* Шапка списка выплат: H2 + ссылка справа */
.lk-payouts-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: var(--sp-6) 0 var(--sp-4);
}
.lk-payouts-head__title {
    font-size: var(--fs-h3);
    margin: 0;
    line-height: 1.2;
    color: var(--c-ink);
}
.lk-payouts-head__link {
    color: var(--c-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-body-sm);
}
.lk-payouts-head__link:hover { text-decoration: underline; }

/* Действия формы (submit + cancel) */
.lk-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    margin-top: var(--sp-5);
}
.lk-form-actions__cancel {
    color: var(--c-ink-muted);
    text-decoration: none;
    font-size: var(--fs-body-sm);
}
.lk-form-actions__cancel:hover { color: var(--c-ink); text-decoration: underline; }

/* Inline code (для промокодов) */
.lk-code {
    background: var(--c-surface-2);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    font-family: 'Manrope', monospace;
    font-size: 0.95em;
    color: var(--c-ink);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ─── 13e. Админ-дашборд ─────────────────────────────────────────── */

/* Сообщения (success/info/warning/error) */
.dash-messages {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.dash-message {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: var(--fs-body-sm);
    line-height: 1.5;
}
.dash-message--success {
    background: var(--c-success-soft);
    color: var(--c-success);
    border-color: color-mix(in srgb, var(--c-success) 30%, transparent);
}
.dash-message--warning {
    background: color-mix(in srgb, #B7861E 12%, transparent);
    color: #6E4F12;
    border-color: color-mix(in srgb, #B7861E 30%, transparent);
}
.dash-message--error {
    background: var(--c-danger-soft);
    color: var(--c-danger);
    border-color: color-mix(in srgb, var(--c-danger) 30%, transparent);
}
.dash-message code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92em;
}

/* ── Виджеты «Поступление денег» ─────────────────────────────── */

.dash-revenue-row { margin-bottom: var(--sp-8); }
.dash-revenue-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-4);
}
.dash-revenue-row__title {
    font-size: var(--fs-h3);
    margin: 0;
    line-height: 1.2;
    color: var(--c-ink);
}
.dash-revenue-row__sub {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
}

/* Карточка одного показателя */
.dash-revenue {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    overflow: hidden;
    transition: border-color var(--anim-fast) var(--ease-out),
                box-shadow var(--anim-fast) var(--ease-out);
}
.dash-revenue::before {
    /* акцентная teal-полоса сверху */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--c-accent);
}
.dash-revenue:hover {
    border-color: color-mix(in srgb, var(--c-accent) 40%, transparent);
    box-shadow: 0 4px 16px rgba(15, 82, 87, 0.08);
}

/* Главная карточка (30 дней) — выделена сильнее */
.dash-revenue--primary {
    background: linear-gradient(135deg,
        var(--c-accent-soft) 0%,
        var(--c-surface) 70%);
    border-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.dash-revenue--primary::before { height: 6px; }

.dash-revenue__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.dash-revenue__period {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.dash-revenue__amount {
    display: block;
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1;
    color: var(--c-accent);
    font-weight: 600;
    margin: var(--sp-1) 0 var(--sp-2);
}
.dash-revenue__caption {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    line-height: 1.4;
    margin: auto 0 0;
}

/* Дельта-пилюля */
.dash-revenue__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--fs-meta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.4;
}
.dash-revenue__delta svg { flex-shrink: 0; }
.dash-revenue__delta--up {
    background: var(--c-success-soft);
    color: var(--c-success);
}
.dash-revenue__delta--down {
    background: var(--c-danger-soft);
    color: var(--c-danger);
}

/* Виджеты-счётчики на главной */
.dash-widgets { margin-bottom: var(--sp-2); }
.dash-widget {
    display: block;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    text-decoration: none;
    color: var(--c-ink);
    height: 100%;
    transition: border-color var(--anim-fast) var(--ease-out),
                transform var(--anim-fast) var(--ease-out);
}
.dash-widget:hover {
    border-color: var(--c-accent);
    color: var(--c-ink);
    text-decoration: none;
    transform: translateY(-2px);
}
.dash-widget--attention {
    border-color: color-mix(in srgb, #B7861E 40%, transparent);
    background: color-mix(in srgb, #B7861E 6%, var(--c-surface));
}
.dash-widget__num {
    display: block;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
    margin: var(--sp-2) 0;
    color: var(--c-accent);
    font-weight: 600;
}
.dash-widget--attention .dash-widget__num { color: #8A641A; }
.dash-widget__label {
    display: block;
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
}

/* lk-card head — ссылка справа */
.lk-card__head-link {
    color: var(--c-accent);
    text-decoration: none;
    font-size: var(--fs-body-sm);
    font-weight: 600;
}
.lk-card__head-link:hover { text-decoration: underline; }

/* ── Лента событий (timeline-style) ─────────────────────────── */

.dash-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    --dash-feed-color: var(--c-border-strong);
}
.dash-feed-item {
    --dash-feed-color: var(--c-ink-muted);
    display: grid;
    grid-template-columns: 52px 14px 1fr;
    gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-4) var(--sp-5);
    position: relative;
    font-size: var(--fs-body-sm);
}
.dash-feed-item + .dash-feed-item::before {
    /* вертикальная линия timeline между событиями */
    content: "";
    position: absolute;
    left: calc(52px + var(--sp-3) + 6px);
    top: -8px;
    bottom: calc(100% - var(--sp-4) + 8px);
    width: 2px;
    background: var(--c-border);
}
.dash-feed-item__time {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    white-space: nowrap;
    text-align: right;
    padding-top: 4px;
    line-height: 1.3;
}
.dash-feed-item__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c-surface);
    border: 3px solid var(--dash-feed-color);
    margin-top: 5px;
    position: relative;
    z-index: 1;
}
.dash-feed-item__body { min-width: 0; }
.dash-feed-item__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: 2px;
}
.dash-feed-item__type {
    font-weight: 600;
    color: var(--dash-feed-color);
    font-size: var(--fs-body-sm);
    line-height: 1.3;
}
.dash-feed-item__amount {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    color: var(--c-ink);
    font-size: var(--fs-body);
    white-space: nowrap;
}
.dash-feed-item__main {
    color: var(--c-ink);
    line-height: 1.5;
    word-break: break-word;
}
.dash-feed-item__main a { color: var(--c-ink); text-decoration: none; }
.dash-feed-item__main a:hover { color: var(--c-accent); text-decoration: underline; }
.dash-feed-item__anon {
    color: var(--c-ink-muted);
    font-style: italic;
}
.dash-feed-item__notice {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin-top: var(--sp-1);
    line-height: 1.4;
}

/* Цветовая раскраска через CSS-переменную */
.dash-feed-item--success  { --dash-feed-color: var(--c-success); }
.dash-feed-item--info     { --dash-feed-color: var(--c-accent); }
.dash-feed-item--attention { --dash-feed-color: #B7861E; }
.dash-feed-item--partner  { --dash-feed-color: #7B4FB8; }
.dash-feed-item--admin    { --dash-feed-color: var(--c-ink-muted); }
.dash-feed-item--danger   { --dash-feed-color: var(--c-danger); }

/* Мобильная адаптация — сворачиваем time под dot */
@media (max-width: 640px) {
    .dash-feed-item {
        grid-template-columns: 14px 1fr;
        gap: var(--sp-3);
    }
    .dash-feed-item__time {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
        padding-top: 0;
        margin-bottom: 2px;
    }
    .dash-feed-item__dot { grid-column: 1; grid-row: 1 / span 2; margin-top: 8px; }
    .dash-feed-item__body { grid-column: 2; grid-row: 2; }
    .dash-feed-item + .dash-feed-item::before {
        left: 6px;
    }
}

/* Фильтр-пилюли по типам событий */
.dash-event-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}
.dash-event-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 4px 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    text-decoration: none;
    transition: all var(--anim-fast) var(--ease-out);
}
.dash-event-pill:hover { border-color: var(--c-accent); color: var(--c-ink); text-decoration: none; }
.dash-event-pill.is-active {
    background: var(--c-accent);
    color: var(--c-on-accent);
    border-color: var(--c-accent);
}
.dash-event-pill.is-active:hover { color: var(--c-on-accent); }
.dash-event-pill--success { color: var(--c-success); }
.dash-event-pill--attention { color: #8A641A; }
.dash-event-pill--partner { color: #5B3690; }
.dash-event-pill--danger { color: var(--c-danger); }

/* ── Комментарии: треды (страница /dash/comments/) ──────────── */

.dash-thread-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}
.dash-thread {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
    border-left: 3px solid #B7861E; /* attention: без ответа */
}
.dash-thread--answered {
    border-left-color: var(--c-success);
}
.dash-thread--archived {
    border-left-color: var(--c-ink-muted);
    opacity: 0.85;
}

/* Шапка треда */
.dash-thread__head {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}
/* На мобильном третья auto-колонка (head-actions с продуктом + кнопкой архива)
   не помещается рядом с аватаром и автором — сумма ширин превышает 100% и
   вторая/третья колонка вылезают за пределы карточки. Стэкаем actions под
   автором, выравниваем по левому краю (как остальной текст). */
@media (max-width: 640px) {
    .dash-thread__head {
        grid-template-columns: 40px 1fr;
        grid-template-areas:
            "avatar author"
            "actions actions";
        padding: var(--sp-4);
    }
    .dash-thread__avatar { grid-area: avatar; }
    .dash-thread__author { grid-area: author; }
    .dash-thread__head-actions {
        grid-area: actions;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        max-width: 100%;
    }
}
.dash-thread__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.dash-thread__author { min-width: 0; }
.dash-thread__name {
    color: var(--c-ink);
    font-size: var(--fs-body);
    line-height: 1.3;
    display: block;
}
.dash-thread__author-meta {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-top: 2px;
}
.dash-thread__head-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-2);
    flex-shrink: 0;
    max-width: 280px;
}
.dash-thread__product {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--c-accent);
    text-decoration: none;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    max-width: 100%;
}
.dash-thread__product:hover { text-decoration: underline; color: var(--c-accent); }
.dash-thread__product-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-thread__archive-form { margin: 0; }
.dash-thread__archive-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-ink-muted);
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-meta);
    cursor: pointer;
    transition: border-color var(--anim-fast) var(--ease-out),
                color var(--anim-fast) var(--ease-out),
                background var(--anim-fast) var(--ease-out);
    font-family: inherit;
}
.dash-thread__archive-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: var(--c-accent-soft);
}

/* Бейдж «в архиве» рядом с именем автора */
.dash-thread__badge {
    display: inline-block;
    background: var(--c-surface-2);
    color: var(--c-ink-muted);
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-meta);
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: var(--sp-2);
    vertical-align: middle;
}

/* Тело комментария */
.dash-thread__body {
    padding: var(--sp-4) var(--sp-5);
    color: var(--c-ink);
    line-height: 1.6;
    word-break: break-word;
}
/* На мобильном sp-5 (20px) горизонтальный паддинг + 16px виден ок,
   но reply отступал на (sp-5 + sp-6 = 44px) слева — для узких экранов
   слишком много. Сжимаем. */
@media (max-width: 640px) {
    .dash-thread__body { padding: var(--sp-4); }
}

/* Ответы от staff (вложенные) */
.dash-thread__reply {
    margin: 0 var(--sp-5) var(--sp-4) calc(var(--sp-5) + var(--sp-6));
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-accent-soft);
    border-radius: var(--r-sm);
    position: relative;
}
@media (max-width: 640px) {
    .dash-thread__reply {
        margin: 0 var(--sp-4) var(--sp-4) var(--sp-4);
    }
    .dash-thread__reply::before { display: none; } /* линия-связка некрасиво лежит на узком */
}
.dash-thread__reply::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--sp-5));
    top: 16px;
    width: var(--sp-4);
    height: 2px;
    background: var(--c-border-strong);
}
.dash-thread__reply-meta {
    color: var(--c-accent);
    font-size: var(--fs-meta);
    margin-bottom: var(--sp-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.dash-thread__reply-meta span { color: var(--c-ink-muted); text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: var(--sp-1); }
.dash-thread__reply-mod {
    background: color-mix(in srgb, #B7861E 18%, transparent);
    color: #8A641A !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}
.dash-thread__reply-text {
    margin: 0;
    line-height: 1.55;
    color: var(--c-ink);
    word-break: break-word;
}

/* Форма ответа */
.dash-thread__form {
    display: flex;
    gap: var(--sp-2);
    align-items: stretch;
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
}
.dash-thread__form textarea {
    flex: 1;
    min-width: 0;
    resize: vertical;
}
.dash-thread__form button { flex-shrink: 0; align-self: flex-start; }

@media (max-width: 540px) {
    /* dash-thread__head: layout уже обработан выше через grid-template-areas
       на 640px (avatar/author/actions стэкуются). Здесь только форма. */
    .dash-thread__form {
        flex-direction: column;
        padding: var(--sp-3) var(--sp-4) var(--sp-4);
    }
    .dash-thread__form button { align-self: stretch; }
}

/* ── Мини-треды на overview ────────────────────────────────── */

/* Tom Select — мелкие правки под бренд */
.ts-wrapper.form-select { padding: 0; }
.ts-wrapper .ts-control {
    background: var(--c-surface);
    color: var(--c-ink);          /* выбранное значение / введённый текст поиска */
    border-radius: var(--r-md);
}
.ts-wrapper .ts-control input { color: var(--c-ink); }
.ts-wrapper.focus .ts-control,
.ts-wrapper .ts-dropdown { border-color: var(--c-accent); }
.ts-dropdown {
    background: var(--c-surface); /* сам список тоже на surface */
    color: var(--c-ink);
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    margin-top: 4px;
}
.ts-dropdown .option { color: var(--c-ink); }
.ts-dropdown .active { background: var(--c-accent-soft); color: var(--c-ink); }
.ts-dropdown .ts-sub {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin-top: 2px;
}
.ts-dropdown .no-results {
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
}

/* ── Tom Select: высота как у form-control + dark theme контраст ──
   Bootstrap5-тема Tom Select задаёт padding ~6px и хардкодит
   color:#343a40 / background:#efefef для .ts-control > div (выбранный
   элемент). На нашей тёмной поверхности — нечитаемо. Перебиваем. */

/* Высота: 44px как у form-control */
.ts-wrapper.form-select .ts-control {
    min-height: 44px;
    padding: calc(var(--sp-3) - 2px) var(--sp-4);
    align-items: center;
}

/* Dark theme: цвета для всего внутри Tom Select */
html.theme-dark .ts-wrapper .ts-control,
html.theme-dark .ts-wrapper .ts-control input,
html.theme-dark .ts-wrapper .ts-control > div,
html.theme-dark .ts-wrapper .ts-control .item,
html.theme-dark .ts-dropdown,
html.theme-dark .ts-dropdown .option,
html:not(.theme-light) .ts-wrapper .ts-control,
html:not(.theme-light) .ts-wrapper .ts-control input,
html:not(.theme-light) .ts-wrapper .ts-control > div,
html:not(.theme-light) .ts-wrapper .ts-control .item,
html:not(.theme-light) .ts-dropdown,
html:not(.theme-light) .ts-dropdown .option {
    color: #F2EDE5 !important;
    background-color: transparent !important;  /* убираем bootstrap'овский #efefef chip-фон */
}

/* Сам контейнер control + dropdown — на нашей dark-поверхности */
html.theme-dark .ts-wrapper .ts-control,
html.theme-dark .ts-dropdown,
html:not(.theme-light) .ts-wrapper .ts-control,
html:not(.theme-light) .ts-dropdown {
    background-color: #2A241F !important;
    border-color: #6E5F4D !important;
}

/* Активная опция в дропдауне (hover/keyboard) — даём контрастную пару:
   accent-фон + cream текст. Tom Select bootstrap5 использует
   var(--bs-tertiary-bg) и var(--bs-body-color), которые в dark-тем
   могут резолвиться в близкие к фону цвета. Перебиваем явно. */
.ts-dropdown .active {
    background-color: var(--c-accent-soft) !important;
    color: var(--c-ink) !important;
}
html.theme-dark .ts-dropdown .active,
html:not(.theme-light) .ts-dropdown .active {
    background-color: #1A4A4D !important;  /* теплее accent-soft, лучше виден */
    color: #FFFFFF !important;
}

/* Placeholder input'а Tom Select. В single-mode выбранное значение
   показывается ИМЕННО как placeholder поискового input'а, поэтому
   тёмный placeholder = невидимый "выбранный текст". Делаем cream. */
.ts-control input::placeholder {
    color: var(--c-ink) !important;
    opacity: 1 !important;
}
html.theme-dark .ts-control input::placeholder,
html:not(.theme-light) .ts-control input::placeholder {
    color: #F2EDE5 !important;
    opacity: 1 !important;
}

/* Опции в дропдауне (для dark) — все .option, не только активные */
html.theme-dark .ts-dropdown [data-selectable],
html.theme-dark .ts-dropdown [data-value],
html:not(.theme-light) .ts-dropdown [data-selectable],
html:not(.theme-light) .ts-dropdown [data-value] {
    color: #F2EDE5 !important;
}

/* Подвал dash-формы (отбивка перед submit-кнопкой) */
.dash-task-form__actions {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-5);
}

/* File input — стилизуем нативную кнопку «Выберите файл» под бренд */
.form-control[type="file"] {
    padding: 0;
    overflow: hidden;
}
.form-control[type="file"]::file-selector-button {
    padding: var(--sp-3) var(--sp-4);
    margin-right: var(--sp-4);
    background: var(--c-surface-2);
    border: 0;
    border-right: 1px solid var(--c-border);
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-body-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--anim-fast) var(--ease-out),
                color var(--anim-fast) var(--ease-out);
}
.form-control[type="file"]::file-selector-button:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

/* ─── 13f. Авторизация (login / signup / password reset) ─────────── */

.auth-page {
    padding: var(--sp-12) 0 var(--sp-16);
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.auth-card {
    max-width: 480px;
    margin: 0 auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-8);
    position: relative;
    overflow: hidden;
}
.auth-card::before {
    /* акцентная teal-полоса сверху */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--c-accent);
}

.auth-card--centered {
    text-align: center;
}

.auth-card__head {
    margin-bottom: var(--sp-6);
}
.auth-card__title {
    font-size: clamp(1.625rem, 3vw, 2rem);
    line-height: 1.15;
    margin: var(--sp-2) 0 var(--sp-3);
    color: var(--c-ink);
}
.auth-card__lead {
    color: var(--c-ink-2);
    margin: 0;
    line-height: 1.55;
    font-size: var(--fs-body);
}
.auth-card__text {
    color: var(--c-ink-2);
    line-height: 1.55;
    margin: 0 0 var(--sp-3);
}
.auth-card__text--small {
    font-size: var(--fs-body-sm);
    color: var(--c-ink-muted);
}

/* Иконка для success/error состояний */
.auth-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--sp-4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-card__icon--success {
    background: var(--c-success-soft);
    color: var(--c-success);
}
.auth-card__icon--danger {
    background: var(--c-danger-soft);
    color: var(--c-danger);
}

.auth-card__alert {
    background: var(--c-danger-soft);
    border: 1px solid color-mix(in srgb, var(--c-danger) 30%, transparent);
    color: var(--c-danger);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-body-sm);
    line-height: 1.5;
}
.auth-card__alert a { color: var(--c-danger); text-decoration: underline; font-weight: 600; }

.auth-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.auth-card__foot {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border);
    text-align: center;
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
}
.auth-card__foot a {
    color: var(--c-accent);
    font-weight: 600;
}

/* Форма входа/регистрации */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.auth-form__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.auth-form__label-row .checkout-field__label { margin-bottom: 0; }
.auth-form__forgot {
    color: var(--c-accent);
    font-size: var(--fs-meta);
    font-weight: 600;
    text-decoration: none;
}
.auth-form__forgot:hover { text-decoration: underline; }
.auth-form__submit { width: 100%; margin-top: var(--sp-2); }
.auth-form__legal {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    line-height: 1.5;
    margin: var(--sp-3) 0 0;
    text-align: center;
}
.auth-form__legal a { color: var(--c-ink-muted); text-decoration: underline; }
.auth-form__legal a:hover { color: var(--c-accent); }

@media (max-width: 540px) {
    .auth-page { padding-top: var(--sp-8); }
    .auth-card { padding: var(--sp-6) var(--sp-5); }
}

/* ─── 13g. Партнёрская программа (лендинг /partnership/) ─────── */

/* Hero */
.partnership-hero {
    padding: var(--sp-12) 0 var(--sp-16);
}
.partnership-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.05;
    color: var(--c-ink);
    margin: var(--sp-4) 0 var(--sp-5);
    max-width: 820px;
}
.partnership-hero__title em {
    font-style: italic;
    color: var(--c-accent);
    font-weight: 400;
}
.partnership-hero__lead {
    font-size: var(--fs-body-lg);
    color: var(--c-ink-2);
    line-height: 1.55;
    max-width: 720px;
    margin: 0 0 var(--sp-6);
}
.partnership-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* Секции */
.partnership-section__head {
    text-align: center;
    margin-bottom: var(--sp-10);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.partnership-section__head h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 var(--sp-3);
    color: var(--c-ink);
}
.partnership-section__sub {
    color: var(--c-ink-2);
    font-size: var(--fs-body-lg);
    margin: 0;
    line-height: 1.5;
}

/* Роли — 3 карточки */
.partnership-roles {
    padding: var(--sp-16) 0;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}
.partnership-role {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-6);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: border-color var(--anim-fast) var(--ease-out),
                transform var(--anim-fast) var(--ease-out);
}
.partnership-role:hover {
    border-color: var(--c-accent);
    transform: translateY(-2px);
}
.partnership-role--featured {
    background: var(--c-accent-soft);
    border-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.partnership-role__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-2);
}
.partnership-role--featured .partnership-role__icon {
    background: var(--c-surface);
}
.partnership-role__title {
    font-size: var(--fs-h3);
    margin: 0;
    line-height: 1.2;
    color: var(--c-ink);
}
.partnership-role__share {
    margin: 0;
    font-size: var(--fs-body-lg);
    color: var(--c-ink-2);
}
.partnership-role__share strong {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 2.25rem;
    color: var(--c-accent);
    font-weight: 600;
    line-height: 1;
    margin-right: var(--sp-1);
}
.partnership-role__lead {
    color: var(--c-ink-2);
    line-height: 1.55;
    margin: 0;
}
.partnership-role__perks {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: auto;
}
.partnership-role__perks li {
    color: var(--c-ink);
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    padding-left: var(--sp-4);
    position: relative;
}
.partnership-role__perks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: var(--c-accent);
    border-radius: 50%;
}

/* Шаги — как это работает */
.partnership-how {
    padding: var(--sp-16) 0;
}
.partnership-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    max-width: 800px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .partnership-steps { grid-template-columns: 1fr 1fr; }
}
.partnership-step {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}
.partnership-step__num {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
}
.partnership-step__title {
    font-size: var(--fs-h4);
    margin: 0 0 var(--sp-2);
    line-height: 1.2;
}
.partnership-step p {
    color: var(--c-ink-2);
    margin: 0;
    line-height: 1.55;
}

/* FAQ */
.partnership-faq {
    padding: var(--sp-16) 0;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}
.partnership-faq__item {
    border-bottom: 1px solid var(--c-border);
    max-width: 800px;
    margin: 0 auto;
}
.partnership-faq__item:last-child { border-bottom: 0; }
.partnership-faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--sp-5) 0;
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 600;
    color: var(--c-ink);
    position: relative;
    padding-right: var(--sp-8);
    transition: color var(--anim-fast) var(--ease-out);
}
.partnership-faq__item summary::-webkit-details-marker { display: none; }
.partnership-faq__item summary:hover { color: var(--c-accent); }
.partnership-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Manrope', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--c-accent);
    transition: transform var(--anim-fast) var(--ease-out);
}
.partnership-faq__item[open] summary::after {
    content: "−";
}
.partnership-faq__item p {
    color: var(--c-ink-2);
    line-height: 1.6;
    margin: 0 0 var(--sp-5);
    padding-right: var(--sp-8);
}

/* CTA */
.partnership-cta {
    padding: var(--sp-16) 0;
}
.partnership-cta__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(135deg,
        var(--c-accent-soft) 0%,
        var(--c-surface) 100%);
    border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
    border-radius: var(--r-lg);
    padding: var(--sp-12) var(--sp-8);
}
.partnership-cta__inner h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 var(--sp-4);
    color: var(--c-ink);
}
.partnership-cta__inner > p {
    color: var(--c-ink-2);
    font-size: var(--fs-body-lg);
    line-height: 1.55;
    margin: 0 0 var(--sp-6);
}
.partnership-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-2);
}
.partnership-cta__actions .btn {
    --btn-h: 60px;
    padding: 0 var(--sp-10);
}
.partnership-cta__note {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: var(--sp-6) 0 0;
}
.partnership-cta__note a { color: var(--c-accent); }

/* ─── 13h. Отзывы /otzyvy/ ─────────────────────────────────────── */

/* Hero */
.reviews-hero {
    padding: var(--sp-12) 0 var(--sp-12);
}
.reviews-hero__title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    color: var(--c-ink);
    margin: var(--sp-4) 0 var(--sp-6);
    max-width: 720px;
}
.reviews-hero__lead {
    color: var(--c-ink-2);
    font-size: var(--fs-body-lg);
    line-height: 1.55;
    margin: var(--sp-8) 0 0;
    max-width: 720px;
}

/* Stats: avg score + distribution */
.reviews-hero__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: center;
    background: linear-gradient(135deg,
        var(--c-accent-soft) 0%,
        var(--c-surface) 100%);
    border: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent);
    border-radius: var(--r-md);
    padding: var(--sp-6);
}
@media (min-width: 768px) {
    .reviews-hero__stats { grid-template-columns: auto 1fr; gap: var(--sp-10); }
}
.reviews-hero__avg {
    text-align: center;
}
.reviews-hero__avg-num {
    display: block;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1;
    color: var(--c-accent);
    font-weight: 600;
}
.reviews-hero__avg-stars {
    color: var(--c-accent);
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    margin: var(--sp-2) 0 var(--sp-2);
}
.reviews-hero__avg-meta {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    margin: 0;
}

.reviews-distribution {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
}
.reviews-distribution__row {
    display: grid;
    grid-template-columns: 36px 1fr 48px;
    gap: var(--sp-3);
    align-items: center;
    font-size: var(--fs-body-sm);
}
.reviews-distribution__stars {
    color: var(--c-accent);
    font-weight: 600;
}
.reviews-distribution__bar {
    display: block;
    height: 8px;
    background: var(--c-surface);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--c-border);
}
.reviews-distribution__fill {
    display: block;
    height: 100%;
    background: var(--c-accent);
    transition: width 0.4s ease-out;
}
.reviews-distribution__pct {
    color: var(--c-ink-muted);
    text-align: right;
}

/* Список отзывов */
.reviews-list-wrap { padding-bottom: var(--sp-16); }
.reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}
@media (min-width: 768px) {
    .reviews-list { grid-template-columns: 1fr 1fr; }
}

.review-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: border-color var(--anim-fast) var(--ease-out);
}
.review-card:hover { border-color: color-mix(in srgb, var(--c-accent) 30%, transparent); }

.review-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.review-card__author {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}
.review-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
}
.review-card__name {
    color: var(--c-ink);
    display: block;
    line-height: 1.3;
    word-break: break-word;
}
.review-card__date {
    display: block;
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin-top: 2px;
}
.review-card__rating {
    color: var(--c-accent);
    font-size: 1rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.review-card__star--off { color: var(--c-border-strong); }

.review-card__text {
    color: var(--c-ink);
    line-height: 1.6;
    margin: 0;
    word-break: break-word;
}

.review-card__product {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: 0;
}
.review-card__product a {
    color: var(--c-accent);
    font-weight: 600;
}

.review-card__reply {
    background: var(--c-accent-soft);
    border-left: 3px solid var(--c-accent);
    padding: var(--sp-3) var(--sp-4);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin-top: var(--sp-2);
}
.review-card__reply-label {
    display: block;
    font-size: var(--fs-meta);
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: var(--sp-1);
}
.review-card__reply p { margin: 0; line-height: 1.5; }

/* Форма оставления отзыва */
.reviews-form-wrap { padding-bottom: var(--sp-12); }
.reviews-form {
    max-width: 720px;
    margin: 0 auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-8) var(--sp-6);
    position: relative;
    overflow: hidden;
}
.reviews-form::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--c-accent);
}
.reviews-form--pending {
    background: var(--c-success-soft);
    border-color: color-mix(in srgb, var(--c-success) 30%, transparent);
}
.reviews-form--pending::before { background: var(--c-success); }
.reviews-form--guest { text-align: center; }

.reviews-form__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
    margin: 0 0 var(--sp-3);
    color: var(--c-ink);
}
.reviews-form__lead,
.reviews-form__pending-text {
    color: var(--c-ink-2);
    line-height: 1.55;
    margin: 0 0 var(--sp-5);
}
.reviews-form__pending-text { margin-bottom: 0; }

/* Звёзды-рейтинг через radio (без JS) */
.review-form__rating {
    border: 0;
    padding: 0;
    margin: 0 0 var(--sp-5);
}
.review-form__stars {
    /* Reverse порядок (5 → 1), чтобы CSS-приём «hover/checked красит себя
       и все sibling после» работал — выделяем выбранную и все слева от неё. */
    display: inline-flex;
    flex-direction: row-reverse;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
}
.review-form__star {
    cursor: pointer;
    margin: 0;
    line-height: 1;
}
/* Прячем нативный radio, ловим только клавиатуру */
.review-form__star input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.review-form__star-icon {
    display: inline-block;
    font-size: 2rem;
    color: var(--c-border-strong);
    transition: color var(--anim-fast) var(--ease-out),
                transform var(--anim-fast) var(--ease-out);
    line-height: 1;
}
/* Hover / checked → жёлто-золотой.
   DOM порядок: 5,4,3,2,1. С row-reverse визуально 1,2,3,4,5.
   Заливаем «себя + DOM-siblings AFTER» — это визуально получается «себя + всё СЛЕВА». */
.review-form__star:hover .review-form__star-icon,
.review-form__star:hover ~ .review-form__star .review-form__star-icon,
.review-form__star:has(input:checked) .review-form__star-icon,
.review-form__star:has(input:checked) ~ .review-form__star .review-form__star-icon {
    color: #E0A82E;
}
.review-form__star:hover .review-form__star-icon { transform: scale(1.1); }
/* Focus для клавиатуры */
.review-form__star input:focus-visible ~ .review-form__star-icon {
    outline: 2px solid var(--c-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.reviews-form__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border);
}
.reviews-form--pending .reviews-form__actions { border-top: 0; padding-top: 0; }
.reviews-form--guest .reviews-form__actions {
    /* По центру и равная ширина — две CTA-кнопки выглядят сбалансированнее */
    justify-content: center;
}
.reviews-form--guest .reviews-form__actions .btn {
    min-width: 220px;
}
.reviews-form__note {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
}

/* Пагинация */
.reviews-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}
.reviews-pagination__link {
    color: var(--c-accent);
    font-weight: 600;
    text-decoration: none;
    padding: var(--sp-2) var(--sp-3);
}
.reviews-pagination__link:hover { text-decoration: underline; }
.reviews-pagination__counter {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
}

/* ─── 13i. Юридические страницы (оферта/политика) ──────────────── */

.legal-page__head {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-8);
}
.legal-page__meta {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: var(--sp-3) 0 0;
    line-height: 1.5;
}

.legal-page__grid { padding-bottom: var(--sp-16); }

/* Sticky-оглавление */
.legal-toc-col { margin-bottom: var(--sp-6); }
@media (min-width: 992px) {
    .legal-toc-col { margin-bottom: 0; }
}
.legal-toc {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-5);
}
@media (min-width: 992px) {
    .legal-toc { position: sticky; top: 100px; }
}
.legal-toc__head {
    color: var(--c-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--fs-meta);
    font-weight: 600;
    margin: 0 0 var(--sp-3);
}
.legal-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.legal-toc__list li {
    counter-increment: toc;
}
.legal-toc__list a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-ink-2);
    text-decoration: none;
    border-radius: var(--r-sm);
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    transition: background var(--anim-fast) var(--ease-out),
                color var(--anim-fast) var(--ease-out);
    position: relative;
    padding-left: 32px;
}
.legal-toc__list a::before {
    content: counter(toc);
    position: absolute;
    left: var(--sp-3);
    top: var(--sp-2);
    color: var(--c-ink-muted);
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-body-sm);
}
.legal-toc__list a:hover {
    background: var(--c-surface-2);
    color: var(--c-ink);
}

/* Контент */
.legal-content-col { min-width: 0; }

.legal-stub {
    background: color-mix(in srgb, #B7861E 12%, transparent);
    border: 1px solid color-mix(in srgb, #B7861E 35%, transparent);
    color: #6E4F12;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    margin-bottom: var(--sp-6);
}
.legal-stub code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.92em;
}

.legal-section {
    margin-bottom: var(--sp-10);
    scroll-margin-top: 100px;
}
.legal-section:last-child { margin-bottom: 0; }
.legal-section > h2 {
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    line-height: 1.2;
    margin: 0 0 var(--sp-4);
    color: var(--c-ink);
}
.legal-section p {
    color: var(--c-ink);
    line-height: 1.7;
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-body);
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul {
    color: var(--c-ink);
    line-height: 1.7;
    margin: 0 0 var(--sp-4);
    padding-left: var(--sp-6);
}
.legal-section ul li { margin-bottom: var(--sp-2); }
.legal-section a { color: var(--c-accent); }

.legal-dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-1) 0;
    margin: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-5);
}
@media (min-width: 540px) {
    .legal-dl {
        grid-template-columns: 220px 1fr;
        gap: var(--sp-3) var(--sp-5);
    }
}
.legal-dl dt {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    font-weight: 500;
}
.legal-dl dd {
    color: var(--c-ink);
    margin: 0;
    word-break: break-word;
}

/* ─── 13j. Обновления разработок (timeline /updates/) ──────────── */

.updates-hero {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-8);
}
.updates-list-wrap { padding-bottom: var(--sp-16); }

.updates-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.updates-feed__item {
    display: grid;
    grid-template-columns: 110px 16px 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    position: relative;
    align-items: start;
}
/* Вертикальная линия timeline между точками */
.updates-feed__item + .updates-feed__item::before {
    content: "";
    position: absolute;
    left: calc(110px + var(--sp-4) + 7px);
    top: -8px;
    bottom: calc(100% - var(--sp-4) + 8px);
    width: 2px;
    background: var(--c-border);
}

.updates-feed__date {
    text-align: right;
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    line-height: 1.3;
    padding-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.updates-feed__date-main {
    color: var(--c-ink);
    font-weight: 600;
}
.updates-feed__date-year {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
}
.updates-feed__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-surface);
    border: 3px solid var(--c-accent);
    margin-top: var(--sp-3);
    position: relative;
    z-index: 1;
}

.updates-feed__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-5) var(--sp-5);
    transition: border-color var(--anim-fast) var(--ease-out);
    min-width: 0;
}
.updates-feed__card:hover {
    border-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.updates-feed__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
}
.updates-feed__product {
    font-size: var(--fs-h3);
    line-height: 1.25;
    margin: 0;
    flex: 1;
    min-width: 0;
}
.updates-feed__product a {
    color: var(--c-ink);
    text-decoration: none;
}
.updates-feed__product a:hover { color: var(--c-accent); text-decoration: none; }
.updates-feed__version {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    background: var(--c-surface-2);
    padding: 2px 10px;
    border-radius: 999px;
}
.updates-feed__notes {
    color: var(--c-ink);
    line-height: 1.6;
    margin: 0 0 var(--sp-4);
    word-break: break-word;
}
.updates-feed__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}
.updates-feed__section {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-left: auto;
}

/* Мобильная адаптация — точка и линия таймлайна не нужны (мало места),
   дата ставится над карточкой обычным потоком. */
@media (max-width: 640px) {
    .updates-feed__item {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
    }
    .updates-feed__date {
        text-align: left;
        flex-direction: row;
        gap: var(--sp-2);
        padding-top: 0;
    }
    .updates-feed__dot { display: none; }
    .updates-feed__item + .updates-feed__item::before { display: none; }
}

/* ─── 13k. Страницы ошибок (404 / 500 / 403) ──────────────────── */

.error-page {
    padding: var(--sp-16) 0;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.error-page__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.eyebrow--danger { color: var(--c-danger); }

.error-page__num {
    font-size: clamp(5rem, 14vw, 10rem);
    line-height: 0.95;
    color: var(--c-ink);
    margin: var(--sp-3) 0 var(--sp-3);
    letter-spacing: -0.02em;
    font-weight: 600;
}
.error-page__num em {
    font-style: italic;
    color: var(--c-accent);
    font-weight: 400;
}

.error-page__lead {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    color: var(--c-ink);
    margin: 0 0 var(--sp-4);
}

.error-page__text {
    color: var(--c-ink-2);
    line-height: 1.6;
    font-size: var(--fs-body-lg);
    margin: 0 0 var(--sp-6);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* Поиск (только на 404) */
.error-page__search {
    display: flex;
    gap: var(--sp-2);
    max-width: 520px;
    margin: 0 auto var(--sp-8);
}
.error-page__search .form-control { flex: 1; min-width: 0; }
.error-page__search .btn { flex-shrink: 0; }

/* Действия (для 500/403) */
.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
}

/* Популярные ссылки */
.error-page__links {
    margin: 0 0 var(--sp-8);
    padding: var(--sp-5) var(--sp-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}
.error-page__links-label {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin: 0 0 var(--sp-3);
}
.error-page__links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
}
.error-page__links-list a {
    color: var(--c-accent);
    font-weight: 600;
    text-decoration: none;
}
.error-page__links-list a:hover { text-decoration: underline; }

.error-page__contact {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: 0;
    line-height: 1.55;
}
.error-page__contact a { color: var(--c-accent); }

/* Задачи */
.dash-tasks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.dash-task {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-border-strong);
    border-radius: var(--r-sm);
    padding: var(--sp-4) var(--sp-5);
}
.dash-task--urgent { border-left-color: var(--c-danger); }
.dash-task--high { border-left-color: #B7861E; }
.dash-task--normal { border-left-color: var(--c-accent); }
.dash-task--low { border-left-color: var(--c-ink-muted); }
.dash-task--done { opacity: 0.5; }
.dash-task--done .dash-task__title { text-decoration: line-through; }

.dash-task__main { flex: 1; min-width: 0; }
.dash-task__title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.3;
}
.dash-task__desc {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    margin: 0 0 var(--sp-2);
    line-height: 1.5;
}
.dash-task__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
}
.dash-task__priority {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.dash-task__priority--urgent { color: var(--c-danger); }
.dash-task__priority--high { color: #8A641A; }
.dash-task__priority--normal { color: var(--c-accent); }
.dash-task__actions { flex-shrink: 0; }

/* Inline-форма (выплата долга, отправка акта) */
.dash-inline-form {
    display: inline-block;
    position: relative;
}
.dash-inline-form > summary {
    list-style: none;
    cursor: pointer;
}
.dash-inline-form > summary::-webkit-details-marker { display: none; }
.dash-inline-form__form {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    margin-top: var(--sp-2);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: var(--sp-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: absolute;
    right: 0;
    z-index: 10;
    width: 280px;
    max-width: calc(100vw - var(--sp-8));
}
.dash-inline-form__form .form-control { flex: 1; min-width: 0; }
.dash-inline-form__form .btn { flex-shrink: 0; }

.dash-row-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.dash-row-actions form { margin: 0; }

/* Definition list (контакты, реквизиты) */
.lk-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-2) var(--sp-4);
    margin: 0;
    font-size: var(--fs-body-sm);
}
.lk-dl dt {
    color: var(--c-ink-muted);
    font-weight: 500;
}
.lk-dl dd {
    color: var(--c-ink);
    margin: 0;
    word-break: break-word;
}

/* Empty state */
.lk-empty {
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}
.lk-empty svg { color: var(--c-ink-muted); margin-bottom: var(--sp-4); }
.lk-empty__title {
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    margin: 0 0 var(--sp-3);
    color: var(--c-ink);
}
.lk-empty__lead {
    color: var(--c-ink-2);
    max-width: 480px;
    margin: 0 auto var(--sp-5);
    line-height: 1.55;
}
.lk-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
}

.lk-note {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin-top: var(--sp-6);
}
.lk-note a { color: var(--c-accent); }

/* ─── 14. Product card ───────────────────────────────────────────── */

.card-product {
    --card-pad: var(--sp-6);
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--card-pad);
    height: 100%;
    transition: border-color var(--anim-base) var(--ease-out),
                box-shadow var(--anim-base) var(--ease-out),
                transform var(--anim-base) var(--ease-out);
    position: relative;
    overflow: hidden;
}
.card-product:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--sh-lg);
    transform: translateY(-2px);
}

.card-product__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    min-height: 24px;
}
.card-product__article {
    font-family: 'Manrope', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    letter-spacing: 0.02em;
}
.card-product__badges {
    display: inline-flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.card-product__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--c-ink);
    margin: 0 0 var(--sp-3);
}
.card-product__title a { color: inherit; }
.card-product__title a:hover { color: var(--c-accent); text-decoration: none; }

.card-product__intro {
    color: var(--c-ink-2);
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    margin: 0 0 var(--sp-5);
    flex-grow: 1;
}

.card-product__configs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
}

.card-product__meta {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin-bottom: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
}
.card-product__meta .dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--c-border-strong); display: inline-block;
}

.card-product__price-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--sp-3);
    border-top: 1px solid var(--c-border);
    padding-top: var(--sp-4);
    margin-top: auto;
}
.card-product__price {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    display: block;
}
.card-product__price-aux {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    color: var(--c-ink-muted);
    margin-top: var(--sp-1);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.card-product__cta {
    color: var(--c-accent);
    font-weight: 600;
    font-size: var(--fs-body-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
}
.card-product__cta::after {
    content: "→";
    transition: transform var(--anim-fast) var(--ease-out);
}
.card-product:hover .card-product__cta::after {
    transform: translateX(3px);
}

/* ─── 15. Product Detail ─────────────────────────────────────────── */

.pd-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    letter-spacing: 0.02em;
}
.pd-breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pd-breadcrumb li + li::before { content: "/"; color: var(--c-border-strong); }
.pd-breadcrumb a { color: var(--c-ink-muted); }
.pd-breadcrumb a:hover { color: var(--c-accent); }
.pd-breadcrumb [aria-current="page"] { color: var(--c-ink); }

.pd-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin-bottom: var(--sp-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}
.pd-eyebrow .article-no {
    font-family: 'Manrope', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--c-accent);
}

.pd-title {
    font-size: clamp(28px, 5vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 var(--sp-6);
    font-weight: 700;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.pd-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-6);
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin-bottom: var(--sp-5);
}
.pd-meta-row strong { color: var(--c-ink); font-weight: 600; }

/* Совместимость — отдельный блок с чипсами */
.pd-compat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-8);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--c-border);
}
.pd-compat__label {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    flex-shrink: 0;
    padding-top: 2px;
}
.pd-compat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.pd-compat__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--c-surface-2);
    color: var(--c-ink);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: var(--fs-body-sm);
    font-weight: 500;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pd-intro {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: clamp(20px, 1.6vw, 24px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-ink-2);
    max-width: var(--reading-max);
    margin: 0 0 var(--sp-10);
}

.pd-anchor-nav {
    position: sticky;
    top: 64px;
    background: color-mix(in srgb, var(--c-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--c-border);
    margin: 0 calc(var(--sp-5) * -1) var(--sp-8);
    padding: 0 var(--sp-5);
    z-index: 50;
}
.pd-anchor-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}
@media (min-width: 768px) {
    /* На планшете+ всё точно влезает в одну строку — но если соберётся
       много пунктов, flex-wrap сработает естественно. */
    .pd-anchor-nav ul { flex-wrap: nowrap; }
}
.pd-anchor-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
    color: var(--c-ink-2);
    font-size: 13px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color var(--anim-fast) var(--ease-out),
                border-color var(--anim-fast) var(--ease-out),
                background var(--anim-fast) var(--ease-out);
    white-space: nowrap;
    text-decoration: none;
}
@media (min-width: 768px) {
    .pd-anchor-nav a { padding: var(--sp-4) var(--sp-4); font-size: var(--fs-body-sm); }
}
.pd-anchor-nav a:hover {
    color: var(--c-ink);
    background: var(--c-surface-2);
    text-decoration: none;
}
.pd-anchor-nav a:active,
.pd-anchor-nav a.is-active {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}
.pd-anchor-nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.pd-buy-card {
    position: sticky;
    top: calc(64px + var(--sp-4));
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    box-shadow: var(--sh-sm);
}
/* Все прямые потомки card-а — на всю ширину контентной области.
   Без этого <form> может иметь дефолтный browser-margin, а .pd-status —
   отличаться по width из-за display: flex. Из-за этого правые границы
   кнопок, статус-блока и форм гуляют на 1-3px и взгляд за это цепляется. */
.pd-buy-card > form { margin: 0; }
.pd-buy-card > form > .btn,
.pd-buy-card > .btn,
.pd-buy-card .pd-status {
    width: 100%;
    box-sizing: border-box;
}
.pd-buy-card__price {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 800;
    line-height: 1;
    color: var(--c-ink);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    display: block;
    margin-bottom: var(--sp-2);
}
.pd-buy-card__price-aux {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin-bottom: var(--sp-5);
    font-variant-numeric: tabular-nums;
}
.pd-buy-card__divider {
    margin: var(--sp-5) 0;
    border: 0;
    border-top: 1px solid var(--c-border);
}
.pd-buy-card__author {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
}
.pd-buy-card__author-name { color: var(--c-ink); font-weight: 600; }

.pd-status {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-body-sm);
    margin-bottom: var(--sp-4);
    line-height: 1.4;
}
.pd-status--ok { background: var(--c-success-soft); color: var(--c-success); border: 1px solid color-mix(in srgb, var(--c-success) 30%, transparent); }
.pd-status--warn { background: var(--c-warning-soft); color: var(--c-warning); border: 1px solid color-mix(in srgb, var(--c-warning) 30%, transparent); }
.pd-status strong { font-weight: 700; }

.pd-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    margin: var(--sp-12) 0;
}
@media (min-width: 768px) {
    .pd-pillars { grid-template-columns: repeat(2, 1fr); }
}
.pd-pillar {
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
    border-left: 2px solid var(--c-accent);
}
.pd-pillar__title {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 var(--sp-2);
    color: var(--c-ink);
    letter-spacing: -0.01em;
}
.pd-pillar__text {
    color: var(--c-ink-2);
    font-size: var(--fs-body);
    line-height: 1.55;
    margin: 0;
}

.pd-faq summary {
    cursor: pointer;
    padding: var(--sp-5) 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: var(--fs-body-lg);
    color: var(--c-ink);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}
.pd-faq summary::-webkit-details-marker { display: none; }
.pd-faq summary::after {
    content: "+";
    color: var(--c-accent);
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 0.7;
    transition: transform var(--anim-base) var(--ease-out);
    flex-shrink: 0;
}
.pd-faq details[open] summary::after { transform: rotate(45deg); }
.pd-faq details[open] summary { color: var(--c-accent); }
.pd-faq__body {
    padding: var(--sp-4) 0 var(--sp-6);
    color: var(--c-ink-2);
    line-height: 1.65;
    max-width: var(--reading-max);
}

/* Форма комментария */
.pd-comment-form {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-8);
}
.pd-comment-form--guest {
    background: var(--c-surface-2);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
}
.pd-comment-form--guest .btn { margin-right: var(--sp-2); }
.pd-comment-form--guest p { margin: 0; }

.pd-comment-form__author {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-body-sm);
    color: var(--c-ink-2);
    margin-bottom: var(--sp-3);
}
.pd-comment-form__author strong { color: var(--c-ink); font-weight: 600; }

.pd-comment-form__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
    flex-shrink: 0;
}

.pd-comment-form__textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
    font-family: 'Manrope', sans-serif;
    font-size: var(--fs-body);
    line-height: 1.55;
}

.pd-comment-form__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
.pd-comment-form__hint {
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
    margin: 0;
    line-height: 1.5;
}
.pd-comment-form__actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    flex-wrap: wrap;
}
@media (min-width: 640px) {
    .pd-comment-form__footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-4);
    }
    .pd-comment-form__hint { flex: 1; min-width: 0; }
    .pd-comment-form__actions { flex-shrink: 0; }
}

/* Кнопка «Ответить» под комментарием */
.pd-review__reply-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: var(--sp-3);
    color: var(--c-accent);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: var(--fs-body-sm);
    cursor: pointer;
    transition: color var(--anim-fast) var(--ease-out);
}
.pd-review__reply-btn:hover { color: var(--c-accent-hover); text-decoration: underline; }

[data-reply-to-label]:not(:empty) {
    color: var(--c-accent);
    font-weight: 500;
}

.pd-review {
    padding: var(--sp-6) 0;
    border-bottom: 1px solid var(--c-border);
}
.pd-review:last-child { border-bottom: 0; }
.pd-review__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}
.pd-review__author { font-weight: 600; color: var(--c-ink); }
.pd-review__date {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-style: italic;
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    font-variant-numeric: tabular-nums;
}
.pd-review__rating {
    color: var(--c-accent);
    letter-spacing: 0.2em;
    font-size: 14px;
}
.pd-review__rating .off { color: var(--c-border-strong); }
.pd-review__text {
    color: var(--c-ink);
    font-size: var(--fs-body);
    line-height: 1.6;
    max-width: var(--reading-max);
}
.pd-review__reply {
    margin-top: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-surface-2);
    border-left: 2px solid var(--c-accent);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--fs-body-sm);
    color: var(--c-ink-2);
}
.pd-review__reply-label {
    font-weight: 600;
    color: var(--c-ink);
    margin-right: var(--sp-2);
}

.pd-body img { cursor: zoom-in; max-width: 100%; height: auto; border-radius: var(--r-md); margin: var(--sp-6) 0; }

.pd-section {
    padding: var(--sp-12) 0;
    scroll-margin-top: 100px;
}
.pd-section + .pd-section { border-top: 1px solid var(--c-border); }
.pd-section__title {
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: var(--fs-h2);
    font-weight: 700;
    margin: 0 0 var(--sp-6);
    letter-spacing: -0.015em;
}

/* ─── 15b. Об авторе разработки (в конце статьи) ────────────────── */

.pd-author {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    align-items: start;
    max-width: 880px;
}
@media (min-width: 768px) {
    .pd-author {
        grid-template-columns: 140px 1fr;
        gap: var(--sp-10);
    }
}

.pd-author__avatar {
    width: 96px;
    height: 96px;
    border-radius: var(--r-full);
    overflow: hidden;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .pd-author__avatar { width: 140px; height: 140px; }
}
.pd-author__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd-author__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -0.02em;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    border-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
}
@media (min-width: 768px) {
    .pd-author__avatar--initials { font-size: 56px; }
}

.pd-author__body { min-width: 0; }
.pd-author__name {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 700;
    margin: var(--sp-2) 0 var(--sp-1);
    letter-spacing: -0.015em;
}
.pd-author__role {
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
    margin: 0 0 var(--sp-4);
    font-weight: 500;
}
.pd-author__bio {
    color: var(--c-ink-2);
    font-size: var(--fs-body);
    line-height: 1.6;
    margin: 0 0 var(--sp-5);
    max-width: 60ch;
}
.pd-author__creds {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--c-ink-muted);
    font-size: var(--fs-body-sm);
}
@media (min-width: 640px) {
    .pd-author__creds { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}
.pd-author__creds li {
    padding: var(--sp-3) var(--sp-4);
    border-left: 2px solid var(--c-border-strong);
    line-height: 1.4;
}
.pd-author__creds strong {
    display: block;
    color: var(--c-ink);
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ─── 16. Misc ───────────────────────────────────────────────────── */

.alert {
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    padding: var(--sp-4);
    background: var(--c-surface);
    margin-bottom: var(--sp-4);
}
.alert-success { background: var(--c-success-soft); color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 30%, transparent); }
.alert-warning { background: var(--c-warning-soft); color: var(--c-warning); border-color: color-mix(in srgb, var(--c-warning) 30%, transparent); }
.alert-danger  { background: var(--c-danger-soft);  color: var(--c-danger);  border-color: color-mix(in srgb, var(--c-danger) 30%, transparent); }

/* Reduced motion — disable all decorative motion */
@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;
    }
}

/* ─── Search modal ───────────────────────────────────────────────── */

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh var(--sp-4) var(--sp-4);
}
.search-modal[hidden] { display: none; }
.search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 13, 11, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: pointer;
    animation: search-fade 200ms var(--ease-out);
}
.search-modal__panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
    animation: search-rise 200ms var(--ease-out);
}
.search-modal__form {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
}
.search-modal__icon {
    width: 22px;
    height: 22px;
    color: var(--c-ink-muted);
    flex-shrink: 0;
}
.search-modal__input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--c-ink);
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding: var(--sp-3) 0;
    outline: none;
    min-width: 0;
}
.search-modal__input::placeholder { color: var(--c-ink-muted); font-weight: 400; }
.search-modal__submit {
    height: 40px;
    padding: 0 var(--sp-5);
    background: var(--c-accent);
    color: var(--c-on-accent);
    border: 1px solid var(--c-accent);
    border-radius: var(--r-md);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--anim-fast) var(--ease-out);
}
.search-modal__submit:hover { background: var(--c-accent-hover); }
.search-modal__close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-ink-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--anim-fast) var(--ease-out), color var(--anim-fast) var(--ease-out);
}
.search-modal__close:hover { background: var(--c-surface-2); color: var(--c-ink); }
.search-modal__hint {
    margin: 0;
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-meta);
    color: var(--c-ink-muted);
    line-height: 1.5;
}
.search-modal__hint kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-ink-2);
}

@media (max-width: 480px) {
    .search-modal { padding: 4vh var(--sp-3) var(--sp-3); }
    .search-modal__form { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
    .search-modal__input { font-size: 16px; }
    .search-modal__submit { padding: 0 var(--sp-3); }
    .search-modal__close { display: none; } /* На мобиле — закрытие по backdrop/Esc */
}

@keyframes search-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes search-rise {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .search-modal__backdrop, .search-modal__panel { animation: none; }
}

/* ─── Search results page ────────────────────────────────────────── */

.search-page__form {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-12);
    max-width: 720px;
}
.search-page__input {
    flex: 1;
    height: 52px;
    font-size: var(--fs-body-lg);
    padding: 0 var(--sp-4);
}
.search-page__form .btn { height: 52px; }

.search-page__empty {
    max-width: 60ch;
    padding: var(--sp-10) 0;
}

.search-page__group {
    margin-bottom: var(--sp-12);
}
.search-page__group-title {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    font-family: 'Fraunces', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
    letter-spacing: -0.01em;
}
.search-page__group-count {
    color: var(--c-ink-muted);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.search-page__list { list-style: none; padding: 0; margin: 0; }
.search-page__item {
    border-bottom: 1px solid var(--c-border);
}
.search-page__item:last-child { border-bottom: none; }
.search-page__link {
    display: block;
    padding: var(--sp-5) 0;
    color: inherit;
    text-decoration: none !important;
}
.search-page__link:hover { text-decoration: none; }
.search-page__link:hover .search-page__item-title { color: var(--c-accent); }

.search-page__item-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: var(--fs-h3);
    color: var(--c-ink);
    margin: 0 0 var(--sp-2);
    line-height: 1.3;
    transition: color var(--anim-fast) var(--ease-out);
}
.search-page__item-intro {
    color: var(--c-ink-2);
    font-size: var(--fs-body);
    line-height: 1.55;
    margin: 0 0 var(--sp-3);
    max-width: 75ch;
}
.search-page__item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    color: var(--c-ink-muted);
    font-size: var(--fs-meta);
}
.search-page__item-meta .dot { color: var(--c-border-strong); }

/* a11y helper */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Lightbox (vanilla, no library) */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 13, 11, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--sp-6);
    cursor: zoom-out;
}
.lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    box-shadow: var(--sh-xl);
    border-radius: var(--r-md);
}
.lightbox__close {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: var(--r-md);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}