/* ============================================
   LOGO STICKERS - PAGE STYLES
   ============================================ */

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

   Шапка sticky: 148px розгорнута, 101px після згортання верхньої
   смуги. Без scroll-margin-top перехід за якорем ставив початок
   секції рівно під шапку — заголовок конфігуратора зникав під нею.
   Раніше це майже не було видно, бо єдиним посиланням на #labelConfig
   була кнопка в шапці, а вона рахує зсув сама (assets/header.js).
   Тепер сюди веде ще й кнопка heroʼя, тож правило потрібне в CSS —
   воно працює для будь-якого способу переходу, зокрема для прямого
   URL із #labelConfig.

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


/* ============================================
   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;
}

.sticker-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    align-items: start;
}

/* ============================================
   PREVIEW AREA
   ============================================ */
.sticker-preview-area {
    background: transparent;
    padding: 0;
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ============================================
   PREVIEW ZONE
   ============================================ */
.preview-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
}


.preview-canvas-wrapper {
    position: relative;
    width: 100%;
    /* Превʼю на всю доступну ширину колонки — макет треба роздивитись */
    max-width: 720px;
    /* aspect-ratio встановлюється динамічно через JS */
    margin: 0 auto;
    /* Підкладка сцени навмисно темніша за сторінку. Тіло етикетки біле,
       фон секції — майже білий (--g-50), і межа етикетки на ньому не
       читалась: коли макет не заповнював етикетку, незадруковані поля
       зливалися з фоном сторінки, і людина не бачила, що розмір узятий
       непропорційний. Тепер біле тіло чітко виділяється на сірому. */
    /* Тон між --g-300 і --g-400: на g-300 (контраст 1,5:1) межа етикетки
       ще ледь читалась, на g-400 (2,5:1) сцена вже давила темнотою.
       Тут ~1,9:1 — біле тіло видно чітко, але блок не важчає. */
    background: #bcc5d1;
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Fabric.js .canvas-container — JS перевизначає inline styles після init */
.preview-canvas-wrapper .canvas-container {
    /* position: relative — залишаємо Fabric, не ламаємо стекінг двох canvas */
    width: 100% !important;
    /* height та marginTop встановлюються через JS */
}

/* canvas-елементи всередині — JS встановлює 100%/100% після init */
.preview-canvas-wrapper .canvas-container canvas {
    display: block;
}

/* ============================================
   CANVAS UPLOAD OVERLAY
   Показується поверх canvas поки макет не завантажено
   ============================================ */
.canvas-upload-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    background: rgba(248, 249, 250, 0.88);
    cursor: pointer;
    transition: background 0.2s;
    z-index: 10;
}

/* Пунктирна рамка на всю зону. Раніше тут була невелика іконка
   посеред великого білого поля — воно не читалося як ціль, куди
   можна тягнути файл. Рамка робить межу зони видимою, а на
   псевдоелементі — щоб не впливати на розкладку самого оверлея. */
.canvas-upload-overlay::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 2px dashed var(--g-300);
    border-radius: var(--r-lg);
    pointer-events: none;
    transition: border-color var(--transition), background var(--transition);
}

/* На наведенні реагує ТІЛЬКИ рамка.
   Раніше тут ще й світлішав фон самого оверлея, а він розтягнутий на
   inset: 0 — тобто ширший за рамку з її відступом 12px. Виходили два
   прямокутники, вкладені один в одного: сірий по краю зони й підсвічена
   рамка всередині. Читалося як помилка верстки, а не як підсвітка. */
.canvas-upload-overlay:hover::before {
    border-color: var(--c-brand-line);
    background: rgba(218, 26, 50, .03);
}

/* Під час обробки макета тягнути вже нема куди — рамку прибираємо */
.canvas-upload-overlay.is-busy::before { border-color: transparent; background: none; }

/* Стан обробки макета — клік по оверлею не відкриває діалог файлу */
.canvas-upload-overlay.is-busy {
    cursor: progress;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.92);
}

.canvas-upload-overlay.is-busy .canvas-upload-overlay__icon {
    animation: previewBusyPulse 1.1s ease-in-out infinite;
}

@keyframes previewBusyPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.94); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

.canvas-upload-overlay.hidden {
    display: none;
}

.canvas-upload-overlay__icon {
    width: 52px;
    height: 52px;
    /* Синя: за півсантиметра нижче стоїть червона кнопка «Вибрати
       файл» — два червоні акценти поспіль сперечалися між собою. */
    background: var(--c-navy);
    border-radius: var(--r-round);
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-upload-overlay__icon svg {
    width: 26px;
    height: 26px;
    fill: var(--g-0);
}

.canvas-upload-overlay__text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-navy);
}

.canvas-upload-overlay__sub {
    font-size: 0.75rem;
    color: var(--g-700);
}

.canvas-upload-overlay__btn {
    margin-top: 4px;
    min-height: 42px;
    padding: 10px 24px;
    background: var(--c-brand);
    color: var(--g-0);
    border: none;
    border-radius: var(--r-btn);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    pointer-events: auto;
}

.canvas-upload-overlay__btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-brand);
}

/* ============================================
   Панель навігації (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); }
}

/* ============================================
   ГОРТАННЯ МАКЕТІВ У БАГАТОСТОРІНКОВОМУ PDF
   ============================================ */
/* Вибір, що друкувати. Стоїть ПІД гортанням, відділений лінією:
   гортання належить превʼю над ним, а це вже рішення про замовлення. */
.pdf-pager__pick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--g-200);
}
.pdf-pager__pick-title {
    font-size: var(--fs-sm);
    color: var(--g-700);
}

.pdf-pager__scope {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--g-100);
    border-radius: var(--r-btn);
}
.pdf-pager__scope-btn {
    padding: 6px 14px;
    border: none;
    border-radius: var(--r-btn);
    background: transparent;
    font-family: var(--font);
    font-size: var(--fs-sm);
    color: var(--g-700);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.pdf-pager__scope-btn:hover { color: var(--c-navy); }
.pdf-pager__scope-btn.is-active {
    background: var(--c-navy);
    color: var(--g-0);
    font-weight: var(--fw-bold);
}

/* Поле для «1,3-5». Показується лише в режимі «Обрані».
   flex-basis 100% — щоб поле з підказкою ставало власним рядком під
   кнопками, а не тиснулося в той самий, роблячи блок надто широким. */
.pdf-pager__range {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--g-700);
}
.pdf-pager__range-input {
    width: 130px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--g-300);
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-size: var(--fs-sm);
    color: var(--c-navy);
    text-align: center;
}
.pdf-pager__range-input:focus {
    outline: none;
    border-color: var(--c-navy);
}
.pdf-pager__range-input--num { width: 74px; }
.pdf-pager__range-hint { font-size: var(--fs-xs); color: var(--g-600); }

.pdf-pager__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pdf-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 12px;
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--g-0);
}
.pdf-pager[hidden] { display: none; }

.pdf-pager__btn {
    width: 32px;
    height: 32px;
    flex: none;
    border: 1px solid var(--g-200);
    border-radius: 50%;
    background: var(--g-0);
    color: var(--c-navy);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.pdf-pager__btn:hover:not(:disabled) { border-color: var(--c-brand); color: var(--c-brand); }
.pdf-pager__btn:disabled { color: var(--g-300); cursor: default; }

.pdf-pager__label { font-size: var(--fs-sm); color: var(--g-700); white-space: nowrap; }
.pdf-pager__label strong { color: var(--c-navy); }

/* Крапки — щоб було видно і скільки макетів, і де ти зараз,
   і щоб можна було стрибнути одразу на потрібний. */
.pdf-pager__dots { display: flex; flex-wrap: wrap; gap: 5px; }
.pdf-pager__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--g-300);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.pdf-pager__dot:hover { background: var(--g-500); }
.pdf-pager__dot.is-active { background: var(--c-navy); transform: scale(1.25); }
/* Обрані до друку — червоним. Синя крапка каже «зараз дивимось цю»,
   червона — «цю друкуємо»; це різні речі, і вони можуть не збігатися. */
.pdf-pager__dot.is-picked { background: var(--c-brand); }
.pdf-pager__dot.is-picked.is-active { box-shadow: 0 0 0 2px var(--c-navy); }

/* ============================================
   ДАНІ АНАЛІЗУ МАКЕТА (під превʼю)
   Заповнює scripts.js → renderAnalysis()
   ============================================ */
.maket-analysis {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--g-800);
}

.maket-analysis[hidden] { display: none; }

.maket-analysis__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-1);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--g-100);
}

.maket-analysis__head i { color: var(--g-500); }

/* Довге імʼя файлу не має розсувати колонку — ріжемо його трикрапкою,
   вага завжди лишається видимою праворуч. */
.maket-analysis__name {
    flex: 1;
    min-width: 0;
    font-weight: var(--fw-semi);
    color: var(--c-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maket-analysis__weight {
    flex: none;
    color: var(--g-600);
    font-size: var(--fs-xs);
}

.maket-analysis__rows {
    margin: 0;
    padding: var(--sp-2) 0 0;
}

.maket-analysis__row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 5px 0;
    line-height: var(--lh-tight);
}

.maket-analysis__row dt {
    flex: none;
    width: 40%;
    max-width: 190px;
    color: var(--g-600);
}

.maket-analysis__row dd {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--g-900);
}

.maket-analysis__dim { color: var(--g-500); }

/* Бейдж із ключовою цифрою (DPI або «Вектор») — щоб головне число
   рядка читалося без вчитування в текст поруч. */
.maket-badge {
    display: inline-block;
    margin-right: var(--sp-1);
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.maket-badge--ok   { background: var(--c-ok-bg);     color: var(--c-ok);     border: 1px solid var(--c-ok-line); }
.maket-badge--warn { background: var(--c-warn-bg);   color: var(--c-warn);   border: 1px solid var(--c-warn-line); }
.maket-badge--bad  { background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid var(--c-danger-line); }

.maket-analysis__notes {
    margin: var(--sp-2) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

/* Зведений вердикт: головне — чи можна друкувати — має читатись,
   не читаючи всього списку нижче. */
.maket-verdict {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--sp-2);
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}
.maket-verdict i { font-size: 1rem; }
.maket-verdict--ok   { background: var(--c-ok-bg);     color: var(--c-ok);     border: 1px solid var(--c-ok-line); }
.maket-verdict--warn { background: var(--c-warn-bg);   color: var(--c-warn);   border: 1px solid var(--c-warn-line); }
.maket-verdict--bad  { background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid var(--c-danger-line); }

@media (max-width: 600px) {
    .maket-analysis__row { flex-direction: column; gap: 0; }
    .maket-analysis__row dt { width: auto; max-width: none; }
}

/* ============================================
   PARAMETERS - COMPACT
   ============================================ */
.sticker-params-area {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.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 - COMPACT INLINE
   ============================================ */
.size-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* Модифікатор для двох полів: ширина і висота */
.size-row-label {
    flex-wrap: nowrap;
    gap: var(--sp-2);
}

.size-row-label label {
    white-space: nowrap;
    font-size: 0.8rem;
}

.size-row label {
    font-size: 0.85rem;
    color: var(--g-700);
}

.size-row input {
    width: 65px;
    padding: 8px 10px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-navy);
    text-align: center;
}

.size-row input:focus {
    outline: none;
    border-color: var(--c-accent);
}

.size-separator {
    font-size: 1.1rem;
    color: var(--g-400);
}


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

.size-error {
    display: none;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    color: var(--c-danger);
    background: var(--c-danger-bg);
    border: 1px solid var(--c-danger-line);
    border-radius: var(--r-sm);
    padding: 7px 12px;
    margin-top: 8px;
    line-height: var(--lh-base);
}

.size-error::before {
    content: '⚠';
    font-size: 1rem;
    flex-shrink: 0;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

.size-error.shake {
    animation: shake 0.45s ease;
}

/* ============================================
   QUANTITY - COMPACT INLINE
   ============================================ */
.qty-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.qty-row label {
    font-size: 0.85rem;
    color: var(--g-700);
}

.qty-row input {
    width: 90px;
    padding: 8px 10px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-navy);
    text-align: center;
}

.qty-row input:focus {
    outline: none;
    border-color: var(--c-accent);
}

.quick-qty-btns {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.quick-qty-btn {
    /* min-height 40px: було 26px — надто дрібна ціль для пальця */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 5px 14px;
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--g-0);
    font-size: 0.75rem;
    color: var(--g-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-qty-btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.quick-qty-btn.active {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: var(--g-0);
}

/* Стилі матеріалів живуть у блоці «ПАРАМЕТРИ ЗАМОВЛЕННЯ» нижче —
   тутешній дубль ставив display:flex і розкидав назву й опис у дві колонки. */


/* ============================================
   URGENCY - COMPACT
   ============================================ */
.urgency-options {
    display: flex;
    gap: var(--sp-1);
}

.urgency-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.urgency-option:hover { border-color: var(--c-accent); }

.urgency-option.active {
    border-color: var(--c-navy);
    background: var(--g-100);
}

.urgency-option input[type="radio"] { display: none; }

.urgency-option .urgency-name {
    font-weight: 600;
    color: var(--g-900);
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.urgency-option .urgency-price {
    font-weight: 700;
    color: var(--c-navy);
    font-size: 0.85rem;
}

.urgency-option.active .urgency-name,
.urgency-option.active .urgency-price {
    color: var(--c-navy);
}

/* ============================================
   PRICE RESULT
   ============================================ */
.price-result-block {
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
    border-radius: var(--r-lg);
    padding: 20px;
    color: var(--g-0);
    text-align: center;
}

.price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: 4px;
}

.price-label {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}

.price-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c-gold);
}

.price-per-item {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 10px;
}

.order-summary {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--r-sm);
    display: inline-block;
}

.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-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
}

.order-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-brand);
}

.order-btn-primary svg {
    width: 20px;
    height: 20px;
}

/* Дві дії в рядок: оформити зараз або відкласти в кошик.
   Кошик — другорядна дія, тож контурна кнопка, а не другий червоний блок:
   два однаково яскраві заклики змушували б обирати замість того, щоб діяти. */
.order-actions {
    display: flex;
    gap: var(--sp-2);
}
.order-actions .order-btn-primary { flex: 2 1 0; }

.order-btn-cart {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 18px;
    background: var(--g-0);
    border: 2px solid var(--c-brand);
    border-radius: var(--r-btn);
    color: var(--c-brand);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.order-btn-cart:hover { background: var(--c-brand); color: var(--g-0); }
.order-btn-cart svg { width: 18px; height: 18px; flex: none; }

.order-actions__hint {
    margin: 8px 0 0;
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--g-600);
    text-align: center;
}

@media (max-width: 480px) {
    .order-actions { flex-direction: column; }
}

/* Тираж × сторінки для багатосторінкового PDF */
.pages-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--g-50);
    border-left: 3px solid var(--c-accent);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-800);
}
.pages-note[hidden] { display: none; }
.pages-note i { color: var(--c-accent); margin-right: 5px; }
.pages-note strong { color: var(--c-navy); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    /* Адаптив heroʼя живе поруч із самим heroʼєм — див. блок HERO вгорі */
    .sticker-config-grid { grid-template-columns: 1fr; }
    .sticker-preview-area { position: static; order: -1; }
    /* На планшеті — превью на всю ширину колонки */
    .preview-canvas-wrapper { max-width: 100%; }
}

@media (max-width: 600px) {
    .sticker-config-section { padding: 30px 10px; }
    .sticker-config-title { font-size: 1.4rem; }

    /* На мобільному — превью займає всю ширину без обмежень */
    .preview-canvas-wrapper { max-width: 100%; }

    .urgency-options { flex-wrap: wrap; }
    .urgency-option { flex: 1 1 30%; }

    .price-value { font-size: 1.7rem; }
    .param-group { padding: 12px; }
}

@media (max-width: 400px) {
    .preview-canvas-wrapper { max-width: 100%; }

}

/* ============================================
   FAQ & SEO
   ============================================ */
.faq-section, .seo-section {
    max-width: 900px;
    margin: var(--sp-8) auto;
    padding: 0 var(--sp-4);
}

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

   Секції, галерея, таблиця цін, умови замовлення, переваги, суміжні
   послуги, відео та 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;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    padding: 12px 14px;
    cursor: pointer;
    background: var(--g-0);
    transition: border-color .18s, background .18s;
}

.material-option:hover { border-color: var(--g-300); }

.material-option.active {
    border-color: var(--c-navy);
    background: var(--g-100);
}

.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 { border-color: var(--g-300); }

.chip-option.active {
    border-color: var(--c-navy);
    background: var(--c-navy);
    color: var(--g-0);
    font-weight: 600;
}

/* Поміточка під матеріалом: на прозорих і темних плівках друк білим
   увімкнений автоматично. Це не попередження й не помилка — просто
   факт про матеріал, тож нейтральний синій, а не жовтий. */
.material-white-note {
    display: flex;
    gap: 8px;
    margin-top: var(--sp-3);
    padding: 10px 13px;
    background: var(--c-info-bg, #eef4fb);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--r-xs);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--g-700);
}
.material-white-note[hidden] { display: none; }
.material-white-note i { color: var(--c-accent); flex-shrink: 0; margin-top: 2px; }
.material-white-note strong { color: var(--c-navy); }

/* --- Параметри рулона --- */
.roll-params__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

.roll-field { display: flex; flex-direction: column; gap: 5px; }

.roll-field label {
    font-size: 0.8rem;
    color: var(--g-700);
    font-weight: 500;
}

/* Списки більше не описуємо тут: їхнє оформлення живе в /assets/ui.css
   і застосовується до будь-якого select автоматично. Локальне правило
   лише перебивало б спільне — і при наступній зміні дизайну цей список
   лишився б єдиним, що виглядає по-старому. */
.roll-field input {
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    /* Саме height, а не min-height: у input[type=number] власна внутрішня
       метрика рядка, і min-height його не стискає — поле лишалося вищим
       за сусідній список на 2px. */
    height: 44px;
    padding: 10px 12px;
    font-size: var(--fs-base);
    /* Той самий line-height, що в select із ui.css, — інакше поля в одному
       рядку відрізняються на пару пікселів по висоті, і це видно. */
    line-height: 1.35;
    color: var(--g-900);
    background: var(--g-0);
    width: 100%;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.roll-field input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--sh-focus);
}

/* Втулка: не поле вводу, а показник. Виглядає як частина форми, але
   не вдає, що там є що обирати. */
.roll-field--static { gap: 5px; }

.roll-field__label {
    font-size: 0.8rem;
    color: var(--g-700);
    font-weight: 500;
}

.roll-field__value {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border: 2px dashed var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-50);
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: var(--c-navy);
}

.roll-field__value small {
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    color: var(--g-600);
}

/* Дедлайн у блоці «Термін і доставка» */
.deadline-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--c-ok-bg);
    border: 1px solid var(--c-ok-line);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--c-ok);
}
.deadline-note[hidden] { display: none; }
.deadline-note i { color: var(--c-ok); flex-shrink: 0; }
.deadline-note strong { color: var(--c-ok); font-weight: var(--fw-bold); }

/* Два рядки: коли беремо в роботу і до коли готово. Кожен — цілий
   flex-рядок, тож «готово» ніколи не відривається від дати переносом.
   Саме через це діагноз і губився: слово лишалось у кінці одного
   рядка, а час переїжджав на наступний. */
.deadline-note__start,
.deadline-note__ready { flex-basis: calc(100% - 24px); }
.deadline-note__ready { margin-left: 24px; }
.deadline-note__start { color: var(--g-700); }
.deadline-note__earlier { color: var(--g-600); white-space: nowrap; }

.roll-params__note {
    margin: 12px 0 0;
    font-size: 0.78rem;
    color: var(--g-700);
    line-height: var(--lh-base);
}

/* Позначка «ціна попередня», поки в прайсі є заглушки */
.price--provisional::after {
    content: 'Прайс налаштовується — ціна попередня';
    display: block;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-line);
    border-radius: var(--r-sm);
    font-size: 0.76rem;
    color: var(--c-warn);
    text-align: center;
}

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

/* Доставка входить у ціну — плашка під єдиним терміном */
.delivery-included {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: 12px 0 0;
    padding: 10px 12px;
    background: var(--c-ok-bg);
    border: 1px solid var(--c-ok-line);
    border-radius: var(--r-md);
    font-size: 0.85rem;
    line-height: var(--lh-base);
    color: var(--c-ok);
}

.delivery-included i { color: var(--c-ok); flex-shrink: 0; line-height: var(--lh-base); }

/* Єдиний термін — картка на всю ширину, а не колонка з трьох */
.urgency-options { grid-template-columns: 1fr; }

/* Підказка про вигідніший розмір */
.size-hint {
    margin-top: 10px;
    padding: 11px 13px;
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-line);
    border-left: 3px solid var(--c-gold);
    border-radius: var(--r-md);
    font-size: 0.84rem;
    line-height: var(--lh-base);
    color: var(--c-warn);
}

.size-hint i { color: var(--c-warn-strong); margin-right: 4px; }
.size-hint strong { color: var(--c-warn); }

/* Жовта кнопка з темно-синім текстом. Раніше текст був кольором
   --c-warn (тьмяно-коричневим) на жовтому — контраст 2,4:1, і кнопка
   читалася як вимкнена. Синій на жовтому дає ~8:1. */
.size-hint__apply {
    /* flex + fit-content, а не inline-flex: кнопка стає на власний
       рядок під текстом підказки й не «прилипає» до останнього слова,
       але лишається завширшки рівно по напису. */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 16px;
    background: var(--c-gold);
    border: none;
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-size: 0.84rem;
    font-weight: var(--fw-bold);
    color: var(--c-navy);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 200, 87, .45);
    transition: background .18s, box-shadow .18s, transform .12s;
}
.size-hint__apply:hover {
    background: #ffbe38;
    box-shadow: 0 4px 12px rgba(255, 200, 87, .6);
}
.size-hint__apply:active { transform: translateY(1px); }
.size-hint__apply i { font-size: .9em; line-height: 1; }

.size-hint__apply:hover { background: var(--c-warn-strong); }

/* Підказка про пропорції — синя, а не жовта: жовтою вже позначена
   вигода по ціні, і дві однакові плашки поспіль читалися б як одна
   довга. Тут інша тема — відповідність макету, а не гроші. */
.size-hint--prop {
    background: var(--g-50);
    border: 1px solid var(--g-200);
    border-left: 3px solid var(--c-accent);
    color: var(--g-800);
}
.size-hint--prop[hidden] { display: none; }
.size-hint--prop i { color: var(--c-accent); }
.size-hint--prop strong { color: var(--c-navy); }
/* Кнопка лишається жовтою, як у решті підказок — це єдиний елемент
   у блоці, який треба натиснути, і він має бути помітним. */


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

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