/* ==========================================================================
   Библиотека Пара — базовый слой дизайн-системы
   Токены, сброс, типографика, общие компоненты.
   Подключается первым, до страничных таблиц стилей.
   ========================================================================== */

:root {
    /* --- Поверхности: тёплые чернила с сливовым подтоном --- */
    --bg:            var(--tg-theme-bg-color, #100E14);
    --bg-elev:       #16131C;
    --surface:       #17141D;
    --surface-2:     #211D29;
    --surface-3:     #2A2536;
    --border:        #2C2738;
    --border-strong: #3B3449;

    /* --- Текст --- */
    --text:     var(--tg-theme-text-color, #F6F3F8);
    --text-2:   #C9C2D3;
    --muted:    #8E86A0;
    --faint:    #6B6480;

    /* --- Акцент: облагороженный маджентово-винный --- */
    --accent:       #E44E86;
    --accent-2:     #F27BA6;
    --accent-deep:  #B33168;
    --accent-soft:  rgba(228, 78, 134, 0.12);
    --accent-ring:  rgba(228, 78, 134, 0.30);
    --accent-grad:  linear-gradient(135deg, #F68CB1 0%, #E44E86 48%, #C33A72 100%);

    /* --- Семантика --- */
    --gold:        #C9A96A;
    --gold-soft:   rgba(201, 169, 106, 0.14);
    --success:     #4CAF86;
    --success-soft:rgba(76, 175, 134, 0.13);
    --danger:      #E4586A;
    --danger-soft: rgba(228, 88, 106, 0.12);

    /* --- Типографика --- */
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype',
                    Georgia, 'Times New Roman', serif;

    /* --- Ритм отступов (база 4px) --- */
    --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;

    /* --- Радиусы --- */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* --- Тени: многослойные, мягкие --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 20px 44px -16px rgba(0, 0, 0, 0.70);
    --shadow-accent: 0 12px 32px -10px rgba(228, 78, 134, 0.55);

    /* --- Движение --- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 0.22s;

    /* --- Безопасные зоны iOS --- */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --------------------------------------------------------------------------
   Сброс
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Отступ под плавающую кнопку — переопределяется в страничных файлах */
    padding-bottom: calc(96px + var(--safe-bottom));
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; }

button {
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   Типографика
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Крупные заголовки — засечный дисплейный шрифт */
h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 6.4vw, 30px);
    letter-spacing: -0.025em;
}

h2 {
    font-family: var(--font-display);
    font-size: clamp(19px, 4.6vw, 22px);
}

h3 { font-size: 15px; }

/* Надзаголовок-«надпись»: трекинг вверх, мелкий кегль */
.eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Шапка приложения
   -------------------------------------------------------------------------- */

header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 56px;
    padding: calc(var(--sp-3) + var(--safe-top)) var(--sp-4) var(--sp-3);
    background: rgba(16, 14, 20, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--border);
}

header h1 {
    font-size: clamp(20px, 5.2vw, 24px);
    line-height: 1.15;
}

/* Заголовки внутри карточек/секций — без дисплейного шрифта */
main h1 + .eyebrow,
main .eyebrow + h1 { margin-top: var(--sp-1); }

.logo {
    height: 34px;
    width: auto;
    flex-shrink: 0;
    display: block;
}

/* --------------------------------------------------------------------------
   Поиск
   -------------------------------------------------------------------------- */

.search-form {
    flex: 1;
    min-width: 0;
}

.text-input {
    width: 100%;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.75' stroke='%238E86A0' stroke-width='1.5'/%3E%3Cpath d='M10.7 10.7L14 14' stroke='%238E86A0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--r-pill);
    padding: 10px 16px 10px 38px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    outline: none;
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}

.text-input::placeholder { color: var(--faint); }

.text-input:focus {
    background-color: var(--surface-2);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* --------------------------------------------------------------------------
   Выпадающий список категорий
   -------------------------------------------------------------------------- */

.form-select {
    width: 100%;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238E86A0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    padding: 12px 44px 12px 16px !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: var(--shadow-sm);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.form-select option {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 500;
}

.new-option {
    color: var(--accent) !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Бейджи
   -------------------------------------------------------------------------- */

.discount-badge,
.new-badge {
    position: absolute;
    top: var(--sp-3);
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    color: #fff;
    line-height: 1;
    box-shadow: var(--shadow-md);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.discount-badge {
    left: var(--sp-3);
    background: var(--accent-grad);
}

/* «Новинка» — шампанская латунь: комплимент к мадженте, читается как акция внимания */
.new-badge {
    right: var(--sp-3);
    left: auto;
    background: linear-gradient(135deg, #DCC08A 0%, #C9A96A 100%);
    color: #2A1E08;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

/* Основное действие, прикреплённое к низу экрана */
.button-footer {
    position: fixed;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: calc(var(--sp-4) + var(--safe-bottom));
    z-index: 20;
    display: block;
    text-align: center;
    background: var(--accent-grad);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.005em;
    padding: 16px;
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-accent);
    cursor: pointer;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                opacity var(--dur) var(--ease);
}

.button-footer:active {
    transform: scale(0.985);
    box-shadow: 0 6px 18px -6px rgba(228, 78, 134, 0.5);
}

.button-footer.disabled,
.button-footer[disabled] {
    background: var(--surface-2);
    color: var(--faint);
    box-shadow: none;
    pointer-events: none;
}

.preorder-btn {
    background: var(--surface-2);
    color: var(--text);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-strong);
}

/* Второстепенная кнопка-ссылка */
a.button,
.button-secondary {
    display: block;
    text-align: center;
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

/* Счётчик товара на панели товара */
.button-footer2 {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.button-footer-button {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: var(--surface-3);
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.button-footer-button:active {
    transform: scale(0.92);
    background: var(--accent);
    color: #fff;
}

.button-text {
    min-width: 20px;
    margin: 0;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Состояния: пусто / ошибка
   -------------------------------------------------------------------------- */

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--sp-12) var(--sp-5);
}

.empty-state-title {
    font-family: var(--font-display);
    color: var(--text);
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 var(--sp-2);
}

.empty-state-text {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.error-category {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    padding: var(--sp-12) var(--sp-5);
    margin: 0;
    font-size: 14.5px;
}

.error-message,
.alert-danger {
    background: var(--danger-soft);
    border: 1px solid rgba(228, 88, 106, 0.34);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-4);
}

.error-message .error,
.alert-danger {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #F0919F;
}

/* --------------------------------------------------------------------------
   Прочее
   -------------------------------------------------------------------------- */

main { padding: var(--sp-4) var(--sp-4) var(--sp-8); }

/* Тонкая разделительная линия */
.hairline {
    height: 1px;
    background: var(--border);
    border: 0;
    margin: var(--sp-6) 0;
}

/* Уважаем настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}