/* Конструктор комплектов (Figma → konstruktor PC / konstruktor mobile / komplekt mobile). */

.eplx-cons { padding-top: 20px; }
.eplx-cons__intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.eplx-cons__title { font: 600 var(--eplx-h4) var(--eplx-font); }
.eplx-cons__lead { max-width: 640px; margin-top: 4px; opacity: .8; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-cons__how { flex: none; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-cons__how .eplx-icon { opacity: .4; transition: transform .2s; }
.eplx-cons__how[aria-expanded="true"] .eplx-icon { transform: rotate(180deg); }
.eplx-cons__steps { margin-bottom: 32px; }
.eplx-cons__steps[hidden] { display: none; }

.eplx-cons__row { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.eplx-cons__main { min-width: 0; }

/* категории (PC) */
.eplx-cons-cats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 32px; }
.eplx-cons-cats__item { padding: 10px 16px 8px; border-radius: var(--eplx-radius-s); font: 400 var(--eplx-body-s) var(--eplx-font); transition: background-color .2s; }
.eplx-cons-cats__item:hover { background: #0c0c0c; }
.eplx-cons-cats__item.is-active { background: var(--eplx-card); font-weight: 600; }

/* категории (mobile) */
.eplx-cons-chips { display: none; }

/* слоты комплекта */
.eplx-cons-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.eplx-cons-slot { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.eplx-cons-slot__head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 0;
    border-radius: var(--eplx-radius);
    background: radial-gradient(circle at 50% 60%, #2a2a2a 0, var(--eplx-card) 70%);
    overflow: hidden;
    transition: opacity .2s;
}
.eplx-cons-slot__head:hover { opacity: .85; }
.eplx-cons-slot__label { font: 600 var(--eplx-body-xs) var(--eplx-font); text-align: center; }
.eplx-cons-slot__cat { display: block; width: 100%; aspect-ratio: 1; }
.eplx-cons-slot__cat img { width: 100%; height: 100%; object-fit: contain; }
.eplx-cons-slot__cat--item { display: none; }
.eplx-cons-slot__body { display: flex; flex-direction: column; gap: 12px; }
.eplx-cons-slot__media, .eplx-cons-slot__empty {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 305 / 328;
    border-radius: var(--eplx-radius);
    background: var(--eplx-card-dark);
    overflow: hidden;
}
.eplx-cons-slot__media a { display: block; width: 100%; height: 100%; }
.eplx-cons-slot__media img { width: 100%; height: 100%; object-fit: contain; }
.eplx-cons-slot__empty img { width: 55%; height: auto; opacity: .9; }
.eplx-cons-slot__remove { position: absolute; top: 10px; right: 10px; opacity: .7; transition: opacity .2s; }
.eplx-cons-slot__remove:hover { opacity: 1; }
.eplx-cons-slot__remove:disabled { opacity: .3; }
.eplx-cons-slot__info { display: flex; flex-direction: column; }
.eplx-cons-slot__name { overflow: hidden; font: 400 var(--eplx-body-xs) var(--eplx-font); text-overflow: ellipsis; white-space: nowrap; }
.eplx-cons-slot__insert { opacity: .4; font: 400 var(--eplx-caption) var(--eplx-font); }
.eplx-cons-slot__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font: 600 var(--eplx-body-xs) var(--eplx-font); }
.eplx-cons-slot__prices s { opacity: .2; font-weight: 400; }
.eplx-cons-slot__choose { min-height: 44px; }
/* CSS страницы выводится раньше common.css — перебиваем .eplx-btn--block { display: flex } специфичностью */
.eplx-cons-slot .eplx-cons-slot__mbtn { display: none; }

/* плашка комплекта (mobile) */
.eplx-cons-bar { display: none; }

/* каталог конструктора */
.eplx-cons__catalog { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--eplx-line-2); scroll-margin-top: 20px; }
.eplx-cons__catalog .eplx-catalog__title { font: 600 var(--eplx-h5) var(--eplx-font); }
.eplx-cons .eplx-grid { gap: 32px 12px; }
.eplx-cons .eplx-grid .eplx-card__actions { top: 10px; right: 10px; gap: 6px; }
.eplx-cons .eplx-grid .eplx-card__action, .eplx-cons .eplx-grid .eplx-card__action .eplx-icon { width: 20px; height: 20px; }
.eplx-cons .eplx-grid .eplx-card__label { top: 10px; left: 10px; }
.eplx-cons .eplx-grid .eplx-card__name { font: 400 var(--eplx-body-xs) var(--eplx-font); }
.eplx-cons .eplx-grid .eplx-card__insert { font: 400 var(--eplx-caption) var(--eplx-font); }
.eplx-cons .eplx-grid .eplx-card__price, .eplx-cons .eplx-grid .eplx-card__old-price { font: 600 var(--eplx-body-xs) var(--eplx-font); }

/* «Ваш комплект» */
.eplx-cons-panel { position: sticky; top: 20px; }
.eplx-cons-panel__box { display: flex; flex-direction: column; gap: 16px; }
.eplx-cons-panel__head { display: flex; justify-content: space-between; align-items: center; }
.eplx-cons-panel__title { font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-cons-panel__close { display: none; opacity: .4; }
.eplx-cons-panel__items { display: flex; flex-direction: column; gap: 8px; }
.eplx-cons-panel__item { display: grid; grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 12px; align-items: start; }
.eplx-cons-panel__photo { display: block; aspect-ratio: 1; border-radius: var(--eplx-radius-s); background: var(--eplx-card); overflow: hidden; }
.eplx-cons-panel__photo img { width: 100%; height: 100%; object-fit: contain; }
.eplx-cons-panel__info { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; min-width: 0; }
.eplx-cons-panel__name { font: 400 var(--eplx-body-xs) var(--eplx-font); }
.eplx-cons-panel__meta { opacity: .6; font: 400 var(--eplx-caption) var(--eplx-font); }
.eplx-cons-panel__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 4px; }
.eplx-cons-panel__price b { font: 600 var(--eplx-body-s) var(--eplx-font); }
.eplx-cons-panel__price s { opacity: .3; font: 400 var(--eplx-body-xs) var(--eplx-font); }
.eplx-cons-panel__remove { margin-top: 6px; opacity: .5; transition: opacity .2s; }
.eplx-cons-panel__remove:hover { opacity: 1; }
.eplx-cons-panel__remove:disabled { opacity: .2; }
.eplx-cons-panel__empty { opacity: .8; font: 400 var(--eplx-body-xs) var(--eplx-font); }
.eplx-cons-panel__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.eplx-cons-panel__total span { flex: 0 0 100%; opacity: .6; font: 400 var(--eplx-caption) var(--eplx-font); }
.eplx-cons-panel__total b { font: 600 var(--eplx-h5) var(--eplx-font); }
.eplx-cons-panel__total s { opacity: .3; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-cons-panel__clear { align-self: center; opacity: .4; font: 400 var(--eplx-body-xs) var(--eplx-font); text-decoration: underline; transition: opacity .2s; }
.eplx-cons-panel__clear:hover { opacity: .8; }
.eplx-cons-panel .eplx-cons-panel__back { display: none; }
.eplx-btn.is-loading { opacity: .6; pointer-events: none; }
.eplx-cons-overlay { display: none; }

.eplx-cons__more { margin-top: var(--eplx-section-gap); }
.eplx-cons__more-title { margin-bottom: 24px; font: 600 var(--eplx-h5) var(--eplx-font); }

/* выбор размера кольца перед добавлением в комплект (js/app.js) */
.eplx-popup__dialog.eplx-set-size { max-width: 480px; padding: 40px 32px 32px; }
.eplx-set-size__text { margin-bottom: 20px; opacity: .8; text-align: center; font: 400 var(--eplx-body-xs) var(--eplx-font); }
.eplx-set-size__text a { text-decoration: underline; }
.eplx-set-size__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.eplx-set-size__chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid #282828;
    border-radius: var(--eplx-radius-s);
    font: 400 var(--eplx-body-xs) var(--eplx-font);
    transition: border-color .2s;
}
.eplx-set-size__chip:hover { border-color: var(--eplx-white); }
.eplx-set-size__chip span { opacity: .6; font: 400 var(--eplx-caption) var(--eplx-font); }

@media (max-width: 1279px) {
    .eplx-cons__row { grid-template-columns: 220px minmax(0, 1fr) 260px; }
    .eplx-cons .eplx-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1023px) {
    .eplx-cons__row { grid-template-columns: 1fr; }
    .eplx-cons__side { order: 2; }
    .eplx-cons-cats { display: none; }
    .eplx-cons__intro { flex-direction: column; align-items: flex-start; gap: 8px; }

    .eplx-cons-chips {
        display: flex;
        gap: 8px;
        margin: 0 calc(var(--eplx-gutter) * -1) 20px;
        padding: 0 var(--eplx-gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .eplx-cons-chips::-webkit-scrollbar { display: none; }
    .eplx-cons-chips__item {
        flex: none;
        padding: 6px 16px 4px;
        border: 1px solid var(--eplx-white);
        border-radius: 20px;
        font: 400 var(--eplx-body-xs) var(--eplx-font);
    }
    .eplx-cons-chips__item.is-active { background: var(--eplx-white); color: #000; font-weight: 600; }

    .eplx-cons-slots { gap: 8px; }
    .eplx-cons-slot { gap: 8px; }
    /* плитки одной высоты — кнопки в ряд, даже если «Колье / подвеска» переносится */
    .eplx-cons-slot__head { flex: 1; padding: 8px 4px 6px; border-radius: var(--eplx-radius-s); }
    .eplx-cons-slot__label { order: 2; font: 400 var(--eplx-caption) var(--eplx-font); line-height: 12px; }
    .eplx-cons-slot.is-filled .eplx-cons-slot__cat { display: none; }
    .eplx-cons-slot.is-filled .eplx-cons-slot__cat--item { display: block; }
    .eplx-cons-slot__body { display: none; }
    .eplx-cons-slot .eplx-cons-slot__mbtn { display: flex; min-height: 32px; padding: 6px 4px; font: 600 var(--eplx-caption) var(--eplx-font); }

    .eplx-cons-bar { display: block; margin-top: 12px; }
    .eplx-cons-bar__btn {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 64px;
        padding: 8px 16px;
        border: 1px solid var(--eplx-line-2);
        border-radius: var(--eplx-radius);
        font: 600 var(--eplx-body-xs) var(--eplx-font);
    }
    .eplx-cons-bar__thumbs { display: flex; flex: 1; gap: 8px; }
    .eplx-cons-bar__thumbs span { width: 44px; height: 44px; border-radius: var(--eplx-radius-xs); background: var(--eplx-card); overflow: hidden; }
    .eplx-cons-bar__thumbs img { width: 100%; height: 100%; object-fit: contain; }
    .eplx-cons-bar__text { text-decoration: underline; }

    .eplx-cons-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 960;
        max-height: 85vh;
        overflow: auto;
        padding: 24px var(--eplx-gutter) 24px;
        border-radius: var(--eplx-radius) var(--eplx-radius) 0 0;
        background: var(--eplx-card);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .25s, visibility 0s .25s;
    }
    .eplx-cons-panel.is-open { transform: none; visibility: visible; transition: transform .25s; }
    .eplx-cons-panel__close { display: block; }
    .eplx-cons-panel__photo { background: #000; }
    .eplx-cons-panel .eplx-cons-panel__back { display: flex; }
    .eplx-cons-overlay.is-open { position: fixed; inset: 0; z-index: 955; display: block; background: rgba(0, 0, 0, .6); }

    .eplx-cons__catalog { margin-top: 32px; padding-top: 0; border-top: 0; }
    .eplx-cons .eplx-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .eplx-cons__title { font: 600 var(--eplx-h5) var(--eplx-font); }
    .eplx-cons__lead { font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-cons__catalog .eplx-catalog__title { font: 600 var(--eplx-body-m) var(--eplx-font); }
    .eplx-cons .eplx-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 8px; }
    .eplx-cons .eplx-grid .eplx-card__actions { top: 8px; right: 8px; gap: 4px; }
    .eplx-cons-panel__item { grid-template-columns: 80px minmax(0, 1fr) 24px; }
    .eplx-popup__dialog.eplx-set-size { padding: 40px 16px 24px; }
    .eplx-cons__more-title { font: 600 var(--eplx-body-m) var(--eplx-font); }
}