/* Поиск по фото: иконка в строке поиска, окно с загрузкой и рамкой выделения, блок «Похожие товары».

   Раскладка повторяет donplafon (заказчик просил сделать так же). Пока фотографии нет, окно
   узкое и стоит по центру. Как только фото выбрано, оно раскрывается на весь экран: слева
   квадрат с фотографией, справа выдача со своей прокруткой. Оформление как на сайте:
   Montserrat, фирменный оранжевый --theme-base-color (#fd9c12), скругления 3px, как у кнопок
   Aspro. */

/* ===== Строка поиска =====
   Приводим её к виду: лупа слева, фотоаппарат справа. Выбор области поиска убран
   (заказчик сказал, что не нужен), кнопка поиска переехала влево и стала обычной иконкой.
   Заодно справа больше нет соседей, у которых в шапке, мега-меню и раскрывающемся
   окне разные отступы, так что иконку ставим одним правилом. */
.search--hastype .dropdown-select.searchtype { display: none !important; }

.search--hastype .search-button-div {
    left: 0 !important;
    right: auto !important;
    width: 42px !important;
}
.search--hastype .search-button-div .btn-search {
    width: 42px !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #9a9a9a !important;
}
.search--hastype .search-button-div .btn-search:hover { color: var(--theme-base-color, #fd9c12) !important; }
/* Не убирать: только fill. Иконка темы это спрайт, нарисованный заливкой. Добавленная
   обводка ложится поверх контура и делает лупу заметно жирнее, чем была. */
.search--hastype .search-button-div .btn-search .svg,
.search--hastype .search-button-div .btn-search svg { fill: currentColor; stroke: none; }

/* Тема задаёт отступы поля своими правилами (у мега-меню правило своё, более
   специфичное), обычным весом их не перебить. !important здесь оправдан: мы
   переставляем элементы внутри чужого поля и обязаны освободить им место. */
.search--hastype input.search-input {
    padding-left: 46px !important;
    padding-right: 52px !important;
}

.svm-ps-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--theme-base-color, #fd9c12);   /* заказчик просил ярче, берём фирменный цвет */
    transition: opacity .15s;
}
.svm-ps-open:hover { opacity: .75; }
.svm-ps-open svg { width: 22px; height: 22px; display: block; }
.search--hastype .svm-ps-open {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
/* В раскрывающемся окне поиска у темы справа сидит собственный крестик закрытия
   (.close-block, 34px, прижат к краю формы). Иконку камеры сдвигаем левее него,
   иначе они накладываются друг на друга и по камере не попасть. */
.inline-search-block .search--hastype .svm-ps-open { right: 50px; }
.inline-search-block .search--hastype input.search-input { padding-right: 92px !important; }

/* ===== Окно поиска ===== */

/* Свои display-правила перебивают [hidden] из стилей браузера, поэтому возвращаем его силой. */
.svm-ps-modal [hidden] { display: none !important; }

/* inset не понимают Safari до 14.1 и старые Android WebView, пишем по-старому, длинно. */
.svm-ps-modal {
    display: none;
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100500;
    font-family: Montserrat, -apple-system, "Segoe UI", Arial, sans-serif;
    color: #333;
}
.svm-ps-modal.is-open { display: block; }
/* Пока окно открыто, всплывашки темы должны быть ВЫШЕ него: у уведомления «товар
   в корзине» свой z-index 3000 (замерено), и без этого посетитель жмёт «В корзину»
   из выдачи и не видит никакого ответа. То же с быстрым просмотром и попапами ядра. */
body.svm-ps-lock .notice-surface,
body.svm-ps-lock .basket_fly,
body.svm-ps-lock .basket_fly_forms,
body.svm-ps-lock .popup-window,
body.svm-ps-lock .bx-core-window,
body.svm-ps-lock .fancybox-container { z-index: 100600 !important; }
.svm-ps-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .55); }

/* Стартовое окно это узкая карточка по центру: показывать пока нечего, а широкое окно
   оставляло бы половину экрана пустой (на это и жаловался заказчик). */
.svm-ps-window {
    position: relative;
    width: calc(100% - 32px);
    max-width: 620px;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 3px;
    padding: 20px 28px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
/* Как только фотография выбрана, окно идёт на весь экран: выдаче нужно место.
   Прокручивается ВСЁ окно целиком, а фотография слева прилипает и остаётся на виду
   (по просьбе заказчика: полоса прокрутки внутри колонки выдачи неудобна). */
.svm-ps-modal.has-photo .svm-ps-window {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto;
    transform: none;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.svm-ps-head { margin-bottom: 18px; }
.svm-ps-headinner { display: flex; align-items: center; }
/* Шапка липнет к верху прокрутки: крестик должен оставаться под рукой, до какого бы
   места выдачи посетитель ни долистал. */
.svm-ps-modal.has-photo .svm-ps-head {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0;
    /* Осторожно: боковой отступ ставим только на внутреннем блоке, здесь его нет.
       Иначе заголовок и колонка с фотографией считаются по разным коробкам: у шапки
       ограничение ширины стоит ВНУТРИ отступа, у тела снаружи, и на мониторе шире
       1612 левые края расходятся ровно на этот отступ. Фон и линия при этом должны
       тянуться во всю ширину, поэтому вертикальный отступ остаётся тут. */
    padding: 15px 0;
    background: #fff;
    border-bottom: 1px solid #ececec;
}
.svm-ps-modal.has-photo .svm-ps-headinner {
    box-sizing: border-box;      /* тема могла не задать, тогда 1560 считались бы без отступа */
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    padding: 0 26px;
}
.svm-ps-title { font-size: 21px; font-weight: 600; }
.svm-ps-close {
    margin-left: auto;
    font-size: 30px; line-height: 1;
    background: none; border: 0; cursor: pointer; color: #b5b5b5;
    padding: 0 4px;
}
.svm-ps-close:hover { color: #333; }

.svm-ps-body { display: block; }
.svm-ps-modal.has-photo .svm-ps-body {
    display: flex;
    align-items: flex-start;
    /* Содержимое держим по центру и в пределах ширины сайта: на широком мониторе
       растянутая на 2500 пикселей выдача разъезжается и читается хуже, чем колонка
       привычной ширины (у donplafon так же, их слой ограничен .container). */
    box-sizing: border-box;
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 24px 26px 40px;
}
.svm-ps-left { flex: 0 0 auto; }
/* Колонка с фотографией уже, чем была: место нужнее товарам. И она прилипает, чтобы
   при прокрутке выдачи снимок и рамка оставались на виду. */
.svm-ps-modal.has-photo .svm-ps-left {
    width: 340px;
    margin-right: 30px;
    position: sticky;
    top: 80px;                      /* высота липкой шапки плюс отступ */
    align-self: flex-start;
}
/* Правую колонку НЕ прячем целиком: в ней живёт строка сообщений, а ошибки выбора
   файла («файл больше 12 МБ», «это не изображение») печатаются ещё до того, как
   появилась фотография. Спрячем колонку, и посетитель не увидит ни одной из них. */
.svm-ps-right { display: block; }
.svm-ps-modal:not(.has-photo) .svm-ps-status { min-height: 0; margin: 0; text-align: center; }
.svm-ps-modal:not(.has-photo) .svm-ps-status:not(:empty) { margin-top: 14px; }
.svm-ps-modal.has-photo .svm-ps-right {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    /* Своей прокрутки у колонки больше нет, прокручивается окно целиком.
       Запас снизу оставляем: у карточки при наведении раскрывается слой с кнопкой
       «В корзину», и у нижнего ряда ему нужно место. */
    padding-bottom: 70px;
}

/* Зона загрузки. */
.svm-ps-drop {
    border: 1px dashed #d5d5d5;
    border-radius: 3px;
    padding: 34px 20px 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.svm-ps-drop:hover,
.svm-ps-drop:focus,
.svm-ps-drop.is-over { border-color: var(--theme-base-color, #fd9c12); background: #fffaf2; outline: none; }
.svm-ps-drop-icon {
    width: 52px; height: 52px; margin: 0 auto 14px;
    background: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fd9c12' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}
.svm-ps-drop-text { font-size: 16px; color: #333; margin-bottom: 16px; }
.svm-ps-hint { font-size: 12px; color: #999; margin-top: 14px; }

.svm-ps-actions { display: flex; justify-content: center; flex-wrap: wrap; }
.svm-ps-actions .svm-ps-btn { margin: 0 5px 6px; }

/* Кнопки держим в габаритах кнопок Aspro (14px, скругление 3px), заливка фирменная. */
.svm-ps-btn {
    display: inline-block;
    padding: 10px 18px;
    font: inherit;
    font-size: 14px;
    line-height: 1.3;
    border: 1px solid var(--theme-base-color, #fd9c12);
    border-radius: 3px;
    background: var(--theme-base-color, #fd9c12);
    color: #fff;
    cursor: pointer;
    transition: opacity .15s;
}
.svm-ps-btn:hover { opacity: .88; }
.svm-ps-paste,
.svm-ps-reset { background: #fff; color: #444; border-color: #d5d5d5; }
.svm-ps-paste:hover,
.svm-ps-reset:hover { border-color: var(--theme-base-color, #fd9c12); color: var(--theme-base-color, #fd9c12); opacity: 1; }

/* ===== Замена фотографии поверх выдачи =====
   Кнопка «Заменить фото» поднимает ту же зону загрузки карточкой над результатами.
   Так остаются доступны и вставка из буфера, и перетаскивание, а найденное никуда
   не девается, пока посетитель не выбрал новый снимок. */
/* Отдельный слой поверх окна. Поднять карточку стилями изнутри колонки нельзя:
   колонка прилипающая, а position: sticky создаёт собственный контекст наложения,
   из-за чего карточка осталась бы под затемнением при любом z-index. Поэтому узел
   переносится сюда скриптом. */
.svm-ps-picker {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 12;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.svm-ps-picker > .svm-ps-pickwrap {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 3px;
    padding: 16px 24px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.svm-ps-pickhead { display: flex; align-items: center; margin-bottom: 14px; }
/* Отбивка внутри карточки замены. Строка сообщений окна в этот момент закрыта
   самой карточкой, поэтому текст повторяем здесь. */
.svm-ps-pickmsg { margin-top: 12px; text-align: center; font-size: 14px; color: #666; }
.svm-ps-pickmsg.is-error { color: #d0342c; }
.svm-ps-picktitle { font-size: 17px; font-weight: 600; }
.svm-ps-pickclose {
    margin-left: auto;
    font-size: 26px; line-height: 1;
    background: none; border: 0; cursor: pointer; color: #b5b5b5;
    padding: 0 4px;
}
.svm-ps-pickclose:hover { color: #333; }

/* Фиксированный квадрат: фотография вписывается в него целиком, рамка ходит внутри.
   Так окно не прыгает от снимка к снимку: вертикальный кадр и панорама занимают
   одно и то же место, а рамка не подстраивается под каждый снимок. */
.svm-ps-frame {
    position: relative;
    /* Сторона квадрата ограничена не только шириной колонки, но и высотой экрана:
       прилипшая колонка должна помещаться в видимую часть целиком, иначе её низ
       окажется недостижим. */
    width: 340px; height: 340px;
    width: max(160px, min(340px, calc(100vh - 230px)));
    height: max(160px, min(340px, calc(100vh - 230px)));
    /* Прижимаем к левому краю колонки, центрировать нельзя: на невысоком окне
       квадрат становится уже колонки, на планшете тоже уже её ширины, и по центру
       он вставал со сдвигом относительно заголовка. */
    margin: 0;
    /* Поля вокруг вписанной фотографии белые: у товарных снимков фон тоже белый,
       и переход не читается. Важно: контура у квадрата быть не должно. Фотография
       закрывает собой две его стороны из четырёх: широкий кадр боковые, вертикальный
       верхнюю и нижнюю, и рамка выглядит обрезанной. Границу рабочей области
       и без того показывают оранжевые уголки выделения. */
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    -webkit-user-select: none;      /* Safari до 16.4, это ещё живые iPhone */
    user-select: none;
    /* pan-y, а не none: иначе на телефоне квадрат съедает почти весь первый экран,
       и свайп по фотографии не прокручивает окно. Жест по самой рамке всё равно
       перехватывает скрипт, он зовёт preventDefault на touchstart. */
    touch-action: pan-y;
}
/* max-width: none нужен из-за темы: у неё своё img{max-width:100%}, оно ужало бы
   картинку, а система координат рамки осталась бы прежней, и кроп уехал бы. */
.svm-ps-img { position: absolute; display: block; pointer-events: none; max-width: none; }
/* Слой ровно по фотографии. Он обрезает затемнение вне рамки выделения. Без него
   тень заливала весь квадрат, и у широкого кадра сверху и снизу появлялись серые
   полосы, которых нет по бокам. */
.svm-ps-clip { position: absolute; overflow: hidden; }

.svm-ps-box {
    position: absolute;
    touch-action: none;             /* рамку тянем сами, прокрутка тут мешала бы */
    /* Пунктир по всем сторонам, одних уголков мало: сплошная обводка читается как
       декоративная, а пунктирная как выделение, которое можно двигать. Тёмный штрих
       плюс светлая линия внутри видны и на белом снимке, и на тёмном. */
    border: 1px dashed rgba(20, 20, 20, .5);
    cursor: move;
    /* Затемняем всё вне рамки (тень обрезается слоем по фотографии). */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .75);
}
/* Разовый показ: рамка ужимается и разжимается. Движение объясняет,
   что её можно тянуть. Анимируем реальную геометрию, а не масштаб,
   иначе вместе с рамкой поехало бы и затемнение. */
.svm-ps-box.is-demo { transition: left .45s ease, top .45s ease, width .45s ease, height .45s ease; }
/* Уголки вместо целых квадратов: так рамка меньше загораживает сам предмет.
   Толщина и тень нужны, чтобы уголок читался как ручка, за которую тянут, в том
   числе на белом фоне товарного снимка. */
.svm-ps-box i {
    position: absolute;
    width: 22px; height: 22px;
    border: 4px solid var(--theme-base-color, #fd9c12);
    border-radius: 2px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
/* Ручки держим ВНУТРИ рамки: квадрат обрезает всё, что торчит наружу, а стартовая рамка
   занимает всю фотографию, так что снаружи ручки были бы срезаны. */
.svm-ps-box i[data-h="nw"] { left: 0;  top: 0;    border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.svm-ps-box i[data-h="ne"] { right: 0; top: 0;    border-left: 0;  border-bottom: 0; cursor: nesw-resize; }
.svm-ps-box i[data-h="sw"] { left: 0;  bottom: 0; border-right: 0; border-top: 0;    cursor: nesw-resize; }
.svm-ps-box i[data-h="se"] { right: 0; bottom: 0; border-left: 0;  border-top: 0;    cursor: nwse-resize; }

/* Подсказка лежит на самой фотографии, а не строкой под ней: у нижнего края её
   замечают, а подпись снизу читают уже после того, как ушли глазами в выдачу.
   Кликам не мешает и гаснет сама после первого кадрирования. */
.svm-ps-tip {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 2;
    /* Ширину задаём по содержимому: без этого плашка сжимается в узкий столбик
       на четыре строки и выглядит обрезком, а не подсказкой. */
    width: max-content;
    max-width: calc(100% - 28px);
    padding: 9px 12px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
    font-size: 13px;
    line-height: 1.25;
    color: #333;
    text-align: center;
    pointer-events: none;
}
.svm-ps-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #fff;
}
.svm-ps-reset { display: block; margin: 14px auto 0; }

.svm-ps-status { font-size: 15px; color: #666; min-height: 20px; margin-bottom: 16px; }
.svm-ps-status.is-error { color: #d0342c; }
.svm-ps-modal.is-loading .svm-ps-result { opacity: .45; transition: opacity .15s; }
.svm-ps-modal.is-loading .svm-ps-frame { cursor: progress; }

/* Выдачу рисует штатный компонент каталога вместе со своей обёрткой `.catalog_block …`,
   поэтому своей сетки здесь нет. Отступы, рамку карточки и вынос кнопки «В корзину»
   в отдельный слой задаёт тема своими правилами по её же классам. */

@media (max-width: 1100px) {
    .svm-ps-modal.has-photo .svm-ps-left { width: 290px; margin-right: 24px; }
    .svm-ps-frame { width: 290px; height: 290px; }
}
@supports (width: min(1px, 2px)) {
    @media (max-width: 1100px) {
        .svm-ps-frame { width: max(160px, min(290px, calc(100vh - 230px))); height: max(160px, min(290px, calc(100vh - 230px))); }
    }
}
@media (max-width: 900px) {
    /* На узком экране колонки не помещаются рядом, кладём их друг под друга.
       Липкость снимаем: прилипшая фотография съедала бы весь экран телефона. */
    .svm-ps-modal.has-photo .svm-ps-body { display: block; padding: 18px 16px 24px; }
    .svm-ps-modal.has-photo .svm-ps-left { width: 100%; margin: 0 0 18px; position: static; }
    .svm-ps-modal.has-photo .svm-ps-head { padding: 13px 0; }
    .svm-ps-modal.has-photo .svm-ps-headinner { padding: 0 16px; }
    .svm-ps-window { padding: 16px; }
    .svm-ps-frame { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 460px; }
    .svm-ps-modal.has-photo .svm-ps-right { padding-bottom: 40px; }
    /* На телефоне ручки крупнее: пальцем в 18 пикселей не попасть. До рекомендованных 44
       не дотягиваем сознательно, потому что такая ручка закрыла бы собой маленькую
       рамку. Вместо этого расширяем область нажатия псевдоэлементом. */
    .svm-ps-box i { width: 24px; height: 24px; }
    .svm-ps-box i::after { content: ''; position: absolute; top: -11px; right: -11px; bottom: -11px; left: -11px; }
}
/* aspect-ratio нет в Safari до 15, там квадрат задаём по старинке, через padding-top. */
@supports not (aspect-ratio: 1 / 1) {
    @media (max-width: 900px) {
        .svm-ps-frame { height: 0; padding-top: 100%; }
    }
}

/* ===== Блок «Похожие товары» в карточке =====
   Заголовок и обёртка идут на штатных классах темы (ordered-block / ordered-block__title),
   поэтому оформления здесь почти нет: блок должен выглядеть как соседние подборки. */
/* Пока плитка едет, блок скрыт (hidden снимается только при успехе), поэтому
   ни пустого заголовка, ни скачка вёрстки посетитель не увидит. */

/* ===== Кнопка «Похожие» поверх фотографии товара =====
   Второй вход в тот же поиск: снимок берётся с самой карточки. Ставим в правый
   нижний угол галереи, там она не перекрывает сам светильник (он по центру)
   и не спорит с зумом и стрелками слайдера. */
.svm-ps-similar-btn {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #333;
    background: #f2f2f2;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.svm-ps-similar-btn:hover { background: var(--theme-base-color, #fd9c12); color: #fff; }
.svm-ps-similar-btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
/* gap не понимают старые WebKit, там отступ даёт сама иконка. */
.svm-ps-similar-btn svg + span { margin-left: 2px; }
@media (max-width: 767px) {
    .svm-ps-similar-btn { right: 10px; bottom: 10px; height: 36px; padding: 0 12px; font-size: 13px; }
    .svm-ps-similar-btn svg { width: 18px; height: 18px; }
}