/* ═══════════════════════════════════════════════════════════════════════════
   E-Girl Profile Page — eg-profile.css
   Premium glassmorphism hero block for single product pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (shared from eg-catalog.css) ─────────────────── */
:root {
    --ep-bg: #0d0b18;
    --ep-surface: #15122a;
    --ep-surface-2: #1c1935;
    --ep-surface-3: #252240;
    --ep-border: rgba(138, 92, 246, 0.18);
    --ep-border-hover: rgba(138, 92, 246, 0.50);
    --ep-purple: #8a5cf6;
    --ep-purple-light: #a78bfa;
    --ep-purple-dark: #6d28d9;
    --ep-purple-glow: rgba(138, 92, 246, 0.25);
    --ep-pink: #ec4899;
    --ep-green: #22c55e;
    --ep-green-glow: rgba(34, 197, 94, 0.25);
    --ep-text: #f0eff8;
    --ep-text-muted: #9896b4;
    --ep-text-dim: #5c5a7e;
    --ep-r-sm: 12px;
    --ep-r: 18px;
    --ep-r-lg: 22px;
    --ep-r-pill: 999px;
    --ep-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
    --ep-glow: 0 0 30px var(--ep-purple-glow);
    --ep-t: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Zoom/resize layout-bug fix (1/2): without this, the vertical scrollbar
   appearing/disappearing as content height crosses the viewport height
   threshold shifts the available content width by the scrollbar's own
   width (~15-17px on Windows/Linux). Browser zoom (Ctrl+/Ctrl-) on this
   page crosses that threshold repeatedly as it resizes the layout
   viewport, and that ~15-17px jitter is exactly wide enough to flip how
   many columns fit in the auto-fill/minmax() grids further down this
   page (e.g. .plans__boxes), which is what reads as "columns/cards land
   in the wrong place after zoom". scrollbar-gutter:stable reserves the
   scrollbar's track permanently, so content width stays constant whether
   or not a scrollbar is actually drawn -- scoped to body.girl__body (the
   product/profile page's own body class, see header.php) so no other
   page's layout width changes by this. */
body.girl__body {
    scrollbar-gutter: stable;
}

/* ── Hero wrapper ───────────────────────────────────────────────────────── */
.ep-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 45%, rgba(50, 35, 88, 0.45) 0%, rgba(13, 11, 24, 0.96) 68%);
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: visible;
    pointer-events: auto;
}

.ep-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ep-loader__brand {
    font-size: clamp(1.3rem, 2.3vw, 1.9rem);
    letter-spacing: 0.3em;
    font-weight: 800;
    color: #f6efff;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(138, 92, 246, 0.48), 0 0 34px rgba(236, 72, 153, 0.34);
    animation: ep-loader-neon 1.4s ease-in-out infinite;
}

@keyframes ep-loader-neon {

    0%,
    100% {
        opacity: 0.85;
        transform: scale(0.985);
        text-shadow: 0 0 12px rgba(138, 92, 246, 0.4), 0 0 22px rgba(236, 72, 153, 0.26);
    }

    50% {
        opacity: 1;
        transform: scale(1.015);
        text-shadow: 0 0 20px rgba(138, 92, 246, 0.68), 0 0 38px rgba(236, 72, 153, 0.52);
    }
}

.ep-hero {
    max-width: 1300px;
    margin: 0 auto !important;
    padding: 102px 50px 48px !important;
    scroll-margin-top: 96px;
}

.ep-section-nav {
    position: fixed;
    top: 50%;
    right: max(14px, calc((100vw - 1300px) / 2 - 190px));
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 154px;
    padding: 8px;
    border: 1px solid rgba(173, 145, 255, 0.26);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(20, 15, 42, 0.72), rgba(12, 9, 25, 0.66));
    box-shadow: 0 16px 38px rgba(5, 3, 14, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateY(-50%);
}

.ep-section-nav__link {
    position: relative;
    display: grid;
    grid-template-columns: 10px 1fr;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 12px;
    color: rgba(239, 233, 255, 0.72) !important;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: color var(--ep-t), background var(--ep-t), transform var(--ep-t);
}

.ep-section-nav__link:hover,
.ep-section-nav__link.is-active {
    color: #ffffff !important;
    background: rgba(151, 105, 255, 0.16);
    transform: translateX(-2px);
}

.ep-section-nav__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(173, 145, 255, 0.46);
    box-shadow: 0 0 0 4px rgba(173, 145, 255, 0.08);
    transition: background var(--ep-t), box-shadow var(--ep-t), transform var(--ep-t);
}

.ep-section-nav__link.is-active .ep-section-nav__dot {
    background: linear-gradient(135deg, var(--ep-purple-light), var(--ep-pink));
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.66), 0 0 0 4px rgba(236, 72, 153, 0.1);
    transform: scale(1.18);
}

.ep-section-nav__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#reviews,
#plans,
#booking-calendar,
#faq,
#final {
    scroll-margin-top: 96px;
}

.ep-hero *,
.ep-hero *::before,
.ep-hero *::after {
    box-sizing: border-box;
}

.ep-hero__inner {
    display: grid;
    grid-template-columns: minmax(320px, 480px) 1fr;
    gap: 40px;
    background: linear-gradient(145deg, rgba(21, 18, 42, 0.92) 0%, rgba(28, 25, 53, 0.92) 100%);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-lg);
    padding: 28px;
    box-shadow: var(--ep-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}

/* Glow orbs */
.ep-hero__inner::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(138, 92, 246, 0.14) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.ep-hero__inner::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

/* ── Gallery (left) ─────────────────────────────────────────────────────── */
.ep-gallery {
    position: relative;
    z-index: 1;
}

.ep-gallery__main {
    position: relative;
    border-radius: var(--ep-r);
    overflow: clip;
    /* was: hidden — clip сохраняет border-radius но не режет position:absolute детей с backdrop-filter */
    aspect-ratio: 3 / 4;
    background: var(--ep-surface-2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 40px var(--ep-purple-glow);
    cursor: pointer;
}

.ep-gallery__main.is-online {
    animation: ep-online-glow 2s ease-in-out infinite;
}

.ep-gallery__main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease;
    margin: 0 !important;
}

.ep-gallery__main:hover img {
    transform: scale(1.04);
}

.ep-mobile-identity {
    display: none;
}

@keyframes ep-online-glow {

    0%,
    100% {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(34, 197, 94, 0.28), 0 0 55px rgba(34, 197, 94, 0.18);
    }

    50% {
        box-shadow: 0 10px 44px rgba(0, 0, 0, 0.58), 0 0 46px rgba(34, 197, 94, 0.52), 0 0 84px rgba(34, 197, 94, 0.34);
    }
}

/* Online badge on gallery */
.ep-gallery__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--ep-r-pill);
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: #4ade80;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2;
}

.ep-gallery__badge.is-offline {
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.38);
    color: #cbd5e1;
}

.ep-gallery__badge::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ep-green);
    box-shadow: 0 0 8px var(--ep-green);
    animation: ep-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

.ep-gallery__badge.is-offline::before {
    background: #94a3b8;
    box-shadow: none;
}

@keyframes ep-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.35);
    }
}

/* ── Achievement badges on gallery photo ── */
.ep-gallery__achievements {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
    max-width: calc(100% - 28px);
}

.ep-achievement-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--ep-r-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    /* backdrop-filter убран: вызывает баг невидимости внутри overflow:clip + border-radius в Safari/Chrome */
    animation: ep-badge-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    white-space: nowrap;
    /* fallback purple — на случай если data-color не совпал ни с одним селектором */
    background: rgba(16, 10, 34, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ep-achievement-badge:nth-child(1) {
    animation-delay: 0.1s;
}

.ep-achievement-badge:nth-child(2) {
    animation-delay: 0.2s;
}

.ep-achievement-badge:nth-child(3) {
    animation-delay: 0.3s;
}

.ep-achievement-badge:nth-child(4) {
    animation-delay: 0.4s;
}

.ep-achievement-badge:nth-child(5) {
    animation-delay: 0.5s;
}

.ep-achievement-badge:nth-child(6) {
    animation-delay: 0.6s;
}

.ep-achievement-badge__emoji {
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* WordPress заменяет эмодзи на <img class="emoji"> — ограничиваем размер */
.ep-achievement-badge__emoji img.emoji,
.ep-achievement-badge img.emoji {
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    max-height: 1em !important;
    min-width: unset !important;
    min-height: unset !important;
    display: inline-block !important;
    vertical-align: -0.1em;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

@keyframes ep-badge-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.85);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Color variants */
.ep-achievement-badge[data-color="purple"] {
    background: rgba(76, 29, 149, 0.72);
    border: 1px solid rgba(196, 181, 253, 0.82);
    color: #f3f0ff;
}

.ep-achievement-badge[data-color="pink"] {
    background: rgba(131, 24, 67, 0.72);
    border: 1px solid rgba(249, 168, 212, 0.82);
    color: #ffe6f3;
}

.ep-achievement-badge[data-color="gold"] {
    background: rgba(120, 53, 15, 0.74);
    border: 1px solid rgba(253, 230, 138, 0.88);
    color: #fff6cf;
}

.ep-achievement-badge[data-color="blue"] {
    background: rgba(30, 58, 138, 0.72);
    border: 1px solid rgba(147, 197, 253, 0.82);
    color: #e9f2ff;
}

.ep-achievement-badge[data-color="red"] {
    background: rgba(127, 29, 29, 0.74);
    border: 1px solid rgba(252, 165, 165, 0.86);
    color: #ffe8e8;
}

.ep-achievement-badge[data-color="green"] {
    background: rgba(20, 83, 45, 0.74);
    border: 1px solid rgba(134, 239, 172, 0.86);
    color: #eafff0;
}

/* Thumbnails */
.ep-gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.ep-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.ep-reactions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ep-mini-cta {
    display: none;
}

.ep-reaction-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(173, 145, 255, 0.3);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(28, 20, 56, 0.86), rgba(17, 12, 35, 0.86));
    color: #f4eeff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    padding: 7px 10px;
    cursor: pointer;
    transition: transform var(--ep-t), border-color var(--ep-t), box-shadow var(--ep-t);
}

.ep-reaction-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 191, 255, 0.55);
    box-shadow: 0 6px 16px rgba(11, 8, 23, 0.42), 0 0 14px rgba(138, 92, 246, 0.25);
}

.ep-reaction-btn.is-pop {
    animation: ep-reaction-pop 0.32s ease;
}

.ep-reaction-btn.is-locked {
    opacity: 0.72;
    cursor: default;
    border-color: rgba(173, 145, 255, 0.18);
    box-shadow: none;
}

.ep-reaction-btn.is-locked:hover {
    transform: none;
    border-color: rgba(173, 145, 255, 0.18);
    box-shadow: none;
}

.ep-reaction-btn__emoji {
    font-size: 0.92rem;
    line-height: 1;
}

.ep-reaction-btn__count {
    min-width: 1.2em;
    text-align: right;
}

.ep-reaction-plus {
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translate(-50%, 0);
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    pointer-events: none;
    animation: ep-reaction-plus 0.62s ease forwards;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

@keyframes ep-reaction-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ep-reaction-plus {
    0% {
        opacity: 0;
        transform: translate(-50%, 4px);
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -22px);
    }
}

.ep-gallery__thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--ep-r-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.55;
    transition: opacity var(--ep-t), border-color var(--ep-t), transform var(--ep-t);
}

.ep-gallery__thumb.is-active,
.ep-gallery__thumb:hover {
    opacity: 1;
    border-color: var(--ep-purple);
    transform: scale(1.05);
}

.ep-gallery__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

/* ── Info (right) ───────────────────────────────────────────────────────── */
.ep-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Name + rating row */
.ep-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ep-name {
    font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
    font-weight: 800 !important;
    color: #f7f3ff !important;
    /* fallback for browsers without text-clip support */
    margin: 0 !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 14px rgba(10, 8, 22, 0.45);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ep-name {
        background-image: linear-gradient(120deg, #a78bfa 0%, #8b5cf6 42%, #ec4899 100%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent !important;
        -webkit-text-fill-color: transparent;
        text-shadow: none;
    }
}

.ep-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ep-rating .star-rating {
    color: #fbbf24 !important;
    font-size: 0.9rem;
}

.ep-rating__count {
    font-size: 0.82rem;
    color: var(--ep-text-muted);
    font-weight: 500;
}

/* Status row */
.ep-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ep-status__slot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--ep-r-pill);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    font-size: 0.82rem;
    font-weight: 600;
    color: #4ade80;
}

.ep-status__slot.is-offline {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.34);
    color: #cbd5e1;
}

.ep-status__slot .product-slot {
    color: inherit !important;
    font-size: inherit !important;
}

.ep-status__slot .good-slot-status {
    margin: 0 !important;
    padding: 0 !important;
}

.ep-status__viewers {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--ep-r-pill);
    background: rgba(143, 113, 255, 0.12);
    border: 1px solid rgba(173, 145, 255, 0.38);
    color: #f1eaff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 0 0 rgba(173, 145, 255, 0);
    animation: ep-viewers-pulse 2s ease-in-out infinite;
}

.ep-status__viewers-icon {
    font-size: 0.92rem;
    line-height: 1;
}

.ep-status__viewers-text {
    white-space: nowrap;
}

.ep-status__viewers-count {
    display: inline-block;
    min-width: 1.4em;
    text-align: right;
    color: #ffffff;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ep-status__viewers-count.is-changing {
    opacity: 0.45;
    transform: translateY(-2px);
}

@keyframes ep-viewers-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(173, 145, 255, 0);
        border-color: rgba(173, 145, 255, 0.35);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(173, 145, 255, 0.08);
        border-color: rgba(196, 174, 255, 0.55);
    }
}

/* Corner time button — top-right of hero card */
.ep-time-corner {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--ep-r-pill);
    background: linear-gradient(135deg, var(--ep-purple) 0%, var(--ep-purple-dark) 100%);
    color: #fff !important;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(138, 92, 246, 0.5), 0 0 0 2px rgba(138, 92, 246, 0.2);
    transition: all var(--ep-t);
    animation: ep-time-glow 2.4s ease-in-out infinite;
    white-space: nowrap;
}

.ep-time-corner:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 32px rgba(138, 92, 246, 0.7), 0 0 0 3px rgba(138, 92, 246, 0.3);
    color: #fff !important;
    text-decoration: none !important;
}

@keyframes ep-time-glow {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(138, 92, 246, 0.5), 0 0 0 2px rgba(138, 92, 246, 0.2);
    }

    50% {
        box-shadow: 0 4px 28px rgba(138, 92, 246, 0.7), 0 0 0 4px rgba(138, 92, 246, 0.15);
    }
}

/* Voice greeting — Telegram-like voice message bubble, WGirls palette */
.ep-voice-bubble {
    --voice-progress: 0%;
    width: fit-content;
    max-width: min(430px, 100%);
    min-width: 370px;
    min-height: 74px;
    margin: 14px 0 18px;
    padding: 12px 16px 12px 12px;
    display: grid;
    grid-template-columns: 50px minmax(260px, 1fr);
    gap: 14px;
    align-items: center;
    position: relative;
    cursor: pointer;
    overflow: visible;
    border-radius: 28px;
    border: 1px solid rgba(190, 170, 255, 0.18);
    background:
        radial-gradient(circle at 12% 45%, rgba(132, 96, 255, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
        rgba(22, 18, 36, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 16px 34px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.ep-voice-bubble__play {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.96), rgba(232, 224, 255, 0.92) 48%, rgba(190, 170, 255, 0.86));
    color: #7658f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    cursor: pointer;
    box-shadow:
        0 10px 26px rgba(126, 91, 255, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
    transition:
        transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
        filter 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ep-voice-bubble:hover .ep-voice-bubble__play {
    transform: scale(1.035);
    filter: brightness(1.035);
}

.ep-voice-bubble__pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(220, 205, 255, 0.42);
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
}

.ep-voice-bubble.is-playing .ep-voice-bubble__pulse {
    animation: epVoiceBubblePulse 1.55s ease-in-out infinite;
}

@keyframes epVoiceBubblePulse {

    0%,
    100% {
        opacity: 0;
        transform: scale(1);
    }

    45% {
        opacity: 0.62;
        transform: scale(1.22);
    }
}

.ep-voice-bubble__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    position: relative;
    z-index: 2;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.ep-voice-bubble.is-rewinding .ep-voice-bubble__play {
    transform: scale(0.98);
    filter: brightness(0.98);
}

.ep-voice-bubble__icon svg {
    display: block;
}

.ep-voice-bubble__icon--play svg {
    width: 31px;
    height: 31px;
    margin-left: 2px;
}

.ep-voice-bubble__icon--pause {
    display: none;
}

.ep-voice-bubble.is-playing .ep-voice-bubble__icon--play {
    display: none;
}

.ep-voice-bubble.is-playing .ep-voice-bubble__icon--pause {
    display: inline-flex;
}

.ep-voice-bubble__content {
    min-width: 0;
    position: relative;
    z-index: 2;
}

.ep-voice-bubble__wave {
    --voice-progress: 0%;
    position: relative;
    width: 100%;
    min-width: 250px;
    height: 31px;
    margin: 0 0 7px;
    overflow: hidden;
}

.ep-voice-bubble__wave-track,
.ep-voice-bubble__wave-fill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.ep-voice-bubble__wave-track span,
.ep-voice-bubble__wave-fill span {
    flex: 0 0 3px;
    width: 3px;
    height: 10px;
    border-radius: 999px;
    transform-origin: center;
}

.ep-voice-bubble__wave-track span {
    background: rgba(151, 132, 204, 0.36);
    opacity: 0.82;
}

.ep-voice-bubble__wave-fill {
    width: var(--voice-progress);
    overflow: hidden;
    transition: width 0.09s linear;
    will-change: width;
}

.ep-voice-bubble.is-ending .ep-voice-bubble__wave-fill {
    transition: width 0.16s linear;
}

.ep-voice-bubble.is-rewinding .ep-voice-bubble__wave-fill {
    transition: width 0.52s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ep-voice-bubble__wave-fill span {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(191, 168, 255, 0.96));
    opacity: 1;
}

.ep-voice-bubble__wave span:nth-child(2n) {
    height: 14px;
}

.ep-voice-bubble__wave span:nth-child(3n) {
    height: 21px;
}

.ep-voice-bubble__wave span:nth-child(4n) {
    height: 12px;
}

.ep-voice-bubble__wave span:nth-child(5n) {
    height: 25px;
}

.ep-voice-bubble__wave span:nth-child(7n) {
    height: 17px;
}

.ep-voice-bubble__wave span:nth-child(11n) {
    height: 28px;
}

.ep-voice-bubble.is-playing .ep-voice-bubble__wave-track span,
.ep-voice-bubble.is-playing .ep-voice-bubble__wave-fill span {
    animation: epVoiceBubbleSoftWave 1.42s ease-in-out infinite;
}

.ep-voice-bubble.is-playing .ep-voice-bubble__wave span:nth-child(2n) {
    animation-delay: 0.08s;
}

.ep-voice-bubble.is-playing .ep-voice-bubble__wave span:nth-child(3n) {
    animation-delay: 0.16s;
}

.ep-voice-bubble.is-playing .ep-voice-bubble__wave span:nth-child(4n) {
    animation-delay: 0.24s;
}

@keyframes epVoiceBubbleSoftWave {

    0%,
    100% {
        transform: scaleY(0.94);
    }

    50% {
        transform: scaleY(1.10);
    }
}

.ep-voice-bubble__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    line-height: 1;
    font-weight: 850;
    color: rgba(230, 222, 255, 0.80);
}

.ep-voice-bubble__label {
    color: rgba(205, 184, 255, 0.86);
}

.ep-voice-bubble__dot {
    opacity: 0.42;
}

@media (max-width: 720px) {
    .ep-voice-bubble {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        grid-template-columns: 46px 1fr;
        gap: 12px;
        padding: 11px 13px 11px 11px;
        border-radius: 26px;
    }

    .ep-voice-bubble__play {
        width: 46px;
        height: 46px;
    }

    .ep-voice-bubble__icon--play svg {
        width: 25px;
        height: 25px;
    }

    .ep-voice-bubble__wave {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ep-voice-bubble,
    .ep-voice-bubble *,
    .ep-voice-bubble::before {
        animation: none !important;
        transition: none !important;
    }
}

/* Description card */
.ep-about {
    padding: 18px 22px;
    border-radius: var(--ep-r);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ep-border);
    backdrop-filter: blur(6px);
}

.ep-about__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ep-purple-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

/* Collapsible text — height itself is now owned by the inline-script toggle
   in single-product-egirl.php (it measures real scrollHeight and animates
   to/from that exact pixel value), not by a CSS class rule. A fixed
   `.is-expanded { max-height: 600px }` used to live here, but it sat at the
   same specificity as `.single-product .ep-about__text { max-height: 7.2em }`
   below and lost the cascade tie (later in source), so expanding never
   actually grew past the collapsed cap — keeping a step that visually does
   nothing is just confusing, so it's removed. CSS still owns the collapsed
   default (for the instant before JS attaches, and as the JS collapse
   target via `style.maxHeight = ''`). */
.ep-about__text {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: var(--ep-text-muted) !important;
    margin: 0 !important;
    max-height: 5.6em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.ep-about__text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.4em;
    background: linear-gradient(to bottom, transparent, rgba(21, 18, 42, 0.95));
    pointer-events: none;
    user-select: none;
    transition: opacity 0.4s ease;
}

.ep-about__text.is-expanded::after {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ep-about__text {
        transition: none;
    }

    .ep-about__text::after {
        transition: none;
    }
}

.ep-about__text p {
    margin: 0 0 0.4em !important;
}

.ep-about__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 16px;
    border-radius: var(--ep-r-pill);
    background: rgba(138, 92, 246, 0.1);
    border: 1px solid rgba(138, 92, 246, 0.25);
    color: var(--ep-purple-light);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ep-t);
    font-family: inherit;
}

.ep-about__toggle:hover {
    background: rgba(138, 92, 246, 0.2);
    border-color: var(--ep-purple);
    color: var(--ep-text);
}

/* ── Value proposition block — #1 conversion ───────────────────────────── */
.ep-value {
    padding: 20px 22px;
    border-radius: var(--ep-r);
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.06) 0%, rgba(138, 92, 246, 0.06) 100%);
    border: 1px solid rgba(34, 197, 94, 0.25);
    position: relative;
    overflow: hidden;
}

.ep-value::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.12), transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.ep-value__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

.ep-value__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ep-value__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--ep-text);
    font-weight: 500;
    line-height: 1.45;
}

.ep-value__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.95rem;
}

/* Details row: games + films */
.ep-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ep-detail-card {
    padding: 16px 18px;
    border-radius: var(--ep-r);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ep-border);
}

.ep-detail-card__title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ep-purple-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Game icons */
.ep-game-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.ep-game-icons img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain;
    border-radius: 6px;
    opacity: 0.85;
    transition: opacity var(--ep-t), transform var(--ep-t);
}

.ep-game-icons img:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* Films list */
.ep-films-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ep-films-list li {
    font-size: 0.85rem;
    color: var(--ep-text-muted);
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}

.ep-films-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--ep-purple-light);
    font-weight: 700;
}

/* CTA button */
.ep-cta {
    margin-top: auto;
    padding-top: 4px;
}

.ep-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 28px;
    border-radius: var(--ep-r-pill);
    background: linear-gradient(135deg, var(--ep-purple) 0%, var(--ep-pink) 100%);
    color: #fff !important;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 32px rgba(138, 92, 246, 0.4);
    transition: all var(--ep-t);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
    font-family: inherit;
}

.ep-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 42px rgba(138, 92, 246, 0.6);
    color: #fff !important;
    text-decoration: none !important;
}

.ep-cta__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.ep-cta__btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ep-cta__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--ep-text-dim);
    margin-top: 10px;
}

.ep-guarantee-icon {
    display: inline-block;
    font-size: 1.18rem;
    line-height: 1;
    transform: translateY(1px);
}

.ep-guarantee-icon--sm {
    font-size: 1rem;
}

.ep-how {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid rgba(201, 174, 255, 0.25);
    background:
        radial-gradient(60% 90% at 8% 0%, rgba(236, 72, 153, 0.18) 0%, transparent 58%),
        radial-gradient(58% 80% at 92% 10%, rgba(167, 139, 250, 0.22) 0%, transparent 62%),
        linear-gradient(150deg, rgba(40, 28, 76, 0.95), rgba(18, 13, 36, 0.98));
    box-shadow:
        0 24px 60px rgba(5, 3, 15, 0.44),
        0 0 42px rgba(138, 92, 246, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.ep-how::before,
.ep-how::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.ep-how::before {
    inset: 1px;
    border-radius: inherit;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.11), transparent 19% 76%, rgba(236, 72, 153, 0.08));
    opacity: 0.82;
}

.ep-how::after {
    width: 220px;
    height: 220px;
    right: -84px;
    top: -112px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.28), transparent 62%);
    filter: blur(2px);
}

.ep-how__title {
    margin: 0;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 800;
    color: #f2ebff;
    text-shadow: 0 0 24px rgba(167, 139, 250, 0.28);
}

.ep-how__subtitle {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: 8px 0 22px;
    padding: 7px 12px;
    border: 1px solid rgba(236, 72, 153, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    font-size: 0.82rem;
    line-height: 1.2;
    color: rgba(237, 226, 255, 0.92);
}

.ep-how__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

.ep-how__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px;
    min-width: 0;
    max-width: none;
    min-height: 168px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(205, 183, 255, 0.25);
    background:
        radial-gradient(95% 80% at 50% -12%, rgba(255, 255, 255, 0.10) 0%, transparent 48%),
        linear-gradient(145deg, rgba(51, 35, 92, 0.72), rgba(24, 17, 47, 0.9));
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    box-sizing: border-box;
    box-shadow:
        0 14px 30px rgba(8, 5, 23, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ep-how__list::before {
    display: none;
}

.ep-how__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #a78bfa 0%, #ec4899 100%);
    opacity: 0.8;
}

.ep-how__item::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -62px;
    bottom: -64px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.19), transparent 68%);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
}

.ep-how__item:hover {
    transform: translateY(-7px);
    border-color: rgba(236, 204, 255, 0.56);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.105), transparent 42%),
        linear-gradient(145deg, rgba(60, 40, 105, 0.84), rgba(27, 18, 52, 0.9));
    box-shadow:
        0 22px 42px rgba(8, 5, 23, 0.48),
        0 0 30px rgba(139, 92, 246, 0.24);
}

.ep-how__item:hover::after {
    opacity: 1;
    transform: scale(1.15);
}

.ep-how__num {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 800;
    background: radial-gradient(circle at 30% 30%, rgba(170, 145, 255, 0.62), rgba(96, 58, 190, 0.96));
    color: #f7f1ff;
    border: 1px solid rgba(232, 216, 255, 0.72);
    box-shadow:
        0 0 0 10px rgba(138, 92, 246, 0.12),
        0 0 28px rgba(138, 92, 246, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    position: relative;
    z-index: 2;
}

.ep-how__text {
    color: #f1ecff;
    min-height: 0;
}

.ep-how__step-title {
    display: block;
    margin: 0 0 4px;
    color: #f6f2ff;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 800;
}

.ep-how__step-desc {
    display: -webkit-box;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.28;
    color: rgba(225, 212, 255, 0.82);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-how__num--done {
    background: radial-gradient(circle at 30% 30%, rgba(74, 222, 128, 0.65), rgba(22, 163, 74, 0.92));
    border-color: rgba(167, 243, 208, 0.55);
    box-shadow: 0 0 0 10px rgba(74, 222, 128, 0.13), 0 0 28px rgba(74, 222, 128, 0.36);
}

.ep-how__item--done::before {
    background: linear-gradient(90deg, #86efac 0%, #22c55e 100%);
}

.ep-how__item--done::after {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.22), transparent 68%);
}

.ep-how__reassure {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 200, 242, 0.28);
    background:
        radial-gradient(70% 120% at 0% 50%, rgba(236, 72, 153, 0.18), transparent 60%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: rgba(228, 216, 255, 0.92);
    font-size: 0.86rem;
    line-height: 1.35;
}

.ep-bundles {
    grid-column: 1 / -1;
    margin-top: 12px;
}

.ep-bundles__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
}

.ep-bundles__card {
    border-radius: 20px;
    border: 1px solid rgba(163, 127, 255, 0.34);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(138, 92, 246, 0.14) 0%, transparent 56%),
        linear-gradient(145deg, rgba(31, 23, 60, 0.92), rgba(22, 16, 45, 0.92));
    padding: 22px 24px;
    box-shadow: 0 10px 32px rgba(8, 6, 20, 0.36);
}

.ep-bundles__card--main {
    border-color: rgba(177, 145, 255, 0.5);
}

.ep-bundles__badge {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(182, 150, 255, 0.45);
    color: #d9c3ff;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
    background: rgba(138, 92, 246, 0.08);
}

.ep-bundles__title {
    margin: 14px 0 8px;
    font-size: clamp(1.35rem, 2.05vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #f5f1ff;
    letter-spacing: -0.01em;
}

.ep-bundles__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: rgba(232, 225, 255, 0.78);
    max-width: 60ch;
}

.ep-bundles__btn {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.42);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.ep-bundles__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.5);
    color: #fff !important;
}

.ep-bundles__btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(182, 150, 255, 0.44);
    box-shadow: none;
}

.ep-bundles__btn--ghost:hover {
    background: rgba(138, 92, 246, 0.2);
    box-shadow: 0 8px 22px rgba(138, 92, 246, 0.26);
}

.ep-packages {
    grid-column: 1 / -1;
    margin-top: 16px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(166, 128, 255, 0.2);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(138, 92, 246, 0.1) 0%, transparent 52%),
        linear-gradient(145deg, rgba(25, 18, 48, 0.75), rgba(16, 12, 33, 0.82));
}

.ep-packages__title {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d3bcff;
}

.ep-packages__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ep-package {
    border: 1px solid rgba(166, 128, 255, 0.28);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(35, 25, 66, 0.86), rgba(20, 14, 40, 0.9));
    padding: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 10px;
    min-height: 210px;
}

.ep-package:hover {
    border-color: rgba(201, 172, 255, 0.62);
    box-shadow: 0 12px 28px rgba(15, 10, 30, 0.5), 0 0 0 1px rgba(138, 92, 246, 0.14);
    transform: translateY(-2px);
}

.ep-package--popular {
    border-color: rgba(236, 72, 153, 0.58);
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(236, 72, 153, 0.12) 0%, transparent 62%),
        linear-gradient(145deg, rgba(35, 25, 66, 0.9), rgba(20, 14, 40, 0.92));
}

.ep-package--accent {
    border-color: rgba(124, 58, 237, 0.62);
    background:
        radial-gradient(90% 130% at 100% 0%, rgba(124, 58, 237, 0.16) 0%, transparent 60%),
        linear-gradient(145deg, rgba(35, 25, 66, 0.92), rgba(20, 14, 40, 0.95));
}

.ep-package.is-disabled {
    opacity: .7;
    filter: saturate(.8);
}

.ep-package__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.ep-package__name {
    margin: 0 0 4px;
    font-size: 1.08rem;
    font-weight: 800;
    color: #f6f2ff;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.ep-package__desc {
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(236, 230, 255, 0.8);
    max-width: 48ch;
}

.ep-package__price {
    white-space: nowrap;
    font-size: 1.32rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    text-align: right;
}

.ep-package__meta {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ep-package__badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(190, 158, 255, 0.46);
    background: rgba(138, 92, 246, 0.14);
    color: #dcc9ff;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ep-package__hint {
    font-size: 0.78rem;
    color: rgba(226, 215, 255, 0.72);
}

.ep-package__saving {
    font-size: 0.8rem;
    font-weight: 700;
    color: #3ee27a;
}

.ep-package__btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    width: fit-content;
    box-shadow: 0 8px 24px rgba(138, 92, 246, 0.26);
}

.ep-package__btn--disabled {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(173, 145, 255, 0.28);
    color: rgba(240, 233, 255, 0.72) !important;
    pointer-events: none;
    box-shadow: none;
}

/* ── New packages block (namespaced) ───────────────────────────────────── */
.eg-packages {
    --eg-bg-1: #191333;
    --eg-bg-2: #110d23;
    --eg-border: rgba(162, 127, 255, .22);
    --eg-border-strong: rgba(209, 175, 255, .62);
    --eg-text: #f4eeff;
    --eg-muted: rgba(230, 218, 255, .8);
    --eg-accent-1: #8b5cf6;
    --eg-accent-2: #ec4899;
    --eg-green: #35dc87;
    grid-column: 1 / -1;
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--eg-border);
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(139, 92, 246, .10) 0%, transparent 55%),
        linear-gradient(145deg, var(--eg-bg-1), var(--eg-bg-2));
}

.eg-packages__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.eg-packages__title {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #d3bcff;
    font-weight: 800;
}

.eg-packages__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eg-packages__trust-chip {
    font-size: .72rem;
    color: var(--eg-muted);
    border: 1px solid rgba(180, 146, 255, .32);
    background: rgba(255, 255, 255, .03);
    border-radius: 999px;
    padding: 4px 8px;
}

.eg-packages__notice {
    min-height: 14px;
    margin: 0 0 8px;
    font-size: .74rem;
    color: #ffb4d3;
}

.eg-packages__list {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.eg-packages__card {
    min-width: 86%;
    scroll-snap-align: start;
    border: 1px solid var(--eg-border);
    background: linear-gradient(145deg, rgba(39, 28, 72, .86), rgba(21, 15, 43, .9));
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--eg-text);
    cursor: pointer;
    transition: .2s ease;
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    gap: 6px;
}

.eg-packages__card:hover {
    border-color: var(--eg-border-strong);
    box-shadow: 0 12px 28px rgba(8, 6, 20, .42);
    transform: translateY(-2px);
}

.eg-packages__card:focus-visible {
    outline: 2px solid #c7a5ff;
    outline-offset: 2px;
}

.eg-packages__card.is-selected,
.eg-packages__card[aria-selected="true"] {
    border-color: #d7b8ff;
    box-shadow: 0 0 0 1px rgba(216, 184, 255, .35), 0 14px 34px rgba(24, 14, 50, .56);
}

.eg-packages__card[aria-disabled="true"] {
    opacity: .62;
    cursor: not-allowed;
}

.eg-packages__badge {
    justify-self: start;
    font-size: .66rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px solid rgba(187, 151, 255, .45);
    border-radius: 999px;
    padding: 4px 8px;
    color: #decaff;
    background: rgba(139, 92, 246, .12);
}

.eg-packages__badge--hot {
    border-color: rgba(255, 140, 200, .55);
    color: #ffd2ea;
    background: rgba(236, 72, 153, .16);
}

.eg-packages__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.eg-packages__name {
    margin: 0;
    font-size: .93rem;
    font-weight: 800;
    line-height: 1.22;
}

.eg-packages__price {
    font-size: 1.02rem;
    font-weight: 800;
    white-space: nowrap;
}

.eg-packages__desc,
.eg-packages__when,
.eg-packages__hint {
    margin: 0;
    font-size: .82rem;
    line-height: 1.34;
    color: var(--eg-muted);
}

.eg-packages__when {
    color: #d7c3ff;
    font-size: .78rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eg-packages__hint {
    font-size: .74rem;
}

.eg-packages__saving {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--eg-green);
}

.eg-packages__choose {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    width: fit-content;
    border: 0;
    border-radius: 999px;
    padding: 0 12px;
    background: linear-gradient(135deg, var(--eg-accent-1), var(--eg-accent-2));
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

.eg-packages__choose:focus-visible {
    outline: 2px solid #dfc8ff;
    outline-offset: 2px;
}

.eg-packages__choose[disabled] {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .72);
    cursor: not-allowed;
}

.eg-packages__card.is-anchor {
    border-color: rgba(236, 72, 153, .52);
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(236, 72, 153, .12) 0%, transparent 62%),
        linear-gradient(145deg, rgba(39, 28, 72, .9), rgba(21, 15, 43, .92));
}

.eg-packages__card.is-subscription {
    border-color: rgba(124, 58, 237, .62);
    background:
        radial-gradient(90% 130% at 100% 0%, rgba(124, 58, 237, .16) 0%, transparent 60%),
        linear-gradient(145deg, rgba(39, 28, 72, .92), rgba(21, 15, 43, .95));
}

@media (min-width: 992px) {
    .eg-packages__list {
        display: grid;
        overflow: visible;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .eg-packages__card {
        min-width: 0;
        min-height: 0;
    }

    .eg-packages__card.is-anchor {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .eg-packages__card.is-subscription {
        grid-column: 1 / -1;
        min-height: 0;
    }
}

.ep-package:nth-child(1),
.ep-package:nth-child(5) {
    grid-column: 1 / -1;
    min-height: 170px;
}

.ep-package:nth-child(1) .ep-package__desc {
    max-width: 62ch;
}

/* ── Mobile: owl-carousel override ──────────────────────────────────────── */
.ep-hero~.carousel-2,
.ep-hero+.carousel-2 {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .ep-section-nav {
        right: 10px;
        width: 46px;
        padding: 7px;
        border-radius: 16px;
    }

    .ep-section-nav__link {
        display: flex;
        justify-content: center;
        min-height: 34px;
        padding: 8px;
    }

    .ep-section-nav__label {
        position: absolute;
        right: calc(100% + 8px);
        max-width: 154px;
        padding: 8px 10px;
        border: 1px solid rgba(173, 145, 255, 0.24);
        border-radius: 12px;
        background: rgba(16, 12, 32, 0.9);
        color: #fff;
        box-shadow: 0 10px 24px rgba(5, 3, 14, 0.36);
        opacity: 0;
        pointer-events: none;
        transform: translateX(6px);
        transition: opacity var(--ep-t), transform var(--ep-t);
    }

    .ep-section-nav__link:hover .ep-section-nav__label,
    .ep-section-nav__link:focus-visible .ep-section-nav__label {
        opacity: 1;
        transform: translateX(0);
    }


    .ep-hero__inner {
        grid-template-columns: minmax(260px, 400px) 1fr;
        gap: 28px;
        padding: 22px;
    }
}

@media (max-width: 860px) {
    .ep-section-nav {
        top: auto;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 12px;
        width: auto;
        flex-direction: row;
        justify-content: space-between;
        gap: 4px;
        padding: 7px;
        border-radius: 18px;
        transform: none;
    }

    .ep-section-nav__link {
        flex: 1 1 0;
        min-width: 0;
        min-height: 38px;
        padding: 7px 6px;
        flex-direction: column;
        gap: 5px;
        font-size: 0.64rem;
    }

    .ep-section-nav__link:hover,
    .ep-section-nav__link.is-active {
        transform: translateY(-1px);
    }

    .ep-section-nav__label {
        position: static;
        max-width: 100%;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        transform: none;
        color: inherit;
        pointer-events: auto;
    }

    .ep-hero {
        padding: 102px 24px 32px !important;
    }

    .ep-hero__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px;
        padding-top: 52px;
    }

    .ep-time-corner {
        top: 12px;
        right: 12px;
        font-size: 0.76rem;
        padding: 8px 16px;
    }

    .ep-gallery__main {
        max-width: 480px;
        margin: 0 auto;
    }

    .ep-mobile-identity {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 44px 14px 12px;
        background: linear-gradient(180deg, rgba(8, 6, 17, 0) 0%, rgba(8, 6, 17, 0.86) 68%, rgba(8, 6, 17, 0.94) 100%);
        z-index: 2;
        pointer-events: none;
    }

    .ep-mobile-identity__name {
        font-size: 1.18rem;
        font-weight: 800;
        color: #fff;
        line-height: 1.1;
        letter-spacing: 0.01em;
    }

    .ep-mobile-identity__rating {
        display: inline-flex;
        align-items: center;
        min-height: 18px;
    }

    .ep-mobile-identity__rating .star-rating {
        color: #fbbf24 !important;
        font-size: 0.82rem;
        margin: 0 !important;
    }

    .ep-header {
        display: none;
    }

    .ep-name {
        text-align: center;
    }

    .ep-rating {
        justify-content: center;
    }

    .ep-status {
        justify-content: center;
    }

    .ep-about__text {
        text-align: center;
    }

    .ep-mini-cta {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 11px 12px;
        border-radius: 14px;
        border: 1px solid rgba(173, 145, 255, 0.35);
        background: linear-gradient(135deg, rgba(33, 23, 64, 0.88) 0%, rgba(20, 14, 40, 0.88) 100%);
        text-decoration: none !important;
        box-shadow: 0 6px 20px rgba(12, 8, 24, 0.42);
    }

    .ep-mini-cta__price {
        font-size: 0.84rem;
        color: #f3ecff;
        font-weight: 700;
    }

    .ep-mini-cta__action {
        padding: 8px 14px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--ep-purple) 0%, var(--ep-pink) 100%);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
    }
}

@media (max-width: 560px) {
    .ep-section-nav {
        right: 8px;
        left: 8px;
        padding: 6px;
    }

    .ep-section-nav__link {
        min-height: 36px;
        font-size: 0.6rem;
    }

    .ep-hero {
        padding: 102px 16px 24px !important;
    }

    .ep-hero__inner {
        padding: 16px;
        gap: 18px;
        padding-top: 58px;
    }

    .ep-details {
        grid-template-columns: 1fr;
    }

    .ep-gallery__thumb {
        width: 52px;
        height: 52px;
    }

    .ep-cta__btn {
        padding: 14px 20px;
        font-size: 0.92rem;
    }

    .ep-how {
        padding: 14px;
    }

    .ep-how__list {
        gap: 10px;
        padding-bottom: 2px;
    }

    .ep-how__item {
        flex: 1 1 calc(33.333% - 10px);
        min-width: 140px;
    }

    .ep-bundles__grid {
        grid-template-columns: 1fr;
    }

    .ep-bundles__card {
        padding: 16px;
        border-radius: 16px;
    }

    .ep-bundles__title {
        font-size: 1.45rem;
    }

    .ep-bundles__text {
        font-size: 0.94rem;
    }

    .ep-bundles__btn {
        width: 100%;
        min-height: 48px;
        font-size: 0.95rem;
    }

    .ep-packages {
        padding: 14px;
        border-radius: 14px;
    }

    .ep-packages__list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ep-package,
    .ep-package:nth-child(1),
    .ep-package:nth-child(5) {
        grid-column: auto;
        min-height: auto;
        padding: 14px;
    }

    .ep-package__top {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ep-package__price {
        font-size: 1.15rem;
        text-align: left;
    }

    .ep-package__btn {
        width: 100%;
    }
}

@media (min-width: 961px) and (max-width: 1180px) {
    .ep-how__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .ep-how__list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 12px;
        padding-bottom: 8px;
        gap: 10px;
        /* hide scrollbar but keep scrolling */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ep-how__list::-webkit-scrollbar {
        display: none;
    }

    .ep-how__list::before {
        display: none;
    }

    .ep-how__item {
        flex: 0 0 72%;
        min-width: 220px;
        max-width: 300px;
        min-height: 118px;
        scroll-snap-align: center;
    }
}

@media (max-width: 640px) {
    .ep-how {
        padding: 12px;
    }

    .ep-how__title {
        font-size: 0.98rem;
    }

    .ep-how__subtitle {
        margin-bottom: 10px;
    }

    .ep-how__item {
        flex: 0 0 78%;
        min-width: 200px;
        max-width: 280px;
        min-height: 110px;
        gap: 8px;
    }

    .ep-how__step-title {
        font-size: 0.88rem;
    }

    .ep-how__step-desc {
        font-size: 0.78rem;
    }

    .ep-how__reassure {
        margin-top: 10px;
        font-size: 0.77rem;
    }
}

@media (max-width: 420px) {
    .ep-how {
        padding: 10px;
    }

    .ep-how__list {
        display: grid;
        grid-template-columns: 1fr;
        overflow-x: visible;
        scroll-snap-type: none;
        gap: 8px;
    }

    .ep-how__item {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        min-height: auto;
        padding: 10px;
        scroll-snap-align: none;
    }

    .ep-how__num {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .ep-how__step-title {
        font-size: 0.84rem;
    }

    .ep-how__step-desc {
        font-size: 0.75rem;
    }

    .ep-how__reassure {
        font-size: 0.74rem;
        padding: 8px 10px;
    }
}

@media (max-width: 1180px) {
    .ep-bundles__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Sticky CTA bar (mobile) ────────────────────────────────────────────── */
.ep-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: none;
}

.ep-sticky-cta.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.ep-sticky-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    background: linear-gradient(180deg, rgba(15, 12, 28, 0.92) 0%, rgba(13, 11, 24, 0.98) 100%);
    border-top: 1px solid rgba(138, 92, 246, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 -4px 24px rgba(0, 0, 0, 0.5),
        0 -1px 0 rgba(138, 92, 246, 0.15);
}

.ep-sticky-cta__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ep-sticky-cta__name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ep-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-sticky-cta__price {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ep-purple-light);
}

.ep-sticky-cta__guarantee {
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: #c8bcf2;
    line-height: 1.2;
}

.ep-sticky-cta__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px;
    border-radius: var(--ep-r-pill);
    background: linear-gradient(135deg, var(--ep-purple) 0%, var(--ep-pink) 100%);
    color: #fff !important;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(138, 92, 246, 0.45);
    transition: all var(--ep-t);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-family: inherit;
}

.ep-sticky-cta__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(138, 92, 246, 0.65);
    color: #fff !important;
    text-decoration: none !important;
}

.ep-sticky-cta__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}

.ep-sticky-cta__btn:hover::after {
    transform: translateX(120%);
}

/* Show only on mobile */
@media (max-width: 860px) {
    .ep-sticky-cta {
        display: block;
    }
}

/* ── Floating support chat button ────────────────────────────────────────── */
.ep-support-float {
    position: fixed;
    right: 16px;
    bottom: 18px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border-radius: 999px;
    border: 1px solid rgba(113, 216, 255, 0.52);
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.94) 0%, rgba(3, 105, 161, 0.94) 100%);
    color: #f4fdff !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(6, 33, 45, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    transition: transform var(--ep-t), box-shadow var(--ep-t);
    animation: ep-support-pulse 2.4s ease-in-out infinite;
}

.ep-support-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(6, 33, 45, 0.58), 0 0 18px rgba(113, 216, 255, 0.35);
    color: #ffffff !important;
}

@keyframes ep-support-pulse {

    0%,
    100% {
        box-shadow: 0 8px 24px rgba(6, 33, 45, 0.45), 0 0 0 0 rgba(113, 216, 255, 0.18);
    }

    50% {
        box-shadow: 0 10px 28px rgba(6, 33, 45, 0.5), 0 0 0 8px rgba(113, 216, 255, 0);
    }
}

@media (max-width: 860px) {
    .ep-support-float {
        right: 12px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        font-size: 0.76rem;
        padding: 10px 12px;
    }
}

/* ── Exit intent popup (mobile) ─────────────────────────────────────────── */
body.ep-exit-popup-open {
    overflow: hidden;
}

.ep-exit-popup {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.ep-exit-popup[hidden] {
    display: none !important;
}

.ep-exit-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 5, 14, 0.74);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ep-exit-popup__card {
    position: relative;
    width: min(100%, 420px);
    border-radius: 20px;
    border: 1px solid rgba(150, 120, 255, 0.38);
    background: radial-gradient(circle at 12% 0%, rgba(245, 138, 255, 0.14) 0%, rgba(23, 17, 44, 0.96) 58%, rgba(16, 13, 33, 0.98) 100%);
    box-shadow: 0 26px 54px rgba(3, 2, 10, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    padding: 18px 16px 16px;
    color: #f7f2ff;
    transform: translateY(12px);
    opacity: 0;
    animation: ep-exit-popup-in 0.26s ease forwards;
}

.ep-exit-popup__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.ep-exit-popup__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(87, 255, 169, 0.14);
    border: 1px solid rgba(87, 255, 169, 0.3);
    color: #9bfecb;
    font-size: 0.75rem;
    font-weight: 700;
}

.ep-exit-popup__title {
    margin: 10px 0 6px;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 800;
}

.ep-exit-popup__title span {
    color: #ffdd7b;
}

.ep-exit-popup__text {
    margin: 0 0 12px;
    color: #dfd5ff;
    font-size: 0.92rem;
    line-height: 1.45;
}

.ep-exit-popup__cta {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 13px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #842cff 0%, #f64da0 100%);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 24px rgba(135, 45, 255, 0.45);
}

.ep-exit-popup__note {
    margin: 10px 2px 0;
    color: #b9aed8;
    font-size: 0.77rem;
    line-height: 1.4;
}

@keyframes ep-exit-popup-in {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (min-width: 861px) {
    .ep-exit-popup {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ep-exit-popup__card {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

/* ── Reviews background parallax (audit #7) ─────────────────────────────── */
.eg-parallax-bg {
    background-image: linear-gradient(rgba(20, 15, 30, 0.16), rgba(20, 15, 30, 0.16)), var(--eg-parallax-image);
    background-size: cover;
    background-position: center calc(50% + var(--eg-parallax-y, 0px));
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 1024px),
(hover: none) and (pointer: coarse) {
    .eg-parallax-bg {
        background-attachment: scroll;
        background-position: center center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premium Profile Redesign Overrides
   Keeps Woo/JS logic intact, updates only the UI layer
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --ep-bg: #07070A;
    --ep-surface: #09090E;
    --ep-surface-2: #0D0D12;
    --ep-surface-3: rgba(255, 255, 255, 0.045);
    --ep-border: rgba(168, 155, 255, 0.14);
    --ep-border-hover: rgba(168, 155, 255, 0.32);
    --ep-purple: #6D5DF6;
    --ep-purple-light: #A89BFF;
    --ep-purple-dark: #4B3FD6;
    --ep-purple-glow: rgba(109, 93, 246, 0.22);
    --ep-pink: #6D5DF6;
    --ep-green: #22C55E;
    --ep-green-glow: rgba(34, 197, 94, 0.24);
    --ep-text: #F4F1FF;
    --ep-text-muted: #A7A0B8;
    --ep-text-dim: #7D768E;
    --ep-shadow: 0 20px 70px rgba(0, 0, 0, 0.28);
}

body.single-product {
    background: var(--ep-bg);
    color: var(--ep-text);
}

.single-product .ep-hero,
.single-product .ep-profile-section,
.single-product .eg-discord-promo--single {
    position: relative;
    overflow: hidden;
}

.single-product .ep-hero::before,
.single-product .plans::before,
.single-product .eg-faq-lite::before,
.single-product .eg-related-girls::before {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

.single-product .ep-hero::before {
    width: 520px;
    height: 520px;
    top: 120px;
    right: -180px;
    background: rgba(109, 93, 246, 0.16);
}

.single-product .plans::before {
    width: 420px;
    height: 420px;
    top: 160px;
    left: -160px;
    background: rgba(168, 155, 255, 0.10);
}

/* top was 20px — far less clearance from the section's own overflow:hidden
   edge than the matching glow on .ep-hero (120px) or .plans (160px). A
   100px blur on a 340px circle needs roughly that much clearance for the
   gaussian falloff to reach full transparency before the clip line; at
   20px the falloff was still fairly opaque when it hit the edge, which is
   exactly what read as a hard seam across the top of FAQ. Matched to the
   same ~140px clearance the other corner blobs use. */
.single-product .eg-faq-lite::before {
    width: 340px;
    height: 340px;
    top: 140px;
    right: -120px;
    background: rgba(109, 93, 246, 0.14);
}

/* Cleanup pass: this glow used to sit at bottom:-120px — 120px below the
   section's own bottom edge — so the section's overflow:hidden (set on
   every .ep-profile-section, a few rules up) clipped it while the blur
   was still fairly opaque, leaving a visible hard seam right above the
   footer instead of a soft fade. Pulling it fully inside the section
   (and away from the edge by more than the blur radius) lets the whole
   gaussian falloff render before it would ever reach a clipped boundary.
   Color also brought in line with the violet/lavender family used by
   every other section's glow (this one was an off-palette blue). */
.single-product .eg-related-girls::before {
    width: 280px;
    height: 280px;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(109, 93, 246, 0.10);
}

.single-product .ep-hero,
.single-product .girl .container,
.single-product .plans .container,
.single-product .eg-booking .container,
.single-product .money .container,
.single-product .eg-faq-lite .container,
.single-product .eg-related-girls .container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
    position: relative;
    z-index: 1;
}

/* New wrapper (added in the template solely to host the cat mascot — see
   single-product-egirl.php) needs to be the thing that's actually sticky,
   not just position:relative. The mascot sits outside .profile-subnav now
   specifically so it isn't clipped by the nav's own `overflow-x: auto`
   (the CSS overflow spec forces the paired Y axis to compute as `auto`
   too whenever X is non-visible, which silently clips anything that
   sticks out past the box — confirmed live, no way around it from inside
   that element). If only the inner <nav> were sticky and this wrapper
   were a plain static box exactly its height, the nav would have almost
   no scroll distance left to actually stick within — its containing block
   for stickiness purposes would unstick almost immediately. Making the
   wrapper itself the sticky element (with the page's normal scroll room
   above it) avoids that, and the inner nav's own sticky rules (set with
   !important in style.css) just become redundant/inert once its ancestor
   is already pinned — both end up visually in the same place. */
.single-product .profile-subnav-wrap {
    position: sticky;
    top: 92px;
    z-index: 30;
    isolation: isolate;
    overflow: visible;
    width: fit-content;
    max-width: calc(100vw - 32px);
    margin: 20px auto 0;
}

/* A pre-existing universal rule — `.single-product.product-profile > *`
   (6 classes of specificity, no !important, present in both style.css and
   eg-profile.css) — gives every direct child of the page wrapper
   `position: relative; z-index: 1`. .profile-subnav-wrap is a new direct
   child (added in the template to host the cat mascot), so it inherited
   both of those too: lost its sticky positioning to plain relative, AND
   had z-index forced down to 1 — confirmed live as the cause of a real
   bug, not just a cosmetic stacking nit: at z-index:1 the nav started
   rendering behind the hero/gallery content, so Playwright's own click
   on a nav link failed with "<gallery> subtree intercepts pointer
   events". Matching the same selector scope + !important here wins both
   properties on equal specificity by loading later. */
.girl__body.single-product.product-profile .profile-subnav-wrap {
    position: sticky !important;
    z-index: 30 !important;
}

.single-product .ep-section-nav {
    /* Sticky/top/z-index/margin now live on .profile-subnav-wrap (the new
       mascot-hosting wrapper) one rule up — kept off this element so the
       20px top gap isn't doubled and so this element's own
       overflow-x: auto can't reintroduce the clipping problem described
       above. Still its own positioning context (position: relative) for
       its active-link highlight and scrollbar pseudo-elements. */
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    /* Pass 11: Pass 10 made the bar hero-width and used space-between to
       fill it, which read as too loosely spread once the items were no
       longer left-packed. Going compact instead — the bar now hugs its
       own content (fit-content, capped via the wrapper's max-width so it
       never exceeds the hero's bounds or overflows on narrow screens) and
       stays centered within that bound, reading as one tight pill/
       control group rather than a full-width toolbar. */
    padding: 6px 16px 6px 6px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(168, 155, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    overflow: visible;
    scrollbar-width: none;
}

.single-product .ep-section-nav::-webkit-scrollbar {
    display: none;
}

.single-product .profile-subnav-mascot {
    position: absolute;
    right: clamp(28px, 9vw, 72px);
    bottom: calc(100% - 4px);
    z-index: 20;
    width: 56px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    line-height: 0;
}

.single-product .profile-subnav-mascot__cat {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 8px 16px rgba(124, 92, 250, 0.24));
}

@media (prefers-reduced-motion: reduce) {
    .single-product .profile-subnav-mascot,
    .single-product .profile-subnav-mascot__cat {
        animation: none;
        transition: none;
    }
}

@media (max-width: 640px) {
    .single-product .profile-subnav-wrap {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }

    .single-product .ep-section-nav {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        padding-right: 14px;
    }

    .single-product .profile-subnav-mascot {
        right: 18px;
        bottom: calc(100% - 3px);
        width: 46px;
    }
}

.single-product .ep-section-nav__link {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--ep-text-muted) !important;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 200ms ease, color 200ms ease;
}

/* Pass 11: thin lavender divider between items (none after the last) —
   reads as one segmented control instead of loose separate links. Lives
   in the 2px gap via the negative offset, so it never nudges layout. */
.single-product .ep-section-nav__link:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -2px;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: rgba(168, 155, 255, 0.22);
}

.single-product .ep-section-nav__link:hover {
    transform: none;
    color: var(--ep-text) !important;
    background: rgba(109, 93, 246, 0.1);
}

.single-product .ep-section-nav__link.is-active {
    transform: none;
    color: var(--ep-text) !important;
    background: rgba(109, 93, 246, 0.22);
    box-shadow: 0 0 0 1px rgba(168, 155, 255, 0.28) inset, 0 0 18px rgba(139, 92, 246, 0.22);
}

/* The divider would visually cut across the active pill's own glow ring
   on either side of it — hide the dividers immediately before and after
   the active item, its box-shadow is enough of a boundary on its own. */
.single-product .ep-section-nav__link.is-active::after,
.single-product .ep-section-nav__link:has(+ .ep-section-nav__link.is-active)::after {
    background: transparent;
}

.single-product .ep-section-nav__dot {
    width: 7px;
    height: 7px;
    background: rgba(168, 155, 255, 0.52);
    box-shadow: none;
}

.single-product .ep-section-nav__link.is-active .ep-section-nav__dot {
    background: var(--ep-purple-light);
    box-shadow: 0 0 12px rgba(168, 155, 255, 0.35);
    transform: none;
}

.single-product .ep-section-nav__label {
    position: static;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    white-space: nowrap;
    pointer-events: auto;
}

.single-product .ep-hero {
    max-width: 1280px;
    padding: 28px 40px 0 !important;
    scroll-margin-top: 120px;
}

.single-product .ep-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.65fr);
    gap: 28px;
    align-items: start;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow: visible;
}

.single-product .ep-hero__inner::before,
.single-product .ep-hero__inner::after {
    display: none;
}

.single-product .ep-gallery {
    padding: 18px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(168, 155, 255, 0.14);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.35);
}

.single-product .ep-gallery__main {
    aspect-ratio: 4 / 5;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
}

.single-product .ep-gallery__main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 9, 14, 0.02) 32%, rgba(9, 9, 14, 0.68) 100%);
    pointer-events: none;
}

.single-product .ep-gallery__badge {
    top: 16px;
    left: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #CFF8DC;
    text-transform: none;
}

.single-product .ep-gallery__badge.is-offline {
    background: rgba(138, 132, 153, 0.12);
    border-color: rgba(138, 132, 153, 0.34);
    color: #D8D3E4;
}

.single-product .ep-gallery__achievements {
    bottom: 16px;
    left: 16px;
}

.single-product .ep-achievement-badge[data-color="pink"],
.single-product .ep-achievement-badge[data-color="red"] {
    background: rgba(57, 46, 100, 0.84);
    border-color: rgba(168, 155, 255, 0.42);
    color: #F4F1FF;
}

.single-product .ep-gallery__thumbs {
    gap: 10px;
    margin-top: 14px;
}

.single-product .ep-gallery__thumb {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    border: 1px solid rgba(168, 155, 255, 0.12);
    opacity: 1;
    background: rgba(255, 255, 255, 0.03);
}

.single-product .ep-gallery__thumb.is-active,
.single-product .ep-gallery__thumb:hover {
    border-color: rgba(168, 155, 255, 0.46);
    transform: translateY(-2px);
}

.single-product .ep-reactions {
    margin-top: 14px;
    gap: 10px;
}

.single-product .ep-reaction-btn {
    border: 1px solid rgba(168, 155, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ep-text);
}

.single-product .ep-mini-cta {
    display: none;
}

.single-product .ep-time-corner {
    display: none;
}

.single-product .ep-info {
    padding: 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(168, 155, 255, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--ep-shadow);
    gap: 18px;
}

.single-product .ep-header {
    display: flex;
    gap: 10px;
}

.single-product .ep-name {
    margin: 0 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #F4F1FF !important;
    font-size: clamp(40px, 4vw, 64px) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em;
    text-shadow: none;
}

.single-product .ep-rating .star-rating {
    color: #A89BFF !important;
}

.single-product .ep-status {
    gap: 10px;
}

.single-product .ep-status__slot,
.single-product .ep-status__viewers {
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 0.84rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.12);
    color: var(--ep-text);
    animation: none;
    box-shadow: none;
}

.single-product .ep-status__slot.is-offline {
    color: #D7D2E4;
    background: rgba(138, 132, 153, 0.1);
}

.single-product .ep-status__viewers-text {
    white-space: normal;
}

.single-product .ep-booking-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.single-product .ep-booking-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.single-product .ep-booking-card__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(109, 93, 246, 0.1);
    border: 1px solid rgba(168, 155, 255, 0.16);
    color: var(--ep-purple-light);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.single-product .ep-booking-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(109, 93, 246, 0.14);
    color: #F4F1FF;
    font-size: 1.02rem;
    font-weight: 800;
}

.single-product .ep-booking-card__price span {
    color: var(--ep-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.single-product .ep-booking-card__text {
    margin: 0;
    color: var(--ep-text-muted);
    line-height: 1.65;
}

.single-product .ep-booking-card__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.single-product .ep-booking-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 16px;
    text-decoration: none !important;
    font-size: 0.92rem;
    font-weight: 800;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.single-product .ep-booking-card__btn:hover {
    transform: translateY(-2px);
}

.single-product .ep-booking-card__btn--primary {
    background: linear-gradient(135deg, #4B3FD6, #6D5DF6);
    border: 1px solid rgba(168, 155, 255, 0.35);
    color: #F4F1FF !important;
    box-shadow: 0 16px 32px rgba(75, 63, 214, 0.22);
}

.single-product .ep-booking-card__btn--secondary {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.14);
    color: #F4F1FF !important;
}

.single-product .ep-booking-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.single-product .ep-booking-card__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(168, 155, 255, 0.12);
    color: var(--ep-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.single-product .ep-about,
.single-product .ep-value,
.single-product .ep-detail-card,
.single-product .ep-how {
    padding: 24px 26px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: none;
}

.single-product .ep-about__label,
.single-product .ep-detail-card__title,
.single-product .ep-value__label {
    color: #F4F1FF;
    letter-spacing: 0;
    text-transform: none;
    font-size: 1.05rem;
    font-weight: 700;
}

.single-product .ep-about__text {
    max-height: 18em;
    color: var(--ep-text-muted) !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
}

/* style.css has a second, independent collapse mechanism on this exact
   element via its other co-class, .about-mini-text: `display: -webkit-box;
   -webkit-line-clamp: 4;` by default, switching to `display: block;
   -webkit-line-clamp: unset;` only once .is-expanded is added. Both
   mechanisms toggle off the same .is-expanded class, so they fired
   together — confirmed live (sampling getBoundingClientRect mid-transition)
   that this is exactly why collapsing snapped shut instantly while
   expanding looked smooth: -webkit-line-clamp truncation is a hard, binary
   cut with no animatable intermediate state, so the instant is-expanded
   is removed, line-clamp re-engages and clips to 4 lines immediately,
   regardless of whatever max-height value the JS transition is mid-way
   through animating. Forcing plain block layout here, unconditionally,
   removes line-clamp from the equation entirely so this element's height
   is controlled only by max-height (animatable) in both directions. */
.single-product .about-mini-text {
    display: block !important;
    -webkit-line-clamp: unset !important;
}

.single-product .ep-about__text::after {
    background: linear-gradient(to bottom, transparent, rgba(13, 13, 18, 0.95));
}

.single-product .ep-about__toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ep-purple-light);
    font-size: 0.88rem;
}

.single-product .ep-value {
    overflow: visible;
}

.single-product .ep-value::before {
    display: none;
}

.single-product .ep-value__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.single-product .ep-value__list li {
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.12);
    color: var(--ep-text);
}

.single-product .ep-value__icon-wrap {
    flex-shrink: 0;
}

.single-product .ep-value__text {
    line-height: 1.45;
    color: var(--ep-text);
}

.single-product .ep-details {
    gap: 16px;
}

.single-product .ep-game-icons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.single-product .ep-game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 116px;
    padding: 14px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.12);
    transition: transform 0.24s ease, border-color 0.24s ease;
}

.single-product .ep-game-card:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 155, 255, 0.3);
}

.single-product .ep-game-card img {
    width: 44px !important;
    height: 44px !important;
    opacity: 1;
}

.single-product .ep-game-card span {
    text-align: center;
    color: var(--ep-text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.single-product .ep-films-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.single-product .ep-films-list li {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(168, 155, 255, 0.12);
    color: var(--ep-text-muted);
}

.single-product .ep-films-list li::before {
    display: none;
}

.single-product .ep-cta {
    margin-top: 0;
    padding-top: 0;
}

.single-product .ep-cta__btn {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.14);
    color: #F4F1FF !important;
    box-shadow: none;
}

.single-product .ep-cta__btn::after {
    display: none;
}

.single-product .ep-cta__hint {
    justify-content: flex-start;
    color: var(--ep-text-dim);
}

.single-product .ep-how {
    grid-column: 1 / -1;
    margin-top: 0;
}

.single-product .ep-how__title {
    font-size: 1.25rem;
    color: #F4F1FF;
    text-shadow: none;
}

.single-product .ep-how__subtitle {
    min-height: 0;
    margin: 10px 0 22px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--ep-text-muted);
    font-size: 0.92rem;
}

.single-product .ep-how__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
}

.single-product .ep-how__list::before {
    display: block;
    content: "";
    position: absolute;
    top: 38px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 155, 255, 0.24), transparent);
}

.single-product .ep-how__item {
    min-width: 0;
    min-height: 0;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.12);
    box-shadow: none;
}

.single-product .ep-how__item::before,
.single-product .ep-how__item::after,
.single-product .ep-how::before,
.single-product .ep-how::after {
    display: none;
}

.single-product .ep-how__item:hover {
    transform: translateY(-4px);
    border-color: rgba(168, 155, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
}

.single-product .ep-how__num {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(168, 155, 255, 0.08);
    border: 1px solid rgba(168, 155, 255, 0.18);
    color: var(--ep-purple-light);
    box-shadow: none;
    font-size: 0.95rem;
}

.single-product .ep-how__icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.single-product .ep-how__icon-wrap img {
    width: 32px;
    height: 32px;
}

.single-product .ep-how__step-title {
    font-size: 0.92rem;
    line-height: 1.35;
}

.single-product .ep-how__step-desc {
    display: block;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ep-text-muted);
}

.single-product .ep-how__reassure {
    margin-top: 18px;
    border-radius: 16px;
    border: 1px solid rgba(168, 155, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
    color: var(--ep-text-muted);
    box-shadow: none;
}

.single-product .ep-profile-section {
    padding: 72px 0;
}

.single-product .girl.eg-parallax-bg {
    background-image:
        radial-gradient(circle at 18% 18%, rgba(109, 93, 246, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(9, 9, 14, 0.98), rgba(7, 7, 10, 1));
    background-attachment: scroll;
}

.single-product .eg-reviews {
    padding: 32px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(168, 155, 255, 0.14);
    box-shadow: var(--ep-shadow);
}

.single-product .eg-reviews__summary {
    display: grid;
    grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.single-product .eg-reviews__summary-main,
.single-product .eg-reviews__bars,
.single-product .eg-reviews__head,
.single-product .eg-reviews__empty {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.12);
}

.single-product .eg-reviews__summary-main {
    padding: 24px;
}

.single-product .eg-reviews__avg {
    color: #F4F1FF;
    font-size: 3rem;
    line-height: 1;
}

.single-product .eg-reviews__avg-stars .star-rating {
    color: var(--ep-purple-light) !important;
}

.single-product .eg-reviews__avg-count {
    color: var(--ep-text-muted);
}

.single-product .eg-reviews__bars {
    padding: 18px 20px;
}

.single-product .eg-reviews__bar-track {
    background: rgba(255, 255, 255, 0.06);
}

.single-product .eg-reviews__bar-fill {
    background: linear-gradient(90deg, #4B3FD6, #A89BFF);
}

.single-product .eg-reviews__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
}

.single-product .eg-reviews__head-count,
.single-product .eg-reviews__head-sort {
    color: var(--ep-text-muted);
}

.single-product .eg-reviews__write-btn {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4B3FD6, #6D5DF6) !important;
    border: 1px solid rgba(168, 155, 255, 0.35) !important;
    color: #F4F1FF !important;
    box-shadow: 0 14px 28px rgba(75, 63, 214, 0.22) !important;
}

.single-product .eg-reviews__write-btn::before {
    display: none !important;
    content: none !important;
}

.single-product .eg-reviews__head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.single-product .eg-reviews__list {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.single-product .eg-review-card {
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.12);
}

.single-product .eg-review-card__avatar {
    background: rgba(109, 93, 246, 0.12);
    border: 1px solid rgba(168, 155, 255, 0.18);
    color: #F4F1FF;
}

.single-product .eg-review-card__author,
.single-product .eg-review-card__stars .star-rating {
    color: #F4F1FF;
}

.single-product .eg-review-card__date,
.single-product .eg-review-card__verified,
.single-product .eg-review-card__text {
    color: var(--ep-text-muted);
}

.single-product .eg-reviews__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    max-width: 520px;
    padding: 28px;
    margin: 18px auto 0;
    color: var(--ep-text-muted);
    text-align: center;
}

.single-product .eg-review-modal__dialog {
    border-radius: 28px;
    background: rgba(10, 10, 16, 0.92);
    border: 1px solid rgba(168, 155, 255, 0.18);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.single-product .eg-review-form__field input,
.single-product .eg-review-form__field textarea {
    border-radius: 16px;
    border: 1px solid rgba(168, 155, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #F4F1FF;
}

.single-product .eg-review-form__submit {
    border-radius: 16px;
    background: linear-gradient(135deg, #4B3FD6, #6D5DF6) !important;
    border: 1px solid rgba(168, 155, 255, 0.35) !important;
    color: #F4F1FF !important;
    box-shadow: 0 16px 32px rgba(75, 63, 214, 0.22) !important;
}

.single-product .plans {
    background:
        radial-gradient(circle at 84% 18%, rgba(109, 93, 246, 0.12), transparent 26%),
        linear-gradient(180deg, #07070A 0%, #09090E 100%);
}

.single-product .plans__header {
    margin-bottom: 10px;
    color: #F4F1FF;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.02;
}

.single-product .plans__subhead {
    margin: 0 0 28px;
    color: var(--ep-text-muted);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 680px;
}

.single-product .plans__boxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.single-product .plans__box {
    padding: 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(168, 155, 255, 0.14);
    box-shadow: var(--ep-shadow);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.single-product .plans__box.medium-highlight {
    border-color: rgba(168, 155, 255, 0.34);
    box-shadow: 0 24px 80px rgba(109, 93, 246, 0.18);
}

.single-product .plans__box-title {
    color: #F4F1FF;
    letter-spacing: 0.04em;
}

.single-product .plans__box-bestseller {
    align-self: flex-start;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(109, 93, 246, 0.12);
    border: 1px solid rgba(168, 155, 255, 0.2);
    color: var(--ep-purple-light);
    font-size: 0.74rem;
    font-weight: 800;
}

.single-product .text__wrapper {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.single-product .plans .tariff-subtext,
.single-product .plans .tariff-description,
.single-product .plans__text,
.single-product .plans__box-subtitle {
    color: var(--ep-text-muted);
}

.single-product .plans__box-divider {
    border-color: rgba(168, 155, 255, 0.12);
    opacity: 1;
}

.single-product .plans__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.single-product .plans__list-item {
    color: var(--ep-text);
    line-height: 1.45;
}

.single-product .plans__list--yes .plans__list-item,
.single-product .plans__list--no .plans__list-item {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(168, 155, 255, 0.08);
}

.single-product .plans__list--checkbox {
    gap: 12px;
}

.single-product .plans__addon-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.12);
}

.single-product .plans__addon-title,
.single-product .plans__addon-price {
    color: #F4F1FF;
}

.single-product .plans__addon-price {
    color: var(--ep-purple-light);
    white-space: nowrap;
    font-weight: 700;
}

.single-product .plans__bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
}

.single-product .plans__accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(168, 155, 255, 0.1);
}

.single-product .plans__accordion-text {
    margin: 0;
    color: var(--ep-text-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.single-product .custom-select-wrapper {
    width: 100%;
    position: relative;
}

.single-product .custom-select-trigger {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.14);
    color: #F4F1FF;
}

.single-product .custom-options {
    margin-top: 8px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(13, 13, 18, 0.96);
    border: 1px solid rgba(168, 155, 255, 0.16);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.single-product .custom-options li {
    border-radius: 12px;
    color: var(--ep-text-muted);
}

.single-product .custom-options li.selected,
.single-product .custom-options li:hover {
    background: rgba(109, 93, 246, 0.14);
    color: #F4F1FF;
}

.single-product .custom-options li.is-disabled,
.single-product .custom-options li[data-disabled="true"] {
    opacity: 0.5;
}

.single-product .plans__buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.single-product .plans__button {
    width: 100%;
    min-height: 50px;
    border-radius: 16px;
}

.single-product .plans__button--primary {
    background: linear-gradient(135deg, #4B3FD6, #6D5DF6);
    border: 1px solid rgba(168, 155, 255, 0.35);
    color: #F4F1FF !important;
}

.single-product .plans__button--secondary {
    background: transparent;
    color: var(--ep-text-muted) !important;
    border: 1px solid rgba(168, 155, 255, 0.12);
}

.single-product .eg-booking__card {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(168, 155, 255, 0.14);
    box-shadow: var(--ep-shadow);
}

.single-product .money {
    padding-top: 24px;
}

.single-product .money__card {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 28px 32px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(168, 155, 255, 0.14);
    box-shadow: var(--ep-shadow);
    overflow: hidden;
}

.single-product .money__eyebrow {
    color: var(--ep-purple-light);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.single-product .money__title {
    margin: 0;
    color: #F4F1FF;
    font-size: clamp(1.6rem, 2vw, 2.2rem);
}

.single-product .money__price {
    color: #F4F1FF;
    font-size: 1.15rem;
}

.single-product .money__button {
    min-height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4B3FD6, #6D5DF6) !important;
    border: 1px solid rgba(168, 155, 255, 0.35) !important;
    color: #F4F1FF !important;
    box-shadow: 0 18px 36px rgba(75, 63, 214, 0.22) !important;
}

.single-product .money__methods,
.single-product .product-guarantee {
    color: var(--ep-text-muted);
}

.single-product .product-guarantee {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.1);
}

.single-product .money__photo {
    position: absolute;
    right: 24px;
    bottom: 0;
    width: 180px;
    height: auto;
    opacity: 0.9;
    pointer-events: none;
}

.single-product .eg-discord-promo--single {
    padding-top: 72px;
    padding-bottom: 72px;
}

.single-product .eg-faq-lite .container {
    padding: 32px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(168, 155, 255, 0.14);
    box-shadow: var(--ep-shadow);
}

.single-product .eg-faq-lite__title {
    margin: 0 0 22px;
    color: #F4F1FF;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.single-product .eg-faq-lite__list {
    display: grid;
    gap: 12px;
}

.single-product .eg-faq-lite__item {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(168, 155, 255, 0.10);
    overflow: hidden;
    transition: border-color 280ms ease, box-shadow 280ms ease, background 280ms ease;
}

/* Pass 11: open item reads as the one currently "in focus" instead of
   looking identical to the seven closed ones. */
.single-product .eg-faq-lite__item[open] {
    border-color: rgba(168, 155, 255, 0.32);
    background: rgba(139, 92, 246, 0.06);
    box-shadow: 0 0 0 1px rgba(168, 155, 255, 0.08) inset, 0 12px 32px rgba(109, 93, 246, 0.12);
}

.single-product .eg-faq-lite__item summary {
    position: relative;
    padding: 18px 52px 18px 22px;
    cursor: pointer;
    color: #F4F1FF;
    font-weight: 700;
    list-style: none;
}

.single-product .eg-faq-lite__item summary::-webkit-details-marker {
    display: none;
}

/* Pass 11: was a text "+"/"−" glyph swap — replaced with two CSS-drawn
   bars sharing one center point so they can rotate independently into an
   "×" (0deg/90deg -> 45deg/135deg), giving a real rotating-icon
   transition instead of an instant character swap. */
.single-product .eg-faq-lite__item summary::before,
.single-product .eg-faq-lite__item summary::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: var(--ep-purple-light);
    transition: transform 280ms ease;
}

.single-product .eg-faq-lite__item summary::before {
    transform: translateY(-50%) rotate(0deg);
}

.single-product .eg-faq-lite__item summary::after {
    transform: translateY(-50%) rotate(90deg);
}

.single-product .eg-faq-lite__item[open] summary::before {
    transform: translateY(-50%) rotate(45deg);
}

.single-product .eg-faq-lite__item[open] summary::after {
    transform: translateY(-50%) rotate(135deg);
}

/* Answer wrapper (added once by scripts.js) — the measured max-height
   transition; the native [open] display swap can't be transitioned, so
   JS keeps `open` true for the whole animation and only flips it at the
   end of a collapse. */
.single-product .eg-faq-lite__content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 320ms ease;
}

.single-product .eg-faq-lite__item p {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--ep-text-muted);
    line-height: 1.65;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 240ms ease, transform 240ms ease;
}

.single-product .eg-faq-lite__item[open] p {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .single-product .eg-faq-lite__item,
    .single-product .eg-faq-lite__item summary::before,
    .single-product .eg-faq-lite__item summary::after,
    .single-product .eg-faq-lite__content,
    .single-product .eg-faq-lite__item p {
        transition: none !important;
    }
}

.single-product .eg-related-girls .container {
    padding-top: 32px;
    padding-bottom: 32px;
}

.single-product .eg-related-girls__title {
    margin: 0 0 24px;
    color: #F4F1FF;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.single-product .eg-related-girls__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.single-product .eg-related-girls__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(168, 155, 255, 0.14);
    box-shadow: var(--ep-shadow);
    text-decoration: none !important;
    transition: transform 0.24s ease, border-color 0.24s ease;
}

.single-product .eg-related-girls__card:hover {
    transform: translateY(-4px);
    border-color: rgba(168, 155, 255, 0.3);
}

.single-product .eg-related-girls__image-wrap {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: rgba(255, 255, 255, 0.03);
}

.single-product .eg-related-girls__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-product .eg-related-girls__name {
    color: #F4F1FF;
    font-size: 1rem;
    font-weight: 700;
}

.single-product .eg-related-girls__price {
    color: var(--ep-purple-light);
    font-weight: 700;
}

@media (max-width: 1180px) {
    .single-product .ep-hero__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
    }

    .single-product .plans__boxes,
    .single-product .eg-related-girls__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .single-product .ep-how__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .single-product .ep-section-nav {
        top: 84px;
        width: calc(100% - 32px);
        margin-top: 16px;
    }

    .single-product .ep-hero {
        padding: 22px 24px 0 !important;
    }

    .single-product .ep-hero__inner {
        grid-template-columns: 1fr;
    }

    .single-product .ep-info {
        position: static;
    }

    .single-product .money__photo {
        width: 140px;
        opacity: 0.72;
    }
}

@media (max-width: 768px) {
    .single-product .ep-section-nav {
        width: calc(100% - 24px);
        top: 76px;
        padding: 8px;
        gap: 6px;
    }

    .single-product .ep-section-nav__link {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .single-product .ep-hero {
        padding: 18px 20px 0 !important;
    }

    .single-product .ep-gallery,
    .single-product .ep-info,
    .single-product .eg-reviews,
    .single-product .eg-faq-lite .container,
    .single-product .money__card {
        padding: 20px;
        border-radius: 22px;
    }

    .single-product .ep-value__list,
    .single-product .plans__boxes,
    .single-product .eg-related-girls__track,
    .single-product .eg-reviews__summary,
    .single-product .ep-how__list {
        grid-template-columns: 1fr;
    }

    .single-product .ep-booking-card__actions,
    .single-product .plans__buttons {
        grid-template-columns: 1fr;
    }

    .single-product .ep-booking-card__btn,
    .single-product .ep-cta__btn,
    .single-product .plans__button,
    .single-product .money__button {
        width: 100%;
    }

    .single-product .money__photo {
        display: none;
    }
}

@media (max-width: 430px) {
    .single-product .ep-hero,
    .single-product .girl .container,
    .single-product .plans .container,
    .single-product .eg-booking .container,
    .single-product .money .container,
    .single-product .eg-faq-lite .container,
    .single-product .eg-related-girls .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .single-product .ep-section-nav {
        width: calc(100% - 16px);
        top: 72px;
    }

    .single-product .ep-name {
        font-size: clamp(2rem, 10vw, 2.6rem) !important;
    }

    .single-product .ep-how__item {
        padding: 14px;
    }

    .single-product .ep-how__icon-wrap {
        width: 48px;
        height: 48px;
    }

    .single-product .ep-how__icon-wrap img {
        width: 28px;
        height: 28px;
    }
}

/* ── Safe structural fixes for girl profile pages ─────────────────────── */
html,
body,
body.girl__body {
    background: #07070A;
    margin: 0;
}

.single-product.product-profile,
.single-product.product-profile * {
    box-sizing: border-box;
}

.single-product.product-profile .plans__box,
.single-product.product-profile .plans__box *,
.single-product.product-profile .plans__addon-card,
.single-product.product-profile .plans__addon-card *,
.single-product.product-profile .ep-profile-overview,
.single-product.product-profile .ep-profile-overview * {
    word-break: normal !important;
    overflow-wrap: break-word;
    hyphens: auto;
    writing-mode: horizontal-tb !important;
}

.single-product.product-profile .plans__box-title,
.single-product.product-profile .plans__box-subtitle,
.single-product.product-profile .plans__addon-title,
.single-product.product-profile .plans__addon-price,
.single-product.product-profile .plans__accordion-text,
.single-product.product-profile .custom-select-trigger .selected-value {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal;
    hyphens: none;
}

.single-product.product-profile .plans__box,
.single-product.product-profile .plans__list-item,
.single-product.product-profile .plans__addon-card,
.single-product.product-profile .plans__addon-main,
.single-product.product-profile .plans__addon-head,
.single-product.product-profile .ep-profile-overview__main,
.single-product.product-profile .ep-profile-overview__side,
.single-product.product-profile .ep-detail-card,
.single-product.product-profile .ep-value__list li {
    min-width: 0;
}

.single-product .ep-hero {
    padding-bottom: 32px !important;
}

.single-product .ep-hero__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.65fr);
    gap: 28px;
}

.single-product .ep-gallery {
    display: flex;
    flex-direction: column;
}

.single-product .ep-gallery__main {
    min-height: 420px;
    max-height: 680px;
}

.single-product .ep-gallery__main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.single-product .ep-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.single-product .ep-header {
    align-items: flex-start;
}

.single-product .ep-status {
    flex-wrap: wrap;
}

.single-product .ep-profile-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 24px;
    margin-top: 28px;
}

.single-product .ep-profile-overview.is-no-about {
    grid-template-columns: 1fr;
}

.single-product .ep-profile-overview__main,
.single-product .ep-profile-overview__side {
    display: grid;
    gap: 18px;
    align-content: start;
}

.single-product .profile-section-card {
    height: 100%;
}

.single-product .ep-value__list {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.single-product .ep-value__list li {
    align-items: flex-start;
}

.single-product .ep-details {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 16px;
    align-items: start;
}

.single-product .ep-cta {
    margin-top: 0;
}

.single-product .ep-how__list {
    grid-template-columns: repeat(5, minmax(180px, 1fr));
}

.single-product .medium-highlight,
.single-product .plans__box.medium-highlight {
    transform: none !important;
}

.single-product .plans .container {
    max-width: 1360px;
}

.single-product .plans__boxes {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 24px;
    align-items: start;
}

.single-product .plans__box {
    min-width: 0;
    width: auto;
    gap: 18px;
    overflow: hidden;
}

.single-product .plans__box-title {
    line-height: 1.05;
}

.single-product .text__wrapper {
    min-width: 0;
}

.single-product .tariff-subtext,
.single-product .tariff-description,
.single-product .plans__text {
    align-self: flex-start;
    text-align: left;
}

.single-product .plans__list {
    padding-left: 0;
}

.single-product .plans__list-item {
    min-width: 0;
    align-items: flex-start;
}

.single-product .plans__list--checkbox {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 0;
}

.single-product .plans__list--checkbox::-webkit-scrollbar {
    width: 8px;
}

.single-product .plans__list--checkbox::-webkit-scrollbar-thumb {
    background: rgba(168, 155, 255, 0.24);
    border-radius: 999px;
}

.single-product .plans__list--checkbox .plans__list-item {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.single-product .plans__list--checkbox .plans__list-item + .plans__list-item {
    margin-top: 10px;
}

.single-product .plans__list--checkbox .plans__list-item label.plans__addon-card,
.single-product .plans__list--checkbox .plans__list-item label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 12px;
}

.single-product .plans__addon-main {
    display: block;
}

.single-product .plans__addon-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.single-product .plans__addon-title {
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.single-product .plans__addon-price {
    align-self: start;
    white-space: nowrap !important;
}

.single-product .plans__addon-tooltip {
    justify-self: end;
    align-self: start;
}

.single-product .plans__bottom {
    display: grid;
    gap: 14px;
}

.single-product .plans__accordion {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px;
}

.single-product .plans__accordion-text {
    margin: 0;
}

.single-product .custom-select-wrapper,
.single-product .custom-select-trigger,
.single-product .custom-options,
.single-product .plans__select {
    width: 100%;
    min-width: 0;
}

.single-product .custom-select-trigger {
    align-items: flex-start;
}

.single-product .custom-select-trigger .selected-value {
    min-width: 0;
    line-height: 1.35;
}

.single-product .custom-options li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    white-space: normal;
    line-height: 1.35;
}

.single-product .plans__buttons {
    gap: 12px;
}

.single-product .money__card {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.single-product .money__button {
    width: min(100%, 340px);
    margin: 0 auto;
}

.single-product .money__methods,
.single-product .product-guarantee {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.single-product .product-guarantee {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    transform: none;
}

.single-product .money__photo {
    display: none !important;
}

.single-product .ep-game-card.is-fallback {
    justify-content: center;
}

.single-product .ep-game-card.is-fallback::before {
    content: "WGIRLS";
    color: rgba(244, 241, 255, 0.46);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.single-product .ep-game-card__fallback {
    color: var(--ep-text-muted);
}

.single-product .eg-related-girls__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 220px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(109, 93, 246, 0.08));
    color: rgba(244, 241, 255, 0.72);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

@media (max-width: 1200px) {
    .single-product .ep-profile-overview {
        grid-template-columns: 1fr;
    }

    .single-product .ep-how__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .single-product .plans__boxes {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    }
}

@media (max-width: 768px) {
    .single-product .ep-value__list,
    .single-product .ep-details,
    .single-product .plans__boxes {
        grid-template-columns: 1fr;
    }

    .single-product .plans__list--checkbox {
        max-height: 360px;
    }
}

@media (max-width: 640px) {
    .single-product .ep-how__list {
        grid-template-columns: 1fr;
    }

    .single-product .plans__accordion {
        grid-template-columns: 1fr;
    }
}

/* ── Packages WOW v2 (compact + conversion) ─────────────────────────────── */
.eg-packages--wow {
    padding: 12px;
    border-radius: 12px;
    background:
        radial-gradient(110% 120% at 0% 0%, rgba(139, 92, 246, .08) 0%, transparent 56%),
        linear-gradient(145deg, #181232, #100d20);
}

.eg-packages--wow .eg-packages__head {
    margin-bottom: 8px;
    gap: 6px;
}

.eg-packages--wow .eg-packages__title {
    font-size: .68rem;
    letter-spacing: .12em;
}

.eg-packages--wow .eg-packages__trust {
    gap: 6px;
}

.eg-packages--wow .eg-packages__trust-chip {
    font-size: .68rem;
    padding: 3px 8px;
    border-radius: 999px;
}

.eg-packages--wow .eg-packages__notice {
    min-height: 14px;
    margin-bottom: 6px;
}

.eg-packages--wow .eg-packages__selectedbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(191, 158, 255, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
}

.eg-packages--wow .eg-packages__selectedbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.eg-packages--wow .eg-packages__selected-label {
    font-size: .76rem;
    font-weight: 700;
    color: #efe8ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eg-packages--wow .eg-packages__selected-price {
    font-size: .78rem;
    font-weight: 800;
    color: #c9f9d8;
    white-space: nowrap;
}

.eg-packages--wow .eg-packages__selected-btn {
    border: 0;
    border-radius: 999px;
    min-height: 30px;
    padding: 0 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.eg-packages--wow .eg-packages__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
}

.eg-packages--wow .eg-packages__card {
    min-width: 0;
    min-height: 0;
    padding: 10px;
    border-radius: 10px;
    gap: 5px;
    scroll-snap-align: none;
}

.eg-packages--wow .eg-packages__card:hover {
    transform: translateY(-1px);
}

.eg-packages--wow .eg-packages__card.is-selected,
.eg-packages--wow .eg-packages__card[aria-selected="true"] {
    border-color: rgba(229, 197, 255, .82);
    box-shadow: 0 0 0 1px rgba(229, 197, 255, .35), 0 10px 22px rgba(18, 10, 37, .48);
}

.eg-packages--wow .eg-packages__badge {
    font-size: .62rem;
    padding: 3px 7px;
}

.eg-packages--wow .eg-packages__name {
    font-size: .86rem;
}

.eg-packages--wow .eg-packages__price {
    font-size: .95rem;
}

.eg-packages--wow .eg-packages__desc,
.eg-packages--wow .eg-packages__when,
.eg-packages--wow .eg-packages__hint {
    font-size: .76rem;
    line-height: 1.3;
}

.eg-packages--wow .eg-packages__saving {
    font-size: .74rem;
}

.eg-packages--wow .eg-packages__choose {
    min-height: 30px;
    padding: 0 10px;
    font-size: .72rem;
    margin-top: 2px;
}

@media (min-width: 992px) {
    .eg-packages--wow .eg-packages__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eg-packages--wow .eg-packages__card {
        min-height: 150px;
    }

    .eg-packages--wow .eg-packages__card.is-anchor {
        grid-column: 1 / -1;
        min-height: 138px;
    }

    .eg-packages--wow .eg-packages__card.is-subscription {
        grid-column: auto;
        min-height: 150px;
    }
}

@media (max-width: 991px) {
    .eg-packages--wow .eg-packages__selectedbar {
        position: sticky;
        top: 8px;
        z-index: 3;
        backdrop-filter: blur(8px);
    }
}

@media (min-width: 700px) and (max-width: 991px) {
    .eg-packages--wow .eg-packages__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eg-packages--wow .eg-packages__card.is-anchor,
    .eg-packages--wow .eg-packages__card.is-subscription {
        grid-column: 1 / -1;
    }
}

@media (max-width: 699px) {
    .eg-packages--wow .eg-packages__selectedbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 8px;
    }

    .eg-packages--wow .eg-packages__selectedbar-left {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .eg-packages--wow .eg-packages__selected-label {
        white-space: normal;
    }

    .eg-packages--wow .eg-packages__selected-btn {
        width: 100%;
        justify-content: center;
    }

    .eg-packages--wow .eg-packages__choose {
        width: 100%;
    }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .ep-hero *,
    .ep-hero *::before,
    .ep-hero *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .ep-loader {
        display: none !important;
    }

    .eg-parallax-bg {
        background-attachment: scroll;
        background-position: center center;
    }
}

/* ── Product profile premium polish: visual only ───────────────────────── */
/* Pass 12 width system — three intentional shells, not "every section is
   the same width":
   --eg-profile-width  (1180px) "shell" — hero/profile, benefits, how-it-
     works, reviews, FAQ, related, the Discord banner. The page's main
     reading column.
   --eg-plans-width     (1432px) "wide" — plans only, deliberately wider
     because it's a comparison grid of 3 cards that benefits from more
     breathing room, not a reading column.
   --eg-profile-narrow  (720px) "narrow" — the final booking card, which
     should read as a single focused decision, not a wide section. */
.girl__body.single-product.product-profile {
    --eg-profile-width: 1180px;
    --eg-plans-width: 1432px;
    --eg-profile-narrow: 720px;
    --eg-profile-bg: #07070A;
    --eg-profile-card: rgba(255, 255, 255, 0.045);
    --eg-profile-card-soft: rgba(255, 255, 255, 0.035);
    --eg-profile-border: rgba(168, 155, 255, 0.14);
    --eg-profile-border-strong: rgba(168, 155, 255, 0.26);
    --eg-profile-accent: #6D5DF6;
    --eg-profile-accent-soft: #A89BFF;
    --eg-profile-text: #F4F1FF;
    --eg-profile-muted: #A7A0B8;
    background: var(--eg-profile-bg) !important;
}

.girl__body.single-product.product-profile .single-product.product-profile {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(109, 93, 246, 0.13), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(168, 155, 255, 0.09), transparent 30%),
        radial-gradient(circle at 62% 72%, rgba(109, 93, 246, 0.08), transparent 38%),
        var(--eg-profile-bg);
}

.girl__body.single-product.product-profile .single-product.product-profile::before,
.girl__body.single-product.product-profile .single-product.product-profile::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(110px);
    pointer-events: none;
    z-index: 0;
}

.girl__body.single-product.product-profile .single-product.product-profile::before {
    top: 90px;
    left: -160px;
    width: 420px;
    height: 420px;
    background: rgba(109, 93, 246, 0.14);
}

.girl__body.single-product.product-profile .single-product.product-profile::after {
    right: -150px;
    top: 520px;
    width: 380px;
    height: 380px;
    background: rgba(168, 155, 255, 0.10);
}

.girl__body.single-product.product-profile .single-product.product-profile > * {
    position: relative;
    z-index: 1;
}

.girl__body.single-product.product-profile .product-page-container,
.girl__body.single-product.product-profile .ep-profile-section > .container,
.girl__body.single-product.product-profile .eg-discord-promo > .container,
.girl__body.single-product.product-profile .profile-subnav,
.girl__body.single-product.product-profile .ep-hero,
.girl__body.single-product.product-profile .profile-benefits-wide,
.girl__body.single-product.product-profile .ep-how {
    width: min(calc(100% - 40px), var(--eg-profile-width)) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

.girl__body.single-product.product-profile .profile-info-card,
.girl__body.single-product.product-profile .profile-benefits-wide,
.girl__body.single-product.product-profile .eg-booking__card,
.girl__body.single-product.product-profile .money__card,
.girl__body.single-product.product-profile .eg-faq-lite .container,
.girl__body.single-product.product-profile .eg-discord-promo__card,
.girl__body.single-product.product-profile .eg-related-girls__card {
    background:
        radial-gradient(circle at 82% 18%, rgba(109, 93, 246, 0.12), transparent 34%),
        var(--eg-profile-card) !important;
    border: 1px solid var(--eg-profile-border) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Split out from the shared rule above (without !important on box-shadow)
   so the animated glow further down this file can actually override it —
   CSS animations can never win against an !important box-shadow value. */
.girl__body.single-product.product-profile .profile-gallery-card {
    background:
        radial-gradient(circle at 82% 18%, rgba(109, 93, 246, 0.12), transparent 34%),
        var(--eg-profile-card) !important;
    border: 1px solid var(--eg-profile-border) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.girl__body.single-product.product-profile .profile-gallery-card:hover,
.girl__body.single-product.product-profile .profile-info-card:hover,
.girl__body.single-product.product-profile .eg-related-girls__card:hover {
    border-color: var(--eg-profile-border-strong) !important;
}

.girl__body.single-product.product-profile .profile-gallery-card {
    /* was overflow:hidden — the inner .ep-gallery__main already clips the
       image itself via its own overflow:clip, so the outer card can stay
       visible and let the glow breathe outside its edges. */
    overflow: visible !important;
}

.girl__body.single-product.product-profile .ep-gallery__main {
    background:
        radial-gradient(circle at 80% 18%, rgba(109, 93, 246, 0.14), transparent 38%),
        rgba(8, 8, 12, 0.92) !important;
    border: 1px solid rgba(168, 155, 255, 0.12);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.girl__body.single-product.product-profile .profile-thumbnail,
.girl__body.single-product.product-profile .ep-gallery__thumb,
.girl__body.single-product.product-profile .profile-reaction,
.girl__body.single-product.product-profile .ep-reaction-btn,
.girl__body.single-product.product-profile .benefit-card,
.girl__body.single-product.product-profile .plans__box,
.girl__body.single-product.product-profile .eg-review-card,
.girl__body.single-product.product-profile .eg-related-girls__card {
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.girl__body.single-product.product-profile .profile-thumbnail:hover,
.girl__body.single-product.product-profile .ep-gallery__thumb:hover,
.girl__body.single-product.product-profile .profile-thumbnail.is-active,
.girl__body.single-product.product-profile .ep-gallery__thumb.is-active {
    box-shadow: 0 0 18px rgba(109, 93, 246, 0.30) !important;
}

.girl__body.single-product.product-profile .profile-reaction:hover,
.girl__body.single-product.product-profile .ep-reaction-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 155, 255, 0.28) !important;
    background: rgba(109, 93, 246, 0.08) !important;
    box-shadow: 0 12px 28px rgba(109, 93, 246, 0.16);
}

.girl__body.single-product.product-profile .profile-about-block,
.girl__body.single-product.product-profile .preference-card,
.girl__body.single-product.product-profile .ep-value__list li,
.girl__body.single-product.product-profile .plans__list--yes .plans__list-item,
.girl__body.single-product.product-profile .plans__list--no .plans__list-item,
.girl__body.single-product.product-profile .plans__addon-card,
.girl__body.single-product.product-profile .plans__accordion,
.girl__body.single-product.product-profile .custom-select-trigger,
.girl__body.single-product.product-profile .product-guarantee,
.girl__body.single-product.product-profile .eg-reviews__summary-main,
.girl__body.single-product.product-profile .eg-reviews__bars,
.girl__body.single-product.product-profile .eg-reviews__head {
    background: var(--eg-profile-card-soft) !important;
    border: 1px solid rgba(168, 155, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.girl__body.single-product.product-profile .preference-chip,
.girl__body.single-product.product-profile .ep-films-list li,
.girl__body.single-product.product-profile .ep-booking-card__meta span {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(168, 155, 255, 0.12) !important;
    color: #DCD8EA !important;
}

.girl__body.single-product.product-profile .quick-start-card {
    gap: 16px;
    padding: 24px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(109, 93, 246, 0.18), transparent 38%),
        rgba(255, 255, 255, 0.04) !important;
}

.girl__body.single-product.product-profile .quick-start-card .ep-booking-card__text {
    color: var(--eg-profile-muted);
}

.girl__body.single-product.product-profile .ep-booking-card__btn--primary,
.girl__body.single-product.product-profile .money__button,
.girl__body.single-product.product-profile .eg-reviews__write-btn,
.girl__body.single-product.product-profile .eg-review-form__submit,
.girl__body.single-product.product-profile .plans__button--primary {
    background: linear-gradient(135deg, #4B3FD6, #6D5DF6) !important;
    border: 1px solid rgba(168, 155, 255, 0.35) !important;
    box-shadow:
        0 14px 38px rgba(109, 93, 246, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.girl__body.single-product.product-profile .ep-booking-card__btn--primary:hover,
.girl__body.single-product.product-profile .money__button:hover,
.girl__body.single-product.product-profile .eg-reviews__write-btn:hover,
.girl__body.single-product.product-profile .eg-review-form__submit:hover,
.girl__body.single-product.product-profile .plans__button--primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 50px rgba(109, 93, 246, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.girl__body.single-product.product-profile .ep-booking-card__btn--secondary,
.girl__body.single-product.product-profile .plans__button--secondary {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(168, 155, 255, 0.14) !important;
}

.girl__body.single-product.product-profile .ep-booking-card__btn--secondary:hover,
.girl__body.single-product.product-profile .plans__button--secondary:hover {
    background: rgba(109, 93, 246, 0.08) !important;
    border-color: rgba(168, 155, 255, 0.26) !important;
}

.girl__body.single-product.product-profile .first-order-promo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(109, 93, 246, 0.16), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(168, 155, 255, 0.18);
    box-shadow: 0 14px 38px rgba(109, 93, 246, 0.12);
}

.girl__body.single-product.product-profile .promo-badge {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(109, 93, 246, 0.22);
    color: var(--eg-profile-text);
    font-size: 1rem;
    font-weight: 900;
    box-shadow: inset 0 0 24px rgba(168, 155, 255, 0.14);
}

.girl__body.single-product.product-profile .first-order-promo__copy strong {
    display: block;
    color: var(--eg-profile-text);
    line-height: 1.2;
}

.girl__body.single-product.product-profile .first-order-promo__copy p {
    margin: 4px 0 0;
    color: var(--eg-profile-muted);
    font-size: 13px;
    line-height: 1.4;
}

.girl__body.single-product.product-profile .profile-benefits-wide {
    margin-top: 40px !important;
    padding: 28px !important;
}

.girl__body.single-product.product-profile .benefit-card:hover {
    transform: translateY(-3px);
    border-color: var(--eg-profile-border-strong) !important;
    background: rgba(109, 93, 246, 0.07) !important;
    box-shadow: 0 18px 42px rgba(109, 93, 246, 0.12);
}

.girl__body.single-product.product-profile .ep-how {
    margin: clamp(56px, 7vw, 96px) auto 0 !important;
    padding: 28px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 82% 22%, rgba(109, 93, 246, 0.10), transparent 36%),
        var(--eg-profile-card) !important;
    border: 1px solid var(--eg-profile-border) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    overflow: hidden;
    box-sizing: border-box;
}

.girl__body.single-product.product-profile .ep-how__title {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    color: var(--eg-profile-text);
}

.girl__body.single-product.product-profile .ep-how__subtitle {
    margin: 8px 0 22px;
    color: var(--eg-profile-muted);
    font-size: 0.92rem;
}

.girl__body.single-product.product-profile .ep-how__list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0 !important;
    min-width: 0;
}

.girl__body.single-product.product-profile .ep-how__list::before {
    top: 42px;
    left: 8%;
    right: 8%;
    background: linear-gradient(90deg, transparent, rgba(168, 155, 255, 0.22), transparent);
}

.girl__body.single-product.product-profile .ep-how__item {
    flex: initial !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 140px;
    padding: 18px !important;
    border-radius: 20px;
    background: var(--eg-profile-card-soft) !important;
    border: 1px solid rgba(168, 155, 255, 0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.girl__body.single-product.product-profile .ep-how__item:hover {
    transform: translateY(-3px);
    border-color: var(--eg-profile-border-strong) !important;
    background: rgba(109, 93, 246, 0.06) !important;
    box-shadow: 0 18px 40px rgba(109, 93, 246, 0.12);
}

.girl__body.single-product.product-profile .ep-how__num {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(168, 155, 255, 0.10);
    border: 1px solid rgba(168, 155, 255, 0.18);
    color: var(--eg-profile-accent-soft);
}

.girl__body.single-product.product-profile .ep-how__step-title {
    color: var(--eg-profile-text);
}

.girl__body.single-product.product-profile .ep-how__step-desc,
.girl__body.single-product.product-profile .ep-how__reassure {
    color: var(--eg-profile-muted);
}

.girl__body.single-product.product-profile .ep-how__reassure {
    background: var(--eg-profile-card-soft) !important;
    border: 1px solid rgba(168, 155, 255, 0.12) !important;
}

.girl__body.single-product.product-profile .eg-booking__card {
    padding: clamp(26px, 3vw, 34px) !important;
    border-radius: 28px !important;
}

/* Pass 12: .eg-reviews sits one level deeper than hero/benefits/FAQ — it's
   a child of .product-page-container, not the shell-width element itself.
   .product-page-container is the generic theme .container (style.css),
   which carries its own ~40px side padding; .eg-reviews's `width: 100%`
   resolves against that container's *content* box, so it rendered ~80px
   narrower than the shell and inset from its left/right edges instead of
   flush with them. Zeroing that one wrapper's padding (below) lets
   .eg-reviews's 100% resolve against the full 1180px shell instead. */
.girl__body.single-product.product-profile .ep-profile-section--reviews > .container {
    padding: 0 !important;
}

.girl__body.single-product.product-profile .eg-reviews {
    width: min(100%, var(--eg-profile-width)) !important;
    max-width: none !important;
    margin: 0 auto;
    padding: 0;
}

.girl__body.single-product.product-profile .eg-reviews__summary {
    padding: 28px !important;
    border-radius: 28px;
    background:
        radial-gradient(circle at 82% 12%, rgba(109, 93, 246, 0.10), transparent 34%),
        var(--eg-profile-card) !important;
    border: 1px solid var(--eg-profile-border) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.girl__body.single-product.product-profile .eg-reviews__bar-track {
    background: rgba(255, 255, 255, 0.08);
}

.girl__body.single-product.product-profile .eg-reviews__bar-fill {
    background: linear-gradient(90deg, #6D5DF6, #A89BFF);
    box-shadow: 0 0 16px rgba(109, 93, 246, 0.35);
}

.girl__body.single-product.product-profile .eg-review-card:hover {
    transform: translateY(-3px);
    border-color: var(--eg-profile-border-strong) !important;
    background: rgba(109, 93, 246, 0.06) !important;
}

.girl__body.single-product.product-profile .eg-reviews__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    max-width: 540px;
    margin: 18px auto 0 !important;
    text-align: center !important;
}

.girl__body.single-product.product-profile .plans__box {
    background:
        radial-gradient(circle at 82% 18%, rgba(109, 93, 246, 0.08), transparent 34%),
        var(--eg-profile-card) !important;
    border: 1px solid var(--eg-profile-border) !important;
    box-shadow:
        0 22px 64px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.girl__body.single-product.product-profile .plans__box:hover {
    transform: translateY(-4px);
    border-color: var(--eg-profile-border-strong) !important;
}

.girl__body.single-product.product-profile .plans__box.medium-highlight {
    border-color: rgba(168, 155, 255, 0.28) !important;
    box-shadow:
        0 26px 78px rgba(109, 93, 246, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.girl__body.single-product.product-profile .plans__box > h3.plans__box-title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.05;
    color: var(--eg-profile-text);
}

.girl__body.single-product.product-profile .text__wrapper .plans__box-title {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    line-height: 1;
    color: var(--eg-profile-text);
}

.girl__body.single-product.product-profile .plans__box-bestseller {
    margin-top: 2px;
    box-shadow: 0 10px 28px rgba(109, 93, 246, 0.12);
}

.girl__body.single-product.product-profile .money__card,
.girl__body.single-product.product-profile .booking-summary {
    width: min(100%, var(--eg-profile-narrow)) !important;
    margin: clamp(56px, 7vw, 96px) auto 0 !important;
    padding: 34px 32px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(109, 93, 246, 0.12), transparent 42%),
        var(--eg-profile-card) !important;
    overflow: visible !important;
    min-height: auto !important;
    max-height: none !important;
}

.girl__body.single-product.product-profile .money__title {
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    line-height: 1.06;
}

.girl__body.single-product.product-profile .money__button,
.girl__body.single-product.product-profile .manager-button {
    min-height: 52px !important;
    text-align: center;
}

.girl__body.single-product.product-profile .product-guarantee {
    line-height: 1.5;
}

.girl__body.single-product.product-profile .eg-discord-promo__card {
    background:
        radial-gradient(circle at 82% 18%, rgba(109, 93, 246, 0.22), transparent 38%),
        radial-gradient(circle at 18% 82%, rgba(168, 155, 255, 0.08), transparent 36%),
        linear-gradient(145deg, rgba(17, 14, 28, 0.96), rgba(11, 10, 18, 0.98)) !important;
}

.girl__body.single-product.product-profile .eg-discord-promo__icon-wrap {
    background: linear-gradient(145deg, rgba(109, 93, 246, 0.24), rgba(79, 35, 194, 0.12));
    border: 1px solid rgba(168, 155, 255, 0.24);
    box-shadow: 0 22px 48px rgba(84, 35, 194, 0.18);
}

.girl__body.single-product.product-profile .eg-discord-promo__btn {
    box-shadow: 0 16px 38px rgba(109, 93, 246, 0.28);
}

.girl__body.single-product.product-profile .eg-related-girls__card:hover {
    box-shadow: 0 18px 48px rgba(109, 93, 246, 0.12);
}

.girl__body.single-product.product-profile .eg-related-girls__image-wrap {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

@media (max-width: 1180px) {
    .girl__body.single-product.product-profile .ep-how__list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .girl__body.single-product.product-profile .ep-how__list::before {
        display: none;
    }
}

@media (max-width: 980px) {
    .girl__body.single-product.product-profile .product-page-container,
    .girl__body.single-product.product-profile .ep-profile-section > .container,
    .girl__body.single-product.product-profile .eg-discord-promo > .container,
    .girl__body.single-product.product-profile .profile-subnav,
    .girl__body.single-product.product-profile .ep-hero,
    .girl__body.single-product.product-profile .profile-benefits-wide,
    .girl__body.single-product.product-profile .ep-how {
        width: min(calc(100% - 32px), var(--eg-profile-width)) !important;
    }
}

@media (max-width: 768px) {
    .girl__body.single-product.product-profile .ep-how__list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .girl__body.single-product.product-profile .quick-start-card,
    .girl__body.single-product.product-profile .profile-benefits-wide,
    .girl__body.single-product.product-profile .eg-booking__card,
    .girl__body.single-product.product-profile .money__card,
    .girl__body.single-product.product-profile .booking-summary,
    .girl__body.single-product.product-profile .eg-faq-lite .container,
    .girl__body.single-product.product-profile .eg-discord-promo__card {
        padding: 24px !important;
    }

    .girl__body.single-product.product-profile .eg-reviews__summary {
        grid-template-columns: 1fr !important;
    }

    .girl__body.single-product.product-profile .eg-reviews__summary-main {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(168, 155, 255, 0.12) !important;
    }
}

@media (max-width: 640px) {
    .girl__body.single-product.product-profile .product-page-container,
    .girl__body.single-product.product-profile .ep-profile-section > .container,
    .girl__body.single-product.product-profile .eg-discord-promo > .container,
    .girl__body.single-product.product-profile .profile-subnav,
    .girl__body.single-product.product-profile .ep-hero,
    .girl__body.single-product.product-profile .profile-benefits-wide,
    .girl__body.single-product.product-profile .ep-how {
        width: min(calc(100% - 24px), var(--eg-profile-width)) !important;
    }

    .girl__body.single-product.product-profile .first-order-promo {
        grid-template-columns: 1fr;
    }

    .girl__body.single-product.product-profile .promo-badge {
        width: 50px;
        height: 50px;
    }

    .girl__body.single-product.product-profile .money__card,
    .girl__body.single-product.product-profile .booking-summary {
        padding: 30px 22px !important;
    }
}

@media (max-width: 520px) {
    .girl__body.single-product.product-profile .ep-how__list {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .girl__body.single-product.product-profile .profile-thumbnail,
    .girl__body.single-product.product-profile .ep-gallery__thumb,
    .girl__body.single-product.product-profile .profile-reaction,
    .girl__body.single-product.product-profile .ep-reaction-btn,
    .girl__body.single-product.product-profile .benefit-card,
    .girl__body.single-product.product-profile .plans__box,
    .girl__body.single-product.product-profile .eg-review-card,
    .girl__body.single-product.product-profile .eg-related-girls__card,
    .girl__body.single-product.product-profile .ep-booking-card__btn,
    .girl__body.single-product.product-profile .money__button,
    .girl__body.single-product.product-profile .plans__button {
        transition-duration: 0.01ms !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Profile hero/dossier — premium refinement pass (above-the-fold only)
   Scope: gallery frame, status/achievement badges, dossier card, bio,
   preference chips, audio player, quick-start/first-order promo.
   Does not touch plans, booking calendar, final CTA, reviews, or JS hooks.
   ══════════════════════════════════════════════════════════════════════ */

/* Gallery — photo frame depth */
.girl__body.single-product.product-profile .ep-gallery__main {
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.32),
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 60px rgba(109, 93, 246, 0.16);
}

/* Status badge on photo — legibility + soft glow, color logic unchanged */
.girl__body.single-product.product-profile .ep-gallery__badge {
    background: rgba(15, 12, 28, 0.62);
    border: 1px solid rgba(74, 222, 128, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 18px rgba(74, 222, 128, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.girl__body.single-product.product-profile .ep-gallery__badge.is-offline {
    border-color: rgba(148, 163, 184, 0.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Achievement badges — soft ambient glow */
.girl__body.single-product.product-profile .ep-achievement-badge {
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(168, 155, 255, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Status row — the real status is the trust signal; the viewer count is ambient texture, not a competing claim */
.girl__body.single-product.product-profile .ep-status__slot {
    font-size: 0.86rem;
    padding: 9px 18px;
}

.girl__body.single-product.product-profile .ep-status__slot:not(.is-offline) {
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.18), 0 0 20px rgba(74, 222, 128, 0.14);
}

.girl__body.single-product.product-profile .ep-status__viewers {
    padding: 4px 2px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
    color: var(--eg-profile-muted) !important;
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.78;
}

.girl__body.single-product.product-profile .ep-status__viewers-icon {
    opacity: 0.7;
}

.girl__body.single-product.product-profile .ep-status__viewers-count {
    color: var(--eg-profile-muted) !important;
}

/* Bio card — give it real card framing instead of near-invisible borders */
.girl__body.single-product.product-profile .profile-about-block {
    padding: 20px 22px;
    border-radius: 20px;
}

.girl__body.single-product.product-profile .profile-about-block h3 {
    margin: 0 0 10px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eg-profile-accent-soft);
}

/* Preference chips — proper card framing + premium chip language matching the catalog */
.girl__body.single-product.product-profile .profile-preferences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.girl__body.single-product.product-profile .preference-card {
    padding: 16px 18px;
    border-radius: 18px;
}

.girl__body.single-product.product-profile .preference-card h3 {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eg-profile-accent-soft);
}

.girl__body.single-product.product-profile .preference-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.girl__body.single-product.product-profile .preference-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.girl__body.single-product.product-profile .preference-chip--empty {
    opacity: 0.6;
    font-weight: 500;
}

/* Quick-start / first-order promo card — subtle animated border, restrained not flashy */
@property --eg-quickstart-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.girl__body.single-product.product-profile .quick-start-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 24px;
}

.girl__body.single-product.product-profile .quick-start-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--eg-quickstart-border-angle, 0deg),
        rgba(109, 93, 246, 0.06),
        rgba(201, 184, 255, 0.32),
        rgba(109, 93, 246, 0.14),
        rgba(201, 184, 255, 0.05),
        rgba(109, 93, 246, 0.06)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
    animation: egQuickstartBorderOrbit 10s linear infinite;
}

@keyframes egQuickstartBorderOrbit {
    to {
        --eg-quickstart-border-angle: 360deg;
    }
}

.girl__body.single-product.product-profile .quick-start-card > * {
    position: relative;
    z-index: 1;
}

/* First-order promo badge — soft static glow only, no spin (secondary inline element) */
.girl__body.single-product.product-profile .promo-badge {
    box-shadow: inset 0 0 24px rgba(168, 155, 255, 0.14), 0 0 22px rgba(109, 93, 246, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .girl__body.single-product.product-profile .quick-start-card::before {
        animation: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Profile conversion pass 2 — layout stability, reactions, benefits,
   how-it-works, reviews padding, plans background/icons/badge, lower
   section gaps, anime/games chip polish.
   Visual only. No JS, no pricing/booking/AJAX selectors touched.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Hero/dossier — stop the top layout from spreading at zoomed-out
   desktop widths. Cap both grid columns instead of letting the gallery
   column grow unbounded (which was stretching the 3/4 photo very tall
   relative to the dossier card). Scoped above the existing 980px mobile
   breakpoint so the single-column mobile layout is untouched. */
@media (min-width: 981px) {
    .girl__body.single-product.product-profile .profile-hero-grid {
        grid-template-columns: minmax(340px, 520px) minmax(380px, 460px);
        justify-content: center;
    }
}

/* The photo's actual height was driven by `clamp(620px, 52vw, 780px)` on
   the <img> — a viewport-width unit fully decoupled from the column's
   real rendered width. That is the real cause of the runaway height at
   wide/zoomed-out viewports. Re-anchor height to the container instead. */
.girl__body.single-product.product-profile .ep-gallery__main {
    aspect-ratio: 3 / 4 !important;
    max-height: 640px !important;
}

.girl__body.single-product.product-profile .profile-main-image,
.girl__body.single-product.product-profile .profile-main-media > img,
.girl__body.single-product.product-profile .ep-gallery__main > img {
    height: 100% !important;
    max-height: none !important;
}

/* 2) Emoji reactions — remove from the hero; cosmetic noise, not a
   conversion driver. JS/localStorage logic left untouched; thumbnails
   take the row naturally since the parent is a flex row. */
.girl__body.single-product.product-profile .ep-reactions,
.girl__body.single-product.product-profile .profile-reactions {
    display: none !important;
}

/* 4) Benefit cards — center icon+text instead of top-aligning, so short
   single-line benefits don't leave awkward dead space under the icon. */
.girl__body.single-product.product-profile .benefit-card {
    align-items: center !important;
    min-height: 104px;
}

.girl__body.single-product.product-profile .ep-value__text {
    line-height: 1.45;
}

/* 5) How-it-works — less top margin (was stacking a large clamp on top
   of the section's own padding), stronger trust note at the bottom. */
.girl__body.single-product.product-profile .ep-how {
    margin-top: clamp(32px, 4vw, 56px) !important;
}

.girl__body.single-product.product-profile .ep-how__reassure {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(109, 93, 246, 0.1);
    border: 1px solid rgba(168, 155, 255, 0.18);
    font-weight: 600;
}

/* 6/7) Reviews — more breathing room, premium empty state. No fake
   public reviews are introduced; the existing honest empty-state copy
   ("Пока нет отзывов. Будь первым") is kept and just styled properly. */
.girl__body.single-product.product-profile .eg-reviews {
    padding: 56px 20px 48px;
}

.girl__body.single-product.product-profile .eg-reviews__summary {
    padding: 22px 24px;
}

.girl__body.single-product.product-profile .eg-reviews__empty {
    margin: 12px 0 0;
    padding: 36px 28px !important;
    border-radius: 20px;
    background: rgba(109, 93, 246, 0.07);
    border: 1px solid rgba(168, 155, 255, 0.16);
    font-size: 1rem;
    font-weight: 600;
    color: var(--eg-profile-text);
}

/* 8) Plans section — remove the mismatched "sky" background image left
   over from an older page design; let the global dark/violet atmosphere
   show through instead. Same fix applied to FAQ, which had the same
   leftover background.
   Final booking (.money) has the identical legacy rule in style.css
   (same sky photo URL, same dark overlay) — it was missed here, which is
   exactly why a hard seam was visible around Final Booking: a literal
   photo was painting behind #final while every section around it showed
   the plain dark/violet atmosphere. Added below so .money is neutralized
   the same way. */
.girl__body.single-product.product-profile .plans,
.girl__body.single-product.product-profile .eg-faq-lite,
.girl__body.single-product.product-profile .money {
    background-image: none !important;
    background-color: transparent !important;
}

/* 9) Plan check/cross icons — bigger, clearer contrast tint behind the
   icon so available/unavailable reads instantly. */
.girl__body.single-product.product-profile .plan-feature__icon,
.girl__body.single-product.product-profile .service-item__icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 8px;
    background-size: 16px 16px !important;
}

.girl__body.single-product.product-profile .plan-feature {
    grid-template-columns: 26px minmax(0, 1fr) !important;
}

.girl__body.single-product.product-profile .plan-feature--available .plan-feature__icon,
.girl__body.single-product.product-profile .service-item--available .service-item__icon {
    background-color: rgba(74, 222, 128, 0.14);
}

.girl__body.single-product.product-profile .plan-feature--unavailable .plan-feature__icon,
.girl__body.single-product.product-profile .service-item--unavailable .service-item__icon {
    background-color: rgba(148, 163, 184, 0.12);
}

/* 10) Medium "Выбор большинства" badge — pin it to the same top-right
   corner the Lite/Hard subtext badges already use (.tariff-subtext in
   style.css), so all three cards share one consistent badge position
   instead of Medium's badge sitting inline below the title. */
.girl__body.single-product.product-profile .plans__box-bestseller {
    position: absolute;
    top: 6px;
    right: 10px;
    margin-top: 0;
    z-index: 2;
}

.girl__body.single-product.product-profile .plans__box {
    position: relative;
}

/* 11) Lower sections — reduce the large stacked gaps between the final
   booking card, Discord promo, FAQ and related profiles. */
.girl__body.single-product.product-profile .ep-profile-section {
    padding: 48px 0 !important;
}

.girl__body.single-product.product-profile .booking-summary {
    margin: clamp(32px, 4vw, 48px) auto 0 !important;
}

.girl__body.single-product.product-profile .ep-profile-section--summary + .eg-discord-promo--single {
    margin-top: clamp(40px, 5vw, 64px) !important;
}

/* 12/13) Anime/games chips — calmer card distinction + clean wrapping
   for longer normalized titles (e.g. "Клинок, рассекающий демонов"). */
.girl__body.single-product.product-profile .preference-card--games h3 {
    color: var(--eg-profile-accent-soft);
}

.girl__body.single-product.product-profile .preference-card--anime h3 {
    color: #f0a8d8;
}

.girl__body.single-product.product-profile .preference-card--anime .preference-chip {
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════
   Profile conversion pass 3 — layout stretch fix, chip shape, quick-start
   integration, review preview styling, gap reduction, plans redesign.
   Visual + two small markup additions (badge copy, review preview block).
   No JS, no pricing/booking/AJAX selectors, no data attributes touched.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Hero stretch fix — the real binding rule was `.profile-info-card`
   (align-self: stretch !important; height: 100% !important), a DIFFERENT
   class than `.profile-dossier-card` which lives on the same element.
   Overriding the actual rule this time so each column is its own natural
   height instead of being forced to match the taller one. */
@media (min-width: 981px) {
    .girl__body.single-product.product-profile .profile-hero-grid {
        align-items: start !important;
    }

    .girl__body.single-product.product-profile .profile-info-card {
        height: auto !important;
        min-height: auto !important;
        align-self: start !important;
    }

    .girl__body.single-product.product-profile .profile-gallery-card {
        align-self: start !important;
    }
}

/* Tighten internal dossier rhythm so the column reads compact rather
   than tall, independent of the stretch fix above. */
.girl__body.single-product.product-profile .ep-info {
    gap: 16px !important;
}

.girl__body.single-product.product-profile .profile-dossier-main {
    gap: 14px !important;
}

/* Quick-start reads as its own distinct module within the column instead
   of blending into the dossier flow above it. */
.girl__body.single-product.product-profile .quick-start-card {
    margin-top: 4px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* The standalone .ep-profile-ambient-fill block (a real DOM div sitting in
   flow between About and Quick Start) kept reading as "a rectangle" no
   matter how soft its own visuals got, because it was always its own box
   with its own height and edges. Removed from the template entirely.
   .profile-dossier-card (= .profile-info-card, same element) already
   carries a base radial-gradient background biased toward the lower
   portion near Quick Start (see the "any extra space above [quick-start]
   gets a soft ambient glow" background rule further down this file) — the
   two pseudo-elements below add only a couple of extra, much fainter
   touches (a few tiny particles, one faint arc) anchored to roughly where
   the gap usually falls. z-index:-1 guarantees both stay behind every real
   child (profile-dossier-main, quick-start-card) regardless of DOM order
   or the isolation context quick-start-card sets up for its own border
   animation, so there is no possible way for this decoration to paint over
   real content. Because these are pure background-layer pseudo-elements
   with no box of their own — not a flow element — a longer About text on
   another girl's profile simply renders on top of this area as normal
   text, the same way text always sits over a card's own background; there
   is nothing to "make room for" and nothing left behind to look empty. */
/* content/display need !important: style.css has a legacy
   `.ep-info::before { display: none !important; content: none !important; }`
   reset (.ep-info is a co-class on this exact element, added at some
   earlier point to kill an unrelated unwanted ::before). Equal
   specificity to the selector below, so without matching !important here
   that legacy rule wins and silently suppresses this pseudo-element
   entirely — confirmed live via the browser's own matched-rules list. */
.girl__body.single-product.product-profile .profile-dossier-card::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    background:
        radial-gradient(circle 3px at 23% 63%, rgba(201, 184, 255, 0.45), transparent 75%),
        radial-gradient(circle 2px at 70% 57%, rgba(168, 155, 255, 0.38), transparent 75%),
        radial-gradient(circle 2.5px at 47% 73%, rgba(139, 92, 246, 0.4), transparent 75%);
}

.girl__body.single-product.product-profile .profile-dossier-card::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 14%;
    right: 14%;
    top: 60%;
    height: 84px;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    border-top: 1px solid rgba(190, 170, 255, 0.08);
    border-radius: 50%;
    transform: rotate(-2deg);
    mask-image: radial-gradient(ellipse 60% 100% at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 60% 100% at center, #000 30%, transparent 80%);
}

/* Once About is fully expanded it is far more likely to physically reach
   down into the zone the arc/particles are anchored to — fading them
   (not hiding outright, the card's own base glow stays) keeps the longer
   text from ever reading as cluttered behind it. JS toggles this class
   from the read-more handler in single-product-egirl.php. */
.girl__body.single-product.product-profile .profile-dossier-card.is-about-expanded::before,
.girl__body.single-product.product-profile .profile-dossier-card.is-about-expanded::after {
    opacity: 0.4;
}

@media (max-width: 760px) {
    .girl__body.single-product.product-profile .profile-dossier-card::after {
        top: 56%;
        height: 60px;
    }
}

/* 3) Quick-start price — drop the filled pill "boundary" and let it read
   as a natural inline header line instead of two competing chips. */
.girl__body.single-product.product-profile .ep-booking-card__price {
    background: none;
    padding: 0;
    border-radius: 0;
    color: var(--eg-profile-text, #f4f1ff);
    font-size: 1.05rem;
}

.girl__body.single-product.product-profile .ep-booking-card__price span {
    color: var(--eg-profile-muted);
}

/* 2) Chips — moderate radius instead of a full pill, so two-line titles
   (e.g. "Клинок, рассекающий демонов") read as a clean tag, not a
   stretched capsule. Applies to both games and anime chips. */
.girl__body.single-product.product-profile .preference-chip {
    border-radius: 12px;
    padding: 8px 14px;
}

/* 6/9) Reviews — section wrapper already carries outer rhythm; the
   inner block's own padding was stacking on top of it. Reduce the
   inner padding so the gap above/below reviews tightens. */
.girl__body.single-product.product-profile .eg-reviews {
    padding: 28px 20px 24px;
}

/* Review preview (dev/admin-only) styling — visually distinct from real
   reviews so it can never be mistaken for production social proof. */
.girl__body.single-product.product-profile .eg-reviews__preview-tag {
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    width: fit-content;
    background: rgba(250, 204, 21, 0.1);
    border: 1px solid rgba(250, 204, 21, 0.35);
    color: #facc15;
    font-size: 0.76rem;
    font-weight: 700;
}

.girl__body.single-product.product-profile .eg-review-card--preview {
    opacity: 0.88;
    border-style: dashed !important;
}

.girl__body.single-product.product-profile .eg-review-card__preview-badge {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.3);
    color: #facc15;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.girl__body.single-product.product-profile .eg-reviews__empty--with-preview {
    margin-top: 16px;
}

/* 7/13) Plans section — replace green check/cross PNGs with CSS-drawn
   violet/lavender + muted-gray marks so nothing reads as a green SaaS
   dashboard. Visual only — no markup/data changes. */
.girl__body.single-product.product-profile .plan-feature--available .plan-feature__icon,
.girl__body.single-product.product-profile .service-item--available .service-item__icon {
    background-image: none !important;
    background-color: rgba(139, 92, 246, 0.18);
    position: relative;
}

.girl__body.single-product.product-profile .plan-feature--available .plan-feature__icon::after,
.girl__body.single-product.product-profile .service-item--available .service-item__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 7px;
    height: 11px;
    border-right: 2px solid #c9b8ff;
    border-bottom: 2px solid #c9b8ff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.girl__body.single-product.product-profile .plan-feature--unavailable .plan-feature__icon,
.girl__body.single-product.product-profile .service-item--unavailable .service-item__icon {
    background-image: none !important;
    background-color: rgba(148, 163, 184, 0.1);
    position: relative;
}

.girl__body.single-product.product-profile .plan-feature--unavailable .plan-feature__icon::before,
.girl__body.single-product.product-profile .plan-feature--unavailable .plan-feature__icon::after,
.girl__body.single-product.product-profile .service-item--unavailable .service-item__icon::before,
.girl__body.single-product.product-profile .service-item--unavailable .service-item__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 2px;
    background: rgba(148, 163, 184, 0.6);
}

.girl__body.single-product.product-profile .plan-feature--unavailable .plan-feature__icon::before,
.girl__body.single-product.product-profile .service-item--unavailable .service-item__icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.girl__body.single-product.product-profile .plan-feature--unavailable .plan-feature__icon::after,
.girl__body.single-product.product-profile .service-item--unavailable .service-item__icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Badge copy framing — uppercase + consistent premium chip treatment
   across Lite/Medium/Hard instead of the Medium-only bestseller style. */
.girl__body.single-product.product-profile .plans__box-bestseller,
.girl__body.single-product.product-profile .tariff-subtext {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 800 !important;
}

.girl__body.single-product.product-profile .plans__box.medium-highlight {
    background:
        radial-gradient(circle at 50% 0%, rgba(168, 155, 255, 0.1), transparent 60%),
        var(--eg-profile-card) !important;
}

/* 8/12) Final booking block — tighten the space directly around it. */
.girl__body.single-product.product-profile .booking-summary {
    margin: clamp(16px, 2vw, 28px) auto 0 !important;
    padding-bottom: 32px !important;
}

.girl__body.single-product.product-profile .ep-profile-section--summary + .eg-discord-promo--single {
    margin-top: clamp(24px, 3vw, 40px) !important;
}

/* Pass 10: #final still carried the generic 48px top inset every
   .ep-profile-section gets, stacked on top of .booking-summary's own
   margin-top above — between the bottom of #plans (also 48px) and the
   card it read as a noticeably bigger gap than the rest of the page's
   rhythm. Scoped to --summary only so FAQ/related/Discord spacing is
   untouched. */
.girl__body.single-product.product-profile .ep-profile-section--summary {
    padding-top: 16px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Profile gallery card — premium pulsing violet glow border, v2: brighter,
   with an animated shimmer ring, and fixed top-clipping.

   Root cause of the clipping: the page wrapper sets `overflow-x: hidden`
   without an explicit `overflow-y`, and per the CSS overflow spec, when
   one axis is non-visible the other axis computes to `auto` instead of
   `visible` — confirmed via getComputedStyle (auto, not visible). That
   ancestor was silently clipping the glow's top bleed. Fixed by setting
   overflow-y explicitly back to visible on that one wrapper.

   The shimmer ring uses the same @property angle + conic-gradient +
   mask-composite technique already proven safe on .catalog-hero — but
   unlike that pass, only `opacity` is animated on this pseudo-element,
   never `filter`. Animated filter+blur on a masked pseudo-element is the
   exact combination that produced square corner artifacts twice before
   on this page; blur here stays a static value.
   ══════════════════════════════════════════════════════════════════════ */
.girl__body.single-product.product-profile .single-product.product-profile {
    overflow-y: visible;
}

@property --ep-gallery-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.girl__body.single-product.product-profile .profile-gallery-card {
    isolation: isolate;
    border-color: rgba(167, 139, 250, 0.3) !important;
    animation: egProfileGalleryGlowPulse 4.8s ease-in-out infinite;
    will-change: box-shadow;
}

/* style.css has a site-wide kill rule — `.ep-gallery::before, .ep-gallery
   ::after { display:none !important; content:none !important; }` — and
   .ep-gallery is the same element as .profile-gallery-card (both classes
   are on the gallery card markup). Equal specificity + !important means
   that rule otherwise wins outright regardless of source order, so the
   shimmer-ring pseudo-elements below were never actually generating a
   box. Restoring content/display here with a more specific compound
   selector + matching !important is the minimal fix; every other
   property on these pseudo-elements was never affected, since the kill
   rule only touches content/display. */
.girl__body.single-product.product-profile .profile-gallery-card.ep-gallery::before,
.girl__body.single-product.product-profile .profile-gallery-card.ep-gallery::after {
    content: "" !important;
    display: block !important;
}

.girl__body.single-product.product-profile .profile-gallery-card::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    z-index: 0;
    background: conic-gradient(
        from var(--ep-gallery-angle, 0deg),
        rgba(139, 92, 246, 0.22),
        rgba(201, 184, 255, 0.75),
        rgba(139, 92, 246, 0.3),
        rgba(91, 33, 182, 0.22),
        rgba(139, 92, 246, 0.22)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: blur(5px);
    opacity: 0.55;
    animation: epGalleryBorderOrbit 9s linear infinite, epGalleryRingPulse 4.8s ease-in-out infinite;
}

@keyframes epGalleryBorderOrbit {
    to {
        --ep-gallery-angle: 360deg;
    }
}

@keyframes epGalleryRingPulse {
    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.78;
    }
}

@keyframes egProfileGalleryGlowPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(167, 139, 250, 0.22),
            0 0 32px rgba(139, 92, 246, 0.24),
            0 24px 70px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(201, 184, 255, 0.48),
            0 0 58px rgba(139, 92, 246, 0.46),
            0 24px 70px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .girl__body.single-product.product-profile .profile-gallery-card,
    .girl__body.single-product.product-profile .profile-gallery-card::before {
        animation: none !important;
    }
}

/* ── Interests card (under gallery) ─────────────────────────────────── */
.girl__body.single-product.product-profile .profile-interests-card {
    grid-area: interests;
    padding: 22px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 82% 18%, rgba(109, 93, 246, 0.1), transparent 34%),
        var(--eg-profile-card);
    border: 1px solid var(--eg-profile-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.girl__body.single-product.product-profile .profile-interests-card .profile-preferences-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.girl__body.single-product.product-profile .profile-hero-grid {
    grid-template-areas: "gallery info" "interests info" !important;
    align-items: start !important;
}

@media (max-width: 980px) {
    .girl__body.single-product.product-profile .profile-hero-grid {
        grid-template-areas:
            "gallery"
            "interests"
            "info" !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Hero/dossier polish pass 5 — photo crop, floating glow, dossier hover
   + height alignment, discount mini-card glow, right-edge seam softening.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Photo top offset — not a layout bug (image fills its frame to within
   1-2px). The visible gap is the crop: object-position was pinned to the
   literal top of the source (50% 0%), and this particular source photo
   has blank headroom above the subject at its native top edge. Shifting
   the crop window down slightly trims that headroom while staying a safe
   general fix that won't crop faces on other photos. */
.girl__body.single-product.product-profile .profile-main-image,
.girl__body.single-product.product-profile .profile-main-media > img,
.girl__body.single-product.product-profile .ep-gallery__main > img {
    object-position: center 18% !important;
}

/* 2) Gallery glow — replace the uniform pulse with an uneven, drifting
   aura (multiple off-center radial layers instead of a single ring), and
   brighten it slightly. Kept on the same ::before used in the previous
   pass; only `opacity`/`transform` animate here, never `filter`, to avoid
   the square-artifact pattern already hit twice on this page. */
.girl__body.single-product.product-profile .profile-gallery-card::before {
    inset: -4px;
    padding: 0;
    background:
        radial-gradient(circle at 18% 14%, rgba(201, 184, 255, 0.32), transparent 32%),
        radial-gradient(circle at 86% 24%, rgba(139, 92, 246, 0.26), transparent 36%),
        radial-gradient(circle at 50% 94%, rgba(91, 33, 182, 0.24), transparent 40%),
        conic-gradient(
            from var(--ep-gallery-angle, 0deg),
            rgba(139, 92, 246, 0.16),
            rgba(201, 184, 255, 0.5),
            rgba(139, 92, 246, 0.2),
            rgba(91, 33, 182, 0.16),
            rgba(139, 92, 246, 0.16)
        );
    -webkit-mask: none;
    mask: none;
    filter: blur(9px);
    opacity: 0.34;
    animation: epGalleryBorderOrbit 9s linear infinite, epGalleryAuraFloat 6.8s ease-in-out infinite;
}

@keyframes epGalleryAuraFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.3;
    }

    35% {
        transform: translate3d(3px, -4px, 0) scale(1.012);
        opacity: 0.5;
    }

    70% {
        transform: translate3d(-4px, 3px, 0) scale(1.006);
        opacity: 0.4;
    }
}

/* 3) Dossier card — premium interactive lift on hover instead of just a
   border-color change. transform-origin:center plus a modest scale keeps
   it from visibly shifting layout/siblings. */
.girl__body.single-product.product-profile .profile-info-card {
    transition:
        transform 360ms cubic-bezier(.16, 1, .3, 1),
        border-color 360ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 360ms cubic-bezier(.16, 1, .3, 1),
        background 360ms cubic-bezier(.16, 1, .3, 1);
    transform-origin: center;
}

.girl__body.single-product.product-profile .profile-info-card:hover {
    /* Softened: was a sudden jump from a ~36px glow to three stacked
       layers reaching 150px (scale 1.006, 220ms ease). Hover now nudges
       the exact same rest-state shadow shape slightly stronger instead
       of swapping in a different, bigger glow shape — reads as a gentle
       lift, not a flash. translateY stays out (card sits flush against
       .ep-hero with no vertical margin to climb into).
       Pass 6: that softening had gone too far the other way (~barely
       visible) — every glow-relevant alpha bumped ~18%, scale and blur
       radius left untouched so it stays soft with no clipping risk. */
    transform: scale(1.003);
    border-color: rgba(201, 184, 255, 0.38) !important;
    box-shadow:
        0 24px 76px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(201, 184, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 44px rgba(109, 93, 246, 0.26) !important;
}

/* 4) Right column — bottom-edge match via content-driven grid stretch.
   .profile-info-card's grid area spans both the gallery row and the
   interests row (see grid-template-areas above: "gallery info" /
   "interests info"), so that area's height is already just the sum of
   those two rows' own content heights — no viewport unit involved. The
   earlier bug here was an explicit `height/min-height: 100%` paired with
   `align-self: stretch`, which on some content combos (e.g. a long About
   text) let the card's own intrinsic height exceed gallery+interests
   combined and inflate the row track itself, pushing the card (and its
   border) far past the interests block's real bottom edge.
   `align-self: stretch` with `height: auto` (no explicit height/min-height)
   is the safe version of the same idea: the card fills whatever height the
   row track already resolved to from gallery+interests, but never forces
   that track to grow in the first place — so the right card's bottom edge
   lines up with the left column's bottom edge without ever exceeding it. */
.girl__body.single-product.product-profile .profile-info-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Quick-start card anchors to the bottom of that stretched column instead
   of sitting right under About, so the extra space (if any) lands as a
   gap above it rather than stretching the card's own internals. */
.girl__body.single-product.product-profile .quick-start-card {
    margin-top: auto;
}

/* Below 980px "info" becomes its own standalone row (see the grid-area
   stack above), so there is nothing left to stretch to — keep it plain
   content-flow on mobile so it can never be forced taller than its own
   content. */
@media (max-width: 980px) {
    .girl__body.single-product.product-profile .profile-info-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: auto !important;
    }

    .girl__body.single-product.product-profile .quick-start-card {
        margin-top: 0 !important;
    }
}

/* 6/8) Pass-7: the right-edge linear-gradient + top-right radial were
   reading as a "side blob" stuck to one edge rather than an integrated
   glow. Moved the main glow lower (near the quick-start area, which it
   should visually support) and dropped the edge-hugging linear-gradient
   entirely — depth now comes from layered, lower-anchored radial glows
   instead of a brightened strip along one border. */
.girl__body.single-product.product-profile .profile-info-card {
    background:
        radial-gradient(ellipse 70% 44% at 78% 72%, rgba(139, 92, 246, 0.16), transparent 58%),
        radial-gradient(ellipse 78% 42% at 50% 64%, rgba(139, 92, 246, 0.1), transparent 72%),
        radial-gradient(circle at 18% 92%, rgba(201, 184, 255, 0.07), transparent 46%),
        linear-gradient(145deg, rgba(24, 20, 39, 0.96) 0%, rgba(10, 9, 20, 0.97) 100%) !important;
}

/* Premium glass border + inner highlight — base border var() elsewhere on
   the page is only 0.14 alpha, which is why this card was reading as
   flat/lost. Scoped override, base state (not just :hover). */
.girl__body.single-product.product-profile .profile-info-card {
    border: 1px solid rgba(201, 184, 255, 0.24) !important;
}

/* Outer glow halo brought down in intensity and reach — was bleeding far
   enough (up to 150px) to read as a harsh boundary against the page's
   own ambient blob; a single, closer, softer layer plus an inset stroke
   for definition reads as a calm glass edge instead. */
.girl__body.single-product.product-profile .profile-info-card {
    box-shadow:
        0 24px 76px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(201, 184, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 36px rgba(109, 93, 246, 0.16) !important;
}

/* 5) Discount mini-card — animated drifting glow + stronger badge. */
.girl__body.single-product.product-profile .first-order-promo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: rgba(201, 184, 255, 0.3);
}

.girl__body.single-product.product-profile .first-order-promo::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 0;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.26), transparent 42%);
    opacity: 0.36;
    animation: epDiscountMiniGlow 5.4s ease-in-out infinite;
    pointer-events: none;
}

.girl__body.single-product.product-profile .first-order-promo > * {
    position: relative;
    z-index: 1;
}

@keyframes epDiscountMiniGlow {
    0%,
    100% {
        transform: translate3d(-8px, 0, 0) scale(1);
        opacity: 0.26;
    }

    50% {
        transform: translate3d(8px, -4px, 0) scale(1.08);
        opacity: 0.5;
    }
}

.girl__body.single-product.product-profile .promo-badge {
    box-shadow:
        inset 0 0 24px rgba(168, 155, 255, 0.18),
        0 0 22px rgba(139, 92, 246, 0.3);
    animation: epPromoBadgePulse 3.6s ease-in-out infinite;
}

@keyframes epPromoBadgePulse {
    0%,
    100% {
        box-shadow:
            inset 0 0 24px rgba(168, 155, 255, 0.18),
            0 0 18px rgba(139, 92, 246, 0.26);
    }

    50% {
        box-shadow:
            inset 0 0 28px rgba(168, 155, 255, 0.3),
            0 0 30px rgba(139, 92, 246, 0.46);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Hero/dossier polish pass 6 — unclip top/bottom glow, soften hover,
   deepen dossier background, mirrored moving glow points on the gallery
   frame. CSS-only, same hero/gallery/dossier selectors as before.
   ══════════════════════════════════════════════════════════════════════ */

/* Root cause of the top/bottom glow clipping: .ep-hero carries
   `overflow: hidden` (base rule, used for an internal ambient blob that
   intentionally bleeds via right:-180px). The dossier/gallery cards sit
   flush against its top and bottom edge with zero spare margin, so any
   glow extending past their own box was being cut immediately. The inner
   image frame (.ep-gallery__main) already clips itself via its own
   overflow, so the outer hero can safely stay open without affecting the
   photo crop or thumbnails. The page-level overflow-x:hidden further up
   the tree still prevents horizontal scroll regardless. */
.girl__body.single-product.product-profile .ep-hero {
    overflow: visible !important;
}

/* Two mirrored glow points traveling around the gallery frame contour —
   distinct from the existing ::before aura/shimmer. Separate masked ring
   layer with two narrow bright zones 180deg apart, its own angle property
   and timing so it reads as two small comets rather than a second copy
   of the full shimmer ring. */
@property --ep-gallery-edge-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.girl__body.single-product.product-profile .profile-gallery-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background: conic-gradient(
        from var(--ep-gallery-edge-angle, 0deg),
        transparent 0deg,
        transparent 42deg,
        rgba(255, 255, 255, 0.74) 64deg,
        rgba(201, 184, 255, 0.68) 70deg,
        rgba(139, 92, 246, 0.22) 84deg,
        transparent 108deg,
        transparent 180deg,
        transparent 222deg,
        rgba(255, 255, 255, 0.74) 244deg,
        rgba(201, 184, 255, 0.68) 250deg,
        rgba(139, 92, 246, 0.22) 264deg,
        transparent 288deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: blur(1.5px);
    opacity: 0.7;
    animation: epGalleryEdgeDots 9.4s linear infinite;
}

@keyframes epGalleryEdgeDots {
    to {
        --ep-gallery-edge-angle: 360deg;
    }
}

/* Pass-7: the previous brightness-bump override below was making the
   aura read as a "purple wall" between the two cards — removed in favor
   of the reduced values already set on the base ::before rule above. */

@media (prefers-reduced-motion: reduce) {
    .girl__body.single-product.product-profile .profile-gallery-card::before,
    .girl__body.single-product.product-profile .profile-gallery-card::after,
    .girl__body.single-product.product-profile .profile-info-card,
    .girl__body.single-product.product-profile .first-order-promo::before,
    .girl__body.single-product.product-profile .promo-badge {
        animation: none !important;
        transition: none !important;
    }

    .girl__body.single-product.product-profile .profile-info-card:hover {
        transform: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Hero/dossier polish pass 7 — control existing glow intensity, protect
   thumbnails from the animated layers, make the quick-start price easier
   to scan. No new effects added.
   ══════════════════════════════════════════════════════════════════════ */

/* The gallery glow pseudo-elements (::before z-index:0, ::after z-index:2)
   are absolutely positioned, which promotes them into the stacking order
   ahead of the thumbnail strip below them — the thumbnails are plain
   static-flow content with no z-index of their own, so a positioned
   sibling with z-index >= 0 always paints on top of it regardless of DOM
   order. Lifting the thumbs into their own stacking context above the
   glow fixes the tint without touching the glow itself. */
.girl__body.single-product.product-profile .ep-gallery__thumbs {
    position: relative;
    z-index: 5;
    isolation: isolate;
}

.girl__body.single-product.product-profile .ep-gallery__thumb {
    position: relative;
    z-index: 6;
}

/* Quick-start price — larger, clearer main figure; unit stays small and
   muted so it doesn't compete with the booking CTA underneath it. */
.girl__body.single-product.product-profile .ep-booking-card__price {
    font-size: 1.3rem !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgba(245, 242, 255, 0.96);
}

.girl__body.single-product.product-profile .ep-booking-card__price span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(201, 184, 255, 0.72);
}

/* ══════════════════════════════════════════════════════════════════════
   Middle conversion funnel pass — benefits, process, reviews spacing,
   plans badges/feature-rows/add-ons, and the gaps between all of them.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Benefits — title (bold) + optional small desc line now render in the
   same grid content cell; make them stack as their own lines instead of
   running inline, and balance the vertical rhythm so 1-line and 2-line
   cards both look intentional rather than uneven. */
.girl__body.single-product.product-profile .benefit-card {
    align-items: center !important;
    min-height: 112px;
    gap: 16px;
}

/* .benefit-card is a 2-column grid (icon, text) but now has 3 children
   (icon, title, desc) — without explicit placement the 3rd child wraps
   into a new implicit row starting at column 1, landing it under the
   icon instead of under the title. Pin icon to span both rows in column
   1, and title/desc to column 2 so they stack correctly in column 2. */
.girl__body.single-product.product-profile .benefit-card .ep-value__icon-wrap {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.girl__body.single-product.product-profile .benefit-card__title {
    grid-column: 2;
    grid-row: 1;
    display: block;
    color: var(--eg-profile-text, #f4f1ff);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.girl__body.single-product.product-profile .benefit-card__desc {
    grid-column: 2;
    grid-row: 2;
    display: block;
    margin-top: 4px;
    color: var(--eg-profile-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* 2) Process timeline — the connecting line behind the numbered badges
   existed but was switched off (`display: none` in the base rule); this
   is the one property that base rule doesn't already win on, so turning
   it back on is enough to make the steps read as one connected flow
   instead of five separate boxes. */
.girl__body.single-product.product-profile .ep-how__list::before {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
}

.girl__body.single-product.product-profile .ep-how__reassure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-size: 0.86rem;
}

/* 3) Plans — unified badge system. Previously Medium used a different
   element (.plans__box-bestseller, inline below the title) than Lite/Hard
   (.tariff-subtext), and an attempt to pin the Medium badge top-right in
   an earlier pass used `position: absolute` without `!important` — but
   style.css has `.plans__box-bestseller { position: static !important;
   inset: auto !important; }`, which always wins over a non-important
   declaration regardless of specificity. Every plan now renders the same
   .plans__box-badge element, positioned the same way, with its own
   !important so it actually wins this time. */
.girl__body.single-product.product-profile .plans__box-badge {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #f4f1ff;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(168, 155, 255, 0.28);
}

.girl__body.single-product.product-profile .plans__box-badge--lite {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(168, 155, 255, 0.2);
    color: #cbd5e1;
}

.girl__body.single-product.product-profile .plans__box-badge--medium {
    background: linear-gradient(135deg, #6d5df6, #a89bff);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    box-shadow: 0 6px 18px rgba(109, 93, 246, 0.4);
}

.girl__body.single-product.product-profile .plans__box-badge--hard {
    background: rgba(109, 93, 246, 0.24);
    border-color: rgba(201, 184, 255, 0.4);
    color: #f4f1ff;
}

.girl__body.single-product.product-profile .plans__box {
    position: relative;
    padding-top: 26px;
}

/* 4) Feature rows — bigger icon box + bigger check/cross mark, still
   violet/lavender. The grid (icon column + content column, align-items:
   start) already exists upstream; only the sizing changes here. */
.girl__body.single-product.product-profile .plan-feature__icon,
.girl__body.single-product.product-profile .service-item__icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
}

.girl__body.single-product.product-profile .plan-feature {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: start !important;
}

.girl__body.single-product.product-profile .plan-feature--available .plan-feature__icon::after,
.girl__body.single-product.product-profile .service-item--available .service-item__icon::after {
    width: 8px;
    height: 13px;
}

.girl__body.single-product.product-profile .plan-feature--unavailable .plan-feature__icon::before,
.girl__body.single-product.product-profile .plan-feature--unavailable .plan-feature__icon::after,
.girl__body.single-product.product-profile .service-item--unavailable .service-item__icon::before,
.girl__body.single-product.product-profile .service-item--unavailable .service-item__icon::after {
    width: 13px;
}

/* 5) Medium card — slightly stronger CTA so the recommended plan also
   nudges the booking action, without making it cartoonish. */
.girl__body.single-product.product-profile .plans__box.medium-highlight .plans__button--primary {
    box-shadow:
        0 16px 42px rgba(109, 93, 246, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* 6) Add-ons — permanent subtle card background instead of transparent
   until hover, so rows read as a defined list instead of loose floating
   items with the page's ambient background showing through the gaps. */
.girl__body.single-product.product-profile .plans__list--checkbox .plans__list-item label.plans__addon-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(168, 155, 255, 0.1) !important;
}

.girl__body.single-product.product-profile .plans__list--checkbox .plans__list-item + .plans__list-item {
    margin-top: 8px !important;
}

.girl__body.single-product.product-profile .plans__list--checkbox .plans__list-item input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-top: 1px;
}

/* 7) Section-to-section spacing — tighten the gaps so benefits, process,
   reviews and plans read as one funnel instead of separate floating
   blocks, while still keeping clear breathing room between them. */
.girl__body.single-product.product-profile .profile-benefits-wide {
    margin-top: 28px !important;
}

.girl__body.single-product.product-profile .ep-how {
    margin-top: clamp(24px, 3vw, 36px) !important;
}

.girl__body.single-product.product-profile .ep-profile-section--reviews {
    padding-top: clamp(24px, 3vw, 36px) !important;
    padding-bottom: clamp(24px, 3vw, 36px) !important;
}

.girl__body.single-product.product-profile .ep-profile-section--plans {
    padding-top: clamp(24px, 3vw, 36px) !important;
    /* Pass 8: the section inherits overflow:hidden from the generic
       .single-product .ep-profile-section rule (2624-2629 — there to
       contain each section's own blurred ::before glow blob). The
       active card's inline transform:scale(1.05) from scripts.js
       (selectCard) extends ~2.5% of the card's height beyond its own
       box on every side, plus the .active box-shadow blur on top of
       that — both were getting clipped flush against this section's
       bottom edge. .plans::before (the section's own glow blob) sits
       top:160px/left:-160px, nowhere near the bottom, so it's safe to
       open this section up without it bleeding anywhere visible. */
    overflow: visible;
    padding-bottom: 130px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Plan selector premium pass — wider grid, real selected state, badge/
   feature-row/add-on alignment. CSS-only; .plans__box.active is the
   selected-state class scripts.js already toggles (selectCard/resetStyles
   in scripts.js around line 560-596) — no JS touched, no data-* attrs
   touched. JS sets transform/opacity/pointer-events inline on .active/
   .inactive directly, so this pass deliberately never sets `transform`
   on those classes — that would silently fight the inline style scripts.js
   applies on every click. Only border/background/box-shadow/badges are
   added here, which inline styles don't touch.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Wider plan grid — the plans container was inheriting the same
   1180px width as every other section via the shared
   `.ep-profile-section > .container` rule. This more specific selector
   (one extra class) wins the !important tie and gives plans its own,
   wider rhythm. */
.girl__body.single-product.product-profile .ep-profile-section--plans > .container {
    width: min(calc(100% - 48px), var(--eg-plans-width)) !important;
    max-width: none !important;
}

.girl__body.single-product.product-profile .plans__boxes {
    gap: clamp(22px, 2.4vw, 34px);
    /* Base rule sets align-items:start, which let each card size to its
       own content (the actual cause of the height mismatch — feature/
       addon counts differ per tier). Grid's default stretch, combined
       with .plans__box already being a flex column and .plans__bottom's
       margin-top:auto above, makes all three cards match the tallest
       and keeps their CTA rows level. */
    align-items: stretch;
}

/* 2) Selected plan state — border glow, deeper tinted background, and a
   checkmark prepended to the existing tier badge instead of adding a
   second competing badge in the same corner. */
.girl__body.single-product.product-profile .plans__box.active {
    border-color: rgba(201, 184, 255, 0.58) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.24), transparent 46%),
        linear-gradient(180deg, rgba(30, 26, 50, 0.98), rgba(12, 10, 24, 0.98)) !important;
    box-shadow:
        0 0 0 1px rgba(201, 184, 255, 0.12) inset,
        0 0 54px rgba(139, 92, 246, 0.3),
        0 28px 90px rgba(0, 0, 0, 0.5) !important;
}

.girl__body.single-product.product-profile .plans__box.active .plans__box-badge {
    background: linear-gradient(135deg, #8b5cf6, #c9b8ff) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.46);
}

.girl__body.single-product.product-profile .plans__box.active .plans__box-badge::before {
    content: "✓ ";
}

/* 3) Medium — stronger default visual weight even before selection, so
   it already reads as the natural pick; selecting it then layers the
   shared .active treatment on top. */
.girl__body.single-product.product-profile .plans__box.medium-highlight {
    border-color: rgba(168, 155, 255, 0.32) !important;
}

.girl__body.single-product.product-profile .plans__box.medium-highlight .text__wrapper .plans__box-title {
    color: #fff;
}

/* 4) Feature rows — nudge icon box/grid column to the requested 26px/30px
   (was 28px/28px) while keeping the existing top-align-for-multiline
   behavior from the prior pass. */
.girl__body.single-product.product-profile .plan-feature__icon,
.girl__body.single-product.product-profile .service-item__icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
}

.girl__body.single-product.product-profile .plan-feature {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    column-gap: 12px !important;
}

/* 5/6) Add-on rows — checkbox and price pill were top-aligned (correct
   for the long multiline feature rows above, but addon titles are short
   and read better as a centered selectable row). Override align-items
   for this list only; feature rows keep their own start-aligned rule. */
.girl__body.single-product.product-profile .plans__list--checkbox .plans__list-item {
    align-items: center !important;
}

.girl__body.single-product.product-profile .plans__list--checkbox .plans__list-item label.plans__addon-card {
    align-items: center !important;
}

.girl__body.single-product.product-profile .plans__addon-price {
    align-self: center !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
}

.girl__body.single-product.product-profile .plans__list--checkbox .plans__list-item input[type="checkbox"] {
    align-self: center;
}

/* 7) CTA hierarchy — selected card's primary button gets the strongest
   treatment; this stacks with (doesn't replace) the existing primary
   button gradient/shadow rule. */
.girl__body.single-product.product-profile .plans__box.active .plans__button--primary {
    box-shadow:
        0 18px 48px rgba(139, 92, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.girl__body.single-product.product-profile .plans__box.active .plans__button--secondary {
    border-color: rgba(201, 184, 255, 0.3) !important;
}

/* 8) Hover — subtle brighten/glow, no movement (cards already get a
   hover lift from an earlier pass via transform; this only adds to
   border/shadow so it doesn't compound into a second, conflicting
   transform on top of that one). */
.girl__body.single-product.product-profile .plans__box:not(.active):not(.inactive):hover {
    box-shadow:
        0 0 0 1px rgba(201, 184, 255, 0.06) inset,
        0 18px 52px rgba(139, 92, 246, 0.16);
}

@media (max-width: 1100px) {
    .girl__body.single-product.product-profile .ep-profile-section--plans > .container {
        width: min(calc(100% - 32px), var(--eg-plans-width)) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Plan selector pass 5 — softer Polina hover (above), card-internal
   add-on accordion, stronger selected state, equal-height anchoring,
   webcam highlight. CSS-first; scripts.js gained two tiny additions
   (drawer.open sync inside the existing selectCard()/resetStyles()) —
   nothing pricing-related touched, no data-* attributes touched.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Equal-height anchoring — .plans__box is already a flex column
   (base rule), and grid's default align-items:stretch already matches
   all three cards to the tallest one's height. Pass 6: previously the
   add-ons drawer itself carried margin-top:auto, which sucked all the
   leftover space into one gap directly ABOVE the add-ons block — read
   as "add-ons glued to the bottom with a weird gap above them" (exactly
   the bug being fixed this pass). Add-ons now flows in normal order
   right after the divider with no auto margin of its own; the auto
   margin moves to .plans__bottom instead, so any leftover stretch space
   lands AFTER the add-ons preview and BEFORE the CTA/clear-selection
   row — which also keeps that bottom row level across all three cards. */
.girl__body.single-product.product-profile .plans__bottom {
    margin-top: auto;
}

/* 2) Add-ons — no longer a click-to-reveal <details> drawer (that was
   the source of the "glued/gap" complaint: hidden entirely until
   selected, then dumped in as one block). Now always rendered right
   after the feature list + divider, every card, with its own compact
   preview: first 3 rows visible, the rest hidden via :nth-child so they
   never inflate height, plus a tasteful fade + "Показать все апгрейды"
   toggle (scripts.js, tiny additive listener) for the remainder. The
   checkboxes stay real DOM descendants of .plans__box at all times
   regardless of expanded state — required since updateTotalPrice()
   reads `selectedCard.querySelectorAll('.plans__list--checkbox
   input[type="checkbox"]:checked')`; display:none on a row does not
   uncheck or hide its input from that query. */
.girl__body.single-product.product-profile .plans__addons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.girl__body.single-product.product-profile .plans__addons-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.girl__body.single-product.product-profile .plans__addons-title {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--eg-profile-text, #f4f1ff);
}

/* Cleanup pass: the markup already has a literal space after the emoji,
   but emoji glyphs carry very little right-side bearing in most system
   emoji fonts, so a single space reads as cramped next to bold text.
   Wrapping the emoji and giving it an explicit margin guarantees a
   visible gap regardless of font/platform. */
.girl__body.single-product.product-profile .plans__addons-title-emoji {
    margin-right: 4px;
    display: inline-block;
}

.girl__body.single-product.product-profile .plans__addons-hint {
    display: block;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--eg-profile-muted);
}

/* Pass 10: replaced the nth-child(display:none) cutoff + :has() visibility
   guards with a measured max-height transition (scripts.js sets
   --addons-max-height and toggles .is-expanded / .plans__addons--has-more —
   see measureAddonsPreview()/bindAddonsPreview()). display:none can't be
   transitioned, which was the root cause of the previous "instant snap"
   expand/collapse. Rows are never removed from layout/painted-off, only
   clipped by the container's max-height, so updateTotalPrice()'s scoped
   checkbox query (selectedCard.querySelectorAll('.plans__list--checkbox
   input[type="checkbox"]:checked')) is unaffected either way. */
.girl__body.single-product.product-profile .plans__addons .plans__list--checkbox {
    max-height: var(--addons-max-height, none);
    overflow: hidden;
    position: relative;
    margin-top: 2px;
    transition: max-height 360ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .girl__body.single-product.product-profile .plans__addons .plans__list--checkbox {
        transition: none !important;
    }
}

/* Fade hinting "there's more below" — sits on the last visible row(s).
   pointer-events:auto (Pass 10) makes the fade itself clickable to expand;
   a click landing here reports the <ul> (.plans__list--checkbox) as
   e.target, which scripts.js uses to tell "clicked the fade" apart from
   "clicked a real row" without needing the pseudo-element as a DOM node.
   Real rows/checkboxes sit below the fade in paint order only where the
   fade's own background is transparent (top of the gradient), so taps on
   visible checkboxes above the fade band are never intercepted.

   Pass 13: .plans__list--checkbox (where this lives) is inset ~37px
   inside the card's own padding — well short of the card's rounded 28px
   edge — so rounding *this* element's own corners (the old border-radius:
   0 0 12px 12px) had nothing matching to blend into; it just drew a
   smaller rounded rectangle floating in open padding space, with hard
   vertical lines down its left/right sides where the gradient (which
   only ever faded top-to-bottom) stopped abruptly. A mask-image fades
   those left/right edges to nothing instead, so there's no edge left to
   look square. Colour shifted from flat near-black to the same violet-
   glass family as the card itself (--eg-profile-card is a faint white/
   violet tint over the page's dark bg, not pure black). */
.girl__body.single-product.product-profile .plans__addons .plans__list--checkbox::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 76px;
    background: linear-gradient(
        to bottom,
        rgba(16, 13, 28, 0) 0%,
        rgba(24, 19, 42, 0.55) 45%,
        rgba(14, 11, 24, 0.92) 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
    pointer-events: auto;
    cursor: pointer;
    display: none;
}

.girl__body.single-product.product-profile .plans__addons--has-more .plans__list--checkbox::after {
    display: block;
}

.girl__body.single-product.product-profile .plans__addons.is-expanded .plans__list--checkbox::after {
    display: none;
}

.girl__body.single-product.product-profile .plans__addons-more {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 2px;
    margin: 0;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(201, 184, 255, 0.8);
    cursor: pointer;
    transition: color 200ms ease;
    display: none;
}

.girl__body.single-product.product-profile .plans__addons-more:hover {
    color: #c9b8ff;
}

.girl__body.single-product.product-profile .plans__addons--has-more .plans__addons-more {
    display: inline-flex;
}

/* New divider between the feature list and add-ons (task item 3) — the
   one existing .plans__box-divider sits before the feature list
   separating it from the description; this is a second, separate
   divider scoped to only render when add-ons exist.
   Pass 8: was sitting visually low in the gap — the parent .plans__box
   flex column already contributes its own 18px `gap` on both sides of
   this element, so the old 20px-top/4px-bottom margin stacked on top of
   that produced 38px above the line vs only 22px below it. Equal
   margins make the total space above/below the line symmetric, i.e.
   genuinely centered in the gap rather than just visually balanced. */
.girl__body.single-product.product-profile .plan-feature-divider {
    height: 1px;
    width: 100%;
    margin: 12px 0;
    background: linear-gradient(90deg, transparent, rgba(201, 184, 255, 0.26), transparent);
}

/* 3) Stronger selected state — a one-time settle pulse on the moment of
   selection (border glow breathes once, doesn't loop) on top of the
   existing static glow from the previous pass, so choosing a plan reads
   as a deliberate, satisfying action rather than just a static highlight. */
.girl__body.single-product.product-profile .plans__box.active {
    animation: epPlanSelectSettle 520ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes epPlanSelectSettle {
    0% {
        box-shadow:
            0 0 0 1px rgba(201, 184, 255, 0.12) inset,
            0 0 0 rgba(139, 92, 246, 0),
            0 28px 90px rgba(0, 0, 0, 0.5);
    }

    45% {
        box-shadow:
            0 0 0 1px rgba(201, 184, 255, 0.12) inset,
            0 0 80px rgba(139, 92, 246, 0.46),
            0 28px 90px rgba(0, 0, 0, 0.5);
    }

    100% {
        box-shadow:
            0 0 0 1px rgba(201, 184, 255, 0.12) inset,
            0 0 54px rgba(139, 92, 246, 0.3),
            0 28px 90px rgba(0, 0, 0, 0.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .girl__body.single-product.product-profile .plans__box.active {
        animation: none !important;
    }
}

/* 4) Add-on row alignment — re-affirm centered checkbox/price against
   the addon title now that rows live inside the drawer. */
.girl__body.single-product.product-profile .plans__list--checkbox .plans__list-item {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
}

.girl__body.single-product.product-profile .plans__list--checkbox .plans__list-item label.plans__addon-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
}

.girl__body.single-product.product-profile .plans__list--checkbox .plans__list-item input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin: 0;
    align-self: center;
    justify-self: center;
}

.girl__body.single-product.product-profile .plans__addon-price {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

/* 5) Hard's "Вебка включена" — only ever rendered on a row whose own
   ACF text actually contains it (PHP-side check), so this purely styles
   a row that's already known to be real, never invents one.
   Pass 10: the pass-9 model had both pseudo-elements running in both
   states, just swapping animation-duration/opacity on .active — that
   property swap restarts a still-running CSS animation mid-cycle in
   most engines, which is exactly the "bugs when Hard is selected"
   flicker/jump being reported. New model gives each pseudo-element a
   single job instead of two overlapping concerns:
   ::before = breathing glow, runs identically in both states (this is
   the "still keep the base glow" requirement) — never touched by the
   .active selector, so it never restarts.
   ::after  = the sweep. In the base state it has no `animation`
   declared at all (not merely a faster/slower one), so there is no
   sweep motion pre-selection. `.active` is the first time `animation`
   is ever set on it, which starts a fresh animation rather than
   restarting an existing one — the safe way to trigger a CSS animation
   via class toggle. */
.girl__body.single-product.product-profile .plan-feature--webcam {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: rgba(201, 184, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: 0 0 0 1px rgba(201, 184, 255, 0.1) inset;
}

.girl__body.single-product.product-profile .plan-feature--webcam > * {
    position: relative;
    z-index: 1;
}

.girl__body.single-product.product-profile .plan-feature--webcam .plan-feature__text {
    color: #fff;
    font-weight: 700;
}

/* Breathing glow — base layer, identical animation in both states. */
.girl__body.single-product.product-profile .plan-feature--webcam::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: 0;
    background: radial-gradient(circle at 16% 50%, rgba(139, 92, 246, 0.22), transparent 46%);
    pointer-events: none;
    animation: epWebcamBreathe 4.5s ease-in-out infinite;
}

@keyframes epWebcamBreathe {
    0%, 100% {
        opacity: 0.55;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

/* Sweep layer — inert (no animation, opacity 0) until .active. */
.girl__body.single-product.product-profile .plan-feature--webcam::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(220, 210, 255, 0.32) 48%,
        rgba(160, 120, 255, 0.18) 55%,
        transparent 70%
    );
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none;
}

/* Selected Hard — stronger static glow (the box-shadow itself doesn't
   animate, only the pseudo-layers do) plus the sweep switching on. */
.girl__body.single-product.product-profile .plans__box.active .plan-feature--webcam {
    border-color: rgba(201, 184, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        0 0 0 1px rgba(201, 184, 255, 0.18) inset,
        0 0 30px rgba(139, 92, 246, 0.28);
}

.girl__body.single-product.product-profile .plans__box.active .plan-feature--webcam::after {
    opacity: 1;
    animation: epWebcamSweep 2.8s ease-in-out infinite;
}

@keyframes epWebcamSweep {
    0%, 35% {
        transform: translateX(-120%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75%, 100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .girl__body.single-product.product-profile .plan-feature--webcam::before,
    .girl__body.single-product.product-profile .plans__box.active .plan-feature--webcam::after {
        animation: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Plan selector pass 6 — tooltip clipping, feature icon/column grid,
   badge checkmark spacing, "Очистить выбор" redesign. CSS-only.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Tooltip clipping — root cause was .plans__box's own base rule
   (overflow: hidden, no !important), which clipped any tooltip trying to
   pop up near the card's top/side edge. No other element relies on that
   overflow being hidden (rounded corners are clipped by border-radius on
   the background itself, not by overflow), so it's safe to open up. */
.girl__body.single-product.product-profile .plans__box {
    overflow: visible;
}

/* Restyle away from style.css's hardcoded dark #222/121px-wide tooltip
   into the page's own violet glass system, with a width clamp so it can
   never push past the viewport edge (no horizontal scroll) even for an
   icon sitting close to a card's left/right padding. */
.girl__body.single-product.product-profile .tooltip-icon .tooltip-text {
    width: max-content;
    max-width: min(220px, calc(100vw - 40px));
    background: linear-gradient(180deg, rgba(32, 28, 52, 0.98), rgba(15, 13, 26, 0.98));
    border: 1px solid rgba(201, 184, 255, 0.32);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(245, 242, 251, 0.92);
    box-shadow:
        0 0 0 1px rgba(201, 184, 255, 0.08) inset,
        0 16px 36px rgba(0, 0, 0, 0.48),
        0 0 24px rgba(139, 92, 246, 0.2);
    z-index: 60;
    word-wrap: break-word;
}

/* 2) Feature row icon/column grid — the values the previous pass tuned
   (26px icon, 26px/30px grid column) never actually rendered: a higher-
   specificity !important rule elsewhere (.plans__list--yes/--no
   .plans__list-item, 5 classes vs. that pass's 4) was winning the column
   width regardless, leaving a 26px icon squeezed into a 22px column —
   the real cause of the lingering "icon alignment feels off" complaint.
   Matching that exact selector here finally wins the override. */
.girl__body.single-product.product-profile .plans__list--yes .plans__list-item,
.girl__body.single-product.product-profile .plans__list--no .plans__list-item {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    column-gap: 12px !important;
}

.girl__body.single-product.product-profile .plan-feature__icon,
.girl__body.single-product.product-profile .service-item__icon {
    margin-top: 1px !important;
}

/* 3) Badge checkmark spacing — the ::before checkmark and the badge's
   text node are adjacent inline content inside one flex item, so the
   badge's own `gap` never applied between them; only a margin on the
   pseudo-element itself creates real space. */
.girl__body.single-product.product-profile .plans__box-badge {
    padding: 6px 13px;
}

.girl__body.single-product.product-profile .plans__box.active .plans__box-badge::before {
    content: "✓";
    margin-right: 6px;
}

/* 4) "Очистить выбор" → "Сбросить выбор" — background/border glass
   treatment already existed from an earlier pass; the underline (from
   style.css's text-decoration-line, no !important) was never overridden
   until now, which is what made it read as a cheap text link instead of
   a polished ghost action. */
.girl__body.single-product.product-profile .plans__button--secondary {
    text-decoration-line: none;
    border-radius: 14px;
    color: rgba(245, 242, 251, 0.68);
}

.girl__body.single-product.product-profile .plans__button--secondary:hover {
    color: #f5f2fb;
}

/* ══════════════════════════════════════════════════════════════════════
   Plan selector pass 8 — clipping fix is above (.ep-profile-section--
   plans overflow/padding-bottom). Below: premium check/cross icon
   containers, duration legibility, webcam premium glow, tiered add-ons
   preview, divider re-centering. CSS-first; one additive PHP attribute
   (data-plan-tier) for reliable per-tier targeting, no pricing/markup
   logic touched.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Check/cross icons — were a bare background-image PNG floating on
   nothing, which is what read as "cheap." Layering a violet rounded-
   square container behind the existing glyph (background-image keeps
   its own transparency, untouched) turns it into a proper icon chip
   without needing a new asset. */
.girl__body.single-product.product-profile .plan-feature__icon,
.girl__body.single-product.product-profile .service-item__icon {
    border-radius: 8px;
}

.girl__body.single-product.product-profile .plan-feature--available .plan-feature__icon,
.girl__body.single-product.product-profile .service-item--available .service-item__icon {
    background-color: rgba(139, 92, 246, 0.16);
    box-shadow:
        0 0 0 1px rgba(201, 184, 255, 0.22) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.girl__body.single-product.product-profile .plan-feature--unavailable .plan-feature__icon,
.girl__body.single-product.product-profile .service-item--unavailable .service-item__icon {
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* 2) Duration pill — .plans__box-subtitle was rendering a white-to-
   near-black gradient clipped to the text itself (style.css, webkit-
   text-fill-color: transparent), which is the actual reason "30 мин."
   read as nearly invisible — not just a contrast/size opinion, the text
   fill was a gradient fading toward #0e0121 on a dark background. Kill
   the gradient-text trick and render it as a solid pill instead. */
.girl__body.single-product.product-profile .plans__box-subtitle {
    background-image: none;
    background-color: rgba(139, 92, 246, 0.14);
    -webkit-text-fill-color: rgba(245, 242, 251, 0.92);
    color: rgba(245, 242, 251, 0.92);
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(201, 184, 255, 0.22);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.girl__body.single-product.product-profile .text__wrapper {
    align-items: center;
}

/* ══════════════════════════════════════════════════════════════════════
   Pass 9 — final booking card ("Заверши бронирование"). The card already
   had the right copy/structure (eyebrow, title, price, CTA, methods,
   guarantee) from earlier passes; what was missing was depth/hierarchy
   — flat background, price the same visual weight as body text, no
   border glow. .money__photo is intentionally display:none (set
   elsewhere, !important) from an earlier pass — left untouched, this
   pass earns "premium" through the card/price/CTA/trust treatment
   instead of relying on the illustration.
   CSS-only; #add_to_cart / data-product_id / payload untouched.
   ══════════════════════════════════════════════════════════════════════ */
.girl__body.single-product.product-profile .booking-summary {
    border: 1px solid rgba(201, 184, 255, 0.22) !important;
    box-shadow:
        0 0 0 1px rgba(201, 184, 255, 0.07) inset,
        0 28px 80px rgba(0, 0, 0, 0.45),
        0 0 46px rgba(139, 92, 246, 0.16) !important;
}

/* Pass 10: was `justify-self: start` — .money__card is a single-column
   grid, so that pinned the eyebrow pill to the card's left edge while the
   title/price/CTA below it stayed centered (.money__card's text-align:
   center, set elsewhere). That mismatch is the "floated" look reported —
   centering the pill in its own grid row lines it back up with everything
   else in the card. */
.girl__body.single-product.product-profile .money__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-self: center;
    width: max-content;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(201, 184, 255, 0.24);
}

/* Price — was the same visual weight as the helper text below it; the
   total is the one number that should anchor the whole card.
   Pass 10: adding `display: flex` here (to align "Итого:" and the price
   on one baseline) silently dropped the centering the row used to get for
   free from .money__card's text-align: center — flex items default to
   justify-content: flex-start, which is what made the price look like it
   had drifted to the left edge of the card. justify-content: center
   restores it. */
.girl__body.single-product.product-profile .money__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.girl__body.single-product.product-profile .money__price strong {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--eg-profile-muted);
}

.girl__body.single-product.product-profile .money__price #final-price {
    font-size: clamp(1.7rem, 2.4vw, 2.1rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

/* Trust strip — emoji is now its own element (product-guarantee__icon,
   PHP) instead of a bare text node, so it can get a real badge
   treatment instead of floating loose in front of the paragraph. */
.girl__body.single-product.product-profile .product-guarantee {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-left: 2px solid rgba(139, 92, 246, 0.45);
}

.girl__body.single-product.product-profile .product-guarantee__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(201, 184, 255, 0.22);
    font-size: 0.95rem;
}

.girl__body.single-product.product-profile .product-guarantee__text {
    padding-top: 2px;
}

/* CTA — already had a gradient + hover lift from an earlier pass;
   widening the glow here is purely additive (stacks via separate
   box-shadow layers rather than overriding the existing ones). */
.girl__body.single-product.product-profile .money__button {
    box-shadow:
        0 14px 38px rgba(109, 93, 246, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 32px rgba(139, 92, 246, 0.22) !important;
}

/* Pass 10: this is the page's single conversion action — give the label
   real weight/presence instead of lowercase body-text styling. */
.girl__body.single-product.product-profile .money__button .btn-text {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════
   Pass 10 — main gallery image click-to-next (PHP inline script). Fade
   is the JS toggling #ep-main-img's opacity around the src swap; this
   just gives that opacity change something to transition along instead
   of snapping. cursor:pointer on .ep-gallery__main already existed.
   ══════════════════════════════════════════════════════════════════════ */
.ep-gallery__main img {
    transition: transform 0.5s ease, opacity 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .ep-gallery__main img {
        transition: none !important;
    }
}

/* Gallery images/thumbnails — casual drag/select protection only. */
.girl__body.single-product.product-profile .ep-gallery__main img,
.girl__body.single-product.product-profile .ep-gallery__thumb img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
}

/* ══════════════════════════════════════════════════════════════════════
   Pass 11 — nav compaction. A separate, higher-priority rule
   (.profile-subnav, ~line 4746/5208/5245) forces `.profile-subnav` to the
   full hero width with !important for grid alignment purposes; that
   still needs to apply to .ep-hero/.profile-benefits-wide/etc, so rather
   than edit that shared rule, this scopes a later !important override to
   .profile-subnav alone (wins on source order, same specificity) so the
   bar hugs its own content instead of stretching edge-to-edge.
   ══════════════════════════════════════════════════════════════════════ */
.girl__body.single-product.product-profile .profile-subnav {
    width: fit-content !important;
    max-width: min(calc(100% - 40px), var(--eg-profile-width)) !important;
}

/* style.css sets `overflow: auto hidden !important` on this exact selector
   (confirmed live via the browser's matched-rules list) — the hidden Y axis
   silently clipped the mascot's negative top-offset against this element's
   own box, since the mascot is a child of .profile-subnav and gets clamped
   to whatever clip-box its containing block declares, regardless of the
   mascot's own position:absolute. Longhand + !important here, at the same
   specificity as the rule it needs to beat, wins the tie by loading later.
   overflow-x stays auto so the link list still scrolls horizontally on
   narrow screens; only the Y axis opens up. */
.girl__body.single-product.product-profile .profile-subnav {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

@media (max-width: 980px) {
    .girl__body.single-product.product-profile .profile-subnav {
        max-width: min(calc(100% - 32px), var(--eg-profile-width)) !important;
    }
}

@media (max-width: 640px) {
    .girl__body.single-product.product-profile .profile-subnav {
        max-width: min(calc(100% - 24px), var(--eg-profile-width)) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Pass 11 — review modal (markup/open-close/submit JS rendered by
   eg_render_product_review_modal() in inc/reviews.php, out of this
   pass's allowed files — untouched). Today the modal has no positioning
   CSS at all: it's just a block sitting inline inside .eg-reviews, fully
   subject to that section's `overflow: hidden` (.ep-profile-section,
   ~line 2625), which is the clipping bug. .eg-review-modal is given
   position:fixed below — fixed elements are positioned against the
   viewport unless an ancestor has transform/filter/will-change/
   perspective (checked: none of .eg-reviews/.ep-profile-section/
   .eg-parallax-bg/body do), so this escapes the clipping entirely
   without moving the node in the DOM.

   Open/close itself stays exactly as the existing inline script wrote
   it (`modal.hidden = true/false`) — nothing here depends on JS changes.
   The fade+scale animation is done with `@starting-style` +
   `transition-behavior: allow-discrete`, which exists specifically for
   animating elements that toggle through `display: none` (here, via the
   native `hidden` attribute): on open, `display` flips to `flex`
   immediately and the rest transitions from the `@starting-style` values;
   on close, the browser keeps `display: flex` for one more transition
   duration before actually switching to `none`, so the fade-out is
   visible instead of an instant cut. Browsers without support just snap
   instantly between states — not a regression, today there's no
   animation at all.
   ══════════════════════════════════════════════════════════════════════ */
.girl__body.single-product.product-profile .eg-review-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: display 280ms allow-discrete, overlay 280ms allow-discrete;
}

.girl__body.single-product.product-profile .eg-review-modal[hidden] {
    display: none;
}

.girl__body.single-product.product-profile .eg-review-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 4, 13, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transition: opacity 240ms ease;
}

.girl__body.single-product.product-profile .eg-review-modal:not([hidden]) .eg-review-modal__backdrop {
    opacity: 1;
}

.girl__body.single-product.product-profile .eg-review-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 32px;
    opacity: 0;
    transform: scale(0.97) translateY(12px);
    transition: opacity 240ms ease, transform 240ms ease;
}

.girl__body.single-product.product-profile .eg-review-modal:not([hidden]) .eg-review-modal__dialog {
    opacity: 1;
    transform: scale(1) translateY(0);
}

@starting-style {
    .girl__body.single-product.product-profile .eg-review-modal:not([hidden]) .eg-review-modal__backdrop {
        opacity: 0;
    }

    .girl__body.single-product.product-profile .eg-review-modal:not([hidden]) .eg-review-modal__dialog {
        opacity: 0;
        transform: scale(0.97) translateY(12px);
    }
}

/* Pass 13: was border-radius:10px (a rounded square, not the "circle" the
   close button is supposed to be), and a bare "×" character inside a grid
   center never lands visually centered — glyphs sit on their font's
   baseline/line-box, not their own ink bounding box, so place-items:center
   only centers the *line box*, leaving the visible × a couple px off.
   padding:0 + line-height equal to the box height + a small relative
   nudge keeps the glyph itself centered instead of just its line box. */
.girl__body.single-product.product-profile .eg-review-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(168, 155, 255, 0.18);
    color: var(--ep-text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, transform 150ms ease;
}

.girl__body.single-product.product-profile .eg-review-modal__close span {
    position: relative;
    top: -1px;
}

.girl__body.single-product.product-profile .eg-review-modal__close:hover {
    background: rgba(139, 92, 246, 0.16);
    border-color: rgba(168, 155, 255, 0.32);
    transform: scale(1.06);
}

.girl__body.single-product.product-profile .eg-review-modal__close:focus-visible {
    outline: 2px solid rgba(168, 155, 255, 0.6);
    outline-offset: 2px;
}

.girl__body.single-product.product-profile .eg-review-modal__eyebrow {
    color: var(--ep-purple-light);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.girl__body.single-product.product-profile .eg-review-modal__title {
    margin: 8px 0 6px;
    color: #F4F1FF;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
}

.girl__body.single-product.product-profile .eg-review-modal__subtitle {
    margin: 0 0 20px;
    color: var(--ep-text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.girl__body.single-product.product-profile .eg-review-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.girl__body.single-product.product-profile .eg-review-form__rating {
    display: flex;
    gap: 6px;
}

.girl__body.single-product.product-profile .eg-review-form__star {
    background: none;
    border: none;
    padding: 2px;
    font-size: 1.6rem;
    line-height: 1;
    color: rgba(168, 155, 255, 0.3);
    cursor: pointer;
    transition: color 150ms ease, transform 150ms ease;
}

.girl__body.single-product.product-profile .eg-review-form__star:hover {
    transform: scale(1.12);
}

.girl__body.single-product.product-profile .eg-review-form__star.is-active {
    color: #c9b8ff;
}

.girl__body.single-product.product-profile .eg-review-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.girl__body.single-product.product-profile .eg-review-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ep-text-muted);
}

.girl__body.single-product.product-profile .eg-review-form__field input,
.girl__body.single-product.product-profile .eg-review-form__field textarea {
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(168, 155, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #F4F1FF;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
}

.girl__body.single-product.product-profile .eg-review-form__field input:focus,
.girl__body.single-product.product-profile .eg-review-form__field textarea:focus {
    outline: none;
    border-color: rgba(168, 155, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.girl__body.single-product.product-profile .eg-review-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.girl__body.single-product.product-profile .eg-review-form__hint {
    margin: 0;
    color: var(--ep-text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.girl__body.single-product.product-profile .eg-review-form__submit {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4B3FD6, #6D5DF6) !important;
    border: 1px solid rgba(168, 155, 255, 0.35) !important;
    color: #F4F1FF !important;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(75, 63, 214, 0.26) !important;
}

.girl__body.single-product.product-profile .eg-review-form__submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.girl__body.single-product.product-profile .eg-review-form__message {
    min-height: 1.2em;
    font-size: 0.84rem;
}

.girl__body.single-product.product-profile .eg-review-form__message.is-error {
    color: #f87171;
}

.girl__body.single-product.product-profile .eg-review-form__message.is-success {
    color: #4ade80;
}

@media (max-width: 640px) {
    .girl__body.single-product.product-profile .eg-review-modal {
        padding: 16px;
    }

    .girl__body.single-product.product-profile .eg-review-modal__dialog {
        padding: 24px 20px;
        max-height: calc(100vh - 32px);
    }

    .girl__body.single-product.product-profile .eg-review-form__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .girl__body.single-product.product-profile .eg-review-modal,
    .girl__body.single-product.product-profile .eg-review-modal__backdrop,
    .girl__body.single-product.product-profile .eg-review-modal__dialog {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Pass 12 — floating mini-total (desktop). Visibility is class-driven
   (scripts.js toggles .is-visible via IntersectionObserver on #final +
   window.totalPrice), never on its own timer/scroll math, so it can
   never disagree with whether #final is actually on screen. The mobile
   equivalent is .ep-sticky-cta (existing component, just unused markup
   added this pass) — hidden here past the same 860px breakpoint so the
   two never show at once.
   ══════════════════════════════════════════════════════════════════════ */
.girl__body.single-product.product-profile .ep-floating-total {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 20px;
    border-radius: 999px;
    background: rgba(15, 12, 26, 0.86);
    border: 1px solid rgba(168, 155, 255, 0.28);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(139, 92, 246, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    pointer-events: none;
    transition: opacity 240ms ease, transform 240ms ease;
}

.girl__body.single-product.product-profile .ep-floating-total.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.girl__body.single-product.product-profile .ep-floating-total__label {
    color: var(--ep-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.girl__body.single-product.product-profile .ep-floating-total__price {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

.girl__body.single-product.product-profile .ep-floating-total__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4B3FD6, #6D5DF6);
    border: 1px solid rgba(168, 155, 255, 0.35);
    color: #F4F1FF !important;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.girl__body.single-product.product-profile .ep-floating-total__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(109, 93, 246, 0.32);
}

@media (max-width: 860px) {
    .girl__body.single-product.product-profile .ep-floating-total {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .girl__body.single-product.product-profile .ep-floating-total {
        transition: none !important;
    }
}

/* The section-horizon ::after band (and the standalone .ep-section-divider
   DOM node before that) is removed entirely — both read as a visible
   "sausage" / glowing bar across the page no matter how the gradient was
   tuned. Section separation now comes only from the existing rhythm: each
   card's own shadow/border/backdrop-blur, the vertical spacing between
   sections, and each section's own corner ambient blob (.ep-hero/.plans/
   .eg-faq-lite/.eg-related-girls ::before, defined earlier in this file) —
   no dedicated divider object of any kind. */

/* Pass 13: dev/admin calendar preview badge — only rendered server-side
   when $ep_show_calendar_preview is true (WP_DEBUG or admin AND
   ?calendar_preview=1), so this never appears for a normal visitor.
   Deliberately loud/obvious, unlike the rest of the page's quiet styling
   — this is a testing aid, it should be impossible to mistake for a real
   "your slots are demo data" production message. */
.girl__body.single-product.product-profile .eg-booking__preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Pass 13: style.css hides .eg-booking__calendar entirely by default
   (the real flow only ever auto-selects "today" and never exposes a
   day-switcher UI to visitors), so the preview's today/tomorrow/+3-days
   sample days would otherwise render with zero height and be invisible.
   Scoped strictly to [data-calendar-preview="true"] — set server-side
   only under the dev/admin gate — so the real, intentionally-hidden
   production calendar is completely unaffected. The 7-column weekday
   grid (Пн–Вс) is also for a full month view we don't use here; swapped
   to 3 columns to fit the 3 sample day buttons evenly. */
.girl__body.single-product.product-profile [data-calendar-preview="true"] .eg-booking__calendar {
    display: block;
}

.girl__body.single-product.product-profile [data-calendar-preview="true"] .eg-booking__days {
    display: none;
}

.girl__body.single-product.product-profile [data-calendar-preview="true"] .eg-booking__cells {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.girl__body.single-product.product-profile [data-calendar-preview="true"] .eg-booking-day {
    font-size: 0.82rem;
    text-align: center;
}

/* Precision pass: the broad section+descendants rule below this comment
   used to live here and overcorrected — it took real content (headings,
   review text, FAQ answers, About copy, plan descriptions) out of
   selection along with the genuinely decorative nodes. Reverted to a
   named list of only the non-content UI that actually showed a solid
   highlight box in live drag-testing: buttons/CTAs, small icon-only
   badges, chart-bar fills, fixed floating widgets, the card-level ambient
   decoration, and the nav mascot. Pseudo-elements (background glows) are
   included for explicitness even though they have no DOM node to select
   in the first place. Real prose — review text, FAQ answers, benefit
   descriptions, plan copy, headings — is deliberately left alone so it
   stays selectable. */
.girl__body.single-product.product-profile .profile-dossier-card::before,
.girl__body.single-product.product-profile .profile-dossier-card::after,
.girl__body.single-product.product-profile .profile-subnav-mascot,
.girl__body.single-product.product-profile .profile-subnav-mascot *,
.girl__body.single-product.product-profile .ep-profile-section::before,
.girl__body.single-product.product-profile .ep-profile-section::after,
.girl__body.single-product.product-profile .eg-related-girls::before,
.girl__body.single-product.product-profile .eg-faq-lite::before,
.girl__body.single-product.product-profile .plans::before,
.girl__body.single-product.product-profile .ep-hero::before,
.girl__body.single-product.product-profile .eg-reviews__bar-track,
.girl__body.single-product.product-profile .eg-reviews__bar-fill,
.girl__body.single-product.product-profile .eg-reviews__write-btn,
.girl__body.single-product.product-profile .eg-reviews__head-sort,
.girl__body.single-product.product-profile .eg-faq-lite__item summary,
.girl__body.single-product.product-profile .money__button,
.girl__body.single-product.product-profile .money__eyebrow,
.girl__body.single-product.product-profile .product-guarantee__icon,
.girl__body.single-product.product-profile .ep-floating-total,
.girl__body.single-product.product-profile .ep-floating-total *,
.girl__body.single-product.product-profile .ep-sticky-cta,
.girl__body.single-product.product-profile .ep-sticky-cta * {
    user-select: none;
    -webkit-user-select: none;
}

.girl__body.single-product.product-profile input,
.girl__body.single-product.product-profile textarea,
.girl__body.single-product.product-profile select,
.girl__body.single-product.product-profile option,
.girl__body.single-product.product-profile [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
}

.girl__body.single-product.product-profile {
    -webkit-tap-highlight-color: transparent;
}

.girl__body.single-product.product-profile ::selection {
    background: rgba(163, 130, 255, 0.22);
    color: rgba(255, 255, 255, 0.96);
}

.girl__body.single-product.product-profile ::-moz-selection {
    background: rgba(163, 130, 255, 0.22);
    color: rgba(255, 255, 255, 0.96);
}

/* Static mascot/subnav stabilization: the wrapper now lives inside .profile-hero. */
body.girl__body.single-product.product-profile .profile-hero {
    position: relative !important;
    padding-top: clamp(108px, 9vw, 124px) !important;
}

body.girl__body.single-product.product-profile .profile-subnav-wrap {
    position: absolute !important;
    top: clamp(42px, 4vw, 52px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 40 !important;
    width: max-content !important;
    max-width: calc(100vw - 48px) !important;
    margin: 0 !important;
    overflow: visible !important;
    isolation: isolate;
}

body.girl__body.single-product.product-profile .profile-subnav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: calc(100vw - 48px) !important;
    margin: 0 !important;
    padding: 6px 28px 6px 16px !important;
    gap: 2px !important;
    overflow: visible !important;
    scrollbar-width: none;
}

body.girl__body.single-product.product-profile .profile-subnav .ep-section-nav__link {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
}

body.girl__body.single-product.product-profile .profile-subnav .ep-section-nav__label {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body.girl__body.single-product.product-profile .profile-subnav .ep-section-nav__link:last-child {
    margin-right: 0 !important;
    padding-right: 14px !important;
}

/* ── Mascot v3: single real <img> idle src-swap + JS-driven walk ──────
   .profile-subnav-mascot is the moving wrapper (translated via the
   --mascot-x/--mascot-y/--mascot-scale vars, set by the JS state machine
   in scripts.js). Its resting/default position is still the original
   right-anchored spot below -- the JS only ever ADDS a transform on top
   of that, it never touches left/right/top, so there's no positioning
   handoff and nothing can jump on load or under reduced motion.
   .profile-subnav-mascot__group is a separate inner layer that only ever
   gets scaleX(±1) for facing direction -- kept off the wrapper so a
   direction flip never gets caught in the wrapper's own position
   transition (transform is a single animatable property; mixing a smooth
   translate with a snap mirror on the same property would tween the
   mirror too instead of snapping it instantly). There are no stacked
   opacity frames anymore: idle and walking both just set
   .profile-subnav-mascot__cat's src directly from scripts.js. */
body.girl__body.single-product.product-profile .profile-subnav-mascot {
    position: absolute !important;
    right: clamp(40px, 8vw, 82px) !important;
    bottom: 100% !important;
    width: 62px !important;
    height: 44px !important;
    /* Clickable/tappable: sits entirely above the pill (bottom: 100%), so
       its hit area never spatially overlaps the nav links below and can't
       block them. Children get pointer-events: none so the click always
       lands on this wrapper, never on an individual <img>. */
    pointer-events: auto !important;
    cursor: pointer !important;
    overflow: visible !important;
    z-index: 6 !important;
    line-height: 0;
    transform: translate(var(--mascot-x, 0px), var(--mascot-y, 0px)) scale(var(--mascot-scale, 1));
    transform-origin: 50% 100%;
}

body.girl__body.single-product.product-profile .profile-subnav-mascot:focus-visible {
    outline: 2px solid rgba(177, 126, 255, 0.6);
    outline-offset: 3px;
    border-radius: 8px;
}

body.girl__body.single-product.product-profile .profile-subnav-mascot:active,
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn:active {
    cursor: grabbing !important;
}

body.girl__body.single-product.product-profile .profile-subnav-mascot.is-walking {
    transition: transform var(--mascot-walk-duration, 1.2s) linear;
}

body.girl__body.single-product.product-profile .profile-subnav-mascot__group {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: scaleX(var(--mascot-facing, 1));
    transform-origin: 50% 100%;
}

body.girl__body.single-product.product-profile .profile-subnav-mascot.is-facing-left {
    --mascot-facing: -1;
}

body.girl__body.single-product.product-profile .profile-subnav-mascot.is-facing-right {
    --mascot-facing: 1;
}

body.girl__body.single-product.product-profile .profile-subnav-mascot__cat {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: block;
    width: auto;
    /* Fixed height (not width) so the feet stay anchored at the same
       visual height across frames -- the idle frames (cat-base/cat-main2)
       and the walk-cycle frames were exported at different aspect
       ratios/crop boxes, so matching height keeps the cat's footing
       stable; width is left to vary naturally per frame. */
    height: 44px;
    transform: translateX(-50%);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Yarn ball: independent object, NOT a child of the cat's transform
   group anymore. It lives as a sibling of .profile-subnav-mascot inside
   the same .profile-subnav-wrap positioning context, so its own
   translate/rotate (via --yarn-x/--yarn-y/--yarn-rot/--yarn-scale) never
   gets composed with the cat's walk transform or the group's facing
   mirror -- it can roll on its own and the cat then walks toward wherever
   it ends up, instead of the two looking glued together. State is driven
   by scripts.js via the "Profile subnav mascot: yarn play" block: .is-idle
   gets a slow, subtle wobble (deliberately a different period/easing than
   the cat's tail so the two never read as synced/glued); .is-yarn-rolling
   swaps the wobble keyframe for a transition so JS-driven --yarn-x/--yarn-rot
   writes animate smoothly; .is-yarn-caught plays a one-shot catch bounce. */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn {
    --yarn-x: 0px;
    --yarn-y: 0px;
    --yarn-rot: 0deg;
    --yarn-scale: 1;
    --yarn-glow: 0;
    position: absolute !important;
    right: calc(clamp(40px, 8vw, 82px) + 30px) !important;
    bottom: 100% !important;
    width: 22px !important;
    height: 22px !important;
    display: block;
    line-height: 0;
    /* Clickable as its own object -- separate hit target from the cat,
       sitting in the same bottom:100% row so it never spatially overlaps
       the nav links below. */
    pointer-events: auto !important;
    cursor: pointer !important;
    /* Above the cat (z-index: 6), not below it. When the yarn rolls toward
       the cat's side of the platform their boxes overlap for part of the
       chase, and confirmed live: with a LOWER z-index than the cat the
       ball vanished completely behind the cat sprite during that overlap
       -- a second, separate cause of "the yarn disappears" beyond the
       rotation-pivot fix above. The cat is the one walking up to/over the
       yarn, so the yarn staying visually on top through that approach is
       also the correct "ball being chased" reading. */
    z-index: 7 !important;
    /* Pivot at the ball's own visual center, NOT its bottom edge. A square
       22x22 box rotated around 50% 100% swings its top half down past the
       box's own bottom on every non-90°-multiple angle -- confirmed live,
       it was dipping up to ~24px below the pill's top edge mid-spin, and
       since yarnSpin is cumulative (never a clean multiple of 360deg) the
       resting position after a roll stayed visibly sunk too. Rotating
       around the center keeps the spin's footprint symmetric, so the
       ball's static resting baseline (set by `bottom: 100%` above, same
       baseline as the cat) never moves because of rotation alone. */
    transform-origin: 50% 50%;
    /* Outer owns ONLY the smooth, arbitrary-target moves -- horizontal
       roll position and spin -- both driven by a CSS transition (see
       .is-yarn-rolling below) so they can tween from wherever they
       currently are to whatever new value JS sets, regardless of
       distance/cumulative angle. The hop/bounce lives on the INNER image
       instead (next rule), specifically so it never has to fight this
       transition for the same `transform` property: a running CSS
       `animation` always wins over a `transition` on a shared property,
       so a small repeating keyframe hop and a smooth large rotation
       cannot coexist on one element's transform without one silently
       cancelling the other. --yarn-y/--yarn-scale are declared here (and
       inherited down to the inner image below) but intentionally NOT part
       of this element's own transform. */
    transform: translate3d(var(--yarn-x), 0, 0) rotate(var(--yarn-rot));
    filter: drop-shadow(0 0 calc(4px + (var(--yarn-glow) * 7px)) rgba(167, 139, 250, calc(0.32 + (var(--yarn-glow) * 0.34))));
}

body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn:focus-visible {
    outline: 2px solid rgba(177, 126, 255, 0.6);
    outline-offset: 3px;
    border-radius: 50%;
}

/* Eased with a plain, non-overshooting curve (no bounce-past-target) --
   pixel-art sprites read as deliberate, readable steps with a calm
   ease-out, not a springy/blurred overshoot. Duration matches
   YARN_ROLL_TRANSITION_MS in scripts.js. */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-rolling {
    transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), filter 400ms ease-out;
}

/* Close-range launch travels much further than a plain roll/kick (see
   CLOSE_LAUNCH_MIN/MAX_PX in scripts.js) -- a slightly longer transition
   reads as a real fling rather than the same gentle roll just stretched
   out. Needs both classes for specificity over the plain-roll rule above,
   same pattern as the kick override below. Duration matches
   YARN_LAUNCH_TRANSITION_MS in scripts.js. */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-launched.is-yarn-rolling {
    transition: transform 550ms cubic-bezier(0.25, 0.8, 0.25, 1), filter 550ms ease-out;
}

/* Wall rebound: by the time JS adds this class it's already removed
   is-yarn-kicked/is-yarn-launched (see applyWallRebound()), so this only
   ever competes with the plain .is-yarn-rolling rule above -- two classes
   reliably wins. Matches YARN_REBOUND_TRANSITION_MS in scripts.js so the
   JS-timed "settle" cue lines up with this transition actually finishing. */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-wall-rebound.is-yarn-rolling {
    transition: transform 480ms cubic-bezier(0.25, 0.8, 0.25, 1), filter 480ms ease-out;
}

/* Inner image: owns the hop/bounce -- translateY + scale only, no
   position/rotation here, so its own keyframe animations never collide
   with the outer's transition above. Resting transform reads the
   inherited --yarn-y/--yarn-scale vars (kept at 0px/1 by JS at rest); the
   roll/catch keyframes below use small literal step values rather than
   var-relative calc() so they never depend on (or get confused by) the
   outer's current x/rotation. */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn .profile-subnav-mascot__yarn {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform-origin: 50% 50%;
    transform: translateY(var(--yarn-y, 0px)) scale(var(--yarn-scale, 1));
}

/* Attention pulse: a slow, gentle "notice me" beat for the yarn while
   it's sitting untouched (.is-idle) and nothing else is going on. Split
   across both halves of the outer/inner architecture above -- the OUTER
   element pulses rotate+glow (egYarnAttentionPulseOuter), the INNER image
   pulses translateY+scale (egYarnAttentionPulseInner) -- same duration and
   timeline percentages on both so they read as one synced beat, never
   fighting the outer's roll-transition or the inner's roll/kick/catch hop
   keyframes (mutually exclusive via .is-idle, which JS removes the moment
   a scene starts -- see startYarnPlay()). 6.2s sits inside the requested
   4.8-7s window: noticeable without ever reading as frantic. */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-idle {
    animation: egYarnAttentionPulseOuter 6.2s ease-in-out infinite;
}

body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-idle .profile-subnav-mascot__yarn {
    animation: egYarnAttentionPulseInner 6.2s ease-in-out infinite;
}

/* 2 small hop impulses during the roll (plus a tiny settle dip) -- never
   a positive Y, capped at -4px, well inside the "max -5px" ceiling. */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-rolling .profile-subnav-mascot__yarn {
    animation: egYarnRollHop 400ms ease-in-out 1;
}

/* Kick variant -- same travel duration as the plain roll above, but the
   ball gets a sharper initial pop (scale up to 1.08, spec ceiling) right
   as the kick lands, then settles into the same small hop pattern. Needs
   both classes (.is-yarn-kicked.is-yarn-rolling) for higher specificity
   than the plain-roll rule above so it reliably wins regardless of
   stylesheet order, since JS always adds both classes together for a
   kick (see applyKick()). */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-kicked.is-yarn-rolling .profile-subnav-mascot__yarn {
    animation: egYarnKickRollHop 400ms ease-out 1;
}

/* Close-range launch: a sharper liftoff, a first ground-hit bounce partway
   through the travel (~60%, matching YARN_LAUNCH_LAND_RATIO in scripts.js),
   then one more settling bounce right as it lands -- the "flung away, hits
   the ground, bounces once more" beat from the brief. Needs all three
   classes for specificity over both the plain-roll and kick-roll rules
   above; JS always adds is-yarn-launched alongside the other two together
   (see applyKick()). Duration matches the outer launch transition above so
   the second bounce settles right as the X-movement itself arrives. */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-launched.is-yarn-kicked.is-yarn-rolling .profile-subnav-mascot__yarn {
    animation: egYarnLaunchHop 550ms ease-out 1;
}

/* Wall-hit squash: a quick "hit something solid" cue. JS adds
   is-yarn-wall-hit WITHOUT removing whatever roll/kick/launch classes were
   already on the element (the original kick/launch is still mid-flight) --
   so both selector combos below need enough classes to outrank the
   existing kick-roll/launch-roll hop rules above, regardless of source
   order, rather than relying on a same-specificity tie-break. */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-wall-hit.is-yarn-kicked.is-yarn-rolling .profile-subnav-mascot__yarn,
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-wall-hit.is-yarn-launched.is-yarn-kicked.is-yarn-rolling .profile-subnav-mascot__yarn {
    animation: egYarnWallHitSquash 200ms ease-out 1;
}

/* Wall rebound hop: one clear arc up and back down toward center, then a
   couple of small settling bounces baked into the same keyframe run (no
   separate "second bounce" timer needed) -- mirrors the kick/launch hop
   rules' "is-yarn-wall-hit already removed by this point" state, so two
   classes is enough here (see applyWallRebound()). */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-wall-rebound.is-yarn-rolling .profile-subnav-mascot__yarn {
    animation: egYarnWallReboundHop 480ms ease-out 1;
}

/* Final settle roll after a wall-rebound has landed -- reuses the existing
   plain-roll keyframe (egYarnRollHop), just shorter and under its own
   class so it can't be confused with an actual ongoing roll. is-yarn-rolling
   is still present at this point (see scheduleYarnLandingAndChase()), so
   this needs both classes to outrank the plain 1-class roll-hop rule above. */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-settling.is-yarn-rolling .profile-subnav-mascot__yarn {
    animation: egYarnRollHop 310ms ease-in-out 1;
}

/* One slightly bigger catch bounce, scale capped at 1.07 (spec: 1.06-1.08). */
body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn.is-yarn-caught .profile-subnav-mascot__yarn {
    animation: egYarnCatchBounce 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

/* Outer half of the attention pulse: rotate + glow only -- translate3d
   reads the live --yarn-x rather than hardcoding 0 here, because the yarn
   is only ever at --yarn-x:0 the very first time it's idle (before any
   scene has moved it). After a scene settles, it goes back to .is-idle at
   wherever it last rolled to -- a running CSS `animation` always wins over
   a `transition` on the same property, so hardcoding translate3d(0,0,0)
   here visually snapped the resting ball back to x:0 for the entire idle
   period regardless of its real --yarn-x, then teleported it back to its
   true offset the instant the next click removed .is-idle. Mostly flat
   (72% of the cycle at rest) with one gentle tilt-and-glow swing in the
   back third, never a hard snap. */
@keyframes egYarnAttentionPulseOuter {
    0%, 72%, 100% {
        transform: translate3d(var(--yarn-x, 0px), 0, 0) rotate(0deg);
        filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.35));
    }

    82% {
        transform: translate3d(var(--yarn-x, 0px), 0, 0) rotate(3deg);
        filter: drop-shadow(0 0 9px rgba(216, 180, 254, 0.65));
    }

    90% {
        transform: translate3d(var(--yarn-x, 0px), 0, 0) rotate(-2deg);
    }
}

/* Inner half: translateY + scale, synced to the same timeline as the
   outer rotate+glow above. */
@keyframes egYarnAttentionPulseInner {
    0%, 72%, 100% {
        transform: translateY(0) scale(1);
    }

    82% {
        transform: translateY(-1px) scale(1.04);
    }

    90% {
        transform: translateY(0) scale(1.01);
    }
}

@keyframes egYarnRollHop {
    0% {
        transform: translateY(0) scale(1);
    }

    22% {
        transform: translateY(-3px) scale(1.03);
    }

    46% {
        transform: translateY(0) scale(1);
    }

    70% {
        transform: translateY(-4px) scale(1.04);
    }

    88% {
        transform: translateY(-1px) scale(1.015);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* Kick: a sharp pop right at impact (10%, scale 1.08 -- spec ceiling),
   then 2 more small settling hops, same -4px ceiling as the plain roll. */
@keyframes egYarnKickRollHop {
    0% {
        transform: translateY(0) scale(1);
    }

    10% {
        transform: translateY(-2px) scale(1.08);
    }

    30% {
        transform: translateY(-3px) scale(1.02);
    }

    55% {
        transform: translateY(0) scale(1);
    }

    78% {
        transform: translateY(-4px) scale(1.04);
    }

    92% {
        transform: translateY(-1px) scale(1.01);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* Close-range launch: liftoff pop (28%), a first ground-hit touchdown
   around 60% of the travel, then one more settling bounce (72%) right
   before landing -- ceiling -5px / scale 1.08 per spec, never the cartoony
   full hop of a real jump. */
@keyframes egYarnLaunchHop {
    0% {
        transform: translateY(0) scale(1);
    }

    28% {
        transform: translateY(-5px) scale(1.06);
    }

    60% {
        transform: translateY(0) scale(1.02);
    }

    72% {
        transform: translateY(-4px) scale(1.05);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* Impact squash -- no translateY at all, just a brief horizontal/vertical
   squash-and-stretch reading as "hit something solid". Ceiling kept small
   (1.08/.92) per spec: a quick premium tap, not a cartoon splat. */
@keyframes egYarnWallHitSquash {
    0% {
        transform: translateY(0) scale(1);
    }

    45% {
        transform: translateY(0) scale(1.08, 0.92);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* Rebound arc back toward center: one clear up-and-over hop (18%, -6px --
   the tallest hop in the whole yarn vocabulary, since this is the one
   moment meant to read as a real bounce), then two small settling dips
   baked into the same run, ceiling -6px / scale 1.08 per spec, never
   crossing into the platform (no translateY ever goes positive/down). */
@keyframes egYarnWallReboundHop {
    0% {
        transform: translateY(0) scale(1);
    }

    18% {
        transform: translateY(-6px) scale(1.08);
    }

    58% {
        transform: translateY(-3px) scale(1.04);
    }

    78% {
        transform: translateY(0) scale(1.02);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes egYarnCatchBounce {
    0% {
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(-4px) scale(1.07);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.girl__body.single-product.product-profile .profile-subnav-mascot {
        transform: none !important;
        transition: none !important;
    }

    body.girl__body.single-product.product-profile .profile-subnav-mascot__group {
        transform: none !important;
    }

    body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn {
        transform: none !important;
        transition: none !important;
        animation: none !important;
        filter: none !important;
    }

    body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn .profile-subnav-mascot__yarn {
        transform: none !important;
        animation: none !important;
    }
}

@media (max-width: 640px) {
    body.girl__body.single-product.product-profile .profile-hero {
        padding-top: 124px !important;
    }

    body.girl__body.single-product.product-profile .profile-subnav-wrap {
        top: 62px !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    body.girl__body.single-product.product-profile .profile-subnav {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 6px 8px !important;
        gap: 1px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none;
    }

    body.girl__body.single-product.product-profile .profile-subnav .ep-section-nav__link {
        gap: 4px !important;
        min-height: 38px !important;
        padding: 9px 8px !important;
        font-size: 0.78rem !important;
    }

    body.girl__body.single-product.product-profile .profile-subnav .ep-section-nav__dot {
        width: 5px !important;
        height: 5px !important;
    }

    body.girl__body.single-product.product-profile .profile-subnav .ep-section-nav__link:last-child {
        padding-right: 8px !important;
    }

    body.girl__body.single-product.product-profile .profile-subnav::-webkit-scrollbar {
        display: none;
    }

    body.girl__body.single-product.product-profile .profile-subnav-mascot {
        right: 34px !important;
        bottom: 100% !important;
        width: 58px !important;
        height: 42px !important;
    }

    body.girl__body.single-product.product-profile .profile-subnav-mascot__cat {
        height: 42px;
    }

    body.girl__body.single-product.product-profile .profile-subnav-mascot-yarn {
        right: calc(34px + 26px) !important;
        width: 18px !important;
        height: 18px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Booking flow gap reduction — plans → calendar → summary.
   The three sections are one logical purchase funnel; previous gaps
   read as independent page sections (~130–250px between them).
   Reduced to a tighter, connected rhythm without touching card scale/
   overflow, prices, buttons, or any other logic.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Plans section bottom: was 130px (generous clearance for scale(1.05)
   overflow + box-shadow). overflow:visible is already set so shadow can
   bleed freely; 48px is enough for the scale transform clearance. */
.girl__body.single-product.product-profile .ep-profile-section--plans {
    padding-bottom: 48px !important;
}

/* 2) Calendar section: compress both top and bottom padding so the
   section sits close to plans above and summary below. */
.girl__body.single-product.product-profile .ep-profile-section--calendar {
    padding-top: clamp(8px, 1vw, 16px) !important;
    padding-bottom: clamp(16px, 2vw, 24px) !important;
}

/* 3) Booking summary card: tighten its own top margin so it doesn't
   add an extra layer of spacing inside the summary section. */
.girl__body.single-product.product-profile .booking-summary {
    margin-top: clamp(12px, 1.5vw, 20px) !important;
}