/* ═══════════════════════════════════════════════════════════
   KORDEKO DESIGN SYSTEM
   Единая система классов для всего сайта.
   Используй эти классы в шаблонах вместо инлайн-стилей
   и блоков <style> с дублирующимися правилами.
═══════════════════════════════════════════════════════════ */


/* ── Токены ─────────────────────────────────────────────── */
:root {
    /* Цвета */
    --ds-red:          #EE403A;
    --ds-red-hover:    #c8302a;
    --ds-black:        #141414;
    --ds-white:        #FEFEFE;
    --ds-bg-alt:       #F0F4FC;
    --ds-border:       #e5e7eb;
    --ds-border-light: #ebebeb;
    --ds-muted:        rgba(20,20,20,.75);
    --ds-text-gray:    #888;

    /* Градиенты */
    --ds-gradient-card-label: linear-gradient(to top, rgba(0,0,0,.72), transparent);

    /* Радиусы */
    --ds-r-pill: 999px;
    --ds-r-sm:    12px;
    --ds-r-md:    16px;
    --ds-r-lg:    20px;
    --ds-r-xl:    24px;
    --ds-r-2xl:   32px;

    /* Отступы секций */
    --ds-section-py:   70px;
    --ds-gap-section:  50px;
    --ds-gap-30:       30px;
    --ds-gap-element:  20px;
    --ds-gap-15:       15px;
    --ds-gap-cards:    10px;
    --ds-gap-5:         5px;
    --ds-padding-card: 20px;

    /* Цвета таблицы сравнения */
    --ds-comp-kordeko-bg: #fff5f5;
    --ds-comp-yes:        #16a34a;
    --ds-comp-bg:         #FFFFFFBF;

    /* Размеры шрифтов */
    --ds-fs-display: 72px;
    --ds-fs-h2:      60px;
    --ds-fs-h3:      36px;
    --ds-fs-h4:      22px;
    --ds-fs-h5:      16px;
    --ds-fs-body1:   24px;
    --ds-fs-body2:   18px;
    --ds-fs-body3:   14px;
    --ds-fs-link:    14px;
}

@media (max-width: 639px) {
    :root { --ds-section-py: 40px; }
    .ds-btn { height: 45px; justify-content: center; text-align: center; }
    #site-header .ds-btn { height: unset; }
}


/* ── Контейнер ──────────────────────────────────────────── */
/* Идентичен .site-container — используй любой */
.ds-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
@media (min-width: 640px) {
    .ds-container { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1440px) {
    .ds-container { max-width: 1400px; }
}


/* ── Секции ─────────────────────────────────────────────── */
.ds-section      { padding: var(--ds-section-py) 0; }
.ds-section-alt  { background: var(--ds-bg-alt); }
.ds-section-dark { background: var(--ds-black); }


/* ── Типографика ────────────────────────────────────────── */
.ds-display {
    font-family: 'Onest', sans-serif;
    font-size: var(--ds-fs-display);
    font-weight: 500;
    line-height: 1;
    color: var(--ds-black);
}
.ds-h2 {
    font-family: 'Onest', sans-serif;
    font-size: var(--ds-fs-h2);
    font-weight: 500;
    line-height: 1;
    color: var(--ds-black);
}
.ds-h3 {
    font-family: 'Onest', sans-serif;
    font-size: var(--ds-fs-h3);
    font-weight: 500;
    line-height: 1;
    color: var(--ds-black);
}
.ds-h4 {
    font-size: var(--ds-fs-h4);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ds-black);
}
.ds-h5 {
    font-size: var(--ds-fs-h5);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ds-black);
}
.ds-body-1 { font-size: var(--ds-fs-body1); line-height: 1.5; }
.ds-body-2 { font-size: var(--ds-fs-body2); line-height: 1.5; }
.ds-body-3 { font-size: var(--ds-fs-body3); line-height: 1.5; }
.ds-muted  { color: var(--ds-muted); }
.ds-gray   { color: var(--ds-text-gray); }

@media (max-width: 639px) {
    .ds-display { font-size: 48px; }
    .ds-h2      { font-size: 36px; }
    .ds-h3      { font-size: 28px; }
}


/* ── Кнопки ─────────────────────────────────────────────── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--ds-r-pill);
    font-size: var(--ds-fs-h5);
    font-weight: 400;
    font-family: 'Onest', sans-serif;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
    text-align: center;
}

/* Первичная: красная заливка */
.ds-btn-primary             { background: var(--ds-red);   color: #fff;             border-color: var(--ds-red); }
.ds-btn-primary:hover       { background: var(--ds-red-hover); border-color: var(--ds-red-hover); }

/* Вторичная: тёмный контур */
.ds-btn-secondary           { background: transparent;     color: var(--ds-black);  border-color: var(--ds-black); }
.ds-btn-secondary:hover     { background: var(--ds-black); color: #fff; }

/* Призрак: белый контур (на тёмном фоне) */
.ds-btn-ghost               { background: transparent;     color: #fff;             border-color: #fff; }
.ds-btn-ghost:hover         { background: #fff;            color: var(--ds-black); }

/* Контур красный */
.ds-btn-outline-red         { background: transparent;     color: var(--ds-red);    border-color: var(--ds-red); }
.ds-btn-outline-red:hover   { background: var(--ds-red);   color: #fff; }

/* Контур серый (светлый) */
.ds-btn-outline             { background: var(--ds-white); color: var(--ds-black);  border-color: #ddd; }
.ds-btn-outline:hover       { border-color: var(--ds-black); }

/* Маленький размер */
.ds-btn-sm { padding: 6px 14px; font-size: 14px; }

/* Белая пилюля поверх фото карточки товара («Подробнее») */
.ds-btn-card { display:inline-block; background:#fff; color:var(--ds-black); font-size:var(--ds-fs-h5); font-weight:500; padding:10px 16px; border-radius:var(--ds-r-pill); white-space:nowrap; pointer-events:none; line-height:1; }

/* На всю ширину */
.ds-btn-full { width: 100%; }

/* Активное / переключаемое состояние */
.ds-btn.active { background: var(--ds-black); color: #fff; border-color: var(--ds-black); }

@media (max-width: 1023px) {
    .ds-btn { padding-top: 15px; padding-bottom: 15px; }
    #site-header .ds-btn { padding-top: 8px; padding-bottom: 8px; }
}

/* Ссылка-действие внутри карточки — «Подробнее →» */
.ds-card-link { font-size: var(--ds-fs-link); font-weight: 500; color: var(--ds-red); text-decoration: none; }
.ds-card-link:hover { text-decoration: underline; }


/* ── Бейджи / пилюли ────────────────────────────────────── */
.ds-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--ds-r-pill);
    font-size: var(--ds-fs-h5);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--ds-white);
    color: var(--ds-black);
    border: 1px solid var(--ds-border);
}
.ds-badge-red     { background: var(--ds-white); color: var(--ds-black); border-color: var(--ds-border); }
.ds-badge-light   { background: var(--ds-white); color: var(--ds-black); border-color: var(--ds-border); }
.ds-badge-outline { background: var(--ds-white); color: var(--ds-black); border-color: var(--ds-border); }
.ds-badge-sm      { font-size: 13px; padding: 3px 10px; }


/* ── Стрелки навигации (слайдеры, карусели) ─────────────── */
.ds-nav-arrow {
    background: var(--ds-red);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s;
}
.ds-nav-arrow:hover { background: var(--ds-red-hover); }
.ds-nav-arrow svg   { display: block; }


/* ── Социальные иконки ──────────────────────────────────── */
.ds-social {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity .2s, transform .15s;
}
.ds-social:hover   { opacity: .85; transform: scale(1.08); }
.ds-social-44      { width: 44px; height: 44px; }
.ds-social-40      { width: 40px; height: 40px; }
.ds-social-36      { width: 36px; height: 36px; }
.ds-social-32      { width: 32px; height: 32px; }


/* ── Карточки ───────────────────────────────────────────── */
.ds-card {
    background: var(--ds-white);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-md);
}
.ds-card-lg   { border-radius: var(--ds-r-xl); }
.ds-card-hover { transition: box-shadow .25s, transform .25s; }
.ds-card-hover:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
    transform: translateY(-2px);
}


/* ── Пагинация ──────────────────────────────────────────── */
.ds-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 32px;
}
.ds-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--ds-r-pill);
    border: 1px solid var(--ds-border);
    font-size: 14px;
    font-weight: 500;
    font-family: 'Onest', sans-serif;
    background: var(--ds-white);
    color: var(--ds-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
.ds-page-btn:hover            { background: #f5f5f5; }
.ds-page-btn.active           { background: var(--ds-black); color: #fff; border-color: var(--ds-black); }
.ds-page-btn.disabled         { color: #ccc; border-color: #eee; background: #fafafa; pointer-events: none; opacity: .6; }
.ds-page-btn.arrow            { width: 44px; min-width: 44px; border-radius: 50%; background: var(--ds-red); border-color: var(--ds-red); color: #fff; }
.ds-page-btn.arrow:hover      { background: var(--ds-red-hover); border-color: var(--ds-red-hover); }
.ds-page-btn.arrow.disabled   { opacity: 0.4; pointer-events: none; }


/* ── Форма ──────────────────────────────────────────────── */
.ds-field                             { display: flex; flex-direction: column; }
.ds-field label                       { font-size: 16px; font-weight: 500; color: var(--ds-black); margin-bottom: 8px; }
.ds-field input,
.ds-field textarea,
.ds-field select {
    border: none;
    border-bottom: 1.5px solid #ddd;
    padding: 8px 0;
    font-size: 16px;
    background: transparent;
    font-family: 'Onest', sans-serif;
    color: var(--ds-black);
    outline: none;
    resize: vertical;
    transition: border-color .2s;
}
.ds-field input:focus,
.ds-field textarea:focus,
.ds-field select:focus                { border-bottom-color: var(--ds-red); }
.ds-field-error                       { color: var(--ds-red); font-size: 14px; margin-top: 4px; }