/* aeroyoga (2026-10): всплывающий баннер (layouts/ay_promo.php, media/js/ay-promo.js). Только var(--es-*), без COLOR_SITE. */
.ay-promo {
    position: fixed; right: 24px; bottom: 24px; z-index: 9000;
    width: 330px; max-width: calc(100vw - 24px);
    border-radius: 22px; overflow: hidden;
    background: linear-gradient(150deg, #2c1a31 0%, var(--es-dark, #1d1220) 70%);
    color: #fff; font-family: 'Manrope', sans-serif;
    box-shadow: 0 22px 60px rgba(29, 18, 32, .38), 0 0 0 1px rgba(255, 255, 255, .06) inset;
    opacity: 0; transform: translateY(28px) scale(.97); transform-origin: 100% 100%;
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2), bottom .35s ease;
}
.ay-promo[hidden] {display: none}
.ay-promo.is-open {opacity: 1; transform: none}
.ay-promo.is-instant {transition: none}

.ay-promo__image {position: relative; height: 140px}
.ay-promo__image img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%}
.ay-promo__image::after {content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, rgba(44, 26, 49, 0), #2c1a31)}

.ay-promo__close {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .92); color: var(--es-dark, #1d1220); cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: transform .2s, background .2s;
}
.ay-promo__close:hover {background: #fff; transform: rotate(90deg)}

.ay-promo__body {position: relative; padding: 18px 22px 22px}
.ay-promo--image .ay-promo__body {margin-top: -26px}
.ay-promo:not(.ay-promo--image) .ay-promo__body {padding-top: 22px; padding-right: 52px}

.ay-promo__title {font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25; color: #fff}
.ay-promo__price {margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1; color: #e7c6e8}
.ay-promo__price b {
    font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 46px; line-height: 1; color: #fff;
    background: linear-gradient(120deg, #fff 10%, #e9b8ea 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ay-promo__text {margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .74)}

.ay-promo__btn {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 16px;
    padding: 12px 20px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--es-primary, #a54ca8); color: #fff !important; text-decoration: none !important;
    font: 700 15px/1.2 'Manrope', sans-serif;
    box-shadow: 0 10px 24px rgba(165, 76, 168, .45); transition: background .2s, transform .2s, box-shadow .2s;
}
.ay-promo__btn:hover {background: var(--es-primary-dark, #8c3b8f); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(165, 76, 168, .55)}
.ay-promo__btn:focus-visible, .ay-promo__close:focus-visible {outline: 3px solid #e9b8ea; outline-offset: 2px}

/* телефон: компактная плашка внизу — без фото и текста, цена и кнопка в одну строку */
@media (max-width: 600px) {
    .ay-promo {left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; border-radius: 18px}
    .ay-promo__image, .ay-promo__text {display: none}
    .ay-promo .ay-promo__body, .ay-promo--image .ay-promo__body {
        display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
        margin: 0; padding: 14px 48px 14px 16px;
    }
    .ay-promo__title {grid-column: 1; font-size: 14px}
    .ay-promo__price {grid-column: 1; margin-top: 2px; font-size: 14px}
    .ay-promo__price b {font-size: 30px}
    .ay-promo__btn {grid-column: 2; grid-row: 1 / span 2; width: auto; min-height: 44px; margin: 0; padding: 10px 18px; font-size: 14px}
    .ay-promo__close {top: 50%; right: 8px; width: 30px; height: 30px; margin-top: -15px; background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none}
    .ay-promo__close:hover {background: rgba(255, 255, 255, .24)}
}

@media (prefers-reduced-motion: reduce) {
    .ay-promo, .ay-promo__btn, .ay-promo__close {transition: none}
}