/* ==========================================================================
   Тимчасова сторінка-заглушка вітрини (templates/coming-soon.html).
   Токени беруться з css/shop.css, який підключається перед цим файлом.
   Видаляється разом із заглушкою після відкриття магазину.
   ========================================================================== */

/* Сторінка не підключає Bootstrap, тому власний reboot тут мінімальний */
.coming-soon-page {
    display: flex;
    min-height: 100vh;
    margin: 0;
}

.coming-soon {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-4);
}

/* 44rem — щоб заголовок лишався в один рядок навіть коли --fs-display
   упирається у свою стелю (від ~1250px), інакше сторінка не влазить в 800px
   висоти. Абзац нижче тримає власну, вужчу міру рядка. */
.coming-soon-inner {
    max-width: 44rem;
    text-align: center;
}

.coming-soon-logo {
    width: 190px;
    max-width: 60%;
    height: auto;
    margin-bottom: var(--sp-5);
}

.coming-soon-mascot {
    display: block;
    width: 195px;
    max-width: 60%;
    height: auto;
    margin: 0 auto var(--sp-5);
}

.coming-soon-title {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-display);
    font-weight: 700;
    letter-spacing: -.03em;
}

.coming-soon-text {
    max-width: 34rem;
    margin: 0 auto var(--sp-4);
    color: var(--shop-ink-soft);
    font-size: var(--fs-md);
}

.coming-soon-note {
    margin: 0 0 var(--sp-4);
    color: var(--shop-ink-faint);
    font-size: var(--fs-sm);
}

/* Кнопка тут єдина на сторінці, тому трохи більша за героєву */
.coming-soon-cta {
    padding: .8rem 1.9rem;
    font-size: var(--fs-base);
}

.coming-soon-cta-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.coming-soon-handle {
    margin: var(--sp-3) 0 0;
    color: var(--shop-ink-faint);
    font-size: var(--fs-xs);
}

@media (max-width: 767.98px) {
    .coming-soon {
        padding: var(--sp-6) var(--sp-4);
    }

    .coming-soon-logo {
        width: 150px;
        margin-bottom: var(--sp-4);
    }

    .coming-soon-mascot {
        width: 180px;
        margin-bottom: var(--sp-4);
    }
}