/* =========================================================================
   assets/decal-page.css
   Сторінка окремої наліпки на скло в новому шаблоні:
   хлібні крихти, макет, конфігуратор (колір, розмір, терміновість), ціна.

   Спирається на токени /assets/ui.css і блоки /assets/blocks.css —
   підключати ПІСЛЯ них. Власних кольорів тут немає: усе через var().

   Файл писався під /decal/coffee_window_sticker/coffee-shop-cup.php,
   але нічого специфічного для однієї наліпки в ньому немає — решта
   сторінок /decal/** переїжджатиме на нього ж.
   ========================================================================= */

/* ------------------------------------------------------------------
   Хлібні крихти
   ------------------------------------------------------------------ */
.dpage-crumbs {
    font-size: var(--fs-sm);
    color: var(--g-600);
}
.dpage-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Селектор із li навмисно: blocks.css підкреслює будь-яке посилання
   всередині .sec li як текстове (.sec li a — та сама вага). Без li наше
   правило програвало б, і крихти йшли б підкресленими. */
.dpage-crumbs li a {
    color: var(--g-700);
    text-decoration: none;
}
.dpage-crumbs li a:hover { color: var(--c-brand); text-decoration: underline; }
.dpage-crumbs li + li::before {
    content: '/';
    margin-right: 6px;
    color: var(--g-400);
}
.dpage-crumbs [aria-current] { color: var(--g-900); font-weight: var(--fw-semi); }

/* Артикул під заголовком: назва з каталогу, матеріал і ціна «від».
   Дрібним — це не заголовок, а довідка, за якою впізнають виріб. */
.dpage-sku {
    margin: 10px 0 0;
    font-size: var(--fs-sm);
    color: var(--g-600);
}
.dpage-sku b { color: var(--g-900); font-weight: var(--fw-semi); }

/* ------------------------------------------------------------------
   Макет наліпки
   ------------------------------------------------------------------
   Прев'ю показуємо на темному склі, а не на білому тлі сторінки:
   плівка працює саме так — світлий напис на темному отворі вітрини.
   На білому «Білий» колір просто зникав би, а його обирають найчастіше.
   ------------------------------------------------------------------ */
.dpage-preview {
    position: sticky;
    top: 96px;              /* нижче липкої шапки */
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--c-navy-deep);
    box-shadow: var(--sh-lg, 0 18px 40px -12px rgba(16, 24, 40, .28));
}
.dpage-preview svg { display: block; width: 100%; height: auto; }

.dpage-preview__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 2px 0;
    font-size: var(--fs-xs);
    color: var(--g-600);
    line-height: 1.5;
}
.dpage-preview__note i { flex-shrink: 0; margin-top: 1px; color: var(--g-400); }

@media (max-width: 860px) {
    /* Липкий макет має сенс лише поруч із конфігуратором. У стовпчик
       він перетворився б на банер, що з'їдає третину екрана. */
    .dpage-preview { position: static; }
}

/* ------------------------------------------------------------------
   Розкладка «макет + конфігуратор»
   ------------------------------------------------------------------
   Стандартний .split віддає більше місця медіа — картинці. Тут навпаки:
   ліворуч статичний макет, а праворуч дванадцять кольорів, два поля й
   три тарифи, які треба вмістити в один ряд. Тому колонки міняються
   вагою. За межами цієї сторінки .split лишається як був.
   ------------------------------------------------------------------ */
/* align-items: start, а не center зі стандартного .split: колонки різної
   висоти, і центрування підвішувало макет посеред конфігуратора —
   верхні краї двох блоків не сходилися й розкладка виглядала з'їхавшою. */
.dpage-split {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: start;
    /* Різні відступи по осях: між колонками потрібне повітря, а між
       макетом і поясненням під ним — ні, це один блок. */
    column-gap: clamp(24px, 4vw, 56px);
    row-gap: 12px;
}

/* ------------------------------------------------------------------
   Телефон: макет і параметри — одним блоком
   ------------------------------------------------------------------
   860px — точка зламу самого .split у blocks.css. Повторити її тут
   ОБОВ'ЯЗКОВО: правило .dpage-split вантажиться пізніше й з тією ж
   вагою, тож без цього медіа-запиту воно перебивало стакання, і на
   телефоні конфігуратор лишався другою колонкою — половина полів
   просто виїжджала за екран.

   Друге: display:contents розчиняє обгортку .dpage-media, і макет із
   поясненням перестають бути одним блоком — стають сусідніми елементами
   сітки нарівні з конфігуратором. Далі order розставляє їх так, щоб між
   візуалізацією і параметрами не стояло нічого, а довідковий текст ішов
   після всієї зони замовлення. На десктопі обгортка лишається звичайною,
   і пояснення тримається одразу під макетом.

   Чому не три прямі дитини сітки одразу: другий рядок тягнеться за
   найвищою колонкою, тож на десктопі пояснення опинялося не під макетом,
   а під нижнім краєм конфігуратора — за 300 з гаком пікселів від нього.
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
    .dpage-split {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 14px;
    }
    .dpage-media { display: contents; }
    .dpage-preview       { order: 1; }
    .dpage-config        { order: 2; }
    .dpage-preview__note { order: 3; }
}

/* ------------------------------------------------------------------
   Конфігуратор
   ------------------------------------------------------------------ */
.dpage-config {
    display: grid;
    /* minmax(0, 1fr), а не типове auto: без нуля в мінімумі колонка
       розтягується під найширшу дитину — смугу кольорів і три картки
       тарифів. На телефоні картка через це виїжджала за екран разом із
       половиною полів. Нуль дозволяє їй стиснутись, а смуга кольорів
       тоді прокручується всередині себе, як і задумано. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 26px);
    align-content: start;
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
}

.dpage-block__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0 0 12px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-navy);
}
.dpage-block__title b { color: var(--c-brand); }

/* ------------------------------------------------------------------
   Кольори плівки — рівно один ряд
   ------------------------------------------------------------------
   grid-auto-flow: column тримає всі дванадцять в одному рядку й дає їм
   ділити ширину порівну. minmax(30px, 1fr) — нижня межа: на вузькому
   екрані кружечки не стискаються в цятки, замість цього рядок починає
   прокручуватись. Так «один ряд» лишається правдою скрізь.

   padding 6px з усіх боків — не декор: контейнер прокрутний, тобто
   обрізає все, що виходить за межі, а кільце обраного кольору малюється
   зовнішньою тінню на 4px назовні. З меншим відступом воно зрізалося
   згори й знизу.
   ------------------------------------------------------------------ */
.dpage-swatches {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(30px, 1fr);
    gap: 7px;
    overflow-x: auto;
    padding: 6px;
    margin: -6px;
    scrollbar-width: thin;
}
.dpage-swatch {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: var(--r-round);
    background: none;
    cursor: pointer;
    transition: transform var(--transition);
}
/* Сам кружечок кольором плівки. Тонка темна обводка всередині —
   інакше білий і м'ята зливаються з карткою конфігуратора. */
.dpage-swatch span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--r-round);
    background: currentColor;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .16);
    transition: box-shadow var(--transition);
}
.dpage-swatch:hover { transform: scale(1.12); }
.dpage-swatch:focus-visible { outline: none; }
.dpage-swatch:focus-visible span { box-shadow: var(--sh-focus), inset 0 0 0 1px rgba(16, 24, 40, .16); }

/* Обраний — кільце навколо кружечка, а не рамка на ньому: рамка з'їдала
   б сам колір, а його тут і оцінюють. */
.dpage-swatch[aria-pressed="true"] span {
    box-shadow: 0 0 0 2px var(--g-0), 0 0 0 4px var(--c-navy),
                inset 0 0 0 1px rgba(16, 24, 40, .16);
}

.dpage-swatch__name {
    margin: 6px 2px 0;
    font-size: var(--fs-sm);
    color: var(--g-700);
}
.dpage-swatch__name b { color: var(--g-900); }

/* ------------------------------------------------------------------
   Кольори на телефоні — двома рядами
   ------------------------------------------------------------------
   Одним рядом кружечок виходив 30px: менше за палець, та ще й із
   прокруткою, тобто половину кольорів треба було спершу знайти.
   Гнучкий рядок із межею 56px сам кладе їх по шість, і кнопка стає
   ~47px — нормальна ціль для дотику. На планшеті ті самі 56px
   вміщаються в один ряд, і він лишається одним.

   Блок стоїть саме ТУТ, після базового .dpage-swatches: вага правил
   однакова, тож вирішує порядок у файлі. Вище він програвав.
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
    .dpage-swatches {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        overflow: visible;
        margin: 0;
        padding: 4px;
    }
    .dpage-swatch {
        flex: 1 1 calc((100% - 50px) / 6);
        max-width: 56px;
    }

}

/* ------------------------------------------------------------------
   Розмір
   ------------------------------------------------------------------ */
.dpage-size {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-3);
}
.dpage-size label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-navy);
}
.dpage-size input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-0);
    color: var(--g-900);
    font-family: var(--font);
    font-size: 1.05rem;
    font-weight: var(--fw-semi);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.dpage-size input:hover:not(:disabled) { border-color: var(--g-400); }
.dpage-size input:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--sh-focus); }
.dpage-size input:disabled { background: var(--g-50); color: var(--g-600); border-style: dashed; }
.dpage-size__hint { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--g-600); }

/* Пояснення, чому замовлення не пішло. Червоне й помітне: людина вже
   натиснула кнопку і чекає результату, а не шукає підказку. */
.dpage-size__error {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--c-danger-bg);
    border-left: 3px solid var(--c-danger);
    font-size: var(--fs-sm);
    color: var(--c-danger);
    line-height: 1.45;
}
.dpage-size__error[hidden] { display: none; }

/* ------------------------------------------------------------------
   Терміновість
   ------------------------------------------------------------------
   У кнопці стоїть не сама назва тарифу, а дата: «за 2 дні» нічого не
   каже людині, яка планує відкриття в четвер. Дедлайн проставляє
   assets/decal-cart.js — він рахує робочі години пн–пт 9:00–19:00.
   ------------------------------------------------------------------ */
/* Три картки в ряд, а не три рядки: так усі варіанти видно одним
   поглядом і порівнюються по вертикалі — назва під назвою, дата під
   датою, ціна під ціною. Рядками доводилося читати кожен окремо. */
.dpage-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.dpage-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 12px 14px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--g-50);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.dpage-tier:hover { border-color: var(--g-400); background: var(--g-0); }

/* Радіо ховаємо, але лишаємо у фокусному порядку: вибір видно по картці,
   а клавіатурна навігація має працювати як зазвичай. */
.dpage-tier input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.dpage-tier:has(input:focus-visible) { box-shadow: var(--sh-focus); }

.dpage-tier__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--g-900);
    line-height: 1.25;
}
.dpage-tier__when {
    font-size: var(--fs-xs);
    color: var(--g-600);
    line-height: 1.3;
    min-height: 1.3em;      /* щоб картки не стрибали, поки дата рахується */
}
.dpage-tier__price {
    margin-top: 6px;
    font-size: 1.35rem;
    font-weight: var(--fw-bold);
    color: var(--c-navy);
    line-height: 1.1;
    white-space: nowrap;
}

/* Обраний — зелений: це підтвердження вибору, а не заклик до дії,
   тож червоний тут був би зайвим сигналом тривоги. */
.dpage-tier:has(input:checked) {
    border-color: var(--c-green, #7AB72B);
    background: #F3FAEC;
}
.dpage-tier:has(input:checked) .dpage-tier__name::before {
    content: '✓ ';
    color: var(--c-green-dark, #5A9A1A);
    font-weight: var(--fw-bold);
}
.dpage-tier:has(input:checked) .dpage-tier__name { color: var(--c-green-dark, #5A9A1A); }

/* Терміновий тариф червоний завжди, а не лише обраний: він коштує
   дорожче й має читатися як виняток, а не як рівноцінний варіант. */
.dpage-tier--rush { background: var(--c-brand-soft); border-color: var(--c-brand-line); }
.dpage-tier--rush .dpage-tier__name,
.dpage-tier--rush .dpage-tier__price { color: var(--c-brand); }
.dpage-tier--rush:hover { border-color: var(--c-brand); background: var(--c-brand-soft); }
.dpage-tier--rush:has(input:checked) { border-color: var(--c-brand); background: #FFEBEC; }
.dpage-tier--rush:has(input:checked) .dpage-tier__name,
.dpage-tier--rush:has(input:checked) .dpage-tier__name::before { color: var(--c-brand); }

/* На вузькому екрані три колонки лишаються, але без великих цифр
   вони не вміщаються — зменшуємо кегль, а не ламаємо ряд. */
@media (max-width: 560px) {
    .dpage-tiers { gap: 6px; }
    .dpage-tier { padding: 10px 8px 12px; }
    .dpage-tier__name { font-size: var(--fs-xs); }
    .dpage-tier__when { font-size: 11px; }
    .dpage-tier__price { font-size: 1.05rem; }
}

/* ------------------------------------------------------------------
   Дзеркальна
   ------------------------------------------------------------------ */
.dpage-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px dashed var(--g-300);
    border-radius: var(--r-md);
    background: var(--g-50);
    font-size: var(--fs-sm);
    color: var(--g-800);
    line-height: 1.45;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.dpage-check:hover { border-color: var(--c-brand-line); background: var(--c-brand-soft); }
.dpage-check input { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; accent-color: var(--c-brand); }

/* ------------------------------------------------------------------
   Підсумок і дії
   ------------------------------------------------------------------ */
.dpage-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: 16px 20px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--c-navy) 0%, #2C5282 100%);
    color: var(--g-0);
}
.dpage-total__label { font-size: var(--fs-sm); opacity: .85; }
.dpage-total__value { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: var(--fw-bold); line-height: 1; }

/* Дві дії поряд і рівні за шириною: жодна не мусить виглядати
   «правильнішою» — кошик потрібен тим, хто бере кілька наліпок. */
.dpage-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-3);
}
.dpage-actions .ui-btn { width: 100%; }
.dpage-actions__hint {
    margin: -6px 0 0;
    font-size: var(--fs-xs);
    color: var(--g-600);
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Підказки-відео
   ------------------------------------------------------------------ */
.dpage-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* li в селекторі — з тієї ж причини, що й у крихтах: інакше .sec li a
   з blocks.css підкреслює чипи як звичайні текстові посилання. */
.dpage-hints li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--g-200);
    border-radius: var(--r-pill);
    background: var(--g-50);
    font-size: var(--fs-xs);
    color: var(--g-700);
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.dpage-hints li a:hover { border-color: var(--c-brand-line); background: var(--c-brand-soft); color: var(--c-brand); text-decoration: none; }

/* На телефоні чип був 33px заввишки — замало, щоб упевнено влучити
   пальцем. Блок після базового правила: вага однакова, вирішує порядок. */
@media (max-width: 860px) {
    .dpage-hints li a { padding: 10px 14px; }
}

/* ------------------------------------------------------------------
   Переваги: три картки в один ряд
   ------------------------------------------------------------------
   Стандартний .advantages-grid бере minmax(280px, 1fr), і у вузькому
   контейнері (820px) третя картка зривалася в другий ряд сама —
   виходив сирітський блок під двома. 210px дають рівно три колонки.
   ------------------------------------------------------------------ */
.dpage-adv { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ------------------------------------------------------------------
   Галерея зразків
   ------------------------------------------------------------------ */
.dpage-gallery figure { margin: 0; }
.dpage-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.dpage-gallery figcaption {
    margin-top: 10px;
    font-size: var(--fs-sm);
    color: var(--g-700);
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Сітка карток: сусідні наліпки на сторінці товару й весь каталог
   на window-advertising-decals.php — це один і той самий компонент
   ------------------------------------------------------------------ */
.dpage-cards {
    display: grid;
    /* 150px, а не 180: на телефоні шириною 390px при 180px другій картці
       не вистачало кількох пікселів, і каталог із вісімдесяти позицій
       вишиковувався в один нескінченний стовпчик. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
}
.dpage-cards a {
    display: block;
    padding: 10px;
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--g-0);
    color: var(--c-navy);
    text-decoration: none;
    text-align: center;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.dpage-cards a:hover {
    border-color: var(--c-brand-line);
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
}
/* Обгортка картинки — щоб було до чого притулити номер */
.dpage-cards__pic { position: relative; display: block; }
.dpage-cards img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }

/* Номер макета в кутку картинки. Темна напівпрозора плашка читається
   і на світлому склі, і на темній вітрині — фони в каталозі різні. */
.dpage-cards__num {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: rgba(13, 31, 51, .82);
    color: #fff;
    font-size: 11px;
    font-weight: var(--fw-semi);
    letter-spacing: .02em;
    line-height: 1.5;
}

.dpage-cards > a > span:last-child {
    display: block;
    margin-top: 8px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
}

/* Обгортка для кнопки під блоком. Саме <div>, а не <p> — див. коментар
   у розмітці: у абзаці кнопка перетворюється на текстове посилання. */
.dpage-center { margin-top: clamp(20px, 3vw, 28px); text-align: center; }

/* ------------------------------------------------------------------
   Каталог наліпок (window-advertising-decals.php)
   ------------------------------------------------------------------ */

/* Смуга з хлібними крихтами над темним героєм */
.dpage-crumbstrip {
    max-width: var(--container);
    margin: 0 auto;
    padding: 14px var(--sp-4) 12px;
}

/* Фото в героєві: те саме кадрування, що в .split__media, але з
   обмеженою висотою — інакше квадратне фото вітрини роздуває смугу
   вдвічі проти текстової колонки. */
.hero__media img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
}

/* Навігація по розділах — чипи, а не список: їх чотири, вони мають
   читатися одним рядком і не претендувати на увагу самих карток. */
.dpage-catnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: clamp(24px, 3vw, 32px);
}
.dpage-catnav a {
    padding: 8px 16px;
    border: 1px solid var(--g-200);
    border-radius: var(--r-pill);
    background: var(--g-0);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-navy);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.dpage-catnav a:hover { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand); }

.dpage-catgroup { margin-bottom: clamp(32px, 4vw, 48px); }
.dpage-catgroup:last-of-type { margin-bottom: 0; }

/* Якір не має ховатися під липкою шапкою — інакше перехід за
   посиланням «#coffee-shop» показує середину розділу без заголовка.
   130px — те саме значення, що вже стоїть у blocks.css для .sec__title;
   свою цифру тут заводити не варто, бо шапка одна на весь сайт. */
.dpage-catgroup,
.sec[id] { scroll-margin-top: 130px; }

.dpage-catgroup__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
}
.dpage-catgroup__title span {
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--g-200);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--g-700);
}
.dpage-catgroup__lead {
    margin: 0 0 clamp(14px, 2vw, 18px);
    font-size: var(--fs-sm);
    color: var(--g-600);
}
.dpage-catgroup__lead a {
    margin-left: 4px;
    color: var(--c-brand);
    font-weight: var(--fw-semi);
    text-decoration: none;
    white-space: nowrap;
}
.dpage-catgroup__lead a:hover { text-decoration: underline; }

.dpage-catmore {
    margin: clamp(24px, 3vw, 32px) 0 0;
    padding-top: clamp(20px, 2.4vw, 26px);
    border-top: 1px solid var(--g-200);
    font-size: var(--fs-sm);
    color: var(--g-700);
    line-height: 1.6;
    text-align: center;
}

/* Примітка під гео-блоком */
.dpage-geo-note {
    margin: clamp(20px, 2.4vw, 26px) 0 0;
    font-size: var(--fs-sm);
    color: var(--g-700);
    line-height: 1.6;
    text-align: center;
}