/* ============================================================
   Смарт-майстерня v2 — вертикальный поток (без боковой панели)
   Палитра/типографика — бренд DomovenoK
   ============================================================ */
.sm {
    --sm-bordo:  #600000;
    --sm-coral:  #EE7070;
    --sm-card:   #ffffff;
    --sm-ink:    #2a2020;
    --sm-muted:  #8a7a7a;
    --sm-line:   rgba(96, 0, 0, 0.14);
    --sm-radius: 4px;
    --sm-shadow: 0 2px 14px rgba(96, 0, 0, 0.10);

    font-family: 'Montserrat', Arial, sans-serif;
    color: var(--sm-ink);
    margin: 8px 0 36px;
}
.sm *, .sm *::before, .sm *::after { box-sizing: border-box; }
.sm [hidden] { display: none !important; }

/* ---------- Шапка ---------- */
.sm__topbar { text-align: center; margin-bottom: 18px; }
.sm__title { font-size: 26px; font-weight: 700; color: var(--sm-bordo); margin: 0 0 4px; }
/* Підзаголовок на рожевому тлі сторінки — сірий губився (контраст ~2.5:1).
   Тепла приглушена бордова замість --sm-muted → читабельно (~4.7:1), у тон теми. */
.sm__subtitle { font-size: 14px; font-weight: 500; color: #6e4a4a; margin: 0; }
.sm__disabled {
    background: var(--sm-card); border: 1px dashed var(--sm-line);
    border-radius: var(--sm-radius); padding: 40px 20px;
    text-align: center; color: var(--sm-muted); max-width: 760px; margin: 0 auto;
}

/* ---------- Студия — одна центральная колонка ---------- */
.sm-studio {
    max-width: 760px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 16px;
}

/* ---------- Превью ---------- */
.sm-preview {
    background: var(--sm-card); border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow); padding: 14px;
}
.sm-preview__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}

/* носители — горизонтальный ряд слева */
.sm-carriers { display: flex; gap: 6px; flex-wrap: wrap; }
.sm-carrier {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 11px; cursor: pointer;
    background: #fff; border: 1.5px solid var(--sm-line);
    border-radius: var(--sm-radius);
    font-family: inherit; color: var(--sm-ink);
    transition: border-color .15s, background .15s;
}
.sm-carrier:hover { border-color: var(--sm-coral); }
.sm-carrier.is-active {
    border-color: var(--sm-bordo); background: #fff5f5;
    box-shadow: inset 0 0 0 1px var(--sm-bordo);
}
.sm-carrier__icon { font-size: 20px; line-height: 1; }
.sm-carrier__name { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sm-carrier__badge {
    position: absolute; top: -6px; right: -6px;
    font-size: 7.5px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: #fff; background: var(--sm-coral);
    padding: 2px 4px; border-radius: 7px;
}
.sm-carrier--soon .sm-carrier__icon { opacity: .55; }

/* тумблер 2D / 3D — справа сверху */
.sm-toggle { display: inline-flex; padding: 3px; background: #f0e2e2; border-radius: 999px; flex: 0 0 auto; }
.sm-toggle__btn {
    border: none; cursor: pointer; padding: 6px 18px;
    background: transparent; border-radius: 999px;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--sm-muted); transition: background .15s, color .15s;
}
.sm-toggle__btn.is-active { background: #fff; color: var(--sm-bordo); box-shadow: var(--sm-shadow); }

/* ---------- Сцена превью ---------- */
.sm-stage {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    background: linear-gradient(150deg, #fbf5f5 0%, #f0e2e2 100%);
    border-radius: var(--sm-radius);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sm-stage__empty, .sm-stage__loading, .sm-stage__error { text-align: center; color: var(--sm-muted); padding: 24px; }
.sm-stage__empty-icon { font-size: 40px; margin-bottom: 8px; }
.sm-stage__error { color: var(--sm-bordo); font-weight: 600; }
.sm-spinner {
    width: 42px; height: 42px; margin: 0 auto 14px;
    border: 4px solid var(--sm-line); border-top-color: var(--sm-bordo);
    border-radius: 50%; animation: sm-spin .9s linear infinite;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }

/* ---------- Галерея 3-х варіантів ---------- */
.sm-stage__gallery {
    position: absolute; inset: 0; padding: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(150deg, #fbf5f5 0%, #f0e2e2 100%);
}
.sm-gallery__head { font-size: 13px; font-weight: 700; color: var(--sm-bordo); }
.sm-gallery__grid { display: flex; gap: 10px; width: 100%; justify-content: center; }
.sm-gallery__slot {
    position: relative; flex: 1 1 0; max-width: 31%; aspect-ratio: 1;
    border: 1.5px solid var(--sm-line); border-radius: var(--sm-radius);
    background: #fff; padding: 0; cursor: default; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, box-shadow .15s;
}
.sm-gallery__slot.is-ready { cursor: pointer; }
.sm-gallery__slot.is-ready:hover { border-color: var(--sm-bordo); box-shadow: 0 4px 14px rgba(96,0,0,.18); }
.sm-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-gallery__spin {
    width: 26px; height: 26px; border: 3px solid var(--sm-line);
    border-top-color: var(--sm-bordo); border-radius: 50%; animation: sm-spin .9s linear infinite;
}
.sm-gallery__err { font-size: 22px; color: var(--sm-coral); }
.sm-gallery__hint { font-size: 11.5px; color: var(--sm-muted); text-align: center; }

/* Галерея 3-х варіантів під форму носія: широкі носії (чашка) — варіанти
   широкими смугами в стовпчик, у пропорції друку 21:9 (як кадр результату).
   Круглі носії (годинник) лишаються квадратними слотами вище. */
.sm-stage[data-shape="rect"] .sm-gallery__grid {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; width: 100%; flex: 1 1 auto; min-height: 0;
}
.sm-stage[data-shape="rect"] .sm-gallery__slot {
    flex: 0 1 auto; height: 27%; width: auto; max-width: 90%; aspect-ratio: 21 / 9;
}

/* 2D — кадр под форму носителя */
.sm-stage__flat { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 18px; }
.sm-flat__frame { position: relative; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.16); overflow: hidden; max-width: 100%; max-height: 100%; }
.sm-flat__frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* круглі носії (годинник/підставка): дизайн лишає ~1-2% поля по краю —
   трохи збільшуємо, щоб картинка повністю накрила круг (синхронно з 3D zoom 1.05) */
.sm-stage[data-shape="circle"] .sm-flat__frame > img { transform: scale(1.05); }
/* PNG-стрілки поверх дизайну (тільки для годинника) */
.sm-flat__arrows {
    position: absolute !important; inset: 0;
    object-fit: contain !important; pointer-events: none;
}
.sm-flat__arrows svg { width: 100%; height: 100%; display: block; }
.sm-stage[data-shape="circle"] .sm-flat__frame { width: 320px; height: 320px; border-radius: 50%; }
.sm-stage[data-shape="rect"]   .sm-flat__frame { width: 420px; height: 180px; border-radius: var(--sm-radius); }
.sm-stage[data-shape="tall"]   .sm-flat__frame { width: 160px; height: 320px; border-radius: var(--sm-radius); }

/* 3D */
/* Тло 3D-сцени — світлий теплий градієнт (як .sm-stage і як у студії чашок):
   біла чашка читається, кромка не «відшаровується». Canvas прозорий (alpha:true),
   тож фон контейнера = тло сцени; захват для шерингу лишається прозорим. */
.sm-stage__3d { position: absolute; inset: 0; background: linear-gradient(150deg, #fbf5f5 0%, #f0e2e2 100%); }
.sm-stage__3d canvas { width: 100% !important; height: 100% !important; display: block; }

/* Фон сцени для ЧАШКИ — фірмовий корал #EE7070 (годинник лишається теплий градієнт). */
.sm-stage[data-carrier="mug"],
.sm-stage[data-carrier="mug"] .sm-stage__3d,
.sm-stage[data-carrier="mug"] .sm-stage__gallery { background: #EE7070; }
.sm-3d__hint {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    font-size: 11px; color: var(--sm-muted);
    background: rgba(255,255,255,.8); padding: 3px 10px; border-radius: 999px; pointer-events: none;
}
.sm-3d__placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    color: var(--sm-muted); padding: 24px;
    background: linear-gradient(150deg, #fbf5f5 0%, #f0e2e2 100%);
}

/* ---------- Керування носієм (повзунки) ---------- */
.sm-controls {
    background: var(--sm-card); border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow); padding: 14px;
}
.sm-controls__title {
    font-size: 12px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--sm-bordo); margin-bottom: 12px;
}
.sm-sliders { display: flex; flex-direction: column; gap: 10px; }
.sm-slider { display: flex; align-items: center; gap: 12px; }
.sm-slider__label {
    flex: 0 0 84px; font-size: 13px; color: var(--sm-ink);
}
.sm-slider__value {
    flex: 0 0 48px; text-align: right;
    font-size: 13px; font-weight: 700; color: var(--sm-bordo);
}
.sm-slider input[type="range"] {
    flex: 1 1 auto; height: 4px; -webkit-appearance: none; appearance: none;
    background: var(--sm-line); border-radius: 999px; outline: none;
}
.sm-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--sm-bordo); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(96,0,0,.35);
}
.sm-slider input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--sm-bordo); cursor: pointer; border: 2px solid #fff;
}

/* ---------- Чіпи розмірів (жалюзі) ---------- */
.sm-size-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sm-size-chip {
    display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 12px; cursor: pointer;
    background: #fff; border: 1.5px solid var(--sm-line);
    border-radius: var(--sm-radius); font-family: inherit; color: var(--sm-ink);
    transition: border-color .15s, background .15s;
    line-height: 1.15;
}
.sm-size-chip:hover { border-color: var(--sm-coral); }
.sm-size-chip.is-active {
    border-color: var(--sm-bordo); background: #fff5f5;
    box-shadow: inset 0 0 0 1px var(--sm-bordo);
}
.sm-size-chip__label { font-size: 12.5px; font-weight: 600; }
.sm-size-chip__w { font-size: 11.5px; color: var(--sm-muted); font-weight: 600; }
.sm-size-chip.is-active .sm-size-chip__w { color: var(--sm-bordo); }
/* Бейдж ціни/надбавки на чіпі: база (249/299 грн) і апгрейди (+50 грн) — щоб покупець бачив модифікатори */
.sm-size-chip__price { font-size: 11px; font-weight: 700; color: var(--sm-bordo); margin-top: 2px; }
.sm-size-chip__price--free { color: var(--sm-muted); font-weight: 600; }
/* Дрібна позначка біля підзаголовка (напр. «Колір стрілок — безкоштовно») */
.sm-subnote { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--sm-muted); }

/* ---------- Іконки на чіпах: менше тексту, більше візуалу ---------- */
.sm-size-chip { justify-content: center; }      /* центруємо контент у чіпах однакової висоти */
.sm-chip-ico { font-size: 19px; line-height: 1; margin-bottom: 4px; }
/* «циферблат»-кружок для розміру — сам розмір кружка = візуальний натяк на розмір годинника */
.sm-chip-ico--clock {
    display: inline-block; position: relative; box-sizing: border-box;
    width: var(--ico, 16px); height: var(--ico, 16px);
    border: 2px solid var(--sm-coral); border-radius: 50%;
}
.sm-chip-ico--clock::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 2px; height: 2px; border-radius: 50%;
    background: var(--sm-coral); transform: translate(-50%, -50%);
}
.sm-size-chip.is-active .sm-chip-ico--clock { border-color: var(--sm-bordo); }
.sm-size-chip.is-active .sm-chip-ico--clock::after { background: var(--sm-bordo); }

/* Горизонтальні чіпи-пілюлі: іконка + назва (+ ціна) в один рядок — компактно, без розтягування по висоті */
.sm-chips--h .sm-size-chip { flex-direction: row; align-items: center; gap: 6px; padding: 7px 11px; }
.sm-chips--h .sm-chip-ico { margin-bottom: 0; }
.sm-chips--h .sm-size-chip__price { margin-top: 0; }
.sm-chips--h .sm-clock-color-dot { margin-bottom: 0; }

/* Налаштування виробу (розмір + циферблат) — у шапці превʼю, поряд із вибором носія */
.sm-setup {
    display: flex; flex-wrap: wrap; gap: 8px 24px;
    margin: 0 0 12px; padding-top: 12px;
    border-top: 1px solid var(--sm-line);
}
.sm-setup__group { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sm-setup__label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--sm-muted);
}
.sm-gen-dial { margin-top: 12px; }
/* Заблокована копія циферблата в нижніх налаштуваннях — значення задається при генерації */
.sm-size-chip--locked { cursor: default; background: #faf5f5; border-style: dashed; }
.sm-size-chip--locked:hover { border-color: var(--sm-line); }
.sm-lock { font-size: 11px; opacity: .6; }

/* Компактна сітка ширин — 16 чіпів у 2 ряди по 8 */
.sm-size-chips--widths { gap: 4px; }
.sm-size-chip--w {
    min-width: 48px; padding: 7px 4px; align-items: center;
}
.sm-size-chip--w .sm-size-chip__w { font-size: 12px; }
.sm-size-chip--w .sm-size-chip__w::after {
    content: ' см'; font-weight: 400; opacity: .6; font-size: 10.5px;
}

/* Кольорова точка-індикатор у чіпі (для вибору кольору стрілок) */
.sm-clock-color-dot {
    display: inline-block; width: 14px; height: 14px;
    border-radius: 50%; margin-bottom: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Підзаголовки усередині блоку керування */
.sm-controls__subtitle {
    font-size: 11.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--sm-muted);
    margin: 14px 0 8px;
}

/* Розміри друку — 2 чіпи */
.sm-print-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
/* Палітра кольорів кружки — 18 чіпів, тож компактна сітка з переносом */
.sm-print-sizes--colors { gap: 5px; }
.sm-print-sizes--colors .sm-size-chip { padding: 6px 9px; }
.sm-print-sizes--colors .sm-size-chip__label { font-size: 12px; }

/* Перетягуваний маркер позиції друку на шторі (жалюзі) */
.sm-blindpad {
    position: relative; width: 104px; height: 156px; margin: 4px 0 4px;
    border: 1.5px solid var(--sm-line, #f0d9d9); border-radius: 8px;
    background: repeating-linear-gradient(90deg, #f4f0e7, #f4f0e7 2px, #ece7db 2px, #ece7db 4px);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.06);
    cursor: crosshair; touch-action: none; user-select: none;
}
.sm-blindpad__handle {
    position: absolute; left: 50%; top: 50%; width: 42px; height: 30px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--sm-bordo, #7d1e2b); border-radius: 4px;
    background: rgba(125,30,43,.12); background-size: cover; background-position: center; background-repeat: no-repeat;
    box-shadow: 0 1px 4px rgba(0,0,0,.25); pointer-events: none;
}
.sm-blindpad__hint { font-size: 11px; color: var(--sm-muted, #8a6d6d); line-height: 1.3; }

/* Кнопка повтору онбординг-туру (єдина точка довідки замість «?» на кожному контролі) */
.sm-hint-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    padding: 6px 14px; border: 1px solid var(--sm-line, #f0d9d9); border-radius: 999px;
    background: #fff; color: var(--sm-bordo, #600000); font: 600 12.5px inherit; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.sm-hint-btn:hover { background: #fff4f4; border-color: var(--sm-coral, #e08a8a); }

/* ---------- Перше знайомство: покрокові підказки (онбординг-тур) ---------- */
.sm-tour-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgba(60, 12, 12, .55); }
.sm-tour-spot {
    position: relative; z-index: 10001;
    border-radius: 12px;
    box-shadow: 0 0 0 3px var(--sm-coral, #e08a8a), 0 0 22px rgba(0, 0, 0, .35);
    transition: box-shadow .25s ease;
}
.sm-tour-tip {
    position: fixed; z-index: 10002; width: min(320px, calc(100vw - 24px));
    background: #fff; color: var(--sm-ink, #3a2020);
    border: 1px solid var(--sm-line, #f0d9d9); border-radius: 12px;
    box-shadow: 0 12px 36px rgba(96, 0, 0, .28);
    padding: 14px 16px; font: 400 13.5px/1.5 inherit;
    animation: sm-tour-in .22s ease-out;
}
.sm-tour-tip__steps { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--sm-coral, #c0708a); margin-bottom: 6px; }
.sm-tour-tip__text { margin: 0 0 12px; }
.sm-tour-tip__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sm-tour-tip__skip {
    border: 0; background: none; cursor: pointer; padding: 4px;
    color: var(--sm-muted, #8a6d6d); font: 400 12.5px inherit;
}
.sm-tour-tip__skip:hover { color: var(--sm-ink, #3a2020); }
.sm-tour-tip__next {
    border: 0; cursor: pointer; border-radius: 8px; padding: 8px 20px;
    background: var(--sm-bordo, #600000); color: #fff; font: 600 13px inherit;
}
.sm-tour-tip__next:hover { opacity: .92; }
@keyframes sm-tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Підказка під кнопкою «Додати фото» + бейдж колажу (кілька фото) */
.sm-photo-tip { margin: 5px 0 0; font-size: 11.5px; color: var(--sm-muted, #8a6d6d); line-height: 1.35; }
.sm-collage-hint { margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--sm-bordo, #7d1e2b); }

/* Колаж жалюзі: додати картинки + стрічка мініатюр */
.sm-blind-imgs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sm-blind-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-blind-thumb {
    position: relative; width: 44px; height: 44px; border-radius: 6px;
    border: 1.5px solid var(--sm-line, #f0d9d9); background: #fff center/contain no-repeat;
    cursor: pointer; box-shadow: inset 0 0 0 1px #fff;
}
.sm-blind-thumb.is-active { border-color: var(--sm-bordo, #7d1e2b); box-shadow: 0 0 0 2px rgba(125,30,43,.25); }
.sm-blind-thumb__x {
    position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; line-height: 16px;
    border-radius: 50%; border: none; background: var(--sm-bordo, #7d1e2b); color: #fff;
    font-size: 13px; cursor: pointer; padding: 0; text-align: center;
}

/* Canvas-редактор позиції друку */
.sm-print-editor {
    background: #faf2f2; border: 1.5px solid var(--sm-line);
    border-radius: var(--sm-radius); padding: 10px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sm-print-editor canvas {
    display: block; max-width: 100%; height: auto;
    cursor: grab; touch-action: none;
    background: #0d0b07; border-radius: 3px;
}
.sm-print-editor canvas:active { cursor: grabbing; }
.sm-print-editor__hint { font-size: 11px; color: var(--sm-muted); }

/* ---------- Опис дизайну ---------- */
.sm-prompt {
    background: var(--sm-card); border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow); padding: 14px;
}
.sm-prompt__label {
    font-size: 12px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--sm-bordo); margin-bottom: 9px;
}
.sm-textarea {
    width: 100%; resize: vertical; min-height: 58px;
    font-family: inherit; font-size: 14px; color: var(--sm-ink);
    padding: 10px 12px; border: 1.5px solid var(--sm-line);
    border-radius: var(--sm-radius); background: #fff;
}
.sm-textarea:focus { outline: none; border-color: var(--sm-coral); }
.sm-prompt__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
}
.sm-photo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; cursor: pointer;
    background: #faf2f2; border: 1.5px solid var(--sm-line);
    border-radius: var(--sm-radius); font-family: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--sm-bordo);
}
.sm-photo:hover { border-color: var(--sm-coral); }
.sm-photo__plus { font-size: 15px; line-height: 1; }
.sm-counter { font-size: 11px; color: var(--sm-muted); }
.sm-photo-preview { position: relative; display: inline-block; margin-top: 10px; }
.sm-photo-preview img { max-width: 110px; max-height: 110px; border-radius: var(--sm-radius); display: block; }
.sm-photo-preview__remove {
    position: absolute; top: -8px; right: -8px;
    width: 22px; height: 22px; border: none; border-radius: 50%;
    background: var(--sm-bordo); color: #fff; font-size: 15px; cursor: pointer; line-height: 1;
}

/* ---------- Кнопка генерации ---------- */
.sm-generate {
    width: 100%; padding: 15px; cursor: pointer;
    background: var(--sm-bordo); color: #fff;
    border: none; border-radius: var(--sm-radius);
    font-family: inherit; font-size: 15px; font-weight: 700;
    transition: background .15s, opacity .15s;
}
.sm-generate:hover { background: #7a0d0d; }
.sm-generate:disabled { opacity: .55; cursor: default; }
.sm-generate--edit { margin-top: 8px; background: #fff; color: var(--sm-bordo); border: 1.5px solid var(--sm-bordo); }
.sm-generate--edit:hover { background: var(--sm-bordo); color: #fff; }
/* «Новий дизайн» — нейтральна (скидання); «Купити» — акцентна чернетка */
.sm-generate--new { margin-top: 8px; background: #fff; color: var(--sm-muted); border: 1.5px solid var(--sm-line); }
.sm-generate--new:hover { border-color: var(--sm-coral); color: var(--sm-bordo); }
.sm-generate--buy { margin-top: 8px; background: var(--sm-coral); }
.sm-generate--buy:hover { background: #e25b5b; }
.sm-limits { font-size: 11.5px; color: var(--sm-muted); text-align: center; margin-top: -6px; }

/* ---------- История ---------- */
.sm-history {
    background: var(--sm-card); border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow); padding: 14px;
}
.sm-history__title {
    font-size: 12px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--sm-bordo); margin-bottom: 10px;
}
.sm-history__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-history__item {
    position: relative;
    width: 66px; height: 66px; border-radius: var(--sm-radius);
    overflow: hidden; cursor: pointer; border: 1.5px solid var(--sm-line); background: #fff;
}
.sm-history__item:hover { border-color: var(--sm-coral); }
.sm-history__item img { width: 100%; height: 100%; object-fit: cover; }
.sm-history__icon {
    position: absolute; right: 2px; bottom: 2px;
    width: 21px; height: 21px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(96, 0, 0, 0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1; pointer-events: none;
}
.sm-history__code {
    position: absolute; left: 2px; top: 2px;
    background: rgba(122, 31, 43, 0.92); color: #fff;
    font-size: 10px; font-weight: 600; line-height: 1;
    padding: 2px 5px; border-radius: 7px; pointer-events: none;
}
/* кнопка «перегнати» дизайн на інший носій — зʼявляється при наведенні */
.sm-history__cross {
    position: absolute; left: 2px; top: 2px;
    height: 20px; padding: 0 6px; border: 0; border-radius: 10px;
    background: var(--sm-coral, #e0607a); color: #fff;
    font-size: 11px; line-height: 20px; cursor: pointer;
    box-shadow: 0 1px 4px rgba(96, 0, 0, 0.35);
    opacity: 0; transition: opacity .12s ease;
}
.sm-history__item:hover .sm-history__cross { opacity: 1; }
.sm-history__cross:hover { filter: brightness(1.08); }

/* ---------- Крос-бар (перегнати поточний дизайн) ---------- */
.sm-crossbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 8px 0 4px;
}
.sm-crossbar__label { font-size: 13px; color: var(--sm-muted, #8a6d6d); }
.sm-crossbar__btn {
    border: 1.5px solid var(--sm-coral, #e0607a);
    background: #fff; color: var(--sm-coral, #e0607a);
    padding: 6px 14px; border-radius: 18px; cursor: pointer;
    font-size: 13px; font-weight: 600; line-height: 1; transition: all .12s ease;
}
.sm-crossbar__btn:hover { background: var(--sm-coral, #e0607a); color: #fff; }
/* Кнопка «Завантажити дизайн» у барі прев'ю */
.sm-dlbtn {
    margin-left: 8px; border: 1.5px solid var(--sm-coral, #e0607a);
    background: #fff; color: var(--sm-coral, #e0607a);
    padding: 9px 16px; border-radius: 22px; cursor: pointer;
    font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
    transition: all .12s ease;
}
.sm-dlbtn:hover { background: var(--sm-coral, #e0607a); color: #fff; }
.sm-dlbtn[disabled] { opacity: .6; cursor: default; }
.sm-dlbtn--share { border-color: #3a7afe; color: #3a7afe; }
.sm-dlbtn--share:hover { background: #3a7afe; color: #fff; }
.sm-dlbtn--primary { background: var(--sm-coral, #e0607a); color: #fff; }
.sm-dlbtn--primary:hover { background: #d24e6a; color: #fff; }
.sm-dlbtn--share.sm-dlbtn--primary { background: #3a7afe; border-color: #3a7afe; color: #fff; }
.sm-dlbtn--share.sm-dlbtn--primary:hover { background: #2f6ae0; color: #fff; }

/* Вікно з фото чашки (ракурси) */
.sm-shots { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.62);
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.sm-shots[hidden] { display: none; }
.sm-shots__box { background: #fff; border-radius: 16px; max-width: 720px; width: 100%;
    max-height: 90vh; overflow: auto; padding: 14px 16px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.sm-shots__head { display: flex; align-items: center; justify-content: space-between;
    font-weight: 700; color: #3a2326; margin-bottom: 10px; }
.sm-shots__x { border: 0; background: #f0e6e6; color: #6b4a4a; width: 32px; height: 32px;
    border-radius: 50%; font-size: 16px; cursor: pointer; }
.sm-shots__strip { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid #f2e7e7; text-align: center; }
.sm-shots__gif { margin: 0 0 4px; text-align: center; }
.sm-shots__cap { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sm-muted, #8a6d6d); margin-bottom: 8px; }
.sm-shots__stripimg { width: 100%; border-radius: 12px; border: 1px solid var(--sm-line, #f0d9d9); background: #e3c3c3; }
.sm-shots__gifimg { max-width: 300px; width: 100%; border-radius: 12px; border: 1px solid var(--sm-line, #f0d9d9); background: #e3c3c3; }
.sm-shots__gifmsg { color: var(--sm-muted, #8a6d6d); font-size: 13px; padding: 30px; border: 1px dashed var(--sm-line, #f0d9d9); border-radius: 12px; }
.sm-shots__btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: 12px; }
.sm-shots__btns .sm-dlbtn { margin-left: 0; }
.sm-shots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sm-shot { border: 1px solid var(--sm-line, #f0d9d9); border-radius: 12px; overflow: hidden; background: #faf6f6; }
.sm-shot img { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; background: #fff; }
.sm-shot__row { display: flex; gap: 6px; padding: 6px; }
.sm-shot__btn { flex: 1; border: 1px solid var(--sm-line, #f0d9d9); background: #fff; color: #3a2326;
    border-radius: 9px; padding: 7px 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
.sm-shot__btn:hover { background: #f3e9e9; }
.sm-shots__hint { color: var(--sm-muted, #8a6d6d); font-size: 12px; margin: 10px 2px; }
.sm-shots__foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sm-shots__foot .sm-dlbtn { margin-left: 0; }
.sm-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
    background: #2c2c34; color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 13px;
    z-index: 10000; opacity: 0; pointer-events: none; transition: all .2s ease; }
.sm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Поповер «Поділитися» (десктоп): компактне меню соцмереж під кнопкою.
   fixed-позиція рахується в JS у межах вьюпорта (працює і в iframe). */
.sm-share-pop {
    position: fixed; z-index: 9998; min-width: 210px; max-width: 260px;
    background: #fff; border: 1px solid var(--sm-line, #f0d9d9);
    border-radius: 12px; box-shadow: 0 10px 34px rgba(96, 0, 0, 0.18);
    padding: 8px; font-family: 'Montserrat', Arial, sans-serif;
}
.sm-share-pop__list { display: flex; flex-direction: column; gap: 2px; }
.sm-share-pop__item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px; text-decoration: none;
    color: var(--sm-ink, #2a2020); font-size: 14px; font-weight: 600;
    transition: background .12s ease;
}
.sm-share-pop__item:hover { background: #f7eded; }
.sm-share-pop__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; background: #999; }
.sm-share-tg    .sm-share-pop__dot { background: #29a9eb; }
.sm-share-viber .sm-share-pop__dot { background: #7360f2; }
.sm-share-wa    .sm-share-pop__dot { background: #25d366; }
.sm-share-fb    .sm-share-pop__dot { background: #1877f2; }
.sm-share-x     .sm-share-pop__dot { background: #000000; }
.sm-share-th    .sm-share-pop__dot { background: #1c1c1c; }
.sm-share-pop__copy, .sm-share-pop__photos {
    display: block; width: 100%; text-align: left; cursor: pointer;
    border: 0; background: none; font-family: inherit; font-weight: 600;
    border-radius: 8px; transition: background .12s ease;
}
.sm-share-pop__copy {
    margin-top: 6px; padding: 9px 10px; font-size: 14px;
    color: var(--sm-bordo, #600000); border-top: 1px solid var(--sm-line, #f0d9d9);
}
.sm-share-pop__copy:hover { background: #f7eded; }
.sm-share-pop__photos {
    margin-top: 2px; padding: 7px 10px; font-size: 12.5px; color: var(--sm-muted, #8a6d6d);
}
.sm-share-pop__photos:hover { background: #f7eded; color: var(--sm-ink, #2a2020); }

/* Вибір циферблата 12/24 для перегону чашка→годинник */
.sm-crossbar__dial { display: inline-flex; gap: 4px; align-items: center; }
.sm-crossbar__dialbtn {
    border: 1.5px solid var(--sm-line, #f0d9d9); background: #fff; color: var(--sm-muted, #8a6d6d);
    padding: 5px 10px; border-radius: 14px; cursor: pointer;
    font-size: 12px; font-weight: 700; line-height: 1; transition: all .12s ease;
}
.sm-crossbar__dialbtn:hover { border-color: var(--sm-coral, #e0607a); }
.sm-crossbar__dialbtn.is-active {
    border-color: var(--sm-bordo, #7d1e2b); background: #fff5f5; color: var(--sm-bordo, #7d1e2b);
    box-shadow: inset 0 0 0 1px var(--sm-bordo, #7d1e2b);
}

/* ---------- Пара (колекція): два дизайни поруч ---------- */
.sm-pair {
    margin: 10px 0 4px; padding: 12px;
    border: 1.5px solid var(--sm-line, #f0d9d9); border-radius: var(--sm-radius, 12px);
    background: #fff;
}
.sm-pair__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sm-pair__title { font-size: 14px; font-weight: 700; color: var(--sm-coral, #e0607a); }
.sm-pair__close {
    border: 0; background: transparent; cursor: pointer;
    font-size: 16px; line-height: 1; color: var(--sm-muted, #8a6d6d); padding: 2px 6px;
}
.sm-pair__close:hover { color: var(--sm-coral, #e0607a); }
.sm-pair__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sm-pair__cell { margin: 0; }
.sm-pair__imgwrap {
    height: 180px; border-radius: 10px; overflow: hidden;
    background: #faf6f6; display: flex; align-items: center; justify-content: center;
}
.sm-pair__imgwrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sm-pair__cell figcaption { margin-top: 6px; text-align: center; font-size: 13px; color: var(--sm-ink, #4a3a3a); }

/* ---------- Режим «без фону» (лого) ---------- */
.sm-cutout {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin: 8px 0 2px; font-size: 13px; color: var(--sm-ink, #4a3a3a);
}
.sm-cutout__toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sm-cutout__toggle input { accent-color: var(--sm-coral, #e0607a); }
.sm-cutout__key {
    border: 1px solid var(--sm-line, #f0d9d9); border-radius: 8px;
    padding: 3px 8px; font-size: 12px; background: #fff; color: var(--sm-ink, #4a3a3a);
}
/* прозорий дизайн показуємо на білій підкладці-шахматці */
/* Вирізаний фон у 2D показуємо на БІЛОМУ (а не шахівниці) — як «підставити білим». */
.sm-flat--cutout .sm-flat__frame {
    background-color: #fff;
}
/* Жалюзі (висока рамка): показуємо ВСЮ згенеровану картинку, не обрізаємо. */
.sm-stage[data-shape="tall"] .sm-flat__frame > img { object-fit: contain; }

/* ---------- Пояснювальні підказки «?» (як що працює) ---------- */
.sm-help-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.sm-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 5px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--sm-coral); color: #fff; font: 700 11px/1 inherit;
    opacity: .85; transition: opacity .15s, transform .15s;
}
.sm-help:hover { opacity: 1; transform: scale(1.08); }
.sm-help.is-open { background: var(--sm-bordo); opacity: 1; }
.sm-help__pop {
    position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
    z-index: 60; width: max-content; max-width: 250px;
    background: #fff; color: var(--sm-ink); border: 1px solid var(--sm-line);
    border-radius: 8px; box-shadow: 0 6px 22px rgba(96,0,0,.18);
    padding: 9px 11px; font: 400 12.5px/1.42 inherit; text-align: left; white-space: normal;
    text-transform: none; letter-spacing: normal;
}
.sm-help__pop::before {
    content: ''; position: absolute; bottom: 100%; left: var(--sm-arrow-x, 50%); transform: translateX(-50%);
    border: 6px solid transparent; border-bottom-color: #fff;
}
/* підказка показана НАД «?» (коли знизу не вміщається) — стрілка дивиться вниз */
.sm-help__pop--above::before {
    bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: #fff;
}
.sm-help__pop[hidden] { display: none; }
/* (бейдж beta прибрано перед релізом — фіча більше не «beta») */
/* Круглий кроп слотів галереї та мініатюр історії для круглих носіїв (годинник) */
.sm-stage[data-shape="circle"] .sm-gallery__slot { border-radius: 50%; }
.sm-history__item--circle img { border-radius: 50%; object-fit: cover; }
/* Заблоковані параметри (після генерації / вибору з історії) — сірі, без взаємодії */
.sm-setup__group.is-locked { opacity: .45; }
.sm-setup__group.is-locked .sm-size-chip { pointer-events: none; cursor: default; }
.sm-carriers.is-locked .sm-carrier { pointer-events: none; opacity: .5; }
/* Поле опису у режимі правки — помітний акцент (редагуємо готовий дизайн) */
.sm-prompt--edit { border-left: 3px solid var(--sm-coral); background: linear-gradient(90deg, #fff4f4, #fff 60%); }
.sm-prompt--edit .sm-prompt__label { color: var(--sm-coral); }
/* У режимі правки додавання фото не потрібне (правка йде по готовій картинці) — ховаємо весь фото-блок */
.sm-prompt--edit .sm-photo,
.sm-prompt--edit .sm-photo-tip,
.sm-prompt--edit #sm-photo-thumbs,
.sm-prompt--edit #sm-collage-hint { display: none !important; }
/* Чіпи швидких правок мають власні емодзі — прибираємо стандартний префікс ✨ */
#sm-examples .sm-example::before { content: none; }
/* Позиціювання підказок «?» тепер робить JS (fixed + утримання в межах
   екрана), тож медіа-оверайди більше не потрібні — інакше вони ламали б
   стрілку на мобільному. */

/* ---------- Mobile ---------- */
@media (max-width: 575px) {
    .sm-preview__bar { flex-direction: column; align-items: stretch; }
    .sm-carriers { justify-content: center; }
    .sm-toggle { align-self: center; }
    .sm-stage[data-shape="circle"] .sm-flat__frame { width: 240px; height: 240px; }
    .sm-stage[data-shape="rect"]   .sm-flat__frame { width: 280px; height: 120px; }
    .sm-stage[data-shape="tall"]   .sm-flat__frame { width: 130px; height: 260px; }
}

/* ============================================================
   v29 (2026-06-04) — редизайн: ціна, приклади-підказки, акценти
   ============================================================ */

/* Підказки під полем опису (як на clockpic-bot) */
.sm .sm-prompt__hint { font-size: 13px; color: var(--sm-muted); margin: 0 0 8px; line-height: 1.4; }
.sm .sm-prompt__tip  { font-size: 12px; color: var(--sm-coral); margin: 6px 2px 0; font-weight: 600; }

/* Чипси-приклади ідей (клік → заповнює поле) */
.sm-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sm-example {
    border: 1.5px solid var(--sm-line); background: #faf2f2; color: var(--sm-bordo);
    padding: 6px 12px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
    transition: border-color .15s, background .15s, transform .1s;
}
.sm-example::before { content: '✨ '; opacity: .7; }
.sm-example:hover  { border-color: var(--sm-coral); background: #fff; transform: translateY(-1px); }
.sm-example:active { transform: translateY(0); }

/* Підсумок: ціна + кнопка генерації в одному ряду */
.sm-actionbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.sm .sm-actionbar .sm-generate { flex: 1 1 220px; margin-top: 0; }
.sm .sm-actionbar .sm-generate--edit { flex: 1 1 100%; }   /* «Виправити» — окремий рядок */
.sm-price {
    flex: 0 0 auto; min-width: 132px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff5f5; border: 1.5px solid var(--sm-bordo); border-radius: var(--sm-radius);
    padding: 8px 18px;
}
.sm-price__row  { display: flex; align-items: baseline; gap: 4px; }
.sm-price__sum  { font-size: 30px; font-weight: 800; color: var(--sm-bordo); line-height: 1; }
.sm-price__cur  { font-size: 14px; font-weight: 700; color: var(--sm-bordo); }
.sm-price__note { font-size: 10.5px; color: var(--sm-muted); margin-top: 4px; text-align: center; line-height: 1.25; }

/* ── Акценти редизайну ── */
.sm__title { letter-spacing: -.2px; }
.sm__topbar { margin-bottom: 22px; }
/* носії — крупніше й помітніше (зараз їх 2; верстка тримає більше — місце на потім) */
.sm .sm-carriers { gap: 8px; }
.sm .sm-carrier { padding: 9px 16px; }
.sm .sm-carrier__icon { font-size: 23px; }
.sm .sm-carrier__name { font-size: 12.5px; }
/* картки секцій — тонкий лівий бренд-акцент */
.sm .sm-controls, .sm .sm-prompt { border-left: 3px solid var(--sm-coral); }
/* чипси — легкий ліфт на hover */
.sm .sm-size-chip { transition: border-color .15s, background .15s, transform .1s, box-shadow .15s; }
.sm .sm-size-chip:hover { transform: translateY(-1px); }
/* кнопка генерації — виразніша */
.sm .sm-generate { border-radius: 6px; letter-spacing: .2px; box-shadow: 0 4px 14px rgba(96,0,0,.18); }

/* Мобільний: ціна та кнопки — у стовпчик на всю ширину */
@media (max-width: 575px) {
    .sm-actionbar { flex-direction: column; }
    /* фікс: у column flex-basis(220px/100%) трактується як ВИСОТА → кнопки були на пів-екрана */
    .sm .sm-actionbar .sm-generate,
    .sm .sm-actionbar .sm-generate--edit {
        flex: 0 0 auto; width: 100%; min-height: 48px; padding: 13px 16px; font-size: 15px;
    }
    .sm-price { flex-basis: auto; flex-direction: row; justify-content: center; gap: 8px; }
    .sm-price__note { margin-top: 0; }
    .sm-example { font-size: 12px; padding: 5px 10px; }
}