/**
 * sticker-printing-app/styles.css
 *
 * Сторінковий CSS конфігуратора наклейок (/sticker-printing.php).
 *
 * Тут ЛИШЕ унікальне для цієї сторінки. Оболонка конфігуратора —
 * .sticker-config-section, .param-group, .chip-options, .material-options,
 * .order-actions і кнопки замовлення — приїжджає зі спільного
 * /assets/configurator.css, який підключений на сторінці ПЕРЕД цим файлом.
 * Сторінки етикеток і стікерпаків носять копію тієї оболонки всередині
 * своїх styles.css; повторювати це втретє сенсу немає.
 *
 * Змінні оформлення (--red, --navy, --gray-light тощо) — з /assets/ui.css.
 */

/* ═══════════════════════════════════════════════════════════════════
   СПІЛЬНІ ПАРАМЕТРИ ПОЗИЦІЇ
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   ДВІ КОЛОНКИ: МАКЕТИ ЛІВОРУЧ, ПАРАМЕТРИ ПРАВОРУЧ

   Та сама розкладка, що на сторінці етикеток (.sticker-config-grid у
   etyketky-v-rulonakh-app/styles.css). Тут вона своя, бо в спільний
   /assets/configurator.css цей грід так і не переїхав.

   Ліва колонка ширша: у ній живуть полотна макетів, і саме вони мають
   отримувати місце, коли його бракує.
   ═══════════════════════════════════════════════════════════════════ */

/* Колонки рівні, як на сторінці етикеток (.sticker-config-grid там —
   1fr 1fr). Було 1.25fr на макет: права колонка тіснилась, і параметри
   лізли вниз замість того, щоб розкластися вшир. */
.sc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 28px;
    align-items: start;
}

/* Нижче ~980 px дві колонки перестають бути двома колонками: параметри
   стискаються так, що поля розміру лізуть одне на одне. Складаємо.

   Проміжок той самий, що між групами параметрів (.sc-params-area,
   14 px). У складеному вигляді превʼю стає просто першим блоком у тому
   ж стовпці, і 24 px над розміром проти 14 px під ним читалися як
   збій ритму: здавалося, що розмір «відірваний» від решти форми. */
@media (max-width: 980px) {
    .sc-grid { grid-template-columns: 1fr; gap: 14px; }
}

.sc-preview-area,
.sc-params-area { min-width: 0; }

.sc-params-area { display: flex; flex-direction: column; gap: 14px; }

/* Спільний assets/configurator.css дає .param-group padding:28px. Для
   сторінки з чотирма групами це 224 px самих лише полів — більше, ніж
   уся зона перегляду макета. Тиснемо, але ТІЛЬКИ в межах цієї колонки:
   той самий клас використовують конгрівки й плотерна порізка, і міняти
   його глобально означало б зачепити чужі сторінки. */
.sc-params-area .param-group { padding: 16px 18px; }

/* Усі підписи груп — як «Розмір, мм».
   У колонці стояло два різні заголовки: розмір і тираж мали тихий
   вбудований підпис (.sc-size__label), а форма, матеріал і термін —
   жирніший .param-group-title зі синьою рискою збоку. Одні й ті самі
   за суттю поля виглядали як два різні рівні структури, і риска
   додавала колонці зайвий вертикальний ритм.

   ⚠ Правило скоповане на .sc-params-area навмисно: .param-group-title
   приходить зі спільного assets/configurator.css і його використовують
   конгрівки та плотерна порізка. Глобальна зміна зачепила б їх. */
.sc-params-area .param-group-title {
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy, #153243);
}

.sc-params-area .param-group-title::before { content: none; }

/* ⚠ Тут були .sc-params__note і .sc-params__matnote — плашки-пояснення
   всередині колонки параметрів. Прибрані разом із самими поясненнями:
   вони переїхали під конфігуратор, у блок .sc-know. У формі людина
   приймає рішення, а не читає, і абзаци між полями розсовували
   колонку. */

/* Розмір одним рядком: підпис, ширина, «×», висота.
   Кожне поле мало власний підпис під собою — група займала три рівні
   по висоті замість одного. Підписи полів переїхали в aria-label:
   з контексту «Розмір, мм · 50 × 50» і так зрозуміло, де що. */
.sc-size {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sc-size__label {
    flex: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy, #153243);
}

.sc-size input {
    width: 74px;
    flex: none;
    padding: 8px 10px;
    border: 1px solid var(--gray-light, #d9dde3);
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--navy, #153243);
    background: #fff;
}

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

.sc-size__x { flex: none; color: var(--gray, #8a93a0); font-size: 15px; }

/* Другий підпис у рядку («видів») — тихіший за перший: він уточнює
   сусіднє поле, а не називає всю групу. */
.sc-size__label--sec { font-weight: 400; color: var(--gray, #8a93a0); font-size: 12.5px; }

/* ── ЧИСЛОВЕ ПОЛЕ ЗІ СТРІЛКАМИ ────────────────────────────────────
   Рамку тримає обгортка, а не сам <input>: тоді стрілки — це справжня
   колонка всередині поля, а не щось приклеєне збоку.

   ⚠ Степер свій, а не рідний від type="number". Поля тут навмисно
   текстові: у числового немає selectionStart, і каретка стрибає при
   перемальовці (детально — біля обробника input у scripts.js). */
.sc-num {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    border: 1px solid var(--gray-light, #d9dde3);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

/* Підсвічуємо всю обгортку — інакше фокус видно лише на половині поля. */
.sc-num:focus-within {
    border-color: var(--c-accent);
    box-shadow: var(--sh-focus);
}

/* ⚠ flex обовʼязково. Вище в цьому файлі стоїть `.sc-size input
   { flex: none }` — воно писалося для полів розміру, які лежать у
   рядку напряму. Тепер поле тиражу теж усередині .sc-size, але вже в
   обгортці, і з flex:none воно не стискалося: займало всю ширину
   обгортки, а стрілки виштовхувало за неї — де їх з'їдав
   overflow:hidden. Тобто степер був у розмітці, але його не було
   видно. */
.sc-num .sc-qty {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 8px 4px 8px 8px;
}

.sc-num .sc-qty:focus { box-shadow: none; border-color: transparent; }

.sc-spin {
    display: flex;
    flex: none;
    flex-direction: column;
    width: 20px;
    border-left: 1px solid var(--gray-light, #eef0f4);
}

/* Кнопки на всю висоту поля, по половині кожна: дві стрілки по 10 px
   мишею ловляться погано, а пальцем — ніяк. */
.sc-spin__btn {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: #fbfcfd;
    color: var(--gray-dark, #55606e);
    font-size: 10px;
    line-height: 0;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.sc-spin__btn + .sc-spin__btn { border-top: 1px solid var(--gray-light, #eef0f4); }

.sc-spin__btn:hover  { background: var(--c-ok-bg, #F2F9F4); color: var(--c-ok, #2C6B41); }
.sc-spin__btn:active { background: #e7f1ea; }

/* Підпис під чипами заливки: пояснює, що цей вибір тимчасовий і зникне,
   щойно зʼявиться макет. Тон тихий — це примітка, а не попередження. */
.sc-level-note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--gray, #8a93a0);
}

/* У рядку тиражу поле таке саме вузьке, як у розмірі. Ширину тепер
   задає обгортка — сам <input> тягнеться на всю її ширину. */
#scEmptyParams .sc-num { width: 84px; }
#scEmptyParams .sc-qty { text-align: center; }

/* Поле «видів» коротше: у ньому щонайбільше двозначне число. Разом із
   тиражем рядок має вміститися в 299 px на телефоні.
   ⚠ Клас, а не :nth-of-type(2): усі елементи в рядку — <span>, тож
   «другий span» — це саме поле тиражу, а не видів. */
#scEmptyParams .sc-num--sm { width: 64px; }

/* Тираж на картці ширший — там поруч немає другого поля. */
.sc-card__qty .sc-num { width: 110px; }

/* Готові розміри й швидкі тиражі — однакові на вигляд, бо роблять одне
   й те саме: підставляють часте значення замість ручного набору.
   Дрібніші за поля навмисно: це підказка під рядком, а не рівноправний
   елемент керування. */
.sc-presets,
.sc-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
}

/* На телефоні шість готових розмірів не влазять у рядок при своїй
   природній ширині й розсипаються на два ряди — а другий ряд із двох
   кнопок читається як окрема, інша група. Тому там це сітка з шести
   рівних колонок: один рядок, однакові клітинки, нічого не «звисає».
   11 px і мінімальні поля — рівно щоб «100×100» вміщалось у 1/6 ширини. */
@media (max-width: 600px) {
    .sc-presets {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 4px;
    }

    .sc-presets .sc-preset {
        padding: 0 2px;
        font-size: 11px;
        text-align: center;
    }
}

.sc-preset,
.sc-quick__btn {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--gray-light, #d9dde3);
    border-radius: 7px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-dark, #55606e);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

/* ⚠ Активний стан ЗЕЛЕНИЙ, не червоний. Це наскрізна домовленість
   сайту: у assets/ui.css так пофарбовані .chip-option.active,
   .quick-qty-btn.active і .ui-chip.is-active — усі через --c-ok.
   Червоний тут був моєю самодіяльністю, і поруч із зеленим чипом форми
   виглядало як дві різні системи на одному екрані.
   --c-ok-line — той самий зелений на межі, для наведення. */
.sc-preset:hover,
.sc-quick__btn:hover {
    border-color: var(--c-ok-line);
    color: var(--c-ok);
}

/* Двома окремими блоками, а не одним через кому — навмисно.
   У спільному правилі зелений застосовувався до .sc-quick__btn.active,
   але не до .sc-preset.active, хоча селектор збігався й нічого його не
   перебивало. Розділені правила поводяться передбачувано. */
.sc-preset.active {
    background: var(--c-ok, #2C6B41);
    border-color: var(--c-ok, #2C6B41);
    color: #fff;
    font-weight: 600;
}

.sc-quick__btn.active {
    background: var(--c-ok, #2C6B41);
    border-color: var(--c-ok, #2C6B41);
    color: #fff;
    font-weight: 600;
}

/* ── ФОРМА ПОРІЗКИ ────────────────────────────────────────────────
   Рівно чотири колонки, а не auto-fit: три чипи з довгими підписами
   переносились у два рядки й лишали півпорожній рядок праворуч — це і
   був «баг порожнього місця».
   Зразок — .cut-shape-btn зі сторінки наклейок з логотипом: великий
   малюнок, дрібний підпис. */
.sc-shapes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.sc-shape {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1.5px solid var(--gray-light, #e0e4ea);
    border-radius: 10px;
    background: #fff;
    color: var(--gray-dark, #55606e);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.sc-shape svg { width: 44px; height: 44px; }

/* Підпис дрібний: головне тут малюнок, слово лише знімає двозначність */
.sc-shape__name {
    font-size: 11.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--gray, #8a93a0);
}

.sc-shape:hover:not(.active) { border-color: var(--c-ok-line); color: var(--c-ok); }

/* Активна — зелена, як усе обране на сайті. Заливка світла, а не
   суцільна: усередині малюнок контуру, і на суцільному зеленому він
   зникав би. */
.sc-shape.active {
    border-color: var(--c-ok);
    background: var(--c-ok-bg, #F2F9F4);
    color: var(--c-ok);
}

.sc-shape.active .sc-shape__name { color: var(--c-ok); font-weight: var(--fw-semi, 600); }

.sc-shapes__note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--gray, #8a93a0);
}

/* «Своя форма» без контуру у файлі — це не констатація, а попередження
   про гроші: до ціни калькулятора додасться робота дизайнера. Тому
   помітніше за звичайну примітку, але без червоного: ми не відмовляємо,
   а беремо роботу, просто не можемо назвати остаточну суму. */
.sc-shapes__note--warn {
    padding: 9px 11px;
    border-left: 3px solid var(--c-warn, #E8A317);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 191, 0, .1);
    color: #7a5c00;
}

.sc-shapes__link {
    color: var(--c-ok, #2C6B41);
    text-decoration: underline;
    white-space: nowrap;
}

@media (max-width: 460px) {
    .sc-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.size-error,
.size-hint {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.size-error { color: var(--red, #f22b29); }

/* Підказка про пропорції — з хрестиком, як і «Макет закінчився».
   ⚠ display:flex перебиває атрибут hidden (у ньому display:none від
   браузера має меншу вагу за авторське правило), тож окремий рядок для
   [hidden] тут обовʼязковий — інакше схована підказка лишалася б на
   екрані. */
.size-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--gray-dark, #55606e);
}

.size-hint[hidden] { display: none; }

.size-hint__text { flex: 1 1 auto; min-width: 0; }

.size-hint__x {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--gray, #8a93a0);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.size-hint__x:hover {
    background: var(--gray-light, #e9ecf1);
    color: var(--navy, #153243);
}

/* Два матеріали поруч, а не стовпчиком: стовпчиком група займала 204 px —
   найбільше в усій колонці параметрів, — хоча варіантів лише два. */
#scMaterial {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#scMaterial .material-option {
    display: block;
    text-align: left;
    padding: 9px 11px;
}

.material-option__name { display: block; font-weight: 600; font-size: 13.5px; }
.material-option__note {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.35;
    opacity: .8;
}

/* ⚠ На вузькому екрані матеріали НЕ складаємо в стовпчик.
   Тут стояло grid-template-columns:1fr — і два варіанти займали два
   рядки замість одного, хоча вибір бінарний і обидва мають бути видні
   поруч, щоб їх можна було порівняти одним поглядом.
   Замість складання тиснемо самі плитки: дрібніший опис і менші поля.
   Опис лишаємо — саме він і є підставою для вибору. */
@media (max-width: 520px) {
    #scMaterial { gap: 6px; }
    #scMaterial .material-option { padding: 8px 9px; }
    .material-option__name { font-size: 12.5px; }
    .material-option__note { font-size: 10.5px; line-height: 1.3; }
}

/* ═══════════════════════════════════════════════════════════════════
   СТАН «МАКЕТІВ ЩЕ НЕМАЄ»
   ═══════════════════════════════════════════════════════════════════ */

/* Зона завантаження займає всю ліву колонку: параметри тепер живуть
   праворуч, ділити з ними місце більше не треба. */
.sc-empty { min-width: 0; }

/* Зона завантаження — та сама, що на сторінці етикеток
   (.canvas-upload-overlay в etyketky-v-rulonakh-app/styles.css):
   коло з хмаринкою, назва, формати, кнопка-пігулка. Нічого зайвого. */
.sc-empty__drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 340px;
    padding: 30px 24px;
    border: 1px solid var(--gray-light, #e6e8ec);
    border-radius: 16px;
    background: var(--gray-bg, #f8f9fb);
    text-align: center;
    cursor: pointer;
    transition: border-color .18s, background .18s;
}

/* Пунктирна рамка — на псевдоелементі, щоб не впливати на розкладку
   вмісту. Прийом узятий звідти ж, зі сторінки етикеток. */
.sc-empty__drop::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 2px dashed #d5dae0;
    border-radius: 12px;
    pointer-events: none;
    transition: border-color .18s;
}

.sc-empty__drop:hover::before { border-color: #b9c1ca; }

/* Перетягування — окремий, помітніший стан: у цю мить людина тримає
   файл над сторінкою й має бачити, що ціль її прийме. */
.sc-empty__drop.is-over { background: var(--c-ok-bg, #F2F9F4); }
.sc-empty__drop.is-over::before { border-color: var(--c-ok, #2C6B41); }

/* Коло СИНЄ, не червоне: нижче стоїть червона кнопка «Вибрати файл»,
   і два червоні акценти поспіль сперечалися б між собою. Те саме
   рішення вже прийняте на етикетках. */
.sc-drop__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--navy, #153243);
}

.sc-drop__icon svg { width: 26px; height: 26px; fill: #fff; }

.sc-drop__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy, #153243);
}

.sc-drop__formats {
    margin: 0;
    font-size: 12px;
    color: var(--gray, #8a93a0);
}

/* Пігулка — як усі кнопки сайту (--r-btn: 999px у assets/ui.css):
   така сама форма, що в кнопки шапки й героя. Тут раніше стояли 10 px,
   і кнопка випадала з системи. */
.sc-empty__btn {
    margin-top: 4px;
    min-height: 44px;
    padding: 0 26px;
    border: none;
    border-radius: var(--r-btn, 999px);
    background: var(--red, #f22b29);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
}

.sc-empty__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(242, 43, 41, .25);
}

.sc-empty__guides {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
}

/* Посилання-підказки — спокійні, а не червоні: червоний на сторінці
   означає дію («Замовити», «Вибрати файли»), і два червоні посилання
   під головною кнопкою сперечалися з нею за увагу. */
.sc-empty__guide {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    font-size: 13px;
    color: var(--gray-dark, #55606e);
    text-decoration: none;
    border-bottom: 1px solid #d9dde3;
    padding-bottom: 1px;
    transition: color .15s, border-color .15s;
}

.sc-empty__guide i { color: var(--c-ok, #2C6B41); }

.sc-empty__guide:hover {
    color: var(--c-ok, #2C6B41);
    border-color: var(--c-ok, #2C6B41);
}

.param-group-note { margin: 6px 0 0; font-size: 12.5px; color: var(--gray, #8a93a0); }

/* ═══════════════════════════════════════════════════════════════════
   КАРТКИ МАКЕТІВ
   ═══════════════════════════════════════════════════════════════════ */

/* Картки живуть у лівій колонці, тож мінімум менший, ніж був на всю
   ширину: інакше при двох колонках картка не влазить і сітка
   схлопується в одну. */
/* ⚠ auto-FIT, а не auto-fill. Різниця саме тут: auto-fill лишає
   порожні колонки стояти, тож один макет у колонці 586 px займав
   половину, а друга половина зяяла порожнечею. auto-fit порожні треки
   схлопує — один макет розтягується на всю ширину, два стають поруч,
   три і більше лягають по 230 px. */
.sc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.sc-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-light, #e6e8ec);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

/* ── ОДИН МАКЕТ ─────────────────────────────────────────────────────
   Форма має виглядати так само, як ДО завантаження, тільки замість поля
   завантаження стоїть превʼю. Тому картка тут — не міні-плитка в сітці,
   а блок на всю ширину колонки з тим самим силуетом, що й зона
   завантаження: та сама рамка, та сама мінімальна висота, вміст по
   центру.

   Полотно не розтягуємо на всі 586 px: воно квадратне, і на всю ширину
   дало б 586 px висоти. Замість цього центруємо його, як центрувалася
   хмаринка в зоні завантаження.

   Тираж на картці НЕ показуємо — він лишається в правій колонці, там
   само, де стояв до завантаження. */
/* ⚠ ОДНА КОЛОНКА, а не сітка. Це головне правило цього блоку.
   Плитка «+ Додати макет» — теж елемент сітки, тож при auto-fit вона
   ставала другою колонкою й ділила зону навпіл: превʼю з'їжджало на
   половину ширини, а поруч зяяло поле під другий макет, якого в
   більшості замовлень ніколи не буде.
   Тут картка займає всю ширину, а плитка лягає СМУЖКОЮ під нею. */
.sc-cards--single { grid-template-columns: 1fr; }

/* ⚠ min-height тут БІЛЬШЕ НЕМАЄ (було 340 px). Відколи висота зони
   перегляду йде за пропорцією наклейки, широка наклейка дає низьку
   картку — і мінімальна висота знову домальовувала б під нею порожнє
   поле, тобто рівно те, що ми щойно прибрали. */
.sc-cards--single .sc-card {
    display: block;
    border-radius: 16px;
}

.sc-cards--single .sc-card__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 20px 6px;
}

.sc-cards--single .sc-canvas-wrap { max-width: 320px; }

.sc-cards--single .sc-card__body { padding: 4px 20px 18px; }

/* ── КЕРУВАННЯ МАКЕТОМ — У КУТКУ ПРЕВʼЮ ───────────────────────────
   ⚠ Тут була смуга над превʼю: номер, назва файлу, «Змінити макет» і
   кошик. Це три рядки висоти на КОЖНІЙ картці — на телефоні через них
   параметри й превʼю не вміщались в один екран.

   Тепер дії приколоті до кутка самого превʼю, як .change-file-btn на
   сторінці етикеток. Назви файлу немає зовсім: людина щойно сама його
   вибрала й бачить вміст на превʼю, підпис нічого не додавав. */
.sc-ov {
    position: absolute;
    inset: 0;
    z-index: 11;
    pointer-events: none;   /* саме полотно лишається клікабельним */
}

.sc-ov__acts {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    pointer-events: auto;
}

/* Номер — лише коли макетів кілька. При одному він позначав би єдине,
   що є на екрані. */
.sc-ov__idx {
    position: absolute;
    top: 8px;
    left: 8px;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--gray-light, #e0e4ea);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    color: var(--gray-dark, #55606e);
    pointer-events: none;
}

/* Приглушені в спокої: кут макета вони однаково зачіпають, тож не мають
   перетягувати погляд із самого превʼю. Під курсором — на повну. */
.sc-ov__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray-light, #e0e4ea);
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--gray-dark, #55606e);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: .78;
    box-shadow: 0 2px 6px rgba(21, 50, 67, .12);
    transition: opacity .15s, border-color .15s, color .15s;
}

.sc-card:hover .sc-ov__btn,
.sc-ov__btn:focus-visible { opacity: 1; }

.sc-ov__btn:hover { border-color: var(--c-ok, #2C6B41); color: var(--c-ok, #2C6B41); }
.sc-ov__btn--del:hover { border-color: var(--red, #f22b29); color: var(--red, #f22b29); }

/* На дотику наведення немає — кнопки мають бути видимі одразу. */
@media (hover: none) {
    .sc-ov__btn { opacity: 1; }
}

/* «Повернути як було» — тільки коли макет справді зрушили. Клас на
   картці ставить syncGestureState(). Постійна кнопка скидання на
   незайманому превʼю натякала б на дію, якої ще не було. */
.sc-ov__btn--reset { display: none; }
.sc-card--moved .sc-ov__btn--reset { display: flex; }

/* Зум завжди видимий, на відміну від решти кнопок кутка: про
   перетягування люди здогадуються самі, про масштаб — ні. Через це
   ховати його «до наведення» не можна навіть на десктопі. */
.sc-ov__btn--zoom { opacity: 1; }

/* Відступ між зумом і діями з файлом. Зумом користуються постійно,
   кошиком — один раз, і сусідство кнопок робить помилку дешевою для
   промаху й дорогою за наслідками. */
.sc-ov__btn--zoomlast { margin-right: 8px; }

/* ── СЦЕНА МАКЕТА ─────────────────────────────────────────────────
   ⚠ .sc-card__stage створюється ОДИН раз і не перемальовується:
   усередині живе fabric.StaticCanvas. Перемальовується тільки тіло. */
.sc-card__stage { padding: 14px 14px 0; }

/* position:relative — опора для накладки з кнопками (.sc-ov),
   яка приколота до кутка саме цієї зони.

   ⚠ Висота зони перегляду ЗМІННА — --sc-vis задає scripts.js під
   пропорцію наклейки. Раніше тут стояло жорстке aspect-ratio: 1/1, бо
   полотно всередині квадратне (700×700). Для наклейки 90×50 це давало
   дві смуги шахівниці над і під макетом на третину висоти зони — на
   телефоні найдорожче місце на екрані витрачалось на порожнечу.

   Полотно лишається квадратним і просто вилазить за межі обгортки
   згори й знизу порівну; overflow:hidden зрізає рівно ті смуги, де
   нічого немає. Тобто це кадрування показу, а не зміна геометрії
   макета: розрахунок і те, що поїде у виробництво, не змінюється. */
.sc-canvas-wrap {
    --sc-vis: 1;             /* частка висоти полотна, у якій є що показувати */
    position: relative;
    width: 100%;
    aspect-ratio: 1 / var(--sc-vis);
    border-radius: 10px;
    /* ⚠ Тут була шахівниця прозорості (сірі квадратики). Прибрана:
       наклейка друкується на білому папері чи плівці, і саме білий —
       чесний фон під превʼю. Про прозоре тло в макеті шахівниця все
       одно нічого не пояснювала — під фігурою наклейки лежить біла
       підкладка (bgShape у scripts.js), тож квадратики були видні
       ЛИШЕ по полях, тобто там, де наклейки й немає. */
    background: #fff;
    overflow: hidden;
}

/* Полотно масштабується під картку. Внутрішній розмір — 700 px
   (CANVAS_SIZE у scripts.js), тож на retina лишається різким.

   ⚠ height: auto, а не 100%. Полотно квадратне, а обгортка — ні:
   розтягнута на всю її висоту картинка була б сплюснута. Тому ширина
   по обгортці, висота своя, і зайве згори-знизу зрізається порівну
   (top:50% + translateY). */
.sc-canvas-wrap canvas,
.sc-canvas-wrap .canvas-container {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100% !important;
    height: auto !important;
    transform: translateY(-50%);
}

.sc-view__label {
    margin: 10px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--gray, #8a93a0);
}

/* ⚠ ТУТ БУЛИ .sc-view__zoom--mouse / --touch: підпис показував «колесо»
   на настільному й «два пальці» на телефоні. Прибрані разом із самим
   текстом — у зума тепер видимі кнопки «+» і «−» у кутку превʼю
   (.sc-ov__btn--zoom нижче), і пояснювати словами те, що видно оком,
   уже нема потреби. */

/* ── ЖЕСТИ НА ПРЕВʼЮ ──────────────────────────────────────────────
   ⚠ Тут була панель із семи кнопок (±, чотири стрілки, скидання).
   Прибрана: крок 4% полотна означав до дванадцяти натискань, щоб
   посунути макет на пів наклейки, а на телефоні вона з'їдала два зайві
   рядки під КОЖНОЮ карткою. Тепер макет тягнеться пальцем чи мишею.

   Курсор — єдине, що підказує мишею, що малюнок рухомий, тож він тут
   не косметика: без grab превʼю виглядає як звичайна картинка.

   touch-action ставить JS (syncGestureState): none, коли є що рухати,
   і pan-y, коли нема — щоб палець посеред превʼю не переставав гортати
   сторінку. У CSS його не фіксуємо навмисно. */
.sc-canvas-wrap.is-movable  { cursor: grab; }
.sc-canvas-wrap.is-dragging { cursor: grabbing; }

/* Поки макет ще не зрушили, тягнути вже можна — просто запасу нуль.
   Курсор при цьому не обіцяє руху, якого не буде. */
.sc-canvas-wrap.is-locked { cursor: default; }

/* Підсвітка на час жесту: підтверджує, що превʼю відповіло на дотик,
   навіть якщо макет уперся в межу й не зрушив. */
.sc-canvas-wrap.is-dragging { outline: 2px solid rgba(44, 107, 65, .35); outline-offset: -2px; }

/* Полотно під пальцем не має виділятися як текст і не має підсвічуватись
   сірим на дотик — інакше довге тягнення виглядає як невдале виділення. */
.sc-canvas-wrap {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.sc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--gray, #8a93a0);
}

.sc-legend li { display: flex; gap: 6px; align-items: center; }

.sc-legend__cut,
.sc-legend__safe { display: inline-block; width: 26px; height: 0; }

/* Зразки в легенді мусять збігатися з тим, що намальовано на полотні
   (renderGeometry у scripts.js). Світлий волосок тут при товстій сірій
   лінії на превʼю читався б як інша лінія. */
.sc-legend__cut  { border-top: 3px solid var(--red, #f22b29); }
.sc-legend__safe { border-top: 3px dashed #7c8798; }

/* Посторінковий вибір для багатосторінкових PDF */
.sc-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;
}

.sc-pager__label { color: var(--gray, #8a93a0); }

.sc-pager__btn {
    min-width: 26px;
    padding: 3px 6px;
    border: 1px solid var(--gray-light, #d9dde3);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
}

.sc-pager__btn.active {
    background: var(--c-ok, #2C6B41);
    border-color: var(--c-ok, #2C6B41);
    color: #fff;
    font-weight: 600;
}

.sc-card__body { padding: 12px 14px 14px; }

/* Порожнє тіло картки. Після переїзду аналізу в підсумок звичайний
   випадок — один макет без зауважень — не має під превʼю жодного поля,
   і сам лише padding давав смугу білого під легендою. Ховаємо блок, а
   нижній відступ віддаємо сцені. */
.sc-card--nobody .sc-card__body { display: none; }
/* 10, а не 14: під легендою й так є власний відступ рядка, і разом
   вони давали помітну білу смугу до низу картки. */
.sc-card--nobody .sc-card__stage { padding-bottom: 10px; }

/* ⚠ ТУТ БУЛИ ПЛАШКИ АНАЛІЗУ (.sc-facts / .sc-fact) — DPI, лінія різу
   й зауваження по краю під кожним превʼю. Переїхали в підсумок
   замовлення: .sc-total__maket нижче в цьому ж файлі. Розмітки з цими
   класами на сторінці більше немає, тож правила прибрані, щоб не
   виглядало, ніби блок ще існує. */

.sc-card__busy { margin: 0 0 8px; font-size: 12.5px; color: var(--gray, #8a93a0); }

.sc-card__qty { display: flex; align-items: center; gap: 10px; }

.sc-card__qty label { font-size: 13px; color: var(--gray-dark, #55606e); }

/* ── ТИРАЖ ПОСТОРІНКОВО ───────────────────────────────────────────
   Сторінки багатосторінкового файлу — це різні макети, і тираж у
   кожної свій. Сітка, а не стовпчик: на трьох-чотирьох сторінках
   стовпчик виганяв картку за екран, а пари «Стор. N — поле» коротка й
   добре лягає по дві в ряд. */
.sc-pageqty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 14px;
    margin-top: 8px;
}

.sc-pageqty__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sc-pageqty__row label {
    flex: none;
    font-size: 13px;
    color: var(--gray-dark, #55606e);
}

.sc-pageqty .sc-num { width: 104px; }

/* Сума — щоб не складати сторінки в голові. Тихо, бо це похідне
   число, а не поле для рішення. */
.sc-card__pagesum {
    margin: 8px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy, #153243);
}

.sc-qty {
    width: 100px;
    padding: 8px 10px;
    border: 1px solid var(--gray-light, #d9dde3);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy, #153243);
    background: #fff;
}

/* Фокус — акцентний синій і спільна тінь, як у .ui-input в assets/ui.css.
   Червона рамка на полі, у яке просто клацнули, читалася як помилка. */
.sc-qty:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--sh-focus);
}

/* ⚠ Ширину полів тиражу й видів задає правило вище (74 px, у рядку з
   підписами). Тут колись стояло width:100% — воно лишалось від версії,
   де кожне поле мало власну групу, і перебивало б рядкову розкладку. */

.sc-card__pages,
.sc-card__level,
.sc-card__first {
    margin: 9px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--gray, #8a93a0);
}

/* ⚠ ТУТ БУЛО .sc-card__note — жовта плашка з попередженням під превʼю.
   Прибрана разом із самим попередженням: воно й раніше дублювалось у
   блоці згоди «Перед друком варто знати», який лишився на місці. */

/* «Макет закінчився» — одна фраза про те, чому далі не рухається.
   ⚠ Тут був другий абзац (.sc-card__edge-text) із пропозицією замінити
   макет або замовити дизайнера. Прибраний: повідомлення спрацьовує
   посеред жесту, і відповідати п'ятьма рядками про платні послуги на
   «не рухається» — задорого для уваги. Разом із ним пішов і .sc-link:
   іншої розмітки з цим класом на сторінці немає. */
.sc-card__edge {
    position: relative;   /* опора для хрестика */
    margin: 10px 0 0;
    padding: 10px 34px 10px 13px;
    border-left: 3px solid var(--red, #f22b29);
    border-radius: 0 9px 9px 0;
    background: #fdf0f0;
}

.sc-card__edge-title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #8c2320;
}

/* Хрестик. Підказка спрацьовує посеред жесту, тож у неї має бути
   очевидний вихід — інакше вона просто заважає далі рухати макет.
   Закриття запамʼятовується (m.edgeNoteOff): удруге те саме не
   показуємо. */
.sc-card__edge-x {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #b8534f;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.sc-card__edge-x:hover {
    background: rgba(140, 35, 32, .1);
    color: #8c2320;
}

.sc-card__price {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--gray-light, #eef0f3);
    font-size: 19px;
    font-weight: 700;
    color: var(--navy, #153243);
}

/* ── ДОДАТИ ЩЕ ОДИН МАКЕТ ─────────────────────────────────────────
   ⚠ Кнопка стоїть НАД зоною превʼю, а не плиткою в кінці сітки.

   Плитка в сітці мала два недоліки. На телефоні вона розсовувала
   параметри й превʼю так, що вони переставали вміщатись в один екран.
   І вона їздила по сторінці: при одному макеті — під ним, при двох —
   на новому рядку, тобто щоразу в іншому місці.

   Тепер це тихий рядок у сталій позиції: другий макет замовляють
   рідко, і кнопка має бути доступною, але не мати ваги головної дії. */
.sc-addbar { margin-bottom: 10px; }

.sc-addbar__btn {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px dashed #d5dae0;
    border-radius: var(--r-btn, 999px);
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-dark, #55606e);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.sc-addbar__btn i { font-size: 16px; color: var(--gray, #8a93a0); transition: color .15s; }

.sc-addbar__btn:hover {
    border-color: var(--c-ok, #2C6B41);
    border-style: solid;
    background: var(--c-ok-bg, #F2F9F4);
    color: var(--c-ok, #2C6B41);
}

.sc-addbar__btn:hover i { color: var(--c-ok, #2C6B41); }
/* Стеля на кількість макетів — видимим текстом, а не в консоль */
.sc-limit {
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255, 191, 0, .12);
    font-size: 13px;
    line-height: 1.5;
    color: #7a5c00;
}

/* ═══════════════════════════════════════════════════════════════════
   ТЕРМІН
   ═══════════════════════════════════════════════════════════════════ */

/* Термін і ціна тепер живуть у колонці параметрів, тож блок поводиться
   як звичайна .param-group — свого верхнього відступу не має. */
.sc-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 520px) {
    .sc-tiers { grid-template-columns: 1fr; }
}

.sc-tier {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 11px;
    border: 1.5px solid var(--gray-light, #e0e4ea);
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.sc-tier:hover:not(.active) { border-color: var(--c-ok-line); }

/* Обраний термін — зелений, як і решта обраного. Червоний тут читався
   як попередження, хоча це звичайний вибір. */
.sc-tier.active {
    border-color: var(--c-ok);
    box-shadow: 0 0 0 3px rgba(44, 107, 65, .12);
}

.sc-tier__name { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--navy, #153243); }
.sc-tier__date { font-size: 11px; line-height: 1.3; color: var(--gray, #8a93a0); }
.sc-tier__sum  { margin-top: 3px; font-size: 17px; font-weight: 700; color: var(--navy, #153243); }
.sc-tier__per  { font-size: 11px; color: var(--gray, #8a93a0); }

/* Сума на ОБРАНІЙ картці — зелена, як і решта обраного */
.sc-tier.active .sc-tier__sum { color: var(--c-ok, #2C6B41); }

/* На вузькому екрані три тарифи стають стовпчиком — і тоді кожна
   картка з чотирьох рядків (назва, дата, сума, за штуку) з'їдала майже
   пів екрана на трьох. Розкладаємо картку на дві колонки: ліворуч
   термін, праворуч гроші. Рядків стає два замість чотирьох, а
   порівнювати тарифи навіть зручніше — усі суми в одному стовпці.

   Явне розміщення по клітинках, а не порядок у розмітці: суму треба
   підняти в перший рядок, а в HTML вона третя. Порядок у розмітці
   лишається як є — його читає зчитувач екрана.

   ⚠ Блок мусить стояти ПІСЛЯ базових правил .sc-tier. Медіазапит не
   додає ваги селектору, тож у другому блоці зверху (там, де
   .sc-tiers переходить в одну колонку) display:grid просто програвав
   базовому display:flex, який іде нижче за текстом. */
@media (max-width: 520px) {
    .sc-tier {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 12px;
        row-gap: 1px;
        align-items: baseline;
    }

    .sc-tier__name { grid-column: 1; grid-row: 1; }
    .sc-tier__date { grid-column: 1; grid-row: 2; }
    .sc-tier__sum  { grid-column: 2; grid-row: 1; margin-top: 0; text-align: right; }
    .sc-tier__per  { grid-column: 2; grid-row: 2; text-align: right; }
}

/* ═══════════════════════════════════════════════════════════════════
   ЗГОДА
   ═══════════════════════════════════════════════════════════════════ */

.sc-consent {
    margin-top: 20px;
    padding: 15px 18px;
    border: 1px solid rgba(255, 191, 0, .5);
    border-radius: 12px;
    background: rgba(255, 191, 0, .08);
    transition: box-shadow .2s;
}

/* Міст підсвічує блок, коли людина натиснула «Замовити», не поставивши
   галочку. Вимкнена кнопка без пояснення читалась би як поламаний сайт. */
.sc-consent.is-asking { box-shadow: 0 0 0 4px rgba(242, 43, 41, .22); }

.sc-consent__title { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #7a5c00; }

.sc-consent__list {
    margin: 0 0 11px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #7a5c00;
}

.sc-consent__check {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy, #153243);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   ПІДСУМОК
   ═══════════════════════════════════════════════════════════════════ */

/* Підсумок: рядок параметрів і дві кнопки. Великого числа «Разом» тут
   немає — ціна стоїть на обраній картці терміну вище. */
.sc-total {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding: 16px 22px;
    border-radius: 14px;
    background: var(--navy, #153243);
    color: #fff;
}

/* Опис позиції однією колонкою — кнопки лишаються праворуч. */
.sc-total__info { flex: 1 1 300px; min-width: 0; }

.sc-total__spec  { margin: 0; font-size: 13.5px; opacity: .9; }
.sc-total__level { margin: 6px 0 0; font-size: 12.5px; opacity: .7; }

/* ── ДАНІ ПРО МАКЕТ У ПІДСУМКУ ────────────────────────────────────
   ⚠ Раніше це були плашки .sc-facts під кожним превʼю. Тут вони не
   плашки, а текст: у підсумку людина ЧИТАЄ опис позиції, і рядок
   тексту читається як частина опису, а кольорові пігулки на темному
   тлі — як окремий блок попереджень.

   Колір, а не opacity: інакше зауваження блякнуть разом із рештою
   рядка, а вони мають лишатися помітними. */
.sc-total__maket {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.sc-maketspec__row { margin: 3px 0 0; }
.sc-maketspec__row:first-child { margin-top: 0; }

.sc-maketspec__label { color: rgba(255, 255, 255, .6); }
.sc-maketspec__name  { font-weight: 600; color: #fff; }

/* Світлі відтінки, а не ті самі, що на білому тлі картки: #854F0B і
   #A32D2D на темно-синьому не читаються взагалі. */
.sc-mfact--warn { color: #FFD08A; }
.sc-mfact--bad  { color: #FF9C9C; }

/* ⚠ Розкладку кнопок доводиться задавати тут повністю.
   У спільному assets/configurator.css усі правила для .order-actions
   заскоплені під .pack-total (сторінка стікерпаків) — до .sc-total
   вони не доходять узагалі. Через це кнопки лишалися без display:flex
   і без відступу й злипалися одна з одною на телефоні. */
.sc-total .order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

/* 44 px — рекомендований мінімум для пальця. Спільний
   assets/configurator.css дає цим кнопкам 43, і на телефоні головна дія
   сторінки виходила рівно на піксель меншою за поріг. Піднімаємо тільки
   тут: той самий клас використовують інші сторінки. */
.sc-total .order-btn-primary,
.sc-total .order-btn-cart { min-height: 44px; }

/* Сума для зчитувача екрана: на вигляд її в підсумку немає, але при
   зміні тиражу незрячий користувач має почути, що сталося з ціною. */
.sc-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* «Що буде після кліку» — під темним блоком, дрібним, але читабельним.
   Це не реклама, а зняття вагань, тож і подача спокійна. */
.sc-after {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.sc-after li {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--gray, #8a93a0);
}

.sc-after i { flex: none; color: var(--c-ok, #2C6B41); }

@media (max-width: 640px) {
    .sc-total { flex-direction: column; align-items: stretch; }
    /* Стовпчиком і на всю ширину — інакше дві кнопки в один ряд на
       телефоні стискаються до нечитабельного. Відступ між ними лишає
       gap із правила вище. */
    .sc-total .order-actions {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
    }
    .sc-total .order-btn-primary,
    .sc-total .order-btn-cart { width: 100%; justify-content: center; }
    .sc-after { flex-direction: column; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
   КАТАЛОГ СУМІЖНИХ ПОСЛУГ — КАРТКИ З ФОТО

   Спільний assets/blocks.css знає лише картки з ІКОНКОЮ: там є
   .subcategory-icon (52×52) і правило для svg/img усередині неї. Для
   голого <img> у картці правил немає жодних, тож знімок із
   width="360" малювався в натуральну ширину й вилазив за межі
   картки — саме це й було видно.

   Фото тут доречніші за іконки (каталог показують знімками), тож не
   переробляємо розмітку під іконки, а описуємо фото-варіант.
   ═══════════════════════════════════════════════════════════════════ */

.subcards--photo .subcategory-card {
    /* Фото має лягати від краю до краю, тож бічні поля прибираємо, а
       текстові відступи повертаємо самим підписам. */
    padding: 0 0 14px;
    overflow: hidden;
}

.subcards--photo .subcategory-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    /* Верхні кути — по картці, нижні прямі: під фото йде підпис. */
    border-radius: var(--r-lg, 14px) var(--r-lg, 14px) 0 0;
    margin-bottom: 12px;
}

.subcards--photo .subcategory-name,
.subcards--photo .subcategory-desc { padding: 0 14px; }

.subcards--photo .subcategory-desc {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--gray, #8a93a0);
}

/* ═══════════════════════════════════════════════════════════════════
   ЩО ВАРТО ЗНАТИ

   Пояснення, винесені з форми: у формі людина приймає рішення, а не
   читає, і абзаци між полями розсовували колонку параметрів.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   МАТЕРІАЛИ: ПАПІР І ПЛІВКА

   ⚠ Дві картки ПОРУЧ, а не два .split один під одним. Тут не читають
   по черзі — тут ПОРІВНЮЮТЬ, і зіставити «а що з дрібним текстом»
   через два екрани прокрутки неможливо.

   Списки навмисно не використовують .prose: там маркер — червона
   крапка на всі пункти, а тут сенс саме в різниці між перевагою і
   обмеженням, і колір несе цю різницю.
   ═══════════════════════════════════════════════════════════════════ */

.sc-mats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.sc-mat {
    display: flex;
    flex-direction: column;
    background: var(--g-0, #fff);
    border: 1px solid var(--g-200, #e0e4ea);
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}

.sc-mat:hover {
    border-color: var(--c-ok-line, #9dc3ac);
    box-shadow: var(--sh-md);
}

/* Фото як шапка картки. Співвідношення фіксоване: знімки прийшли
   різних пропорцій (2114×1752 і 2502×2134), і без нього дві картки
   починалися б на різній висоті. */
.sc-mat__pic {
    display: block;
    width: 100%;
    /* ⚠ height: auto ОБОВʼЯЗКОВО. У <img> стоять атрибути width/height
       (2114×1752) — вони потрібні браузеру, щоб зарезервувати місце й не
       смикати верстку. Але вони ж стають використаною висотою, і
       aspect-ratio без height:auto не працює взагалі: картка виростала
       до 2500 px. */
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.sc-mat__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(16px, 2vw, 22px);
}

.sc-mat__head { display: flex; gap: 12px; align-items: flex-start; }

/* Іконка синя, не червона: це маркер теми, а не дія. Те саме правило
   й у .advantage-icon зі спільного blocks.css. */
.sc-mat__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md, 12px);
    background: var(--g-100, #f2f4f7);
    color: var(--c-navy, #153243);
    font-size: 18px;
}

.sc-mat__icon i { display: block; line-height: 1; }

.sc-mat__title {
    margin: 0 0 2px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-navy, #153243);
}

.sc-mat__sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--g-700, #55606e);
}

/* «Коли брати» — головний рядок картки: саме він відповідає на
   питання, з яким сюди приходять. Тому окремою плашкою, а не ще
   одним пунктом у переліку. */
.sc-mat__for {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--g-100, #f2f4f7);
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-navy, #153243);
}

.sc-mat__for span {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--g-700, #8a93a0);
}

.sc-mat__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 -4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.sc-mat__label i { font-size: 13px; line-height: 1; }

/* Зелений = перевага, бурштиновий = обмеження. Червоного тут немає
   свідомо: обмеження це не помилка й не відмова, а умова, за якої
   матеріал не підходить. */
.sc-mat__label--plus  { color: var(--c-ok, #2C6B41); }
.sc-mat__label--minus { color: #8a6410; }

.sc-mat__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--g-800, #3d4756);
}

.sc-mat__list li {
    position: relative;
    padding-left: 20px;
    margin-top: 7px;
}

.sc-mat__list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.sc-mat__list--plus  li::before { background: var(--c-ok-line, #9dc3ac); }
.sc-mat__list--minus li::before { background: #e6c07a; }

/* ── КРОКИ ПІДГОТОВКИ МАКЕТА ──────────────────────────────────────
   Той самий каркас картки (.sc-mat), але список нумерований: тут
   порядок дій має значення, і крапка замість номера це значення
   ховає. Номер у кружечку, а не «1.» текстом: у довгих пунктах на
   два-три рядки цифра з крапкою губиться на початку абзацу. */
.sc-steps {
    counter-reset: sc-step;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--g-800, #3d4756);
}

.sc-steps li {
    position: relative;
    padding-left: 32px;
    margin-top: 10px;
}

.sc-steps li::before {
    counter-increment: sc-step;
    content: counter(sc-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-ok-bg, #F2F9F4);
    color: var(--c-ok, #2C6B41);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}

.sc-steps b { color: var(--c-navy, #153243); }

/* Підсумковий рядок картки — тихіший за кроки, з відбивкою зверху. */
.sc-mat__foot {
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--g-200, #e0e4ea);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--g-700, #55606e);
}

.sc-mat__foot a { color: var(--c-ok, #2C6B41); text-decoration: underline; }

.sc-know { padding: 0 20px 10px; }

.sc-know__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 26px;
    max-width: 1200px;
    margin: 0 auto;
}

.sc-know__item { min-width: 0; }

.sc-know__pic {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin-bottom: 10px;
}

.sc-know__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy, #153243);
}

.sc-know__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gray-dark, #55606e);
}

.sc-know__text a { color: var(--c-ok, #2C6B41); }

@media (max-width: 860px) {
    .sc-know__inner { grid-template-columns: 1fr; gap: 18px; }
    .sc-know__pic { max-width: 120px; }
}

@media (max-width: 640px) {
    .sc-total { flex-direction: column; align-items: stretch; }
    .sc-total__right { align-items: stretch; margin-left: 0; }
    .sc-total__spec,
    .sc-total__level { text-align: left; }

    /* ⚠ Обовʼязково скинути flex у колонці. У рядку flex:1 1 300px —
       це базова ШИРИНА, і опис позиції просто ділить смугу з кнопками.
       Щойно .sc-total стає колонкою, та сама цифра означає базову
       ВИСОТУ: між параметрами й кнопками зʼявлялася порожня смуга на
       300 px, і виглядало це як діра в підсумку. */
    .sc-total__info { flex: 0 0 auto; }
}

/* ⚠ ТУТ БУЛИ СТИЛІ ЛИПКОЇ СМУЖКИ (.sc-sticky) і підняття плаваючих
   кнопок чату й кошика над нею (body.sc-sticky-on). Прибрано разом із
   самою смужкою: вона давала шлях до оформлення в обхід вибору терміну.
   Якщо колись повертатимете — памʼятайте, що #razChatBtn і #razcartFab
   мають z-index 9998 і bottom:20px, тобто лягають ЗВЕРХУ, і їх треба
   піднімати; селектори тільки за id, бо в #razChatBtn класу немає. */

/* ═══════════════════════════════════════════════════════════════════
   ВІКНО «МАКЕТ ЩЕ НЕ ЗАВАНТАЖЕНО»

   Замінює window.confirm. Головне тут не оформлення, а третій вихід:
   системний діалог давав тільки «так / ні», і людина, яка просто хотіла
   прикріпити файл, мусила скасувати й шукати кнопку заново.
   ═══════════════════════════════════════════════════════════════════ */

.sc-ask {
    position: fixed;
    inset: 0;
    z-index: 120;             /* над липкою смужкою (60) */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sc-ask.is-open { display: flex; }

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

.sc-ask__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(21, 50, 67, .55);
}

.sc-ask__win {
    position: relative;
    width: 100%;
    max-width: 470px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.sc-ask__head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 0;
}

.sc-ask__title { font-size: 17px; font-weight: 700; color: var(--navy, #153243); }

.sc-ask__x {
    flex: none;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    color: var(--gray, #8a93a0);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.sc-ask__x:hover { color: var(--red, #f22b29); }

.sc-ask__body { padding: 10px 18px 4px; }

.sc-ask__body p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--gray-dark, #55606e);
}

.sc-ask__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px 18px;
}

.sc-ask__btn {
    flex: 1 1 auto;
    min-height: 44px;         /* палець */
    padding: 0 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.sc-ask__btn--primary {
    border: none;
    background: var(--red, #f22b29);
    color: #fff;
}

.sc-ask__btn--ghost {
    border: 1px solid var(--gray-light, #d9dde3);
    background: #fff;
    color: var(--navy, #153243);
}

.sc-ask__btn--ghost:hover { border-color: var(--gray, #8a93a0); }

@media (max-width: 420px) {
    .sc-ask__foot { flex-direction: column-reverse; }
    .sc-ask__btn { width: 100%; }
}