/* ─────────────────────────────────────────────────────────────
   Тема «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-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.header-title-main {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    line-height: 1.28;
    color: var(--text-primary);
}

.header-title-main em {
    font-style: normal;
    display: block;
    margin-top: 10px;
    font-family: var(--font-sans);
    font-size: 8px;
    letter-spacing: 0.28em;
    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;
    text-align: center;
}

/* Перелік кольорів — окремим елементом, щоб його можна було ставити
   в будь-яке місце блоку (порядок задається через order у .hero-content) */
.hero-colors {
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 18px;
}

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

/* Порядок блоків: заголовок → кольори → ціна → опис.
   Клієнтка приходить із реклами, де вже бачила фото й ціну, і за секунду
   шукає підтвердження — тому ціна стоїть високо й великим числом. */
.hero-content { display: flex; flex-direction: column; }

.hero-title     { order: 1; }
.hero-colors    { order: 2; }
.price-row      { order: 3; }
.hero-tagline   { order: 4; }
.trust-bar      { order: 5; }
.hero-countdown { order: 6; }
.btn-primary    { order: 7; }
.hero-note      { order: 8; }

.price-row {
    display: flex;
    flex-direction: column-reverse;   /* нова ціна зверху, стара під нею */
    align-items: center;
    gap: 8px;
    border: none;
    padding: 0 0 22px;
}

/* font-size: 0 ховає підписи «Звичайна ціна» / «Ціна сьогодні»,
   лишаючи самі числа у span */
.price-old, .price-new {
    flex: 0 0 auto;
    border-radius: 0;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0;
    letter-spacing: normal;
}

/* Стара ціна — чорна плашка з білим закресленим числом */
.price-old span {
    display: inline-block;
    font-size: 13px;
    background: #0a0a0a;
    color: #ffffff;
    padding: 6px 12px;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    letter-spacing: 0.04em;
    font-weight: 400;
}

.price-new span {
    font-size: 46px;
    color: #000000;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
}

.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,
.section-title,
.section-subtitle,
.section-head { text-align: center; }

.section-label {
    color: var(--text-muted);
    letter-spacing: 0.4em;
    font-size: 9px;
    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 { max-width: 460px; margin: 0 auto; }

/* Рядки щільні свідомо: розріджений перелік на 13 пунктів займає два
   екрани, і його просто гортають повз, не читаючи */
.list-specs li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
    text-align: right;
}

.list-specs li::before,
.list-specs li::marker { content: none; display: none; }

.list-specs li b {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
}

.size-table-wrapper { border-radius: 0; }

/* Схема замірів під таблицею */
/* Таблиця ліворуч, схема замірів праворуч — так їх читають разом,
   а не гортають окремо */
.size-block {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.size-block .size-table-wrapper { flex: 1 1 auto; min-width: 0; }

.size-guide {
    flex: 0 0 128px;
    margin: 0;
    padding-top: 4px;
}

.size-guide svg,
.size-guide img { width: 100%; height: auto; display: block; }

/* На телефоні поруч не влізе — схема стає під таблицею */
@media (max-width: 560px) {
    .size-block { flex-direction: column; }
    .size-guide { flex: none; max-width: 260px; margin: 26px auto 0; }
}

/* Контур фігури світліший за лінії замірів — щоб око читало передусім,
   ЩО вимірюють, а не саму фігуру */
.size-guide .figure {
    fill: none;
    stroke: #b7b3ad;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Лінії замірів пунктиром, щоб не сперечались із контуром фігури */
.size-guide .measure {
    fill: none;
    stroke: #0a0a0a;
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.size-guide .arrow {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1;
}

.size-guide .label {
    font-family: var(--font-sans);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    fill: var(--text-muted);
}
.size-table th { background: #000000; color: #ffffff; letter-spacing: 0.14em; font-size: 10px; }

/* Колонки розмірів: числа не переносяться. «48-50» і «76–104» на телефоні
   розривались на два рядки й таблиця виглядала поламаною */
.size-table th:not(:first-child),
.size-table td:not(:first-child) {
    white-space: nowrap;
    text-align: center;
}

/* Назви замірів — по центру своєї колонки */
.size-table th:first-child,
.size-table td:first-child {
    text-align: center;
    line-height: 1.35;
}
.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-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.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-item { text-align: center; }

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

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

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

.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: #0a0a0a; border-top: none; }

.order .section-label { color: rgba(255, 255, 255, 0.5); }
.order .section-title { color: #ffffff; }
.order .section-subtitle { color: rgba(255, 255, 255, 0.6); }

.order-price-highlight {
    border-radius: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    letter-spacing: 0.02em;
    padding: 16px;
}

.order-price-highlight span { color: #ffffff; font-weight: 600; }
.order-price-highlight s { color: rgba(255, 255, 255, 0.4); }

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

.main-order-form input[type="text"],
.main-order-form input[type="tel"],
.main-order-form select {
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #ffffff;
}

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

.main-order-form input::placeholder { color: rgba(255, 255, 255, 0.35); }

/* Чорна кнопка на чорному тлі не видно — тут вона біла */
.order .btn-primary { background: #ffffff; color: #0a0a0a; }
.order .btn-primary:hover { background: rgba(255, 255, 255, 0.85); }

.input-hint { font-size: 10px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.45); }
.privacy-note { font-size: 9px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.4); }

/* ── Сторінка подяки ───────────────────────────────────────────
   Оформлюється так само, як лендінг: без заокруглень, тіней і золота.
   Клієнтка щойно бачила одну естетику — на цій сторінці не має
   відчути, що потрапила на інший сайт. */
.thankyou-page { background: #ffffff; padding: 0 0 60px; }

.thankyou-card {
    border-radius: 0;
    box-shadow: none;
    border: none;
    max-width: 620px;
    overflow: visible;
}

.thankyou-top {
    background: #0a0a0a;
    border-radius: 0;
    padding: 44px 24px 40px;
}

.thankyou-icon {
    border-radius: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    box-shadow: none;
    font-size: 20px;
}

.thankyou-title {
    font-family: var(--font-serif);
    font-weight: 400;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.thankyou-subtitle { color: rgba(255, 255, 255, 0.65); }

.thankyou-body { background: #ffffff; padding: 34px 24px 40px; }

.thankyou-order {
    border-radius: 0;
    background: transparent;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 18px 0;
}

.thankyou-order strong { color: #000000; }

.thankyou-step {
    border-radius: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.thankyou-step-num {
    border-radius: 0;
    background: #0a0a0a;
    color: #ffffff;
    font-size: 10px;
}

.thankyou-note {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.btn-home {
    border-radius: 0;
    background: #0a0a0a;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: 10px;
    font-weight: 500;
    padding: 19px 22px;
    box-shadow: none;
}

.btn-home:hover { opacity: 0.8; background: #0a0a0a; }

/* ── Підвал і спливаючі повідомлення ───────────────────────── */
/* Підвал темний і завершує сторінку логотипом — як у модних домів,
   де назва бренду стоїть останнім акордом, а не губиться в дрібному тексті */
.site-footer {
    background: #0a0a0a;
    border-top: none;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 46px 20px 44px;
    text-align: center;
}

.footer-brand {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 22px;
    padding-left: 0.42em;   /* компенсує розрідження, щоб напис стояв рівно по центру */
}

.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); }