/* =========================================================================
   ДИЗАЙН-СИСТЕМА — токены и атомарные компоненты
   Семейство кнопок:  .btn  +  .btn--{primary|secondary|ghost|text|danger}
                          +  .btn--{sm|md|lg}  + утилита  .btn--block
   Семейство полей:   .field           (один размер для всего сайта)
   Цвет/типографика:  CSS-переменные ниже — единственный источник истины.
   Legacy-aliases:    .cta-button, .btn-secondary, .admin-search-btn,
                      .account-logout — оставлены, чтобы старая разметка
                      продолжала работать; внутри они являются модификаторами
                      одной и той же базы .btn.
   ========================================================================= */
:root {
    --bg-color: #1E1812;
    --surface-color: #2B2118;
    --surface-elevated: #382B20;
    --text-primary: #FFF8EE;
    --text-secondary: #D8C3A5;
    --accent-color: #C99A5A;
    --accent-hover: #E0B36F;
    --border-color: #5A432F;
    --color-danger: #8A1F1F;
    --color-danger-bg: #3A1717;
    --color-danger-border: #8A3A3A;
    --color-success: #1F6B2F;
    --color-success-bg: #14351D;
    --color-success-border: #3E7A48;

    /* Размеры кнопок */
    --btn-pad-sm: 8px 14px;
    --btn-pad-md: 14px 24px;
    --btn-pad-lg: 18px 36px;
    --btn-font-sm: 12px;
    --btn-font-md: 14px;
    --btn-font-lg: 14px;
    --btn-letter-spacing: 1px;
    --btn-letter-spacing-sm: 0.5px;
    --btn-radius: 0;

    /* Размеры полей ввода */
    --field-pad: 14px 16px;
    --field-font: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, sans-serif; color: var(--text-primary); min-width: 0; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { background-color: var(--bg-color); line-height: 1.6; font-size: 16px; }
img, svg, video { max-width: 100%; }

/* Утилиты */
.w-100 { width: 100%; }
.btn--block { width: 100%; }

/* ---------- Кнопки: одна база, размеры и варианты как модификаторы ---------- */
.btn,
.cta-button,
.btn-secondary,
.admin-search-btn,
.account-logout {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box;
    padding: var(--btn-pad-md);
    font-family: inherit;
    font-size: var(--btn-font-md);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
    user-select: none;
    background: transparent; /* перебивается вариантом */
    color: var(--text-primary);
}
.btn:disabled, .cta-button:disabled, .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Размеры ---------- */
.btn--sm,
.account-logout,
.admin-search-btn[data-size="sm"] {
    padding: var(--btn-pad-sm);
    font-size: var(--btn-font-sm);
    letter-spacing: var(--btn-letter-spacing-sm);
}
.btn--md { padding: var(--btn-pad-md); font-size: var(--btn-font-md); letter-spacing: var(--btn-letter-spacing); }
.btn--lg,
.cta-button {
    padding: var(--btn-pad-lg);
    font-size: var(--btn-font-lg);
    letter-spacing: var(--btn-letter-spacing);
}

/* ---------- Варианты ---------- */
.btn--primary,
.cta-button {
    background: var(--accent-color);
    color: #1E1812;
    border-color: var(--accent-color);
}
.btn--primary:hover,
.cta-button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn--secondary,
.btn-secondary {
    background: transparent;
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.btn--secondary:hover,
.btn-secondary:hover {
    background: var(--accent-color);
    color: #1E1812;
}

.btn--ghost,
.admin-search-btn,
.account-logout {
    background: var(--surface-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn--ghost:hover,
.admin-search-btn:hover,
.account-logout:hover {
    border-color: var(--text-primary);
}

.btn--danger {
    background: var(--surface-elevated);
    color: var(--color-danger);
    border-color: var(--color-danger-border);
}
.btn--danger:hover {
    background: var(--color-danger);
    color: #1E1812;
    border-color: var(--color-danger);
}

.btn--text {
    background: transparent;
    border-color: transparent;
    padding: 4px 0;
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.btn--text:hover { opacity: 0.6; }

/* ВАЖНО: legacy-классы потеряли width:100% — теперь только через .btn--block / .w-100 */
.btn-secondary { width: auto; }

/* ---------- Поля ввода ---------- */
.field,
.account-input,
.admin-login input,
.admin-filter input,
.admin-filter select,
.order-edit select,
.order-edit input,
.order-edit textarea,
.product-edit input,
.product-edit textarea,
.checkout-form input {
    width: 100%;
    padding: var(--field-pad);
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-family: inherit;
    font-size: var(--field-font);
    line-height: 1.4;
    background: var(--surface-elevated);
    color: var(--text-primary);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.field:focus,
.account-input:focus,
.admin-login input:focus,
.admin-filter input:focus,
.admin-filter select:focus,
.order-edit select:focus,
.order-edit input:focus,
.order-edit textarea:focus,
.product-edit input:focus,
.product-edit textarea:focus,
.checkout-form input:focus {
    border-color: var(--accent-color);
}

/* Шапка */
.navbar { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 20px 40px; background: var(--bg-color); 
    border-bottom: 1px solid var(--border-color); 
    position: sticky; top: 0; z-index: 100; 
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 40px; display: block; }
.nav-links { list-style: none; display: flex; gap: 32px; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s; }
.nav-links a:hover { color: var(--text-secondary); }
.header-actions { display: flex; align-items: center; gap: 32px; }
.phone-link, .account-link { text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; }
.account-link, .cart-icon { text-transform: uppercase; letter-spacing: 0.5px; }
.cart-icon { font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap; }

/* Hero */
.hero { display: flex; align-items: center; padding: 0 40px; max-width: 1440px; margin: 80px auto; gap: 60px; min-height: 60vh; }
.hero-content { flex: 1; }
.hero-content h1 { font-size: 72px; font-weight: 700; line-height: 1.05; letter-spacing: -2px; margin-bottom: 32px; text-transform: uppercase; }
.hero-content p { font-size: 20px; color: var(--text-secondary); margin-bottom: 40px; max-width: 500px; line-height: 1.5; }
.hero-image { flex: 1; height: 700px; background: var(--surface-color); overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.hero-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.hero-img:hover { transform: scale(1.04); }

/* Common Premium Subtitles */
.section-subtitle { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary); margin-bottom: 16px; }

/* Philosophy Section */
.philosophy { display: flex; gap: 80px; max-width: 1440px; margin: 120px auto; padding: 120px 40px 0; border-top: 1px solid var(--border-color); align-items: center; }
.philosophy-content { flex: 1.2; }
.philosophy-content h2 { font-size: 48px; font-weight: 700; line-height: 1.15; letter-spacing: -1px; margin-bottom: 24px; text-transform: uppercase; }
.philosophy-lead { font-size: 18px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 48px; }
.philosophy-bullets { display: flex; flex-direction: column; gap: 32px; }
.bullet { display: flex; gap: 24px; align-items: flex-start; }
.bullet-num { font-size: 24px; font-weight: 700; color: var(--text-secondary); line-height: 1.2; border-bottom: 2px solid var(--text-primary); padding-bottom: 4px; }
.bullet-text h4 { font-size: 18px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.bullet-text p { color: var(--text-secondary); font-size: 15px; }
.philosophy-image { flex: 0.8; height: 600px; background: var(--surface-color); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.philosophy-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.philosophy-img:hover { transform: scale(1.04); }

/* Premium Details Section */
.premium-details { max-width: 1440px; margin: 120px auto; padding: 0 40px; }
.details-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
.details-image-box { height: 650px; background: var(--surface-color); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.details-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.details-img:hover { transform: scale(1.04); }
.details-info-box h2 { font-size: 48px; font-weight: 700; line-height: 1.15; letter-spacing: -1px; margin-bottom: 24px; text-transform: uppercase; }
.details-info-box p { font-size: 16px; color: var(--text-secondary); margin-bottom: 32px; }
.details-list { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.details-list li { padding-left: 24px; position: relative; font-size: 15px; color: var(--text-secondary); border-left: 2px solid var(--border-color); transition: border-color 0.3s; }
.details-list li:hover { border-left-color: var(--accent-color); }
.details-list li strong { color: var(--text-primary); display: block; font-size: 16px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Преимущества */
.features { display: flex; gap: 40px; max-width: 1440px; margin: 120px auto; padding: 0 40px; border-top: 1px solid var(--border-color); padding-top: 80px; }
.feature-card { flex: 1; }
.feature-card h3 { margin-bottom: 16px; font-size: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.feature-card p { color: var(--text-secondary); font-size: 15px; }

/* Дополнительные стили для картинок товаров и модалок */
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover .product-image img { transform: scale(1.03); }
.modal-image img { width: 100%; height: 100%; object-fit: contain; }

/* Каталог */
.catalog { max-width: 1440px; margin: 120px auto; padding: 0 40px; }
.catalog h2 { font-size: 48px; margin-bottom: 60px; text-align: left; text-transform: uppercase; letter-spacing: -1px; line-height: 1.12; }
.section-lead { max-width: 760px; color: var(--text-secondary); font-size: 17px; margin: -36px 0 48px; line-height: 1.6; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.product-card { cursor: pointer; transition: transform 0.3s; }
.product-card:hover { transform: translateY(-5px); }
.product-image { background: var(--surface-color); height: 600px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); margin-bottom: 24px; }
.product-info { padding: 0; }
.product-info h3 { font-size: 18px; margin-bottom: 8px; font-weight: 500; }
.product-description { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin-bottom: 12px; }
.price { font-weight: 600; margin-bottom: 12px; font-size: 16px; color: var(--text-secondary); }
.product-link { display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-primary); border-bottom: 1px solid var(--text-primary); padding-bottom: 2px; transition: opacity 0.2s; }
.product-card:hover .product-link { opacity: 0.6; }

/* Информационные блоки для требований платежного провайдера */
.info-section { max-width: 1440px; margin: 120px auto; padding: 80px 40px; border-top: 1px solid var(--border-color); }
.info-section h2 { font-size: 48px; margin-bottom: 48px; text-transform: uppercase; letter-spacing: -1px; line-height: 1.15; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.info-card { background: var(--surface-color); padding: 32px; min-height: 220px; }
.info-card h3 { font-size: 18px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.info-card p { color: var(--text-secondary); font-size: 15px; line-height: 1.65; margin-bottom: 16px; }
.info-card a { color: var(--text-primary); font-weight: 600; text-decoration: underline; }
.legal-requirements { margin-top: -40px; }

/* FAQ */
.faq { max-width: 800px; margin: 120px auto; padding: 0 40px; }
.faq h2 { text-align: left; margin-bottom: 60px; font-size: 48px; text-transform: uppercase; letter-spacing: -1px; }
.faq-item { padding: 32px 0; border-bottom: 1px solid var(--border-color); }
.faq-item h4 { font-size: 20px; margin-bottom: 16px; }
.faq-item p { color: var(--text-secondary); line-height: 1.6; }

/* Footer */
footer { background: var(--surface-color); padding: 80px 40px; margin-top: 120px; }
.footer-content { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; }
.footer-content--two-col { grid-template-columns: 2fr 1fr; }
.footer-col h3 { font-size: 32px; font-weight: 800; margin-bottom: 16px; letter-spacing: -1px; }
.footer-col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px; color: var(--text-secondary); }
.footer-col p, .footer-col a { color: var(--text-primary); text-decoration: none; display: block; margin-bottom: 12px; font-size: 14px; font-weight: 500; }
.requisites { margin-top: 32px; font-size: 12px !important; color: var(--text-secondary) !important; }

/* Модалка и Корзина */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; align-items: flex-start; justify-content: center; z-index: 1000; backdrop-filter: blur(5px); overflow-x: hidden; overflow-y: auto; padding: 24px 0; }
.modal-content { background: var(--bg-color); width: 100%; max-width: calc(100vw - 32px); position: relative; padding: 60px; display: flex; gap: 60px; margin: auto 0; }
.modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 32px; cursor: pointer; color: var(--text-primary); }
.modal-body { display: flex; gap: 60px; width: 100%; min-width: 0; }
.modal-image { flex: 1; background: var(--surface-color); height: 500px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.modal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.modal-info h2 { font-size: 40px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: -1px; }
.modal-info .price { font-size: 24px; margin-bottom: 40px; color: var(--text-primary); }
.modal-description { color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin: -24px 0 32px; }
.selector-group { margin-bottom: 32px; }
.selector-group label { display: block; margin-bottom: 16px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); }
.size-selector { display: flex; flex-wrap: wrap; gap: 12px; }
.size-btn { padding: 12px 24px; border: 1px solid var(--border-color); background: none; cursor: pointer; font-weight: 500; transition: all 0.2s; border-radius: 0; }
.size-btn:hover { border-color: var(--accent-color); }
.size-btn.active { border-color: var(--accent-color); background: var(--accent-color); color: #1E1812; }

.cart-overlay { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; backdrop-filter: blur(5px); }
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-content { position: absolute; top: 0; right: -500px; width: 500px; max-width: 100vw; height: 100%; background: var(--bg-color); display: flex; flex-direction: column; transition: right 0.3s ease; overflow-x: hidden; }
.cart-overlay.open .cart-content { right: 0; }
.cart-header { display: flex; justify-content: space-between; align-items: center; padding: 40px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.cart-header h2 { font-size: 24px; text-transform: uppercase; letter-spacing: -0.5px; }
.cart-items { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 40px; display: flex; flex-direction: column; gap: 32px; }
.cart-empty { text-align: center; color: var(--text-secondary); margin-top: 40px; overflow-wrap: anywhere; }
.cart-item { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--surface-color); padding-bottom: 24px; min-width: 0; }
.cart-item-info { min-width: 0; }
.cart-item-info h4 { font-size: 16px; margin-bottom: 8px; font-weight: 500; overflow-wrap: anywhere; }
.cart-item-info p { color: var(--text-secondary); font-size: 14px; overflow-wrap: anywhere; }
.cart-item-price { font-weight: 600; font-size: 16px; white-space: nowrap; }
.cart-item-remove { font-size: 12px; color: var(--text-secondary); cursor: pointer; margin-top: 12px; display: inline-block; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid; }
.cart-footer { padding: 40px; border-top: 1px solid var(--border-color); background: var(--bg-color); flex-shrink: 0; overflow-x: hidden; }
.cart-total { display: flex; justify-content: space-between; font-weight: 600; font-size: 20px; margin-bottom: 32px; text-transform: uppercase; }
.checkout-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.checkout-form input { padding: 18px; border: 1px solid var(--border-color); font-size: 14px; outline: none; border-radius: 0; }
.checkout-form input:focus { border-color: var(--accent-color); }
.checkout-legal-note { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.checkout-legal-note a { color: var(--text-primary); }
.cart-success { padding: 32px 40px; overflow-y: auto; overflow-x: hidden; }
.success-mark { width: 48px; height: 48px; border-radius: 50%; background: #111; color: #1E1812; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; }
.cart-success h3 { font-size: 28px; text-transform: uppercase; letter-spacing: -0.5px; margin-bottom: 12px; }
.cart-success p { color: var(--text-secondary); margin-bottom: 12px; }
.success-summary { background: var(--surface-color); padding: 20px; margin: 24px 0; }
.success-summary ul { margin: 12px 0 0 18px; }
.success-summary li { margin-bottom: 10px; color: var(--text-secondary); overflow-wrap: anywhere; }
.success-actions { display: flex; flex-direction: column; gap: 12px; }
.success-primary { display: block; text-decoration: none; text-align: center; }
.form-error { background: #FFF2F2; color: #8A1F1F; padding: 14px; border: 1px solid #F1C5C5; margin-bottom: 12px; }

/* =========================================================================
   ЛИЧНЫЙ КАБИНЕТ
   ========================================================================= */
.account-page { margin: 60px auto 80px; }
.account-page h2 { font-size: 36px; margin-bottom: 18px; line-height: 1.15; }
.account-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; align-items: start; min-width: 0; max-width: 1100px; margin: 0 auto; }
.account-grid .info-card { min-width: 0; padding: 32px; }
/* Когда форма входа скрыта — заказы во всю ширину */
.account-grid--logged-in { grid-template-columns: 1fr; max-width: 800px; }
.account-login-card h3 { margin-bottom: 16px; }
.account-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.account-tab { background: none; border: none; padding: 10px 4px; margin-right: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0.4px; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; text-transform: none; }
.account-tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.account-mode { display: flex; flex-direction: column; gap: 12px; }
.account-hint { margin-top: 12px; color: var(--text-secondary); font-size: 13px; min-height: 18px; }
.account-state-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.account-state { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; line-height: 1.5; }
.account-orders { display: flex; flex-direction: column; gap: 16px; }
.account-orders .order-card { background: var(--surface-elevated); border: 1px solid var(--border-color); padding: 20px; transition: border-color 0.2s; }
.account-orders .order-card:hover { border-color: var(--text-primary); }
.account-orders .order-card h4 { font-size: 16px; margin-bottom: 12px; letter-spacing: 0.3px; }
.account-orders .order-card p { font-size: 14px; color: var(--text-secondary); margin: 6px 0; line-height: 1.5; }
.account-orders .order-card p strong { color: var(--text-primary); font-weight: 500; margin-right: 6px; }
.account-logout { /* визуал унаследован из дизайн-системы (.account-logout = .btn--ghost.btn--sm) */ }
.account-logout:hover { color: var(--text-primary); }

@media (max-width: 900px) {
    .account-grid { grid-template-columns: 1fr; gap: 16px; }
    .account-page { margin: 32px auto 60px; padding: 0 16px; }
    .account-grid .info-card { padding: 20px; }
}

/* =========================================================================
   АДАПТИВ (Media Queries)
   ========================================================================= */

/* Планшеты (до 1024px) */
@media (max-width: 1024px) {
    .hero { flex-direction: column; margin: 40px auto; padding: 0 24px; gap: 40px; text-align: center; }
    .hero-content h1 { font-size: 56px; }
    .hero-content p { margin: 0 auto 32px; }
    .hero-image { width: 100%; height: 500px; }

    .philosophy { flex-direction: column; gap: 40px; padding: 80px 24px 0; }
    .philosophy-image { width: 100%; height: 500px; }
    .details-grid { grid-template-columns: 1fr; gap: 40px; }
    .details-image-box { width: 100%; height: 500px; }

    .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .product-image { height: 450px; }
    .info-grid { grid-template-columns: 1fr; }
    
    .footer-content { grid-template-columns: 1fr 1fr; gap: 40px; }
    
    .modal-content { padding: 40px; flex-direction: column; max-height: 90vh; overflow-y: auto; }
    .modal-body { flex-direction: column; gap: 32px; }
    .modal-image { height: 400px; }
}

/* Мобильные телефоны (до 768px) */
@media (max-width: 768px) {
    .navbar { padding: 16px 20px; }
    .nav-links { display: none; /* Скрываем меню на мобилке, оставляем лого и корзину */ }
    .header-actions { gap: 12px; }
    .phone-link { display: none; }
    .account-link, .cart-icon { font-size: 12px; letter-spacing: 0.2px; }
    
    .hero { margin: 20px auto; padding: 0 20px; }
    .hero-content h1 { font-size: 40px; letter-spacing: -1px; }
    .hero-content p { font-size: 16px; }
    .hero-image { height: 400px; }
    
    .philosophy { padding: 60px 20px 0; gap: 32px; }
    .philosophy-content h2, .details-info-box h2 { font-size: 32px; text-align: center; }
    .philosophy-lead { font-size: 16px; text-align: center; margin-bottom: 32px; }
    .philosophy-bullets { gap: 24px; }
    .bullet { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: flex-start; }
    .bullet-num { font-size: 18px; line-height: 1; width: 42px; padding-bottom: 6px; text-align: left; }
    .bullet-text { min-width: 0; }
    .bullet-text h4 { font-size: 15px; line-height: 1.25; letter-spacing: 0.2px; margin-bottom: 6px; overflow-wrap: normal; hyphens: none; }
    .bullet-text p { font-size: 14px; line-height: 1.55; }
    .philosophy-image { height: 400px; }

    .details-image-box { height: 400px; }

    .features { flex-direction: column; gap: 32px; margin: 60px auto; padding: 40px 20px 0; }
    
    .catalog { margin: 80px auto; padding: 0 20px; }
    .catalog h2 { font-size: 32px; margin-bottom: 40px; text-align: center; }
    .section-lead { margin: -20px 0 32px; text-align: center; font-size: 15px; }
    .catalog-grid { grid-template-columns: 1fr; gap: 40px; }
    .product-image { height: 500px; }

    .info-section { margin: 80px auto; padding: 60px 20px; }
    .info-section h2 { font-size: 32px; text-align: center; }

    .faq { margin: 80px auto; padding: 0 20px; }
    .faq h2 { font-size: 32px; margin-bottom: 40px; text-align: center; }
    .faq-item h4 { font-size: 18px; }

    footer { padding: 60px 20px; margin-top: 80px; }
    .footer-content { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    
    .modal-overlay { align-items: flex-start; overflow-y: auto; }
    .modal-content { width: calc(100vw - 24px); max-width: calc(100vw - 24px); margin: 12px; padding: 24px; max-height: none; overflow-x: hidden; }
    .modal-info h2 { font-size: 28px; }
    .modal-image { width: 100%; height: 300px; max-width: 100%; }
    .size-btn { padding: 12px 16px; }
    
    .cart-content { width: 100vw; max-width: 100vw; right: -100vw; }
    .cart-header { padding: 24px; }
    .cart-items { padding: 24px; }
    .cart-item { flex-direction: column; align-items: flex-start; }
    .cart-item-price { white-space: normal; }
    .cart-footer { padding: 24px; }
    .cart-success { padding: 24px; }
    .success-actions .cta-button, .success-actions .btn-secondary { width: 100%; }
    .success-actions .btn { width: 100%; }
}

/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
    .hero-content h1 { font-size: 32px; }
    .product-image { height: 400px; }
    .modal-content { width: calc(100vw - 16px); max-width: calc(100vw - 16px); margin: 8px; padding: 20px; }
    .modal-image { height: 250px; }
}

/* Boot-spinner для ЛК и админки — убирает FOUC формы логина при F5 */
.account-boot { max-width: 420px; margin: 60px auto; padding: 32px; text-align: center; }
.account-boot-spinner {
    width: 32px; height: 32px; margin: 0 auto;
    border: 2px solid var(--border-color);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: account-spin 0.8s linear infinite;
}
@keyframes account-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   APP MODAL — универсальные диалоги (alert/confirm/form)
   Не путать с .modal-overlay (карточка товара в каталоге).
   ========================================================================= */
.app-modal-host { position: relative; }
.app-modal-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 8vh 16px 16px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    opacity: 0; transition: opacity 0.15s;
    overflow-y: auto;
}
.app-modal-overlay.app-modal-open { opacity: 1; }
.app-modal-overlay.app-modal-closing { opacity: 0; }
.app-modal-panel {
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 0;
    width: 100%; max-width: 520px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
    transform: translateY(-8px);
    transition: transform 0.15s;
    display: flex; flex-direction: column;
}
.app-modal-overlay.app-modal-open .app-modal-panel { transform: translateY(0); }
.app-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px; border-bottom: 1px solid var(--border-color);
}
.app-modal-title { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }
.app-modal-close {
    background: none; border: none; font-size: 28px; line-height: 1;
    cursor: pointer; color: var(--text-secondary); padding: 0; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s;
}
.app-modal-close:hover { color: var(--text-primary); }
.app-modal-body { padding: 24px; overflow-y: auto; max-height: 65vh; }
.app-modal-footer {
    display: flex; justify-content: flex-end; gap: 12px;
    padding: 16px 24px; border-top: 1px solid var(--border-color);
    background: var(--surface-color);
}
.app-modal-msg { font-size: 14px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; margin: 0; }
.app-modal-msg--danger { color: var(--color-danger); }
.app-modal-msg--success { color: var(--color-success); }
.app-modal-intro { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }
.app-modal-field { margin-bottom: 16px; }
.app-modal-field label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 6px; }
.app-modal-field input,
.app-modal-field textarea,
.app-modal-field select { width: 100%; padding: var(--field-pad); font-size: var(--field-font); border: 1px solid var(--border-color); border-radius: 0; background: var(--surface-elevated); outline: none; box-sizing: border-box; transition: border-color 0.2s; font-family: inherit; }
.app-modal-field input:focus,
.app-modal-field textarea:focus,
.app-modal-field select:focus { border-color: var(--text-primary); }
.app-modal-help { font-size: 11px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.app-modal-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.app-modal-checkbox { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border-color); cursor: pointer; transition: border-color 0.2s; user-select: none; font-size: 13px; }
.app-modal-checkbox:hover { border-color: var(--text-primary); }
.app-modal-checkbox input { width: auto; margin: 0; padding: 0; cursor: pointer; }
.app-modal-checkbox input:checked + span { font-weight: 600; }
.app-modal-error { color: var(--color-danger); background: var(--color-danger-bg); border: 1px solid var(--color-danger-border); padding: 10px 12px; font-size: 13px; margin-top: 12px; }

@media (max-width: 600px) {
    .app-modal-overlay { padding: 6vh 8px 8px; }
    .app-modal-panel { max-width: 100%; }
    .app-modal-body { padding: 16px; max-height: 70vh; }
    .app-modal-footer { padding: 12px 16px; flex-direction: column-reverse; }
    .app-modal-footer .btn { width: 100%; }
}


/* beinform dark-sand refinement */
body { background: radial-gradient(circle at 20% 0%, rgba(201,154,90,0.12), transparent 32%), var(--bg-color); }
.navbar, .admin-header { background: rgba(30,24,18,0.92) !important; backdrop-filter: blur(10px); }
.product-card, .info-card, .detail-block, .order-row, .product-row, .account-orders .order-card { border-radius: 18px; }
.product-image, .hero-image, .philosophy-image, .details-image-box, .modal-image { border-radius: 22px; border: 1px solid var(--border-color); }
.btn, .cta-button, .btn-secondary, .admin-search-btn, .account-logout, .field, input, textarea, select { border-radius: 999px; }
textarea { border-radius: 18px; }
.modal-content, .cart-content, .app-modal-panel { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 24px; }
.cart-content { border-radius: 24px 0 0 24px; }
.product-gallery { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 12px; }
.product-gallery-main { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.product-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.product-gallery-thumb { width: 64px; height: 64px; flex: 0 0 auto; border: 1px solid var(--border-color); background: var(--surface-elevated); padding: 4px; cursor: pointer; border-radius: 12px; }
.product-gallery-thumb.active { border-color: var(--accent-color); }
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.account-grid--logged-in { max-width: 920px; }
.account-orders .order-card { padding: 24px; }
.account-state { max-width: 680px; }
.admin-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.admin-photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--surface-color); border: 1px solid var(--border-color); }
.variant-group { border: 1px solid var(--border-color); border-radius: 16px; padding: 12px; margin-bottom: 12px; background: var(--surface-elevated); }
.variant-group summary { cursor: pointer; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.variant-group summary span { color: var(--text-secondary); font-weight: 500; }
.stock-grid--compact { grid-template-columns: 80px 100px minmax(0,1fr); }
.app-modal-checkbox { border-radius: 14px; background: var(--surface-elevated); }
a { color: var(--text-primary); }
@media (max-width: 768px) {
  .hero-content h1 { font-size: clamp(32px, 10vw, 44px); }
  .modal-content, .cart-content { border-radius: 18px; }
  .stock-grid--compact { grid-template-columns: 72px 90px minmax(0,1fr); }
}

/* Storefront CMS/catalog refinements */
.store-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; cursor: default; }
.store-card-main { position: relative; border: 0; background: transparent; width: 100%; text-align: left; padding: 0; }
.catalog-card-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; aspect-ratio: 4 / 5; background: var(--surface-color); scrollbar-width: thin; }
.catalog-card-scroll::-webkit-scrollbar { height: 5px; }
.catalog-card-scroll::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 999px; }
.catalog-card-img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.store-card:hover .catalog-card-img { transform: none; }
.catalog-scroll-controls { position: absolute; left: 12px; right: 12px; top: 42%; display: flex; justify-content: space-between; pointer-events: none; z-index: 3; }
.catalog-scroll-controls button { pointer-events: auto; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,248,238,.45); background: rgba(30,24,18,.55); color: var(--text-primary); font-size: 22px; cursor: pointer; }
.store-card-open { position: absolute; inset: 0 0 94px 0; border: 0; background: transparent; cursor: pointer; z-index: 2; }
.store-card-actions { padding: 0 20px 20px; display: grid; gap: 10px; }
.quantity-control { display: inline-flex; align-items: center; border: 1px solid var(--border-color); background: var(--surface-elevated); }
.quantity-control button { width: 42px; height: 42px; border: 0; background: transparent; color: var(--text-primary); font-size: 18px; cursor: pointer; }
.quantity-control span { min-width: 42px; text-align: center; color: var(--text-primary); }
.quantity-control--sm button { width: 32px; height: 32px; }
.quantity-control--sm span { min-width: 34px; }
.cart-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.cart-item-img { width: 72px; height: 90px; object-fit: cover; background: var(--surface-color); }
.cart-item-side { display: grid; gap: 8px; justify-items: end; }
.cart-remove-icon { border: 1px solid var(--border-color); background: var(--surface-elevated); color: var(--text-secondary); width: 36px; height: 36px; cursor: pointer; }
.cart-remove-icon:hover { border-color: var(--color-danger-border); color: var(--text-primary); }
.checkout-form input.field-valid { border-color: var(--color-success-border); }
.checkout-form input.field-invalid { border-color: var(--color-danger-border); }
.faq-list { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { background: var(--surface-color); border: 1px solid var(--border-color); padding: 0; }
.faq-item summary { cursor: pointer; padding: 20px 24px; font-weight: 700; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { padding: 0 24px 22px; color: var(--text-secondary); }
.checkbox-line { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--text-secondary); }
.checkbox-line input { width: auto; }
@media (max-width: 640px) { .cart-item { grid-template-columns: 56px 1fr; } .cart-item-side { grid-column: 2; justify-items: start; } .catalog-scroll-controls { display: none; } }