/* Главная витрины ЭПЛ X (Figma → main PC / main mobile). */

/* ---------- hero ---------- */
.eplx-hero { position: relative; overflow: hidden; }
.eplx-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.eplx-hero__track::-webkit-scrollbar { display: none; }
.eplx-hero__slide { flex: 0 0 100%; scroll-snap-align: start; }
.eplx-hero__slide img { width: 100%; height: auto; aspect-ratio: 1440 / 601; object-fit: cover; }
.eplx-hero__dots { position: absolute; left: 50%; bottom: 24px; display: flex; gap: 8px; transform: translateX(-50%); }
.eplx-hero__dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--eplx-white); opacity: .3; }
.eplx-hero__dots button.is-active { opacity: 1; }
/* навигация лежит поверх hero — затемнение сверху, как в макете */
.eplx-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 120px;
    background: linear-gradient(#000, rgba(0, 0, 0, 0));
    pointer-events: none;
}
@media (max-width: 1023px) {
    .eplx-hero::before { display: none; }
}
@media (max-width: 767px) {
    .eplx-hero__slide img { aspect-ratio: 375 / 469; }
    .eplx-hero__dots { bottom: 16px; }
}

/* ---------- секции ---------- */
.eplx-home { display: flex; flex-direction: column; gap: var(--eplx-section-gap); padding-top: var(--eplx-section-gap); }
.eplx-sec { scroll-margin-top: 20px; }
.eplx-sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.eplx-sec-head__label { opacity: .4; font: 400 var(--eplx-body-m) var(--eplx-font); }
.eplx-sec-head__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.eplx-sec-head__title { max-width: 760px; font: 400 var(--eplx-h4) var(--eplx-font); }
.eplx-sec-head__title b { font-weight: 600; }
.eplx-sec-head__link { flex: none; }
.eplx-sec-head__text { max-width: 1060px; margin-top: 4px; opacity: .8; font: 400 var(--eplx-body-m) var(--eplx-font); }
@media (max-width: 767px) {
    .eplx-home { gap: 60px; padding-top: 40px; }
    .eplx-sec-head { gap: 8px; margin-bottom: 20px; }
    .eplx-sec-head__label { font: 400 var(--eplx-caption) var(--eplx-font); }
    .eplx-sec-head__row { flex-direction: column; gap: 8px; }
    .eplx-sec-head__title { font: 400 var(--eplx-body-s) var(--eplx-font); }
    .eplx-sec-head__text { margin-top: 0; font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-sec-head__link { font: 400 var(--eplx-body-xs) var(--eplx-font); text-decoration: underline; }
}

/* ---------- категории ---------- */
.eplx-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.eplx-cats__item { display: flex; flex-direction: column; gap: 12px; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-cats__img { aspect-ratio: 196 / 200; border-radius: var(--eplx-radius); overflow: hidden; background: var(--eplx-card-dark); }
.eplx-cats__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.eplx-cats__item:hover img { transform: scale(1.04); }
@media (max-width: 1023px) {
    .eplx-cats { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--eplx-gutter) * -1); padding: 0 var(--eplx-gutter); scrollbar-width: none; }
    .eplx-cats::-webkit-scrollbar { display: none; }
    .eplx-cats__item { flex: 0 0 160px; gap: 8px; font: 400 var(--eplx-body-xs) var(--eplx-font); }
}

/* ---------- баннер ---------- */
.eplx-banner { position: relative; border-radius: var(--eplx-radius); overflow: hidden; }
.eplx-banner__link { display: block; }
.eplx-banner img { width: 100%; height: auto; aspect-ratio: 1280 / 453; object-fit: cover; }
.eplx-banner__text { position: absolute; right: 0; bottom: 40px; width: 351px; font: 400 var(--eplx-h4) var(--eplx-font); }
.eplx-banner__text b { font-weight: 600; }
@media (max-width: 767px) {
    .eplx-banner img { aspect-ratio: 343 / 568; }
    .eplx-banner__text { top: 40px; left: 36px; right: auto; bottom: auto; width: 153px; font: 400 var(--eplx-body-s) var(--eplx-font); }
}

/* ---------- конструктор (тизер) ---------- */
.eplx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.eplx-steps__item { padding: 28px 24px; border-radius: var(--eplx-radius); background: var(--eplx-card); }
.eplx-steps__num { padding-bottom: 12px; border-bottom: 1px solid rgba(79, 79, 79, .3); font: 600 var(--eplx-h5) var(--eplx-font); }
.eplx-steps__title { padding-top: 12px; font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-steps__text { margin-top: 4px; opacity: .8; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-set { display: grid; grid-template-columns: 847fr 413fr; gap: 20px; }
.eplx-set__items {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--eplx-line-2);
    border-radius: var(--eplx-radius);
}
.eplx-set__item { position: relative; width: 228px; }
.eplx-set__img { display: block; aspect-ratio: 228 / 244; background: var(--eplx-card-dark); }
.eplx-set__img img { width: 100%; height: 100%; object-fit: contain; }
.eplx-set__tick {
    position: absolute;
    top: 13px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--eplx-white);
    color: #000;
}
.eplx-set__summary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 38px;
    padding: 28px 32px;
    border: 1px solid var(--eplx-line-2);
    border-radius: var(--eplx-radius);
}
.eplx-set__title { margin-bottom: 8px; font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-set__thumbs { display: flex; gap: 8px; }
.eplx-set__thumbs span { width: 105px; aspect-ratio: 105 / 112; background: var(--eplx-card-dark); }
.eplx-set__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.eplx-set__count { margin-top: 16px; opacity: .6; font: 400 var(--eplx-body-xs) var(--eplx-font); }
@media (max-width: 1023px) {
    .eplx-set { grid-template-columns: 1fr; }
    .eplx-set__items { display: none; }
}
@media (max-width: 767px) {
    .eplx-steps { grid-template-columns: 1fr; gap: 8px; }
    .eplx-steps__item { padding: 20px 24px; text-align: center; }
    .eplx-steps__num { padding-bottom: 8px; font: 600 var(--eplx-body-m) var(--eplx-font); }
    .eplx-steps__title { padding-top: 8px; font: 600 var(--eplx-body-s) var(--eplx-font); }
    .eplx-steps__text { font: 400 var(--eplx-caption) var(--eplx-font); }
    .eplx-set__summary { gap: 32px; padding: 28px 24px; }
    .eplx-set__title { font: 600 var(--eplx-body-s) var(--eplx-font); }
    .eplx-set__thumbs span { flex: 1; width: auto; }
}

/* ---------- код ЭПЛ ---------- */
.eplx-code-cards { display: grid; grid-template-columns: 755fr 505fr; gap: 20px; margin-bottom: 20px; }
.eplx-code-card {
    position: relative;
    min-height: 180px;
    padding: 32px;
    border-radius: var(--eplx-radius);
    overflow: hidden;
    background: var(--eplx-card);
}
.eplx-code-card__text { position: relative; z-index: 1; max-width: 513px; display: flex; flex-direction: column; gap: 4px; }
.eplx-code-card__text b { font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-code-card__text span { opacity: .8; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-code-card--wide .eplx-code-card__text { max-width: 513px; }
.eplx-code-card:not(.eplx-code-card--wide) .eplx-code-card__text { max-width: 315px; }
.eplx-code-card__img { position: absolute; width: 452px; max-width: none; left: 427px; top: -38px; }
.eplx-code-card:not(.eplx-code-card--wide) .eplx-code-card__img { width: 473px; left: 170px; top: -97px; }
.eplx-code { display: grid; grid-template-columns: 484px 1fr; gap: 60px; align-items: center; }
.eplx-code__form { display: flex; flex-direction: column; gap: 8px; padding: 32px; border-radius: var(--eplx-radius); background: var(--eplx-card); }
.eplx-code__title { margin-bottom: 4px; font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-code__error { color: var(--eplx-red); font: 400 var(--eplx-body-xs) var(--eplx-font); text-align: center; }
.eplx-code__error:empty { display: none; }
.eplx-code__promo-title { font: 400 var(--eplx-h4) var(--eplx-font); }
.eplx-code__promo-title b, .eplx-code__promo-text b { font-weight: 600; }
.eplx-code__promo-text { margin-top: 8px; opacity: .8; font: 400 var(--eplx-body-m) var(--eplx-font); }
@media (max-width: 1023px) {
    .eplx-code-cards { grid-template-columns: 1fr; gap: 12px; }
    .eplx-code { grid-template-columns: 1fr; gap: 20px; }
    .eplx-code__promo { order: -1; }
}
@media (max-width: 767px) {
    .eplx-code-card { min-height: 180px; padding: 24px; }
    .eplx-code-card__text { max-width: 60% !important; }
    .eplx-code-card__text b { font: 600 var(--eplx-body-s) var(--eplx-font); }
    .eplx-code-card__text span { font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-code-card__img { width: 260px !important; left: auto !important; right: -70px; top: -10px !important; }
    .eplx-code-card:not(.eplx-code-card--wide) .eplx-code-card__img { top: -70px !important; right: -60px; }
    .eplx-code__form { padding: 32px 24px; }
    .eplx-code__title { font: 600 var(--eplx-body-s) var(--eplx-font); }
    .eplx-code__promo { order: 0; text-align: center; }
    .eplx-code__promo-title { font: 400 var(--eplx-body-s) var(--eplx-font); }
    .eplx-code__promo-text { font: 400 var(--eplx-body-xs) var(--eplx-font); }
}

/* попап результата */
.eplx-popup__dialog.eplx-code-popup { max-width: 853px; padding: 40px; }
.eplx-code-res__top { display: grid; grid-template-columns: 294px 1fr; gap: 16px; }
.eplx-code-res__top.is-no-photo { grid-template-columns: 1fr; }
.eplx-code-res__photo { aspect-ratio: 294 / 294; background: #000; display: flex; align-items: center; justify-content: center; }
.eplx-code-res__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.eplx-code-res__title { margin-bottom: 20px; font: 600 var(--eplx-h5) var(--eplx-font); }
.eplx-code-res__sub { margin-bottom: 12px; font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-code-res__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
@media (max-width: 767px) {
    .eplx-popup__dialog.eplx-code-popup { padding: 40px 16px 24px; }
    .eplx-code-res__top { grid-template-columns: 1fr; }
    .eplx-code-res__title { margin-bottom: 12px; font: 600 var(--eplx-body-m) var(--eplx-font); }
    .eplx-code-res__rows, .eplx-code-res__table { font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-code-res__btns { grid-template-columns: 1fr; }
}

/* ---------- доставка ---------- */
.eplx-delivery { display: flex; flex-direction: column; gap: 20px; }
.eplx-delivery__row { display: grid; grid-template-columns: 484fr 776fr; gap: 20px; align-items: start; }
.eplx-delivery__head, .eplx-delivery__body { padding: 32px; border-radius: var(--eplx-radius); background: var(--eplx-card); }
.eplx-delivery__title { font: 400 var(--eplx-body-m) var(--eplx-font); }
.eplx-delivery__title b { font-weight: 600; }
.eplx-delivery__more { display: none; }
.eplx-delivery__body { display: flex; flex-direction: column; gap: 20px; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-delivery__body p:not(:last-of-type) { padding-bottom: 20px; border-bottom: 1px solid var(--eplx-line); }
.eplx-delivery__track { font: 400 var(--eplx-body-s) var(--eplx-font); }
@media (max-width: 767px) {
    .eplx-delivery { gap: 12px; }
    .eplx-delivery__row { grid-template-columns: 1fr; gap: 0; border-radius: var(--eplx-radius); background: var(--eplx-card); }
    .eplx-delivery__head { padding: 32px 32px 24px; }
    .eplx-delivery__title { font: 400 var(--eplx-body-s) var(--eplx-font); }
    .eplx-delivery__more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        font: 400 var(--eplx-body-s) var(--eplx-font);
        text-decoration: underline;
    }
    .eplx-delivery__more .eplx-icon { transition: transform .2s; }
    .eplx-delivery__row.is-open .eplx-delivery__more .eplx-icon { transform: rotate(90deg); }
    .eplx-delivery__body { display: none; padding: 0 32px 32px; font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-delivery__row.is-open .eplx-delivery__body { display: flex; }
}

/* ---------- оплата ---------- */
.eplx-pay { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.eplx-pay__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 0 12px;
    border-radius: var(--eplx-radius);
    background: var(--eplx-card);
    transition: background-color .2s;
}
.eplx-pay__item:hover { background: #1c1c1c; }
.eplx-pay__logo { max-width: 141px; max-height: 24px; }
.eplx-pay__label { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--eplx-body-s) var(--eplx-font); white-space: nowrap; }
.eplx-popup__dialog.eplx-pay-popup { max-width: 876px; padding: 40px 48px; }
.eplx-pay-popup .eplx-popup__title { text-align: left; }
.eplx-pay-popup__text { font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-pay-popup__text .eplx-pay-popup__subtitle { margin: 32px 0 8px; font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-pay-popup__text p + p { margin-top: 8px; }
.eplx-pay-popup__text ul { list-style: disc; padding-left: 22px; }
.eplx-pay-popup__link { margin-top: 40px; }
@media (max-width: 1023px) {
    .eplx-pay { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .eplx-pay { grid-template-columns: 1fr; gap: 8px; }
    .eplx-pay__item { height: 48px; }
    .eplx-pay__label { font: 600 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-pay__logo { max-height: 20px; }
    .eplx-popup__dialog.eplx-pay-popup { padding: 40px 16px 24px; }
    .eplx-pay-popup__text { font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-pay-popup__text .eplx-pay-popup__subtitle { margin-top: 20px; font: 600 var(--eplx-body-s) var(--eplx-font); }
    .eplx-pay-popup__link { margin-top: 24px; }
}

/* ---------- о нас ---------- */
.eplx-about {
    display: grid;
    grid-template-columns: 638fr 76fr 476fr 90fr;
    gap: 80px 0;
    scroll-margin-top: 20px;
}
.eplx-about img { width: 100%; height: 100%; object-fit: cover; }
.eplx-about__intro { grid-column: 1; align-self: center; max-width: 508px; }
.eplx-about__intro .eplx-sec-head__label { margin-bottom: 12px; }
.eplx-about__title { margin-bottom: 16px; font: 600 var(--eplx-h4) var(--eplx-font); }
.eplx-about__intro p { opacity: .8; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-about__intro p b, .eplx-about__lux b, .eplx-about__mission b, .eplx-about__goals b { font-weight: 600; }
.eplx-about__img--1 { grid-column: 2 / 5; height: 384px; margin-left: 20px; }
.eplx-about__pair { grid-column: 1; display: grid; grid-template-columns: 272fr 346fr; gap: 20px; height: 384px; }
.eplx-about__lux { grid-column: 3 / 5; align-self: center; max-width: 508px; }
.eplx-about__lux-title { margin-bottom: 16px; font: 400 var(--eplx-h4) var(--eplx-font); }
.eplx-about__lux p:last-child { opacity: .8; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-about__mission { grid-column: 1 / 5; }
.eplx-about__mission-title { margin-bottom: 16px; font: 400 var(--eplx-h4) var(--eplx-font); }
.eplx-about__mission p:last-child { opacity: .8; font: 400 var(--eplx-body-m) var(--eplx-font); }
.eplx-about__img--4 { grid-column: 1; height: 447px; }
.eplx-about__goals { grid-column: 3; align-self: center; display: flex; flex-direction: column; gap: 40px; list-style: none; margin: 0; padding: 0; }
.eplx-about__goals span { display: block; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--eplx-line); font: 400 var(--eplx-h4) var(--eplx-font); }
.eplx-about__goals p { opacity: .8; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-about__img { border-radius: 0; overflow: hidden; }
@media (max-width: 1023px) {
    .eplx-about { grid-template-columns: 1fr; gap: 40px; }
    .eplx-about > * { grid-column: 1 !important; margin: 0 !important; max-width: none !important; }
    .eplx-about__img--1, .eplx-about__pair, .eplx-about__img--4 { height: auto; }
    .eplx-about__img--1 img { aspect-ratio: 343 / 212; }
    .eplx-about__pair img { aspect-ratio: 166 / 206; }
    .eplx-about__img--4 img { aspect-ratio: 343 / 240; }
}
@media (max-width: 767px) {
    .eplx-about__title { font: 600 var(--eplx-body-m) var(--eplx-font); }
    .eplx-about__intro p, .eplx-about__lux p:last-child, .eplx-about__goals p { font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-about__lux, .eplx-about__lux-title { text-align: right; }
    .eplx-about__lux-title, .eplx-about__mission-title { margin-bottom: 4px; font: 400 var(--eplx-body-s) var(--eplx-font); }
    .eplx-about__mission p:last-child { font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-about__pair { gap: 11px; }
    .eplx-about__goals { gap: 20px; }
    .eplx-about__goals span { text-align: center; font: 400 var(--eplx-body-m) var(--eplx-font); }
    .eplx-about__goals p { text-align: center; }
}