/* ============================================
   STICKER PACK — СТИЛІ СТОРІНКИ
   ============================================
   Спільні дрібниці (групи параметрів, матеріали, чипи, підсумок,
   кнопки замовлення) успадковані від конфігуратора етикеток у рулонах
   (etyketky-v-rulonakh-app/styles.css).

   Усе, що стосується самих макетів, тут своє й на етикетках його немає:
     .pack-empty  — стан «жодного макета» з попереднім розрахунком;
     .pack-card   — картка одного макета зі своїми параметрами;
     .pack-sheet  — аркуш у превʼю, пропорція задається зі скрипта;
     .pack-tiers  — три картки терміну з дедлайном і ціною.

   Причина проста: на етикетках макет ЗАВЖДИ один, тут їх буває багато.
   ============================================ */

/* ============================================
   ЯКОРІ Й ЛИПКА ШАПКА
   ============================================

   Шапка sticky: 148px розгорнута, 101px після згортання верхньої
   смуги. Без scroll-margin-top перехід за якорем ставив початок
   секції рівно під шапку — заголовок конфігуратора зникав під нею.

   130px = компактна шапка плюс повітря. У розгорнутому стані трохи
   замало, але це стан першого екрана: доки доскролиш до якоря, шапка
   вже згорнута.
   ============================================ */
#packConfig,
#printGalleryTitle,
#otherPrintSubcategories {
    scroll-margin-top: calc(var(--hdr-h, 130px) + 16px);
}


/* ============================================
   HERO — переїхав у /assets/blocks.css
   ============================================
   Блок звався .lhero і жив тут. Коли головній сторінці знадобився
   той самий перший екран, копіювати ~120 рядків удруге не стали:
   правки розійшлися б між файлами. Тепер це спільний .hero у
   blocks.css (секція 12), а розмітка сторінки перейменована
   один в один: lhero__* → hero__*, окремо lhero__launch → hero__notice
   (та сама плашка, але імʼя тепер описує роль, а не привід).

   Вигляд не змінився. Єдина відмінність — aspect-ratio картинки:
   було 1672/941, стало 16/9. Різниця в третьому знаку, на око нуль.
   ============================================ */


/* ============================================
   CONFIGURATOR SECTION
   ============================================ */
.sticker-config-section {
    /* Верхній відступ зменшено з sp-8: конфігуратор має починатися
       якомога вище, це головний інструмент сторінки. */
    padding: var(--sp-5) var(--sp-4) var(--sp-8);
    background: var(--g-50);
}

.sticker-config-container {
    max-width: 1200px;
    margin: 0 auto;
}

.sticker-config-title {
    text-align: center;
    /* Найбільший заголовок секцій на сторінці: решта — 1.9rem.
       Більшим за h1 не робимо навмисно: hero закінчується за 29px
       звідси, обидва видно на першому екрані, і два однаково великі
       заголовки поруч читалися б як помилка, а не як акцент. */
    font-size: clamp(1.55rem, 2.9vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--c-navy);
    margin-bottom: 10px;
    font-weight: 700;
}

/* Декоративної риски під заголовком більше немає. Кольорове
   підкреслення 80x4 — прийом середини 2010-х; секції розділяє
   типографіка й повітря, а червоний лишається за діями. */

.sticker-config-subtitle {
    text-align: center;
    color: var(--g-700);
    margin: 12px auto 18px;
    font-size: .98rem;
	max-width: 600px;
}


/* ============================================
   Панель навігації (zoom/зміщення) і легенда ліній різу прибрані:
   превʼю показує макет як є, без ручного підганяння та накладок.
   ============================================ */

/* Кнопка «Змінити файл» переїхала у /assets/blocks.css (секція 13):
   таку саму сцену з макетом має перевірка макета на головній, і копія
   стилів розійшлася б із оригіналом. Розмітка тут не змінилася. */


/* Переваги: шість карток мають лягати рівно 3+3.
   Спільна сітка в blocks.css — auto-fit, minmax(280px, 1fr) — на широкому
   екрані вміщає чотири, і останній ряд знову «висить» удвох. Фіксуємо
   три колонки саме тут, щоб не чіпати решту сторінок сайту. */
@media (min-width: 900px) {
    .advantages-grid { grid-template-columns: repeat(3, 1fr); }
}


.maket-note {
    padding: 9px 12px;
    border-radius: var(--r-sm);
    border-left: 3px solid;
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
}

.maket-note--info { background: var(--g-50);        border-color: var(--g-300);         color: var(--g-800); }
.maket-note--warn { background: var(--c-warn-bg);   border-color: var(--c-warn-strong); color: var(--c-warn); }
.maket-note--ok   { background: var(--c-ok-bg);     border-color: var(--c-ok);          color: var(--c-ok); }
.maket-note--bad  { background: var(--c-danger-bg); border-color: var(--c-danger);      color: var(--c-danger); }


/* ============================================
   ГРУПИ ПАРАМЕТРІВ
   ============================================ */
.param-group {
    background: var(--g-0);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--sh-sm);
}

.param-group-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.param-group-title::before {
    content: '';
    width: 3px;
    height: 16px;
    /* Синя, не червона: це структурна позначка групи полів,
       а не дія. Червоний лишаємо кнопкам і активним станам. */
    background: var(--c-navy);
    border-radius: var(--r-xs);
}




.size-note {
    font-size: 0.7rem;
    color: var(--g-700);
    margin-top: 6px;
}



/* ============================================
   ПІДСУМОК ЗАМОВЛЕННЯ
   ============================================
   Один рядок, а не вежа. Було: «Разом», сума, ціна за штуку, плашка
   параметрів, дві кнопки на всю ширину й підказка — усе по центру,
   одне під одним. Через центрування жоден елемент не мав власного
   місця, і високий темний блок читався як суцільна пляма.

   Тепер сума ліворуч (це відповідь на головне питання), параметри й
   дії праворуч. Блок став приблизно вдвічі нижчим.
   ============================================ */
.pack-total {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-6);
    /* Той самий відступ, що між картками й термінами. Було вдвічі
       менше — підсумок притискався до плиток терміну, і два різні
       блоки читалися як один суцільний. */
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
    background: linear-gradient(120deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
    color: var(--g-0);
}

/* --- Сума --- */
.pack-total__money {
    display: grid;
    /* Підпис і ціна за штуку тримаються двома дрібними рядками навколо
       великої суми — так число лишається головним, а контекст не
       перетворюється на ще один поверх блоку. */
    grid-template-areas: 'label' 'sum' 'per';
    gap: 1px;
    min-width: 0;
}
.pack-total__label {
    grid-area: label;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .6);
}
.pack-total__sum {
    grid-area: sum;
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    color: var(--c-gold);
    white-space: nowrap;
}
.pack-total__per {
    grid-area: per;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .65);
    white-space: nowrap;
}

/* --- Параметри й дії --- */
.pack-total__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-left: auto;
    min-width: 0;
}

.pack-total__spec {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: rgba(255, 255, 255, .78);
    text-align: right;
}

.pack-total .order-actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Дві дії перестали бути рівними. Раніше обидві були на всю ширину, і
   людина обирала між двома однаково гучними закликами замість того,
   щоб просто діяти: головна — суцільна червона, друга — контурна. */
.pack-total .order-btn-primary {
    width: auto;
    flex: none;
    padding: 12px 26px;
    box-shadow: 0 6px 16px rgba(218, 26, 50, .35);
}
.pack-total .order-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(218, 26, 50, .45);
}

.pack-total .order-btn-cart {
    flex: none;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
    color: var(--g-0);
}
.pack-total .order-btn-cart:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .6);
    color: var(--g-0);
}

@media (max-width: 720px) {
    .pack-total { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .pack-total__money { justify-items: center; text-align: center; }
    .pack-total__right { align-items: stretch; margin-left: 0; }
    .pack-total__spec  { text-align: center; }
    .pack-total .order-actions { flex-direction: column; }
    .pack-total .order-btn-primary,
    .pack-total .order-btn-cart { width: 100%; justify-content: center; }
}

/* Кнопки замовлення — базові правила. Кольори й розміри всередині
   підсумку перевизначені вище. */
.order-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 12px 30px;
    background: var(--c-brand);
    border: none;
    border-radius: var(--r-btn);
    color: var(--g-0);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.order-btn-primary svg { width: 19px; height: 19px; flex: none; }

.order-btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 20px;
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: var(--fw-semi);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.order-btn-cart svg { width: 18px; height: 18px; flex: none; }


/* ============================================
   БЛОКИ КОНТЕНТУ — ПЕРЕЇХАЛИ
   ============================================

   Секції, галерея, таблиця цін, умови замовлення, переваги, суміжні
   послуги, відео та FAQ тепер живуть у спільному /assets/blocks.css.
   Там вони переписані під єдину оболонку .sec > .sec__inner, і той
   самий файл підключають усі інші сторінки послуг.

   Тут лишається тільки те, що справді унікальне для цієї сторінки:
   hero та конфігуратор рулонних етикеток.
   ============================================ */



/* Підказка в заголовку групи */
.param-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--g-700);
    line-height: var(--lh-base);
}

/* --- Матеріали --- */
.material-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}

.material-option {
    /* Назва зверху, опис під нею — у два поверхи, не в дві колонки */
    display: block;
    width: 100%;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    padding: 12px 14px;
    cursor: pointer;
    background: var(--g-0);
    /* Це <button>, тож типографіку задаємо явно: браузер інакше
       підставить свій системний шрифт і центрує текст. */
    font-family: var(--font);
    text-align: left;
    transition: border-color .18s, background .18s;
}

.material-option:hover:not(.active) { border-color: var(--c-brand-line); }


.material-name {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--c-navy);
}

.material-desc {
    display: block;
    margin-top: 3px;
    font-size: 0.76rem;
    color: var(--g-800);
    line-height: var(--lh-tight);
}

/* --- Chip-опції (форма, клей) --- */
.chip-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.chip-option {
    border: 2px solid var(--g-200);
    border-radius: var(--r-pill);
    padding: 8px 16px;
    font-size: 0.86rem;
    cursor: pointer;
    background: var(--g-0);
    color: var(--g-850);
    transition: border-color .18s, background .18s, color .18s;
}

.chip-option:hover:not(.active) { border-color: var(--c-brand-line); }



@media (max-width: 560px) {
    .material-options { grid-template-columns: 1fr; }
}


/* ============================================
   МОБІЛЬНІ ПОЛЯ ВВЕДЕННЯ
   ============================================

   iOS Safari автоматично збільшує сторінку, коли фокус потрапляє
   в поле з кеглем менше 16px, і назад уже не повертає — людина
   лишається на «зумленій» сторінці й далі возить її пальцем.
   Тому на вузьких екранах поля мають рівно 16px, попри те що
   візуально це трохи більше за решту дрібного тексту.
   ============================================ */
@media (max-width: 768px) {
    .sticker-config-section input:not([type=file]):not([type=hidden]),
    .sticker-config-section select,
    .sticker-config-section textarea {
        font-size: 16px;
    }
}


/* ============================================
   НАДЗАГОЛОВОК КОНФІГУРАТОРА
   ============================================

   Пігулка «Онлайн-калькулятор» над заголовком. Виділяє блок не
   розміром, а типом: це не розділ статті, а робочий інструмент.
   Синя, а не червона — за картою кольорів червоний лишається за
   діями, а пігулка нічого не робить, вона підписує.
   ============================================ */
.sticker-config-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto var(--sp-3);
    padding: 7px 16px;
    border-radius: var(--r-pill);
    background: var(--c-navy);
    color: var(--g-0);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sticker-config-eyebrow i { display: block; line-height: 1; font-size: 1.05em; }




/* ============================================
   ПОРОЖНІЙ СТАН — зона завантаження + параметри
   ============================================
   Поки макетів немає, сторінка має відповісти на два питання одразу:
   «куди кидати файл» і «скільки це коштуватиме». Тому дві колонки:
   ліворуч ціль для перетягування, праворуч параметри для попереднього
   розрахунку.
   ============================================ */
.pack-empty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    align-items: start;
}
.pack-empty[hidden] { display: none; }

/* Липкість переїхала на обгортку: разом із зоною завантаження має
   триматися й посилання під нею, інакше при прокрутці воно лишалося б
   унизу окремо від неї. */
.pack-empty__col {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.pack-empty__drop {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 420px;
    padding: var(--sp-6);
    border: 2px dashed var(--g-300);
    border-radius: var(--r-lg);
    background: var(--g-0);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.pack-empty__drop:hover,
.pack-empty__drop.is-dragover {
    border-color: var(--c-brand-line);
    background: rgba(218, 26, 50, .03);
}

.pack-empty__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-navy);
    color: var(--g-0);
}
.pack-empty__icon svg { width: 26px; height: 26px; fill: currentColor; }

.pack-empty__text { font-size: 1.05rem; font-weight: var(--fw-bold); color: var(--c-navy); }
.pack-empty__sub  { font-size: var(--fs-sm); color: var(--g-700); }
.pack-empty__hint { font-size: var(--fs-xs); color: var(--g-600); }

.pack-empty__btn {
    margin-top: var(--sp-2);
    padding: 11px 26px;
    border: none;
    border-radius: var(--r-btn);
    background: var(--c-brand);
    color: var(--g-0);
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background var(--transition);
}
.pack-empty__btn:hover { background: var(--c-brand-dark, #b3162a); }

.pack-empty__params {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Види і тираж в одному рядку: поки макетів немає, це два числа
   одного питання — скільки різних і скільки всього. */
.pack-pair {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 2fr;
    gap: var(--sp-4);
    align-items: start;
}
.pack-pair__col { min-width: 0; }


/* ============================================
   КАРТКА МАКЕТА
   ============================================
   Ліворуч — превʼю й те, чим є сам файл. Праворуч — усе, що людина
   змінює, і одразу під ним наслідки вибору. Та сама розкладка, що в
   калькуляторі плакатів: звʼязок «натиснув — змінилось» має бути
   видно, не переводячи погляд через усю картку.
   ============================================ */
.pack-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.pack-card {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-5);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.pack-card.is-dragover { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }

.pack-card__preview { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

/* Дії над макетом — угорі превʼю, там, де на нього дивляться */
.pack-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.pack-card__change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--g-300);
    border-radius: var(--r-btn);
    background: var(--g-0);
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--g-800);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.pack-card__change:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pack-card__change svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

.pack-card__del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--g-300);
    border-radius: var(--r-btn);
    background: var(--g-0);
    color: var(--g-700);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pack-card__del:hover { background: var(--c-brand); border-color: var(--c-brand); color: var(--g-0); }
.pack-card__del svg { width: 17px; height: 17px; fill: currentColor; }

/* Сцена — сіра підкладка, на якій лежить аркуш.
   Раніше замість неї був тонкий контур по краю аркуша, і він читався
   як частина виробу: наче стікерпак має сіру рамку. Підкладка з полем
   навколо каже інше — це стіл, а не рамка, — і при цьому виконує ту
   саму роботу: біле тіло аркуша на майже білому фоні секції не
   читалося, а незадруковані поля зливалися зі сторінкою. */
.pack-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(12px, 5%, 22px);
    background: #bcc5d1;
    border-radius: var(--r-lg);
}

/* Аркуш. Пропорція задається інлайном зі скрипта — саме вона й показує
   формат: горизонтальний макет лягає на горизонтальний аркуш.
   Кути прямі: аркуш ріже гільйотина, і заокруглення в превʼю обіцяло б
   не той виріб, який приїде замовнику. Фігурним у стікерпаку є різ
   ОКРЕМИХ наклейок усередині, а не край самого аркуша. */
.pack-sheet {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ширину ставить скрипт (він знає пропорцію аркуша й межі обох
       сторін), тут лишається тільки не дати їй вилізти за колонку на
       вузькому екрані. */
    max-width: 100%;
    background: var(--g-0);
    border-radius: 0;
    box-shadow: 0 2px 14px rgba(16, 24, 40, .28);
    overflow: hidden;
}
.pack-sheet img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pack-sheet__spin {
    width: 26px;
    height: 26px;
    border: 3px solid var(--g-200);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: packSpin .8s linear infinite;
}
@keyframes packSpin { to { transform: rotate(360deg); } }

.pack-sheet__busy {
    position: absolute;
    inset: auto 0 0 0;
    padding: 6px;
    background: rgba(255, 255, 255, .9);
    font-size: var(--fs-xs);
    color: var(--g-700);
    text-align: center;
}

/* Скільки видів у цьому файлі — плашка поруч із заголовком тиражу.
   Гортання сторінок тут немає: багатосторінковий PDF рахується як
   стільки ж однакових видів, а перевіряється за першою сторінкою. */
.pack-kinds {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--c-navy);
    color: var(--g-0);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

/* Чим є сам файл — те, що не залежить від вибору параметрів */
.pack-file { font-size: var(--fs-xs); line-height: var(--lh-base); }
.pack-file__name {
    font-weight: var(--fw-semi);
    color: var(--c-navy);
    word-break: break-word;
}
.pack-file__size { font-weight: var(--fw-normal); color: var(--g-600); }
.pack-file__bits { margin-top: 3px; color: var(--g-700); }

.pack-card__params { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Усередині картки групи параметрів уже на білому тлі самої картки,
   тож власного фону й тіні їм не треба — інакше картка перетворюється
   на купу вкладених коробок. */
.pack-card__params .param-group { background: transparent; padding: 0; box-shadow: none; }


/* ============================================
   ФОРМАТ — плитки
   ============================================ */
.fmt-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

.fmt-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-0);
    font-family: var(--font);
    cursor: pointer;
    text-align: center;
    transition: border-color .2s ease, background .2s ease;
}
.fmt-chip:hover:not(.is-active) { border-color: var(--c-brand-line); }
.fmt-chip__name { font-size: 1rem; font-weight: var(--fw-bold); color: var(--c-navy); line-height: 1.1; }
.fmt-chip__dims { font-size: var(--fs-xs); color: var(--g-700); white-space: nowrap; }

/* Роздільність — одразу під плитками формату: вона від них і залежить */
.pack-quality {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}
.pack-quality b { font-weight: var(--fw-bold); }
.pack-quality--ok   { background: var(--c-ok-bg);     color: var(--c-ok);     border: 1px solid var(--c-ok-line); }
.pack-quality--warn { background: var(--c-warn-bg);   color: var(--c-warn);   border: 1px solid var(--c-warn-line); }
.pack-quality--bad  { background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid var(--c-danger-line); }

/* Порада зменшити формат — там само, поруч із плитками, які треба натиснути */
.pack-advice {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-line);
    border-left: 3px solid var(--c-gold);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--c-warn);
}
.pack-advice b { color: var(--c-warn); }
.pack-advice__btn {
    display: flex;
    width: fit-content;
    margin-top: 8px;
    padding: 7px 14px;
    border: none;
    border-radius: var(--r-btn);
    background: var(--c-gold);
    font-family: var(--font);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
    cursor: pointer;
}
.pack-advice__btn:hover { background: var(--c-warn-strong); color: var(--g-0); }


/* ============================================
   ТИРАЖ
   ============================================ */
.pack-qty { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.pack-qty__input {
    width: 92px;
    padding: 9px 10px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: var(--fw-semi);
    color: var(--c-navy);
    text-align: center;
}
.pack-qty__input:focus { outline: none; border-color: var(--c-accent); }

.pack-qty__steps { display: flex; gap: 5px; flex-wrap: wrap; }
.pack-qty__step {
    padding: 7px 12px;
    border: 1px solid var(--g-200);
    border-radius: var(--r-btn);
    background: var(--g-0);
    font-family: var(--font);
    font-size: var(--fs-xs);
    color: var(--g-800);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.pack-qty__step:hover:not(.is-active) { border-color: var(--c-brand-line); }


/* ============================================
   ЗАЛИВКА — визначена, а не обрана
   ============================================
   Коли макет завантажений, тариф друку це властивість файлу, а не
   смак: скільки на ньому фарби, ми вимірюємо. Тому й місця він займає
   як підпис, а не як блок керування — один рядок, без плашок,
   заголовка групи й кольорових виділень. Перемикач лишається тільки в
   порожньому стані, де міряти ще нічого.
   ============================================ */
.pack-fill {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-700);
}
.pack-fill strong { color: var(--c-navy); font-weight: var(--fw-semi); }
.pack-fill__auto  { color: var(--g-500); font-size: var(--fs-xs); }


/* ============================================
   ВЕРДИКТ, НОТАТКИ Й ЦІНА ПОЗИЦІЇ
   ============================================ */
.pack-verdict {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
}
.pack-verdict i { font-size: 1rem; }
.pack-verdict--ok   { background: var(--c-ok-bg);     color: var(--c-ok);     border: 1px solid var(--c-ok-line); }
.pack-verdict--warn { background: var(--c-warn-bg);   color: var(--c-warn);   border: 1px solid var(--c-warn-line); }
.pack-verdict--bad  { background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid var(--c-danger-line); }

.pack-notes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pack-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--g-200);
}
.pack-price__label { font-size: var(--fs-sm); color: var(--g-700); }
.pack-price__sum   { font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--c-navy); }
.pack-price__note  { flex-basis: 100%; font-size: var(--fs-xs); color: var(--g-600); }


/* ============================================
   ДІЇ НАД НАБОРОМ
   ============================================ */
.pack-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}
.pack-actions[hidden] { display: none; }

.pack-actions__add,
.pack-actions__clear {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pack-actions__add {
    border: 2px dashed var(--g-300);
    background: var(--g-0);
    color: var(--c-navy);
}
.pack-actions__add:hover { border-color: var(--c-accent); color: var(--c-accent); }

.pack-actions__clear {
    border: 1px solid var(--g-300);
    background: var(--g-0);
    color: var(--g-700);
}
.pack-actions__clear:hover { border-color: var(--c-brand); color: var(--c-brand); }
.pack-actions__add i, .pack-actions__clear i { display: block; line-height: 1; }


/* ============================================
   ТЕРМІН — три картки з дедлайном і ціною
   ============================================
   Ціну кожного терміну видно одразу, без кліку: інакше порівняти
   можна лише перебравши всі три й запамʼятавши числа. Той самий блок
   працює на e-print.com.ua.
   ============================================ */
.pack-tiers-block { margin-top: var(--sp-6); }

.pack-tiers__label {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--g-700);
}

/* Рівно три колонки, а не auto-fit: тарифів завжди три, і їх треба
   порівнювати поглядом зліва направо. auto-fit при широкій секції
   плодив ще й порожні треки. На вузькому екрані стають у стовпчик —
   правило нижче. */
.pack-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}

.pack-tier {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--g-0);
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.pack-tier:hover:not(.is-active) { border-color: var(--c-brand-line); }

.pack-tier__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .95rem;
    font-weight: var(--fw-bold);
    color: var(--c-navy);
}
.pack-tier__name i { color: var(--c-brand); }
.pack-tier__ready { font-size: var(--fs-xs); color: var(--g-700); }
.pack-tier__price { margin-top: 6px; font-size: 1.35rem; font-weight: var(--fw-bold); color: var(--c-navy); }
.pack-tier__per   { font-size: var(--fs-xs); color: var(--g-600); }


/* Терміновість тепер показує не тло картки, а колір назви й ціни —
   правило в assets/ui.css. Тло лишається нейтральним, щоб зелена
   рамка «обрано» не сперечалася з червоною «терміново». */


/* ============================================
   АДАПТИВ
   ============================================ */
@media (max-width: 900px) {
    .pack-empty { grid-template-columns: 1fr; }
    /* Липкість тепер на обгортці — знімати треба її, а не саму зону */
    .pack-empty__col  { position: static; }
    .pack-empty__drop { min-height: 260px; }
    .pack-card { grid-template-columns: 1fr; }

}

@media (max-width: 560px) {
    .pack-pair { grid-template-columns: 1fr; }
    .pack-tiers { grid-template-columns: 1fr; }
    .pack-tier { flex-direction: row; align-items: center; flex-wrap: wrap; }
    .pack-tier__name { flex-basis: 100%; }
    .pack-tier__ready { flex: 1 1 auto; }
    .pack-tier__price { margin-top: 0; }
    .pack-tier__per { flex-basis: 100%; }
}


/* ============================================
   НОМЕР КАРТКИ Й ДІЇ НАД МАКЕТОМ
   ============================================
   У листі менеджеру й в описі позиції макети перелічені як «Макет 1»,
   «Макет 2». Без номера на екрані ці посилання нікуди не ведуть.
   ============================================ */
.pack-card__num {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--g-600);
    white-space: nowrap;
}

/* Дві дії тримаємо разом праворуч. Розкидані по краях широкої колонки
   вони читалися як два різні за важливістю елементи, хоча стосуються
   одного макета. */
.pack-card__acts {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
}


/* ============================================
   ПЕРЕВІРКИ МАКЕТА — згортаються
   ============================================
   Коли з макетом усе гаразд, розгорнутий список перевірок лише
   розсовує картку й виштовхує ціну за екран. Коли є до чого
   придивитись — список відкритий одразу, бо саме заради цього
   попередження все й рахувалося.
   ============================================ */
.pack-checks { border-top: 1px solid var(--g-200); padding-top: var(--sp-3); }

.pack-checks > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.pack-checks > summary::-webkit-details-marker { display: none; }

/* Стрілка-маркер: без неї згортання невидиме, і людина не знає, що під
   вердиктом ще щось є. */
.pack-checks > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: .7;
    transition: transform .2s ease;
    flex: none;
}
.pack-checks[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pack-checks > summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.pack-checks__count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .55);
    font-size: .7rem;
    font-weight: var(--fw-bold);
    text-align: center;
}

.pack-checks .pack-notes { margin-top: var(--sp-2); }




/* ============================================
   ГАЛЕРЕЯ МАКЕТА — показуємо аркуш ЦІЛКОМ
   ============================================
   Спільна .gallery-grid ріже знімки під 4:3 через object-fit: cover.
   Для фотографій виробництва це правильно: кадр можна підрізати, зміст
   від цього не постраждає.

   Але в розділі «Готовий макет — це два шари» на картинках сам МАКЕТ.
   Ілюстрації вертикальні (700×1009), і 4:3 із обрізкою лишало від
   аркуша верхню смугу — тобто рівно те, чого людина туди й прийшла
   подивитися, зникало. Показати макет наполовину — гірше, ніж не
   показати зовсім: замовник вирішить, що так і має бути.

   Тому тут своя пропорція під ці файли й contain замість cover.
   ============================================ */
.gallery-grid--maket img {
    aspect-ratio: 700 / 1009;
    object-fit: contain;
    background: var(--g-0);
}

/* Збільшення на наведенні для макета — та сама обрізка, лише плавна:
   картка має overflow: hidden, і масштаб 1.04 виштовхує краї аркуша
   за її межі. Для фотографій ефект лишається, тут вимикаємо. */
.gallery-grid--maket figure:hover img { transform: none; }

/* Вертикальні ілюстрації високі, тож на широкому екрані три в ряд
   дають надто довгі картки. Обмежуємо ширину сітки — аркуші стають
   ближчими до розміру, у якому їх реально роздивляються. */
@media (min-width: 1000px) {
    .gallery-grid--maket {
        max-width: 900px;
        margin-inline: auto;
    }
}


/* ============================================
   ХЛІБНІ КРИХТИ
   ============================================
   Стоять між шапкою і hero. Навмисно тихі: це орієнтир і посилання
   вгору по дереву, а не елемент, що бореться за увагу з H1 під ним.

   Старий .breadcrumb з assets/style.css не підійшов — той файл на
   новому шаблоні не підключається, та й виглядає він як сіра плашка
   з тінню (прийом старого дизайну сайту).
   ============================================ */
.crumbs {
    background: var(--g-0);
    border-bottom: 1px solid var(--g-200);
}

.crumbs__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: var(--container, 1200px);
    margin: 0 auto;
    padding: 10px var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--g-600);
}

.crumbs__inner a {
    color: var(--g-700);
    text-decoration: none;
    transition: color var(--transition);
}
.crumbs__inner a:hover { color: var(--c-brand); text-decoration: underline; }

/* Роздільник малюємо, а не пишемо символом у розмітці: інакше він
   потрапляє в текст сторінки й у витяг для сніпета. */
.crumbs__inner a::after {
    content: '›';
    margin-left: 6px;
    color: var(--g-400);
}

.crumbs__inner span[aria-current] { color: var(--c-navy); font-weight: var(--fw-semi); }


/* ============================================
   ВІКНО «МАКЕТІВ ЩЕ НЕМАЄ»
   ============================================
   Замінило window.confirm. Системне вікно виглядало як помилка сайту,
   а не як питання від друкарні: чужа типографіка, кнопки «ОК /
   Скасувати», у які не влазить сенс дії.

   Оформлення навмисно повторює форму замовлення (indexs/order-form.css):
   темна шапка з градієнтом, білий корпус, скруглення 20px. Це те саме
   вікно за роллю — питання перед оформленням, — і виглядати воно має
   так само, а не як третій стиль на сторінці.
   ============================================ */
.pack-ask {
    position: fixed;
    inset: 0;
    z-index: 9998;          /* під формою замовлення (9999), над рештою */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pack-ask.is-open { display: flex; }

body.pack-ask-open { overflow: hidden; }

.pack-ask__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 35, .55);
    backdrop-filter: blur(3px);
}

.pack-ask__box {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--g-0);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(16, 24, 40, .45),
                0 8px 24px -8px rgba(16, 24, 40, .2);
    animation: packAskIn .18s ease-out;
}

@keyframes packAskIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pack-ask__box { animation: none; }
}

.pack-ask__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--c-navy) 0%, #2C5282 100%);
    color: var(--g-0);
}

.pack-ask__title {
    font-size: 1.02rem;
    font-weight: var(--fw-bold);
    line-height: 1.25;
}

.pack-ask__x {
    flex: none;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: var(--g-0);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}
.pack-ask__x:hover { background: rgba(255, 255, 255, .28); }

.pack-ask__body { padding: 18px 20px 4px; }
.pack-ask__body p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-800);
}

.pack-ask__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 18px 20px 20px;
}

.pack-ask__btn {
    flex: 1 1 auto;
    padding: 12px 18px;
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-size: .92rem;
    font-weight: var(--fw-semi);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition);
}

/* Головна — та, якої ми й хочемо: додати файли зараз. Раніше цю дію
   ховала кнопка «Скасувати», тобто людина мусила відмовитися, щоб
   зробити правильне. */
.pack-ask__btn--primary {
    border: none;
    background: var(--c-brand);
    color: var(--g-0);
}
.pack-ask__btn--primary:hover { background: #b3162a; }

.pack-ask__btn--ghost {
    border: 1px solid var(--g-300);
    background: var(--g-0);
    color: var(--g-800);
}
.pack-ask__btn--ghost:hover { border-color: var(--c-navy); color: var(--c-navy); }

.pack-ask__btn:focus-visible,
.pack-ask__x:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

@media (max-width: 420px) {
    /* column, а не column-reverse: reverse перевертав ТІЛЬКИ картинку,
       а порядок фокуса лишався за розміткою. Виходило, що око бачить
       «Оформити без макетів» першою, а Tab веде на «Завантажити» —
       візуальна послідовність і послідовність керування розходились. */
    .pack-ask__foot { flex-direction: column; }
    .pack-ask__btn  { width: 100%; }
}


/* ============================================
   СХЕМА «ЯК ВЕСТИ КОНТУР РІЗУ»
   ============================================
   Чотири випадки: одна помилка й три робочі способи. Схеми показують
   не інструкцію, а РЕЗУЛЬТАТ — де ніж пройде і що з того вийде.

   Малюнки лежать окремими файлами в img/.../cut/ і вставлені через
   <img>. Вони експортовані з Illustrator і мають однакові імена
   класів (.st0, .st1…) з різним змістом, тож inline-вставка в один
   документ перефарбувала б їх одна одною.

   Головне для вигляду: усі чотири файли мають ОДНАКОВИЙ viewBox
   460.5×460.5 і логотип в одному й тому самому місці. Тому квадратна
   комірка з aspect-ratio 1/1 ставить їх точно один під одним —
   попередні схеми були різного розміру й «роз'їжджалися» по рядку.
   ============================================ */
.cut-guide {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 20px);
    align-items: stretch;
}

.cut-guide__item {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Рамка кольором каже, це помилка чи взірець. Колір тут не єдиний
   сигнал: під кожною схемою стоїть підпис «Так не треба» /
   «Правильно» / «Найкраще», тож зміст не втрачається без кольору. */
.cut-guide__item--bad  { border-color: var(--c-danger-line); border-width: 3px; }
.cut-guide__item--ok   { border-color: var(--c-ok-line); }
.cut-guide__item--best { border-color: var(--c-ok); box-shadow: 0 0 0 1px var(--c-ok); }

/* Квадратна сцена — саме вона вирівнює всі чотири схеми між собою */
.cut-guide__pic {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: clamp(10px, 1.4vw, 18px);
    background: var(--g-50);
    border-bottom: 1px solid var(--g-100);
}

/* Кутовий значок: червоний хрестик або зелена галочка.
   Сидить УСЕРЕДИНІ сцени, а не звисає за ріг картки, бо в
   .cut-guide__item стоїть overflow:hidden — усе, що виступить за
   межу, просто зріже. Схеми круглі й центровані, тож у кутку його
   ніщо не перекриває.
   Біла обвідка потрібна для випадку, коли під значок підповзе
   малюнок: без неї кольорове коло на кольоровому тлі втрачає межу
   (WCAG 1.4.11 — 3:1 для меж елементів інтерфейсу). */
.cut-guide__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--g-0);
    box-shadow: 0 0 0 2px var(--g-0), 0 2px 6px rgba(16, 24, 40, .22);
}
.cut-guide__badge svg { display: block; width: 19px; height: 19px; }
.cut-guide__badge--bad { background: var(--c-danger); }
.cut-guide__badge--ok  { background: var(--c-ok); }
.cut-guide__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cut-guide__mark {
    margin: 0;
    padding: 10px var(--sp-4) 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.cut-guide__mark--bad  { color: var(--c-danger); }
.cut-guide__mark--ok   { color: var(--c-ok); }
.cut-guide__mark--best { color: var(--c-ok); }

.cut-guide__item figcaption {
    flex: 1;
    padding: 4px var(--sp-4) var(--sp-4);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--g-800);
}
.cut-guide__item figcaption strong { color: var(--c-navy); }

/* Легенда під схемами */
.cut-guide__legend {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-xs);
    color: var(--g-700);
    text-align: center;
}
.cut-guide__key {
    display: inline-block;
    width: 22px;
    height: 0;
    margin-right: 4px;
    vertical-align: middle;
}
/* Пунктир — так лінія різу й виглядає у самих файлах */
.cut-guide__key--line { border-top: 3px dashed #03FF03; }
.cut-guide__key--bg   { height: 11px; border-radius: 2px; background: #FDECE5; border: 1px solid var(--g-300); }

@media (max-width: 1000px) {
    .cut-guide { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cut-guide { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* Посилання на розділ про контур із зони завантаження та з перевірок
   макета. Виглядає однаково в обох місцях — це те саме посилання. */
/* Підкреслення пунктиром — через text-decoration, а не border-bottom:
   бордюр тримається краю блока, тож вертикальні відступи відірвали б
   риску від тексту. А відступи потрібні: без них у посилання висота
   рядка — 20px, менше за мінімальну ціль дотику 24×24 (WCAG 2.5.8).
   На телефоні в таке просто не влучити пальцем. */
/* Відступ дає gap колонки (.pack-empty__col), а не margin: посилань тут
   два, і власний margin у кожного розсунув би їх між собою вдвічі. */
.pack-empty__guide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--c-accent);
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.pack-empty__guide:hover { color: var(--c-navy); background: var(--g-100); }
.pack-empty__guide:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.pack-empty__guide i { display: block; line-height: 1; }

.maket-note__link {
    display: inline-block;
    margin-top: 4px;
    font-weight: var(--fw-semi);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* ============================================================
   ЗГОДА ЗАМОВНИКА

   Стоїть між терміном і підсумком — рівно на шляху до кнопки
   «Замовити», а не збоку. Блок, який можна обійти поглядом, тут
   не годиться: він про гроші й про зіпсований тираж.

   Червона рамка, але не червона заливка: заливкою на цій сторінці
   позначається помилка форми, а тут помилки немає — є рішення,
   яке має ухвалити людина.
   ============================================================ */
.pack-consent {
    margin: var(--sp-5) 0 0;
    padding: var(--sp-4);
    border: 1px solid var(--c-danger-line);
    border-left: 3px solid var(--c-danger);
    border-radius: var(--r-lg);
    background: var(--c-danger-bg);
}
.pack-consent[hidden] { display: none; }

.pack-consent__list {
    margin: 0 0 var(--sp-3);
    padding-left: 18px;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--g-800);
}
.pack-consent__list li + li { margin-top: 4px; }
.pack-consent__list strong { color: var(--c-navy); }

/* Уся підпис — ціль натискання, не сам квадратик 16×16.
   align-items:flex-start, бо текст у два рядки, і по центру
   галочка з'їжджала б до середини абзацу. */
.pack-consent__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    margin: -8px -8px 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-navy);
    line-height: 1.45;
}
.pack-consent__check:hover { background: rgba(255, 255, 255, .55); }
.pack-consent__check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    /* 1px зверху — щоб квадратик став на базову лінію першого рядка,
       а не завис над ним. */
    margin-top: 1px;
    accent-color: var(--c-ok);
    cursor: pointer;
}

/* Натиснули «Замовити» без галочки. Пульсація, а не постійна
   рамка: постійна за секунду стає частиною фону, а нам треба,
   щоб око зачепилось саме зараз. */
.pack-consent.is-asking {
    animation: pack-consent-ask 1.1s ease-in-out 2;
}
@keyframes pack-consent-ask {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(192, 57, 43, .28); }
}
/* Мигання — прямий тригер вестибулярних розладів і фотосенситивності
   (WCAG 2.3.3). Кому воно протипоказане, тому лишається рамка. */
@media (prefers-reduced-motion: reduce) {
    .pack-consent.is-asking { animation: none; box-shadow: 0 0 0 3px rgba(192, 57, 43, .3); }
}