/*
    НАЛОЖЕНИЕ РАСКЛАДКИ И ВЫБОР ВАРИАНТА. Добавлено 03.09.2026.

    Отдельным файлом, а не правкой poster.css: тот отвечает за уже
    работающий предпросмотр, и лезть в него ради новой возможности
    незачем. Если что-то пойдёт не так — достаточно убрать одну
    строку подключения, и всё вернётся как было.
*/

/*
    Обёртка обжимается ровно по картине: inline-block без заданных
    размеров принимает размер содержимого. Благодаря этому слой
    наложения внутри совпадает с картиной точка в точку и не уезжает
    на отступы, где нарисованы линейки размеров.
*/
.order-constructor__poster-stage {
    position: relative;
    display: inline-block;
    width: 100%;
    line-height: 0;
}

.order-constructor__poster-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /*
        Растягиваем ровно по картине, а не вписываем. Трафарет нарисован
        в тех же пропорциях, что и полотно, поэтому растяжение здесь
        честное: прорези встают ровно туда, где будут стыки.
    */
    object-fit: fill;
    border-radius: 10px;
    pointer-events: none;
}

/*
    Часы. В отличие от раскладки, циферблат занимает часть картины,
    его двигают и меняют размер. Значит он должен ловить нажатия —
    в отличие от раскладки, которая только показывает.
*/
.order-constructor__poster-overlay.is-clock {
    inset: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}

.order-constructor__poster-overlay.is-clock:active {
    cursor: grabbing;
}

/* ---------- список вариантов в боковой панели ---------- */

/*
    Стили списка вариантов в панели убраны 03.09.2026: выбор раскладок,
    ширм, циферблатов и рам переехал под фото. Новые стили — ниже,
    в блоке «ПОЛОСЫ ВЫБОРА ПОД ФОТО».
*/



/*
    ПРОМЕЖУТКИ МЕЖДУ ПОЛОТНАМИ ДЕЛАЕМ ПРОЗРАЧНЫМИ. Добавлено 03.09.2026.

    ЧТО БЫЛО НЕ ТАК. Трафарет кладётся поверх картины, и промежутки между
    полотнами в нём залиты БЕЛЫМ. На белой карточке это почти незаметно,
    но стоит смениться фону — и вокруг полотен проступает белый
    прямоугольник, который не совпадает с окружением. Владелец заметил
    это сразу: «фон разный у того, что накладывается».

    КАК ЧИНИМ. Вместо того чтобы класть трафарет сверху, применяем его
    как маску к самой картине: картина остаётся видна там, где в трафарете
    прорези, и исчезает там, где он непрозрачен. Промежутки становятся
    по-настоящему прозрачными и показывают то, что под ними, — какой бы
    фон там ни был.

    ПОЧЕМУ ДВА СЛОЯ МАСКИ. Прорези в трафарете прозрачные, а нам нужно
    обратное: показать картину именно в прорезях. Первый слой — сплошная
    заливка, второй — трафарет, и режим exclude оставляет то, что покрыто
    ровно одним слоем. Получается инверсия.

    ПОЧЕМУ ЧЕРЕЗ @supports. Если браузер не умеет exclude, правила внутри
    не применяются вовсе, и остаётся прежнее поведение: трафарет картинкой
    сверху с белыми промежутками. Некрасиво, но работает. Без такой
    защиты в старом браузере картина исчезла бы целиком.

    Часы под это не попадают: циферблат должен лежать поверх картины,
    а не вырезать её.
*/
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
    .order-constructor__poster-stage.has-stencil .order-constructor__poster-card-image {
        -webkit-mask-image: linear-gradient(#000, #000), var(--stencil);
        -webkit-mask-composite: xor;
        -webkit-mask-size: 100% 100%, 100% 100%;
        -webkit-mask-repeat: no-repeat, no-repeat;
        mask-image: linear-gradient(#000, #000), var(--stencil);
        mask-composite: exclude;
        mask-size: 100% 100%, 100% 100%;
        mask-repeat: no-repeat, no-repeat;
        /* Белая подложка картины сквозь прорези больше не нужна. */
        background: transparent;
    }

    /* Трафарет отработал маской — картинкой сверху он уже не нужен. */
    .order-constructor__poster-stage.has-stencil .order-constructor__poster-overlay:not(.is-clock) {
        display: none;
    }
}

/*
    ЦИФЕРБЛАТ. Добавлено 03.09.2026.

    ЗАЧЕМ ОТДЕЛЬНЫЙ СЛОЙ. Циферблаты нарисованы чёрными линиями. На тёмной
    картине их не видно совсем — владелец 03.09.2026: «часы не видно вообще».

    КАК УСТРОЕНО. Это не картинка, а пустой блок, залитый цветом. Рисунок
    циферблата задаёт ФОРМУ заливки: маска пропускает цвет там, где на
    рисунке линии, и скрывает всё остальное. Один и тот же файл даёт
    и белые часы, и чёрные, и золотые — меняется только цвет заливки.

    Тень нужна для белых часов на светлой картине: без неё они теряются
    так же, как чёрные на тёмной.
*/
.order-constructor__poster-clock {
    position: absolute;
    left: 30%;
    top: 30%;
    width: 40%;
    aspect-ratio: 1 / 1;
    background-color: var(--clock-color, #ffffff);
    -webkit-mask-image: var(--clock);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--clock);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    /*
        ОБВОДКА. 03.09.2026, владелец: «часы видно как-то темно,
        их вообще не видно».

        [ФАКТ] Разобран файл циферблата 03.09.2026: 550x550 точек,
        непрозрачных всего 4,9 %, и все чёрные — это тонкие линии.
        Одной тени мало: линия в 5 % площади теряется на пёстрой
        картине. Кладём три тени одного цвета — они складываются
        и дают сплошную окантовку вокруг каждой линии.

        Цвет обводки ставит скрипт в --clock-halo: у светлых часов
        тёмная, у чёрных светлая.
    */
    filter:
        drop-shadow(0 0 1px var(--clock-halo, rgba(0, 0, 0, 0.75)))
        drop-shadow(0 0 2px var(--clock-halo, rgba(0, 0, 0, 0.75)))
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.order-constructor__poster-clock:active {
    cursor: grabbing;
}

.order-constructor__poster-clock[hidden] {
    display: none;
}

/* ---------- цвет и размер циферблата ---------- */

.order-constructor-aside__clock-tools {
    margin-top: 12px;
}

.order-constructor-aside__clock-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--color-gray);
}

.order-constructor-aside__clock-colors {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.order-constructor-aside__clock-color {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--color-light);
    border-radius: 50%;
    cursor: pointer;
    /*
        Обводка вокруг светлых кружков: белый цвет на белой панели
        иначе выглядит пустым местом.
    */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    transition: border-color var(--base-transition);
}

.order-constructor-aside__clock-color:hover {
    border-color: var(--color-gray);
}

.order-constructor-aside__clock-color.is-selected {
    border-color: var(--color-primary);
}

.order-constructor-aside__clock-size {
    width: 100%;
    accent-color: var(--color-primary);
}

/*
    ================= ПОЛОСЫ ВЫБОРА ПОД ФОТО. 03.09.2026 =================

    Владелец прислал образец: рамка с подписью слева сверху, название
    выбранного справа, стрелки по краям, плитки с подписями снизу.
    Повторяем устройство, цвета берём свои — оранжевый сайта.

    Прокрутка родная, без библиотеки: пальцем полоса листается сама,
    мышью — стрелками.
*/
.order-constructor__picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.order-constructor__strip[hidden] {
    display: none;
}

/* Рамка с подписью в разрыве линии — как в образце. */
.order-constructor__strip-frame {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 14px 0;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: var(--color-white);
}

.order-constructor__strip-title,
.order-constructor__strip-current {
    position: absolute;
    top: -9px;
    padding: 0 8px;
    background: var(--color-white);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}

.order-constructor__strip-title {
    left: 14px;
    font-weight: 600;
    color: var(--color-black);
}

.order-constructor__strip-current {
    right: 14px;
    font-weight: 600;
    color: var(--color-primary);
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Лента плиток. */
.order-constructor__strip-list {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 8px;
    overflow-x: auto;
    /*
        ⚠ НИ scroll-snap, НИ scroll-behavior: smooth.

        Проверено на стенде 03.09.2026, по шагам:
          - со scroll-snap-type вызов scrollBy({behavior:"smooth"})
            отменялся, и лента возвращалась к текущей плитке;
          - убрали привязку — не помогло;
          - с scroll-behavior: smooth перестало работать даже прямое
            присваивание scrollLeft: значение оставалось прежним.

        Стрелки при этом молча ничего не делали: клик доходил,
        обработчик срабатывал, лента не двигалась. Поэтому листание
        написано своим кодом в order-constructor-overlay.js — оно
        не зависит от того, умеет ли браузер плавную прокрутку.
    */
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.order-constructor__strip-list::-webkit-scrollbar {
    height: 4px;
}

.order-constructor__strip-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.order-constructor__strip-empty {
    margin: 0;
    padding: 12px 4px;
    font-size: 13px;
    color: var(--color-gray);
}

/* Стрелки по краям. Пока листать некуда — их нет вовсе. */
.order-constructor__strip-arrow {
    flex: 0 0 auto;
    width: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    margin: -14px 0;
    padding: 0;
    border: 0;
    background: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.order-constructor__strip-arrow_prev {
    border-radius: 13px 0 0 13px;
}

.order-constructor__strip-arrow_next {
    border-radius: 0 13px 13px 0;
}

.order-constructor__strip.has-scroll .order-constructor__strip-arrow {
    display: flex;
}

.order-constructor__strip-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Плитка варианта: картинка и подпись под ней. */
.order-constructor__variant {
    flex: 0 0 auto;
    width: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: var(--color-white);
    cursor: pointer;
    transition: border-color var(--base-transition);
}

.order-constructor__variant:hover {
    border-color: var(--color-gray);
}

.order-constructor__variant.is-selected,
.order-constructor__variant:has(.order-constructor__variant-control:checked) {
    border-color: var(--color-primary);
}

/*
    ПОДЛОЖКА ПЛИТКИ. Переделано 03.09.2026.

    Владелец: «ширмы плохо видно, всё тёмное, и также модули тёмные
    очень», и до этого — «зачем на модулях сверху и снизу тёмные полосы?»

    [ФАКТ] Разобран файл раскладки 03.09.2026: 3544x2364. Непрозрачная
    часть трафарета — БЕЛАЯ, с серыми контурами; прозрачны сами полотна,
    края залиты. То есть тёмными полотна выглядели ровно потому, что
    сквозь них просвечивала тёмная подложка --color-secondary.

    Подложка сделана светло-серой: полотна получают этот оттенок,
    белая часть трафарета остаётся белой, и раскладка читается как
    чертёж — светлые полотна с белыми промежутками.

    Чисто белая подложка не годится: полотна сливались бы с белой
    частью трафарета, и на плитке не осталось бы ничего.

    Плюс убрана квадратная рамка: при соотношении файла 1,50 она
    добавляла по 11 px тёмных полей сверху и снизу.

    Картину под трафарет НЕ подставляем: владелец 03.09.2026 —
    «нет, плитка не должна показывать картинку».
*/
.order-constructor__variant-frame {
    display: block;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background-color: #e3e8ef;
}

.order-constructor__variant-image {
    display: block;
    width: 100%;
    height: auto;
}

/*
    У циферблатов картины под рисунком нет: там важен сам циферблат,
    нарисованный чёрными линиями на прозрачном. Подложка светлая —
    на тёмной их не видно, это владелец заметил 03.09.2026:
    «часы видно как-то темно, их вообще не видно».
*/
.order-constructor__variant_clock .order-constructor__variant-frame {
    background-color: var(--color-light);
}

.order-constructor__variant-caption {
    /* Высота картинок теперь разная — прижимаем подпись к низу. */
    margin-top: auto;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: #4b5563;
    overflow-wrap: anywhere;
}

.order-constructor__variant.is-selected .order-constructor__variant-caption,
.order-constructor__variant:has(.order-constructor__variant-control:checked) .order-constructor__variant-caption {
    color: var(--color-primary);
    font-weight: 600;
}

/* Переключатель прячем: его роль играет сама плитка. */
.order-constructor__variant-control {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* Клавиатура: видно, на какой плитке фокус. */
.order-constructor__variant-control:focus-visible ~ .order-constructor__variant-image,
.order-constructor__variant:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .order-constructor__variant {
        width: 72px;
    }

    .order-constructor__strip-arrow {
        width: 26px;
    }
}

/*
    ================= ПЛИТКА РАМЫ. Переписано 03.09.2026 =================

    Устройство повторяет калькулятор портретов, где владелец к нему
    привык: крупная картинка, надпись «Увеличить» по наведению,
    и отдельная кнопка «Выбрать» под ней.

    Полей ввода в плитке нет вовсе. Прежний невидимый переключатель
    1x1 заставлял браузер прокручивать страницу к себе, когда плитка
    была за краем ленты — владелец: «нажимаешь на раму и сайт улетает».
*/
.order-constructor__baguette {
    flex: 0 0 auto;
    width: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: var(--color-white);
    transition: border-color var(--base-transition);
}

.order-constructor__baguette:hover {
    border-color: var(--color-gray);
}

.order-constructor__baguette.is-selected {
    border-color: var(--color-primary);
}

/* Картинка-кнопка: по ней рама открывается крупно. */
.order-constructor__baguette-zoom {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
}

.order-constructor__baguette-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background: var(--color-light);
}

/*
    Подсказка «Увеличить». Показываем по наведению и при фокусе
    с клавиатуры; на телефоне наведения нет, поэтому там она видна
    всегда — иначе о возможности никто не узнает.
*/
.order-constructor__baguette-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 0;
    background: rgba(0, 0, 0, 0.6);
    color: var(--color-white);
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    opacity: 0;
    transition: opacity var(--base-transition);
}

.order-constructor__baguette-zoom:hover .order-constructor__baguette-hint,
.order-constructor__baguette-zoom:focus-visible .order-constructor__baguette-hint {
    opacity: 1;
}

@media (hover: none) {
    .order-constructor__baguette-hint {
        opacity: 1;
    }
}

.order-constructor__baguette-zoom:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.order-constructor__baguette-sku {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: #4b5563;
    overflow-wrap: anywhere;
}

.order-constructor__baguette.is-selected .order-constructor__baguette-sku {
    color: var(--color-primary);
    font-weight: 600;
}

/* Кнопка выбора — как в калькуляторе, отдельно от картинки. */
.order-constructor__baguette-pick {
    width: 100%;
    margin-top: auto;
    padding: 6px 4px;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-primary);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--base-transition), color var(--base-transition);
}

.order-constructor__baguette-pick:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.order-constructor__baguette.is-selected .order-constructor__baguette-pick {
    background: var(--color-primary);
    color: var(--color-white);
    cursor: default;
}

@media (max-width: 768px) {
    .order-constructor__baguette {
        width: 104px;
    }
}