/* ─────────────────────────────────────────────────────────────
   Тема «MAISON» — мова оформлення великих модних домів.

   Що взято як принцип (не як копія чужого бренду):
   · фото на всю ширину, без рамок і полів — знімок головний
   · монохромний інтерфейс: увесь колір дає товар на фото,
     а не кнопки. Саме це відрізняє «дорого» від «розпродаж»
   · дуже широке міжлітерне розрідження в дрібних написах
   · багато повітря: секції дихають, розділені волосяними лініями
   · кнопка — тонкий прямокутник, не масивна плашка
   · жодних тіней, заокруглень, градієнтів і пульсацій

   Компроміс: акційні елементи (знижка, таймер, залишок) у справжніх
   модних домах відсутні — вони суперечать «дорого». Але для реклами
   вони потрібні, тому лишені й приглушені: чорно-білі, дрібні,
   без кричущих кольорів.
   ───────────────────────────────────────────────────────────── */

:root {
    --bg-page: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #f7f7f5;
    --bg-dark: #000000;

    --text-primary: #000000;
    --text-secondary: #55534f;
    --text-muted: #8e8b86;
    --text-light: #ffffff;

    --gold: #000000;            /* акцент — сам чорний, як у модних домах */
    --gold-light: #f0efec;
    --gold-dark: #000000;

    --border: rgba(0, 0, 0, 0.10);
    --border-strong: #000000;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-gold: none;

    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
}

/* ── Полотно ───────────────────────────────────────────────── */
.page-bg { background: #ffffff; padding: 0 0 80px; }

.main_wrapper {
    max-width: 620px;
    box-shadow: none;
    border-radius: 0;
}

/* ── Верхня стрічка ────────────────────────────────────────── */
.top-bar {
    background: #ffffff;
    color: #000000;
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.3em;
    font-size: 9px;
    font-weight: 500;
    padding: 14px 16px;
}

.top-bar-icon { display: none; }

/* ── Шапка: назва бренду як логотип ────────────────────────── */
.site-header {
    background: #ffffff;
    padding: 34px 20px 26px;
    border-bottom: none;
}

.brand-label {
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 18px;
}

.header-title-main {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.9;
    color: var(--text-secondary);
}

.header-title-main em { font-style: normal; display: block; color: var(--text-muted); }

.header-title-main br { display: none; }

.stats-bar {
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    border-bottom: none;
    padding: 12px 16px;
}

.stat-dot { display: none; }

/* ── Головний екран: фото на всю ширину ────────────────────── */
.hero { padding: 0 0 34px; }

.hero-image {
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 28px;
}

.hero-content { padding: 0 20px; }

.badge-sale {
    top: 16px;
    left: 16px;
    right: auto;
    border-radius: 0;
    background: #ffffff;
    color: #000000;
    box-shadow: none;
    animation: none;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    text-wrap: balance;
}

.hero-title span { color: var(--text-muted); font-style: italic; }

.hero-tagline {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 26px;
}

/* Ціна — стримано, без кольорових плашок */
.price-row { gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.price-old, .price-new {
    border-radius: 0;
    background: transparent;
    border: none;
    padding: 18px 0;
    font-size: 9px;
    letter-spacing: 0.22em;
}

.price-old { border-right: 1px solid var(--border); padding-right: 18px; }
.price-new { padding-left: 18px; color: var(--text-primary); }
.price-old span { color: var(--text-muted); font-size: 17px; }
.price-new span { color: #000000; font-size: 24px; letter-spacing: -0.01em; }

.trust-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 13px 0;
    font-size: 11px;
}

.trust-icon { color: var(--text-muted); }
.trust-text { letter-spacing: 0.06em; }

.hero-countdown {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 16px 0 4px;
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
    justify-content: center;
}

#countdown { color: #000000; font-weight: 500; }

.hero-note {
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 14px;
}

/* ── Кнопки: тонкий прямокутник ────────────────────────────── */
.btn-primary {
    background: #000000;
    border-radius: 0;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: 10px;
    font-weight: 500;
    padding: 19px 22px;
    transition: opacity 0.25s ease;
}

.btn-primary:hover { opacity: 0.78; background: #000000; }

.btn-outline {
    border-radius: 0;
    border: 1px solid #000000;
    color: #000000;
    letter-spacing: 0.26em;
    font-size: 10px;
    font-weight: 500;
    padding: 14px 22px;
    transition: background 0.25s ease, color 0.25s ease;
}

.btn-outline:hover { background: #000000; color: #ffffff; }

/* ── Секції: більше повітря ────────────────────────────────── */
.section { padding: 56px 20px 58px; border-top: 1px solid var(--border); }

.section-benefits,
.section-colors,
.section-steps { background: #ffffff; }

.section-label {
    color: var(--text-muted);
    letter-spacing: 0.4em;
    font-size: 8px;
    font-weight: 500;
    margin-bottom: 14px;
}

.section-title {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin-bottom: 12px;
}

.section-subtitle { font-size: 13px; color: var(--text-muted); }

.benefit-item {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.benefit-item img { border-radius: 0; margin-bottom: 12px; }

.benefit-item h3 {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
}

.benefit-item p { font-size: 12px; color: var(--text-muted); }

/* ── Опис, розміри ─────────────────────────────────────────── */
.list-specs li {
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 13px 0;
}

.size-table-wrapper { border-radius: 0; }
.size-table th { background: #000000; color: #ffffff; letter-spacing: 0.14em; font-size: 10px; }
.size-note { border-radius: 0; background: transparent; }

/* ── Кольори, відгуки, кроки, питання ──────────────────────── */
.color-card {
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 0 0 26px;
    margin-bottom: 26px;
    background: transparent;
}

.color-slider { background: #ffffff; border-radius: 0; }
.color-slider img { border-radius: 0; }

.color-info h3 {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 500;
}

.color-swatch { border-radius: 0; }

.review-card {
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    padding: 22px 0 0;
    background: transparent;
}

.review-stars { color: #000000; font-size: 11px; letter-spacing: 0.2em; }
.avatar { border-radius: 0; background: #000000; color: #ffffff; }
.review-name { letter-spacing: 0.1em; font-size: 11px; text-transform: uppercase; }
.review-tag { font-size: 10px; letter-spacing: 0.14em; }

.step-number { border-radius: 0; background: #000000; color: #ffffff; }

.step-item h3 {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
}

.faq-item {
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.faq-item summary { padding: 18px 40px 18px 0; font-weight: 400; letter-spacing: 0.02em; }

/* ── Форма замовлення ──────────────────────────────────────── */
.order { background: #ffffff; border-top: 1px solid var(--border); }

.order-price-highlight {
    border-radius: 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 18px 0;
}

.order-price-highlight span { color: #000000; font-weight: 600; }

.main-order-form label {
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.main-order-form input[type="text"],
.main-order-form input[type="tel"],
.main-order-form select {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    background: transparent;
    color: #000000;
    padding-left: 0;
    padding-right: 0;
}

.main-order-form input:focus,
.main-order-form select:focus {
    border-bottom-color: #000000;
    outline: none;
}

.main-order-form input::placeholder { color: var(--text-muted); }

.input-hint { font-size: 10px; letter-spacing: 0.1em; color: var(--text-muted); }
.privacy-note { font-size: 9px; letter-spacing: 0.12em; color: var(--text-muted); }

/* ── Підвал і спливаючі повідомлення ───────────────────────── */
.site-footer {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 34px 20px 38px;
}

.social-toast {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #000000;
    background: #ffffff;
}

.social-toast__icon { border-radius: 0; background: #000000; color: #ffffff; }
.social-toast__title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.social-toast__text { font-size: 11px; color: var(--text-muted); }