/* HYPER Multi Product Models – адаптивные стили */

/* =========================
   КОРНЕВОЙ БЛОК МОДУЛЯ
   ========================= */

#hpmodel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* На десктопах даём небольшой внутренний отступ справа,
   чтобы стрелки и лента гарантированно не выходили за блок темы */

/* =========================
   БАЗОВЫЕ БЛОКИ
   ========================= */

.hpm-group {
    margin: 12px 0;
}

.hpm-clearfix {
    clear: both;
}

/* Заголовок группы (Цвет:, Высота: и т.п.) */
.hpm-title {
    width: 100%;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
}

.hpm-title .hpm-title-value {
    margin-left: 4px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .hpm-title {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .hpm-title .hpm-title-value {
        font-size: 13px;
    }
}

/* =========================
   ОБЩИЙ ВИД КАРТОЧЕК .hpm-item
   ========================= */

.hpm-type-images .hpm-item {
    box-sizing: border-box;
    padding: 6px 6px 4px;
    border-radius: 10px;
    border: 1px solid #E0E3EB;
    background: #FFFFFF;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
    color: #444;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

.hpm-type-images .hpm-item.active {
    border-color: #2F6AEF;
    background-color: #F5F7FF;
    color: #111;
}

.hpm-type-images .hpm-item:hover:not(.disabled) {
    border-color: #4A83FF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.hpm-type-images .hpm-item.disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.hpm-type-images .hpm-item > div:not(.hcol-image) {
    padding: 2px 0 0;
    min-height: 1.4em;
}

/* =========================
   ГРУППЫ С ФОТО (Цвет, Цвет профиля)
   data-type="type_images" / "type_plink" с .hcol-image
   ========================= */

.hpm-type-images-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
}

/* Лента карточек с фото */
.hpm-type-images {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: auto !important;
    /* scroll-behavior управляется через JS */
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 4px;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hpm-type-images::-webkit-scrollbar {
    display: none;
}

/* ПК – примерно 5 карточек в видимой области */
.hpm-group[data-type="type_images"]:has(.hcol-image) .hpm-type-images .hpm-item,
.hpm-group[data-type="type_plink"]:has(.hcol-image) .hpm-type-images .hpm-item {
    flex: 0 0 calc(19% - 9px);
    max-width: 180px;
}

.hpm-type-images > a.hpm-item-link {
    color: inherit;
    text-decoration: none;
}

.hpm-type-images > a.hpm-item-link:focus {
    outline: none;
}

/* Блок с картинкой */
.hpm-type-images .hcol-image {
    width: 100%;
    margin-bottom: 4px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.hpm-type-images .hcol-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Планшеты 768–991px: ~4 карточки */
@media (max-width: 991px) and (min-width: 768px) {
    .hpm-group[data-type="type_images"]:has(.hcol-image) .hpm-type-images .hpm-item,
    .hpm-group[data-type="type_plink"]:has(.hcol-image) .hpm-type-images .hpm-item {
        flex: 0 0 calc(24% - 8px);
        max-width: 200px;
    }
}

/* Мобильные до 767px: ~3 карточки, хвост справа под свайп */
@media (max-width: 767px) {
    .hpm-group[data-type="type_images"]:has(.hcol-image),
    .hpm-group[data-type="type_plink"]:has(.hcol-image) {
        margin-bottom: 10px;
    }

    .hpm-group[data-type="type_images"]:has(.hcol-image) .hpm-type-images,
    .hpm-group[data-type="type_plink"]:has(.hcol-image) .hpm-type-images {
        padding-right: 34%;
    }

    .hpm-group[data-type="type_images"]:has(.hcol-image) .hpm-type-images .hpm-item,
    .hpm-group[data-type="type_plink"]:has(.hcol-image) .hpm-type-images .hpm-item {
        flex: 0 0 calc(35% - 8px);
        max-width: none;
        padding: 4px 4px 2px;
        border-radius: 8px;
        font-size: 11px;
    }

    .hpm-group[data-type="type_images"]:has(.hcol-image) .hpm-type-images .hcol-image,
    .hpm-group[data-type="type_plink"]:has(.hcol-image) .hpm-type-images .hcol-image {
        margin-bottom: 3px;
    }

    .hpm-group[data-type="type_images"]:has(.hcol-image) .hpm-type-images .hcol-image img,
    .hpm-group[data-type="type_plink"]:has(.hcol-image) .hpm-type-images .hcol-image img {
        max-height: 130px;
        object-fit: contain;
    }
}

/* В цветовых миниатюрах оставляем только изображение,
   название показываем сверху и в tooltip */
.hpm-group[data-type="type_images"]:has(.hcol-image) .hpm-type-images .hpm-item > div:not(.hcol-image),
.hpm-group[data-type="type_plink"]:has(.hcol-image) .hpm-type-images .hpm-item > div:not(.hcol-image) {
    display: none;
}

/* =========================
   ГРУППЫ РАЗМЕРОВ (без фото)
   ========================= */

.hpm-group[data-type="type_images"]:not(:has(.hcol-image)) .hpm-type-images,
.hpm-group[data-type="type_plink"]:not(:has(.hcol-image)) .hpm-type-images {
    overflow-x: visible;
    flex-wrap: wrap;
    gap: 6px;
}

.hpm-group[data-type="type_images"]:not(:has(.hcol-image)) .hpm-type-images .hpm-item,
.hpm-group[data-type="type_plink"]:not(:has(.hcol-image)) .hpm-type-images .hpm-item {
    flex: 0 0 auto;
    min-width: 72px;
    max-width: 110px;
    padding: 6px 10px 4px;
    border-radius: 999px;
}

@media (max-width: 767px) {
    .hpm-group[data-type="type_images"]:not(:has(.hcol-image)) .hpm-type-images .hpm-item,
    .hpm-group[data-type="type_plink"]:not(:has(.hcol-image)) .hpm-type-images .hpm-item {
        min-width: 64px;
        max-width: 96px;
        padding: 5px 9px 3px;
        font-size: 12px;
    }
}

/* =========================
   СТРЕЛКИ СЛАЙДЕРА
   (визуально почти как «родные»,
    но внутри блока темы)
   ========================= */

.hpm-slider-nav {
    display: none;
}

.hpm-slider-btn {
    background: #FFFFFF;
    color: #000;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    transition: all .15s ease;
    z-index: 2;
}

.hpm-slider-btn:focus {
    outline: none;
}

.hpm-slider-btn:hover {
    background: #F5F7FF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}

.hpm-slider-btn--prev::before,
.hpm-slider-btn--next::before {
    content: '';
    width: 7px;
    height: 11px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Стрелки в стиле модуля */
.hpm-slider-btn--prev::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath fill='%23000' d='M4.8 0 0 5l4.8 5L6 8.8 2.6 5 6 1.2 4.8 0Z'/%3E%3C/svg%3E");
}

.hpm-slider-btn--next::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath fill='%23000' d='M1.2 0 0 1.2 3.4 5 0 8.8 1.2 10 6 5 1.2 0Z'/%3E%3C/svg%3E");
}

@media (min-width: 992px) {
    .hpm-type-images-wrapper.hpm-has-slider .hpm-type-images::before,
    .hpm-type-images-wrapper.hpm-has-slider .hpm-type-images::after {
        content: '';
        display: block;
        flex: 0 0 20px;
        width: 20px;
        height: 1px;
        pointer-events: none;
    }

    .hpm-type-images-wrapper.hpm-has-slider .hpm-slider-nav {
        display: block;
    }

    .hpm-type-images-wrapper.hpm-has-slider .hpm-slider-btn {
        position: absolute;
        top: 50%;
        margin-top: -16px;
    }

    /* Держим стрелки внутри обёртки, чтобы их не подрезал overflow темы */
    .hpm-type-images-wrapper.hpm-has-slider .hpm-slider-btn--prev {
        left: 4px;
        transform: none;
    }

    .hpm-type-images-wrapper.hpm-has-slider .hpm-slider-btn--next {
        right: 4px;
        transform: none;
    }
}

.hpm-slider-btn.is-disabled {
    opacity: .4;
    cursor: default;
    box-shadow: none;
}

@media (min-width: 992px) {
    .hpm-type-images .hpm-item[data-title]:focus,
    .hpm-type-images > a.hpm-item-link[data-title]:focus .hpm-item,
    .hpm-type-images > a.hpm-item-link[data-title]:focus-visible .hpm-item {
        border-color: #4A83FF;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    }
}

/* =========================
   Обычный <select> (type_select)
   ========================= */

.hpmodel-type-select select {
    width: 100%;
    max-width: 260px;
}

@media (max-width: 767px) {
    .hpmodel-type-select select {
        max-width: 100%;
        font-size: 13px;
        height: 36px;
        padding: 4px 10px;
    }
}

.hpmodel-type-select .hpm-item.disabled {
    color: #ccc;
}

/* =========================
   HTML-select с картинками (type_html_select)
   ========================= */

.hpm-type-html-select .hpm-select-item img {
    border-radius: 6px;
    padding: 0;
    margin: 2px;
}

.hpm-select {
    cursor: pointer;
    position: relative;
    width: 100%;
    max-width: 260px;
}

@media (max-width: 767px) {
    .hpm-select {
        max-width: 100%;
    }
}

.hpm-select .selected {
    position: relative;
    display: block;
    padding: 6px 32px 6px 8px;
    border-radius: 8px;
    border: 1px solid #D1D5E0;
    background-color: #F7F8FC;
    min-height: 40px;
    box-sizing: border-box;
}

.hpm-select .selected::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 9px;
    height: 5px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath fill='%23000' d='M1.4 0 0 1.4 7 8l7-6.6L12.6 0 7 5.2 1.4 0Z'/%3E%3C/svg%3E");
}

.hpm-select .hpm-select-item {
    overflow: hidden;
    padding: 3px;
    display: flex;
    align-items: center;
}

.hpm-select .hpm-select-item .hcol-image {
    flex: 0 0 auto;
    margin-right: 8px;
}

.hpm-select .drop-down {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #D1D5E0;
    background: #FFFFFF;
    max-height: 260px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.hpm-select .drop-down > div {
    padding: 6px 10px;
    border-bottom: 1px solid #F1F2F6;
}

.hpm-select .drop-down > div:last-child {
    border-bottom: none;
}

.hpm-select .drop-down > div.active {
    background: #F5F7FF;
}

.hpm-select .drop-down > div:hover {
    background-color: #E9ECF7;
    color: #222;
}

/* =========================
   БЛОКИ В КАТЕГОРИЯХ (СПИСОК ТОВАРОВ)
   ========================= */

.hpm-cat-box {
    margin-bottom: 6px;
}

.hpm-cat-box .hpm-type-images {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.hpm-cat-box .hpm-type-images .hpm-cat-item {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #DFE3EC;
    background: #FFFFFF;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

.hpm-cat-box .hpm-type-images .hpm-cat-item .hpm-col-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}

.hpm-cat-box .hpm-type-images .hpm-cat-item.active {
    border-color: #2F6AEF;
    box-shadow: 0 0 0 1px rgba(47, 106, 239, 0.3);
    background-color: #F5F7FF;
}

.hpm-cat-box select {
    width: 100%;
}

.hpm-cat-box .hprice,
#hpmodel .hprice {
    font-weight: 600;
}

.hpm-cat-box .hprice-new,
#hpmodel .hprice-new {
    font-weight: 600;
}

.hpm-cat-box .hprice-old,
#hpmodel .hprice-old {
    color: #E12C31;
    text-decoration: line-through;
}

/* ===== HPM layout v3 — плотная открытая компоновка ===== */

#hpmodel.hpm-layout-v3 {
    margin-top: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
}

#hpmodel.hpm-layout-v3 > .hpm-main-title {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

#hpmodel.hpm-layout-v3 > .hpm-group,
#hpmodel.hpm-layout-v3 > .hpm-native-block {
    margin: 0 !important;
    min-width: 0;
}

#hpmodel.hpm-layout-v3 .hpm-clearfix {
    display: none !important;
}

/* визуальная группа с миниатюрами */
#hpmodel.hpm-layout-v3 > .hpm-group--visual {
    grid-column: 1 / -1;
    padding: 0 0 10px;
    border-bottom: 1px solid #eef1f6;
    margin-bottom: 0 !important;
}

#hpmodel.hpm-layout-v3 > .hpm-group--visual .hpm-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 400;
    color: #8a93a8;
    line-height: 1.25;
}

#hpmodel.hpm-layout-v3 > .hpm-group--visual .hpm-title-value {
    display: inline !important;
    font-weight: 600;
    color: #101114;
}

#hpmodel.hpm-layout-v3 > .hpm-group--visual .hpm-type-images-wrapper,
#hpmodel.hpm-layout-v3 > .hpm-group--visual .hpm-type-images {
    width: 100%;
    max-width: none;
}

#hpmodel.hpm-layout-v3 > .hpm-group--visual .hpm-item {
    border-radius: 12px;
}

#hpmodel.hpm-layout-v3 > .hpm-group--visual .hcol-image,
#hpmodel.hpm-layout-v3 > .hpm-group--visual .hcol-image img {
    border-radius: 10px;
}

#hpmodel.hpm-layout-v3 > .hpm-group--visual:has(.hcol-image) .hcol-attribute {
    display: none;
}

/* меньше лишнего воздуха у стрелок */
@media (min-width: 992px) {
    .hpm-type-images-wrapper.hpm-has-slider .hpm-type-images::before,
    .hpm-type-images-wrapper.hpm-has-slider .hpm-type-images::after {
        flex: 0 0 8px;
        width: 8px;
    }

    .hpm-type-images-wrapper.hpm-has-slider .hpm-slider-btn--prev {
        left: -4px;
    }

    .hpm-type-images-wrapper.hpm-has-slider .hpm-slider-btn--next {
        right: -4px;
    }
}

/* control-группы */
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-title {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-title-value {
    display: none !important;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .hpmodel-type-select,
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpmodel-type-select select,
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-type-html-select,
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select {
    width: 100%;
    max-width: none;
    min-width: 0;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .form-control {
    width: 100%;
    max-width: none;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
    box-sizing: border-box;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .selected {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    padding: 9px 12px;
    box-sizing: border-box;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down {
    margin-top: 6px;
    border-radius: 12px;
    overflow: hidden;
}

/* нижний блок native options */
#hpmodel.hpm-layout-v3 > .hpm-native-block {
    grid-column: 1 / -1;
    padding-top: 6px;
    border-top: 1px solid #eef1f6;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block.is-empty {
    display: none;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 0 8px;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #101114;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__note {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #7c8495;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot {
    width: 100%;
    margin: 0;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot:empty,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot.is-empty {
    display: none;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm {
    display: block;
    width: 100%;
    margin: 0;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
    width: 100%;
    margin: 0;
    padding: 2px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px 12px;
    align-items: center;
    box-sizing: border-box;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group + .form-group {
    margin-top: 6px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.18;
    color: #101114;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .control-label .option-price-chip,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label .option-price-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f4f6fb;
    border: 1px solid #e3e7f0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #222;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    width: 72px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio input[type="radio"],
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio input[type="checkbox"],
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image input[type="radio"],
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image input[type="checkbox"],
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image input[type="radio"],
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
    margin: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid #edf1f7;
    border-radius: 16px;
    background: #fbfcfe;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label:hover,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label:hover,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label:hover {
    border-color: #d8e1ef;
    box-shadow: 0 2px 10px rgba(21, 34, 66, .05);
    background: #fff;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio input:checked + label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image input:checked + label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image input:checked + label {
    border-color: #2f6aef;
    box-shadow: 0 0 0 1px rgba(47,106,239,.20);
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label br {
    display: none;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image {
    width: 72px;
    justify-content: flex-end;
}

/* планшет */
@media (max-width: 1199px) {
    #hpmodel.hpm-layout-v3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 12px;
    }
}

/* мобильный: 2 колонки */
@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 {
        padding: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-main-title {
        font-size: 16px;
        margin-bottom: 0;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--visual,
    #hpmodel.hpm-layout-v3 > .hpm-native-block {
        grid-column: 1 / -1;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--visual {
        padding-bottom: 10px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--visual .hpm-title {
        font-size: 14px;
        margin-bottom: 8px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-title {
        font-size: 13px;
        margin-bottom: 6px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--control .form-control,
    #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .selected {
        height: 40px;
        min-height: 40px;
        font-size: 14px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block {
        padding-top: 8px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
        font-size: 14px;
        margin-bottom: 6px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
        padding-top: 2px;
        gap: 8px 10px;
        grid-template-columns: minmax(0, 1fr) 64px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
        font-size: 14px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        border-color: #eef2f7;
    }
}

@media (max-width: 430px) {
    #hpmodel.hpm-layout-v3 {
        gap: 8px 8px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-title {
        font-size: 12px;
        margin-bottom: 5px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--control .form-control,
    #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .selected {
        height: 38px;
        min-height: 38px;
        font-size: 13px;
        padding-left: 10px;
        padding-right: 28px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
        font-size: 13px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
        font-size: 13px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        border-color: #eef2f7;
    }
}

/* только для действительно очень узких экранов */
@media (max-width: 359px) {
    #hpmodel.hpm-layout-v3 {
        grid-template-columns: 1fr;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--visual,
    #hpmodel.hpm-layout-v3 > .hpm-native-block {
        grid-column: 1 / -1;
    }
}


/* ===== Шкафы v6: ужимаем доп. опцию и убираем стартовый рывок ===== */
#hpmodel.hpm-layout-v3 {
    margin-bottom: 2px;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block {
    padding-top: 4px;
    padding-bottom: 0;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    color: #5f6b7a;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm {
    margin-top: 0;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
    padding: 0;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 6px 10px;
    min-height: 58px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
    font-size: 14px;
    line-height: 1.12;
    font-weight: 600;
    color: #111318;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
    width: 76px;
    min-height: 58px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
    width: 58px;
    height: 58px;
    padding: 4px;
    border-radius: 14px;
    border-color: #edf1f6;
    background: #fcfdff;
    box-shadow: none;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio input:checked + label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image input:checked + label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image input:checked + label {
    border-color: #d7dfec;
    box-shadow: 0 0 0 1px rgba(215, 223, 236, .75);
}

html.hpm-native-booting .right-block-inner > .options:not(.options-under-hpm),
html.hpm-native-booting .right-block > .options:not(.options-under-hpm) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 > .hpm-native-block {
        padding-top: 6px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
        margin-bottom: 3px;
        font-size: 13px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
        grid-template-columns: minmax(0, 1fr) 62px;
        gap: 6px 8px;
        min-height: 52px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
        font-size: 13px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
        width: 62px;
        min-height: 52px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
        width: 52px;
        height: 52px;
        padding: 4px;
        border-radius: 12px;
    }
}

/* ===== Шкафы v7: ещё компактнее доп. опция, картинка ближе к рамке ===== */
#hpmodel.hpm-layout-v3 > .hpm-native-block {
    padding-top: 2px;
    padding-bottom: 0;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    margin: 0 0 1px;
    font-size: 12px;
    line-height: 1.05;
    letter-spacing: 0;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
    grid-template-columns: minmax(0, 1fr) 68px;
    gap: 4px 8px;
    min-height: 50px;
    align-items: center;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
    font-size: 13px;
    line-height: 1.08;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
    width: 68px;
    min-height: 50px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
    width: 50px;
    height: 50px;
    padding: 1px;
    border-radius: 12px;
    border-color: #eef2f7;
    background: #fcfdff;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block + .hpm-clearfix + *,
#hpmodel.hpm-layout-v3 + .right-info,
#hpmodel.hpm-layout-v3 + .product-price {
    margin-top: 0;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 > .hpm-native-block {
        padding-top: 4px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
        margin-bottom: 2px;
        font-size: 12px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
        grid-template-columns: minmax(0, 1fr) 60px;
        gap: 4px 8px;
        min-height: 48px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
        font-size: 12px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
        width: 60px;
        min-height: 48px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
        width: 48px;
        height: 48px;
        padding: 1px;
        border-radius: 11px;
    }
}


/* ===== Шкафы v8: плотнее верх, ближе статус, компактнее опция ===== */
@media (min-width: 992px) {
    .right-block-inner > .dflex.flex-wrap:has(#hpmodel.hpm-layout-v3) {
        margin-top: -4px;
    }

    .right-block-inner > .dflex.flex-wrap:has(#hpmodel.hpm-layout-v3) + .info-product {
        margin-top: -12px;
        margin-bottom: 18px;
        padding-bottom: 18px;
    }
}

#hpmodel.hpm-layout-v3 {
    margin-top: 0;
}

#hpmodel.hpm-layout-v3 > .hpm-group--visual .hpm-title {
    margin-bottom: 5px;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block {
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: #f3f5f9;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    margin: 0 0 0;
    font-size: 11px;
    line-height: 1;
    color: #6b7280;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 2px 8px;
    min-height: 40px;
    padding-top: 0;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
    font-size: 12px;
    line-height: 1.02;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
    width: 58px;
    min-height: 40px;
    justify-content: flex-end;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    border-color: #edf1f7;
    background: #fbfcfe;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label img {
    width: 96%;
    height: 96%;
    object-fit: contain;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
        font-size: 11px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
        grid-template-columns: minmax(0, 1fr) 56px;
        min-height: 42px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
        width: 56px;
        min-height: 42px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }
}

/* ===== Шкафы v9: убираем линию через статус и ещё плотнее блок опции ===== */
@media (min-width: 992px) {
    .right-block-inner > .dflex.flex-wrap:has(#hpmodel.hpm-layout-v3) {
        margin-top: -2px;
        margin-bottom: 2px;
    }

    .right-block-inner > .dflex.flex-wrap:has(#hpmodel.hpm-layout-v3) + .info-product {
        margin-top: 4px;
        margin-bottom: 16px;
        padding-top: 8px;
        padding-bottom: 16px;
        border-top: 0 !important;
    }
}

#hpmodel.hpm-layout-v3 > .hpm-native-block {
    padding-bottom: 2px;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    margin-bottom: 0;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
    grid-template-columns: minmax(0, 1fr) 54px;
    min-height: 36px;
    gap: 2px 8px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
    width: 54px;
    min-height: 36px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image {
    width: 54px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 9px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label img {
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
        grid-template-columns: minmax(0, 1fr) 56px;
        min-height: 42px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
        width: 56px;
        min-height: 42px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image {
        width: 56px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }
}


/* ===== Шкафы v10: опция без постоянной рамки, крупнее изображение ===== */
#hpmodel.hpm-layout-v3 > .hpm-native-block {
    padding-top: 0;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    margin: 0 0 1px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 0 8px;
    min-height: 34px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
    font-size: 11px;
    line-height: 1;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
    width: 64px;
    min-height: 34px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image {
    width: 64px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0 !important;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label:hover,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label:hover,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label:hover {
    border: 0 !important;
    background: transparent;
    box-shadow: none;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio input:checked + label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image input:checked + label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image input:checked + label {
    border: 0 !important;
    background: rgba(47, 106, 239, .04);
    box-shadow: 0 0 0 2px rgba(47, 106, 239, .18);
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label img,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
        grid-template-columns: minmax(0, 1fr) 58px;
        min-height: 36px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
        width: 58px;
        min-height: 36px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image {
        width: 58px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
        width: 50px;
        height: 50px;
        border-radius: 10px;
    }
}


/* ===== Шкафы v11: шрифты 14px и более аккуратный select ===== */
#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    font-size: 14px;
    line-height: 1.15;
    font-weight: 600;
    margin-bottom: 2px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
    font-size: 14px;
    line-height: 1.15;
    font-weight: 600;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 10px;
    border: 1px solid #dce3ee;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.5L7 9.5L11 5.5' stroke='%23101114' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    padding-right: 42px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 1px 0 rgba(16, 17, 20, .02);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .form-control:hover {
    border-color: #cfd7e6;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .form-control:focus {
    outline: none;
    border-color: #9cb7ff;
    box-shadow: 0 0 0 3px rgba(47, 106, 239, .08);
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
        font-size: 14px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
        font-size: 14px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--control .form-control {
        font-size: 14px;
        background-position: right 12px center;
        padding-right: 38px;
    }
}

/* ===== Шкафы v12: вернуть обычный вид селектов размеров ===== */
#hpmodel.hpm-layout-v3 > .hpm-group--control .form-control {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    border-radius: 12px;
    border: 1px solid #dce3ee;
    background-color: #fff;
    background-image: none;
    padding-right: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: none;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .form-control:hover {
    border-color: #d3dae7;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .form-control:focus {
    outline: none;
    border-color: #c7d2e6;
    box-shadow: none;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 > .hpm-group--control .form-control {
        padding-right: 10px;
        font-size: 14px;
    }
}


/* ===== Шкафы v14: вернуть обычный вид нативных select и не лезть в системный dropdown ===== */
#hpmodel.hpm-layout-v3 > .hpm-group--control .form-control {
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: auto !important;
    background-image: none !important;
    padding-right: 12px !important;
    border-radius: 12px !important;
    border: 1px solid #dce3ee !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .form-control:hover {
    border-color: #d3dae7 !important;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .form-control:focus {
    outline: none;
    border-color: #c7d2e6 !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 > .hpm-group--control .form-control {
        padding-right: 10px !important;
    }
}


/* ===== HPM v16: декоративный заголовок под разделительной линией ===== */
#hpmodel.hpm-layout-v3 > .hpm-native-block {
    position: relative;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #e7ecf4;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block.is-empty {
    display: none;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__head {
    position: relative;
    display: block;
    margin: 0 0 12px;
    line-height: 1;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #dfe6f1;
    background: linear-gradient(180deg, #f8fafd 0%, #f1f4fa 100%);
    box-shadow: 0 8px 18px rgba(16, 17, 20, .04), inset 0 1px 0 rgba(255, 255, 255, .88);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    color: #5f6f86;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title::before {
    content: '';
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: #9aa8bc;
    box-shadow: 0 0 0 3px rgba(154, 168, 188, .12);
    flex: 0 0 auto;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__note {
    display: none !important;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 > .hpm-native-block {
        padding-top: 8px;
        margin-top: 8px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__head {
        margin: 0 0 10px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
        min-height: 24px;
        padding: 0 10px;
        font-size: 12px;
    }
}


/* ===== HPM v17: компактный блок + индикация выбора ===== */
#hpmodel.hpm-layout-v3 > .hpm-native-block {
    padding-top: 6px;
    margin-top: 8px;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__head {
    margin: 0 0 8px;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    min-height: 24px;
    padding: 0 11px;
    font-size: 12px;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title::before {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    background: #b8c2d1;
    box-shadow: 0 0 0 3px rgba(184, 194, 209, .14);
    transition: background-color .18s ease, box-shadow .18s ease;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block.is-selected .hpm-native-block__title::before {
    background: #63b66d;
    box-shadow: 0 0 0 3px rgba(99, 182, 109, .16);
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
    gap: 6px 12px;
    padding: 0;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group + .form-group {
    margin-top: 4px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
    line-height: 1.12;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 > .hpm-native-block {
        padding-top: 6px;
        margin-top: 8px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__head {
        margin: 0 0 7px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
        min-height: 23px;
        padding: 0 10px;
        font-size: 12px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
        gap: 6px 10px;
    }
}

/* ===== Шкафы v19: прижимаем нижнюю линию блока опции, фото не уменьшаем ===== */
#hpmodel.hpm-layout-v3 > .hpm-native-block {
    padding-bottom: 0;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__head {
    margin-bottom: 4px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm {
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--up-border-color);
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
    margin-bottom: 0;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
    font-size: 12px;
    line-height: 1.08;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm {
        padding-bottom: 6px;
        margin-bottom: 8px;
    }
}

/* ===== Шкафы v20: вернуть читаемость и ещё плотнее собрать блок без уменьшения фото ===== */
#hpmodel.hpm-layout-v3 > .hpm-native-block {
    margin-top: 6px;
    padding-top: 4px;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__head {
    margin-bottom: 3px;
}

#hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    min-height: 24px;
    padding: 0 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm {
    padding-bottom: 4px;
    margin-bottom: 6px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
    grid-template-columns: minmax(0, 1fr) 68px;
    gap: 4px 8px;
    min-height: 50px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.12;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
    width: 68px;
    min-height: 50px;
}

#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
#hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
    width: 50px;
    height: 50px;
    padding: 1px;
}

@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 > .hpm-native-block {
        margin-top: 6px;
        padding-top: 4px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__head {
        margin-bottom: 3px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
        min-height: 23px;
        padding: 0 10px;
        font-size: 12px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm {
        padding-bottom: 4px;
        margin-bottom: 6px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group {
        grid-template-columns: minmax(0, 1fr) 60px;
        gap: 4px 8px;
        min-height: 48px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
        font-size: 13px;
        line-height: 1.1;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > [id^="input-option"] {
        width: 60px;
        min-height: 48px;
    }

    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .image-radio label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .checkbox-image label,
    #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm .radio-image label {
        width: 48px;
        height: 48px;
    }
}

/* option-price-chip виден — показывает цену рядом с названием опции */

/* =====================================================
   СТИЛИЗОВАННЫЙ СПИСОК (type_html_select) — современный вид
   Применяется только внутри #hpmodel.hpm-layout-v3
   ===================================================== */

/* Контейнер */
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select {
    position: relative;
}

/* Кнопка */
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .selected {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 40px 8px 14px;
    border-radius: 10px !important;
    border: 1px solid #dce3ee;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(16, 17, 20, .04);
    font-size: 14px;
    font-weight: 500;
    color: #101114;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, border-radius 0s .4s;
    box-sizing: border-box;
    user-select: none;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .selected:hover {
    border-color: #b8c9e8;
    box-shadow: 0 1px 4px rgba(16, 17, 20, .08);
}

/* Стрелка — через ::after, плавный поворот при открытии */
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .selected::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 14px;
    height: 14px;
    transform: translateY(-50%) rotate(0deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.5L7 9.5L11 5.5' stroke='%23101114' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform .2s ease;
    pointer-events: none;
}

/* При открытии: кнопка становится верхней частью единого блока.
   border-radius меняется мгновенно при открытии (0s).
   При закрытии (.open убран): base transition с delay 0.4s возвращает полные углы
   плавно — после завершения slideUp анимации. */
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select.open .selected {
    border-color: #9cb7ff;
    border-radius: 10px 10px 0 0 !important;
    border-bottom-color: transparent;
    box-shadow: none;
    transition: box-shadow .18s ease, border-bottom-color .18s ease, border-radius 0s;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select.open .selected::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Выпадающий список — вплотную к кнопке, единый блок */
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-radius: 0 0 10px 10px;
    border: 1px solid #9cb7ff;
    border-top: none;
    background: #fff;
    box-shadow: 0 8px 20px rgba(47, 106, 239, .10);
    overflow: hidden;
    z-index: 200;
    margin-top: 0;
}

/* Пункты списка */
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down > div {
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #101114;
    border-bottom: 1px solid #f0f3f8;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down > div:last-child {
    border-bottom: none;
}

/* Активный пункт */
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down > div.active {
    background: #eef3ff;
    color: #2F6AEF;
    font-weight: 600;
}

/* Hover пункт */
#hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down > div:not(.active):hover {
    background: #f5f7fd;
    color: #101114;
}

/* Мобильные адаптации */
@media (max-width: 767px) {
    #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .selected {
        min-height: 38px;
        font-size: 13px;
        border-radius: 10px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down {
        border-radius: 0 0 10px 10px;
    }

    #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down > div {
        padding: 13px 14px;
        font-size: 13px;
    }
}


/* Заголовок native-block ("Подпись") */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__note {
    color: #7a8499;
}

/* ==============================================
   ТЁМНАЯ ТЕМА UpStore (.dark-theme)
   Точечные переопределения наших светлых цветов
   ============================================== */

/* "Цвет:" метка */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--visual .hpm-title {
    color: #7a8499;
}
/* название цвета "бетон" */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--visual .hpm-title-value {
    color: #e8eaf0;
}

/* Разделитель под слайдером */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--visual {
    border-bottom-color: #2d2d2d;
}

/* Заголовки "Ширина, мм:" / "Высота, мм:" — наследуют от body в dark-theme ✓ */

/* form-control нативный select */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--control .form-control {
    background-color: var(--form-field-bg, #1E1E1E);
    border-color: var(--form-field-border, #282828);
    color: #e8eaf0;
}

/* Стилизованный список — кнопка */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .selected {
    background-color: var(--form-field-bg, #1E1E1E) !important;
    border-color: var(--form-field-border, #282828) !important;
    color: #e8eaf0;
    box-shadow: none;
}
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .selected:hover {
    border-color: var(--form-field-border-focus, #2D2D2D) !important;
}
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select.open .selected {
    border-color: #4a6fa5 !important;
}
/* Стрелка белая */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .selected::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.5L7 9.5L11 5.5' stroke='%23B1B1B1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Выпадающий список */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down {
    background: var(--form-field-bg, #1E1E1E);
    border-color: #4a6fa5;
}
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down > div {
    color: #e8eaf0;
    border-bottom-color: #2d2d2d;
}
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down > div:hover {
    background: #282828;
    color: #ffffff;
}
/* Активный пункт */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--control .hpm-select .drop-down > div.active {
    background: #1a2a3a;
    color: #7baeff;
}

/* Кнопка "Доп. комплектация" — pill в тёмной теме */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title {
    background: linear-gradient(180deg, #2a2e38 0%, #22262f 100%);
    border-color: #3a4050;
    color: #9aa3b5;
    box-shadow: none;
}
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-native-block .hpm-native-block__title::before {
    background: #5a6478;
    box-shadow: 0 0 0 3px rgba(90, 100, 120, .15);
}
/* is-selected состояние */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-native-block.is-selected .hpm-native-block__title {
    background: linear-gradient(180deg, #1a2a3a 0%, #152235 100%);
    border-color: #2d4a6a;
    color: #7baeff;
}
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-native-block.is-selected .hpm-native-block__title::before {
    background: #4a8fd0;
    box-shadow: 0 0 0 3px rgba(74, 143, 208, .2);
}

/* "Модуль с ящиками" — control-label внутри опций */
.dark-theme #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label {
    color: #e8eaf0;
}


/* Плавающий блок товара: выбранная доп. опция и её доплата */
.sticky-product-info__selected-options[hidden] {
    display: none !important;
}
.sticky-product-info__selected-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, .055);
    border-radius: 12px;
    background: rgba(255, 255, 255, .58);
}
.hpm-sticky-option-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    line-height: 1.28;
}
.hpm-sticky-option-name {
    color: var(--up-color-text, #111);
    font-size: 12.5px;
    font-weight: 700;
}
.hpm-sticky-option-value {
    color: var(--up-text-gray-color, #718096);
    font-size: 12px;
    font-weight: 600;
}
.hpm-sticky-option-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 1px 8px;
    border: 1px solid #e3e8f2;
    border-radius: 999px;
    background: #f7f9fc;
    color: var(--up-color-text, #111);
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}
.dark-theme .sticky-product-info__selected-options,
html.dark-theme .sticky-product-info__selected-options {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .025);
}
.dark-theme .hpm-sticky-option-name,
html.dark-theme .hpm-sticky-option-name {
    color: #f1f4fb;
}
.dark-theme .hpm-sticky-option-value,
html.dark-theme .hpm-sticky-option-value {
    color: #9eaac0;
}
.dark-theme .hpm-sticky-option-price,
html.dark-theme .hpm-sticky-option-price {
    border-color: rgba(123, 174, 255, .22);
    background: rgba(123, 174, 255, .15);
    color: #8db8ff;
}

/* Цена выбранной доп. опции — тёмная тема, в стиле консультационного popup */
.dark-theme #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .control-label .option-price-chip,
.dark-theme #hpmodel.hpm-layout-v3 .hpm-native-options-slot > .options.options-under-hpm > .form-group > .control-label .option-price-chip {
    background: rgba(123, 174, 255, .15);
    border-color: rgba(123, 174, 255, .22);
    color: #8db8ff;
}

/* Tooltip в тёмной теме — светлый фон для читаемости */
.dark-theme .tooltip-inner {
    background-color: #e8eaf0;
    color: #1a1c22;
}
.dark-theme .tooltip.top .tooltip-arrow {
    border-top-color: #e8eaf0;
}
.dark-theme .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #e8eaf0;
}
.dark-theme .tooltip.left .tooltip-arrow {
    border-left-color: #e8eaf0;
}
.dark-theme .tooltip.right .tooltip-arrow {
    border-right-color: #e8eaf0;
}

/* Активная миниатюра в слайдере — более заметная в тёмной теме */
.dark-theme #hpmodel.hpm-layout-v3 > .hpm-group--visual .hpm-item.active {
    border-color: #5a9bff;
    background-color: transparent;
    /* inset shadow не обрезается overflow родителя */
    box-shadow: inset 0 0 0 2px #5a9bff;
}

/* В тёмной теме: скруглённые углы label обрезают img через overflow:hidden */
.dark-theme #hpmodel .hpm-native-options-slot .image-radio label {
    overflow: hidden;
}

/* Тёмная тема — текст кнопок размера */
.dark-theme .hpm-type-images .hpm-item {
    color: #e8eaf0;
    background-color: #1e2028;
    border-color: #3a4050;
}
.dark-theme .hpm-type-images .hpm-item.active {
    background-color: #1a2a3a !important;
    color: #ffffff !important;
    border-color: rgb(33, 153, 198) !important;
}
.dark-theme .hpm-type-images .hpm-item:hover {
    background-color: #282c38;
    color: #ffffff;
}

/* HPM v5.27: UpStore mobile product gallery guard.
   On mobile UpStore uses the main swiper with pagination bullets.
   After AJAX replacement the additional thumbnail swiper can appear as a vertical list;
   keep it hidden on mobile so the gallery stays compact and stable. */
@media (max-width: 767px) {
  #product .thumbnails .image-additional,
  #product .thumbnails .image-additional .swiper,
  #product .thumbnails .image-additional .swiper-wrapper {
    display: none !important;
  }

  #product .thumbnails .general-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

/* HPM v5.28: keep UpStore mobile gallery pagination as template bars after AJAX. */
@media (max-width: 767px) {
  #product .thumbnails #image-box .swiper-pagination.ch-pagination {
    bottom: 0 !important;
  }

  #product .thumbnails #image-box .swiper-pagination.ch-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-gray-2);
    opacity: 1;
  }

  #product .thumbnails #image-box .swiper-pagination.ch-pagination .swiper-pagination-bullet-active {
    background: #557DC0;
  }
}


/* HPM v5.29: protect UpStore mobile sticky price/footer after AJAX replacements. */
@media (max-width: 767px) {
  body.product-product.fix_cart_price_footer .add-to-cart-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  body.product-product.fix_cart_price_footer .add-to-cart-footer .price {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  body.product-product.fix_cart_price_footer .add-to-cart-footer .cart {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  body.product-product.fix_cart_price_footer .add-to-cart-footer .cart .btn,
  body.product-product.fix_cart_price_footer .add-to-cart-footer .cart .btn-general,
  body.product-product.fix_cart_price_footer .add-to-cart-footer .cart button {
    max-width: calc(100vw - 180px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}