/*
 * UI Kit — глобальні компоненти (джерело: Figma «OptCond», Color System + Home).
 * Токени — у main.css. Тут лише повторювані елементи; стилі секцій — у css/pages/.
 */

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color:       var(--text-primary);
}

.h1,
h1 { font-size: 46px; line-height: 54px; font-weight: 700; letter-spacing: -.015em; }

.h2,
h2 { font-size: 28px; line-height: 36px; font-weight: 600; }

.h3,
h3 { font-size: 22px; line-height: 30px; font-weight: 600; }

.h4,
h4 { font-size: 18px; line-height: 26px; font-weight: 600; }

.text-lead  { font-size: 17px; line-height: 26px; font-weight: 400; color: var(--text-secondary); }
.text-body  { font-size: 15px; line-height: 22px; font-weight: 400; }
.text-sm    { font-size: 13px; line-height: 18px; font-weight: 400; }
.text-xs    { font-size: 12px; line-height: 16px; font-weight: 500; }
.text-muted { color: var(--text-secondary); }

/* ── Section heading: заголовок + синє підкреслення ─────────────────────── */
.section-heading {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    align-items:    flex-start;
}

.section-heading__title {
    font-size:   28px;
    line-height: 36px;
    font-weight: 600;
    color:       var(--text-primary);
}

.section-heading::after {
    content:       '';
    width:         40px;
    height:        4px;
    border-radius: 2px;
    background:    var(--blue-500);
}

.section-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-4);
}

/* ── Icons (Lucide, stroke 1.75 — як у макеті) ──────────────────────────── */
.icon,
svg.icon {
    flex-shrink:     0;
    fill:            none;
    stroke:          currentColor;
    stroke-width:    1.75;
    stroke-linecap:  round;
    stroke-linejoin: round;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    height:          56px;
    padding:         0 28px;
    border-radius:   var(--radius-pill);
    font-family:     var(--font-body);
    font-size:       18px;
    line-height:     24px;
    font-weight:     600;
    white-space:     nowrap;
    text-decoration: none;
    color:           var(--text-inverse);
    background:      var(--gradient-brand-warm);
    cursor:          pointer;
    transition:      filter var(--transition), box-shadow var(--transition), background var(--transition);
}

.btn:hover        { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(242, 85, 0, .28); }
.btn:active       { filter: brightness(.96); box-shadow: none; }
.btn:disabled,
.btn[disabled],
.btn.is-disabled  { background: var(--action-disabled); color: var(--neutral-500); box-shadow: none; filter: none; cursor: not-allowed; }

.btn--blue        { background: var(--gradient-button-blue); }
.btn--blue:hover  { box-shadow: 0 6px 16px rgba(7, 71, 186, .28); }

.btn--outline {
    background:  transparent;
    color:       var(--blue-500);
    box-shadow:  inset 0 0 0 1.5px var(--blue-500);
}
.btn--outline:hover { background: var(--blue-50); box-shadow: inset 0 0 0 1.5px var(--blue-500); filter: none; }

.btn--m { height: 52px; padding: 0 24px; font-size: 16px; }
.btn--s { height: 44px; padding: 0 20px; font-size: 15px; }
.btn--outline.btn--s { font-size: 16px; }

/* Кнопка-іконка (кошик у картці, пошук) */
.icon-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   var(--radius-md);
    color:           var(--text-inverse);
    background:      var(--blue-500);
    cursor:          pointer;
    transition:      background var(--transition);
}
.icon-btn:hover   { background: var(--blue-600); }
.icon-btn--round  { border-radius: var(--radius-pill); }
.icon-btn--ghost  { width: 48px; height: 48px; border-radius: var(--radius-pill); color: var(--text-primary); background: transparent; }
.icon-btn--ghost:hover { background: var(--bg-subtle); }

/* ── Link with arrow («Весь каталог →») ─────────────────────────────────── */
.link-arrow {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-size:       16px;
    line-height:     24px;
    font-weight:     600;
    color:           var(--blue-500);
    text-decoration: none;
    transition:      color var(--transition);
}
.link-arrow:hover { color: var(--blue-700); }
.link-arrow .icon { width: 20px; height: 20px; transition: transform var(--transition); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ── Badges, status, pills ──────────────────────────────────────────────── */
.badge {
    display:       inline-flex;
    align-items:   center;
    padding:       6px 12px;
    border-radius: var(--radius-pill);
    font-size:     12px;
    line-height:   16px;
    font-weight:   600;
    color:         var(--text-inverse);
    background:    var(--badge-sale);
}
.badge--new  { background: var(--sky-700); }
.badge--hit  { background: var(--orange-500); }
.badge--sale { background: var(--badge-sale); }

.status {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       5px 10px;
    border-radius: var(--radius-pill);
    font-size:     12px;
    line-height:   16px;
    font-weight:   500;
    color:         var(--success-700);
    background:    var(--success-50);
}
.status::before {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--success-500);
}
.status--warning        { color: var(--warning-700); background: var(--warning-50); }
.status--warning::before { background: var(--warning-500); }
.status--error          { color: var(--error-700); background: var(--error-50); }
.status--error::before  { background: var(--error-500); }

/* Світла «пігулка» (kicker над заголовком hero, фільтри, пункти меню) */
.chip {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       8px 16px 8px 14px;
    border-radius: var(--radius-pill);
    font-size:     13px;
    line-height:   18px;
    font-weight:   500;
    color:         var(--neutral-700);
    background:    rgba(255, 255, 255, .8);
}

/* Банківська «пігулка» (оплата частинами) */
.pill {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         6px;
    border:          1px solid var(--border-default);
    border-radius:   var(--radius-sm);
    font-size:       12px;
    font-weight:     600;
    color:           var(--neutral-900);
    background:      var(--neutral-0);
}

/* ── Form fields ────────────────────────────────────────────────────────── */
.field {
    width:         100%;
    height:        52px;
    padding:       0 24px;
    border:        1px solid var(--border-default);
    border-radius: var(--radius-pill);
    font-family:   var(--font-body);
    font-size:     15px;
    line-height:   22px;
    color:         var(--text-primary);
    background:    var(--bg-subtle);
    transition:    border-color var(--transition), box-shadow var(--transition);
}
.field::placeholder { color: var(--neutral-500); }
.field:focus        { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(10, 160, 240, .2); }
.field.is-error     { border-color: var(--error-500); }
textarea.field      { height: auto; padding: 14px 24px; border-radius: var(--radius-lg); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    border:         1px solid var(--border-default);
    border-radius:  var(--radius-xl);
    background:     var(--bg-subtle);
}
.card--white { background: var(--neutral-0); }

/* Ціна */
.price           { display: flex; flex-direction: column; }
.price__old      { margin-bottom: -4px; font-size: 13px; font-weight: 500; color: var(--text-price-old); text-decoration: line-through; }
.price__current  { font-size: 17px; font-weight: 600; color: var(--neutral-900); }

/* ── Dividers ───────────────────────────────────────────────────────────── */
.divider { width: 100%; height: 1px; background: var(--border-default); }

/* ── Section backgrounds ────────────────────────────────────────────────── */
.bg-light-climate { background: var(--gradient-light-climate); }
.bg-light-cool    { background: var(--gradient-light-cool); }
.bg-deep-blue     { background: var(--gradient-deep-blue); color: var(--text-inverse); }
.bg-subtle        { background: var(--bg-subtle); }

/* Пагінація */
.pagination {
    margin-top: 64px;
}

.pagination__list {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             8px;
}

.pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       44px;
    height:          44px;
    padding:         0 12px;
    border-radius:   var(--radius-pill);
    font-size:       16px;
    font-weight:     500;
    color:           var(--neutral-700);
    background:      var(--bg-subtle);
    text-decoration: none;
    transition:      background var(--transition), color var(--transition);
}

.pagination a.page-numbers:hover {
    background: var(--blue-50);
    color:      var(--blue-500);
}

.pagination .page-numbers.current {
    color:      var(--text-inverse);
    background: var(--blue-500);
}

.pagination .page-numbers.dots {
    background: transparent;
}

/* ── Focus ──────────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .h1, h1 { font-size: 38px; line-height: 46px; }
    .h2, h2,
    .section-heading__title { font-size: 26px; line-height: 34px; }
}

@media (max-width: 767px) {
    .h1, h1 { font-size: 30px; line-height: 38px; }
    .h2, h2,
    .section-heading__title { font-size: 24px; line-height: 32px; }
    .btn { height: 52px; padding: 0 24px; font-size: 16px; }
}