/* PARFUMS V2 — single-image perfume Hero composition.
   Scoped to the detail Hero so the olfactive pyramid remains unchanged. */

.perfume-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    min-height: 334px;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--parfum-line);
    background:
        linear-gradient(125deg, rgba(217, 173, 82, 0.08), transparent 44%),
        #0a0c0e;
}

.perfume-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.55 !important;
    background:
        radial-gradient(
            ellipse at 31% 46%,
            rgba(237, 198, 111, 0.22) 0%,
            rgba(217, 173, 82, 0.09) 32%,
            transparent 64%
        ),
        radial-gradient(
            ellipse at 28% 42%,
            rgba(255, 244, 210, 0.08) 0%,
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 44%
        );
    content: "";
}

.perfume-hero::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.62 !important;
    background:
        radial-gradient(
            ellipse at 36% 44%,
            transparent 28%,
            rgba(3, 4, 5, 0.05) 56%,
            rgba(3, 4, 5, 0.36) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            transparent 24%,
            transparent 70%,
            rgba(0, 0, 0, 0.34) 100%
        );
    content: "";
    pointer-events: none;
}

.perfume-hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(5, 6, 8, 0.02) 0%,
            rgba(5, 6, 8, 0.05) 40%,
            rgba(5, 6, 8, 0.28) 70%,
            rgba(5, 6, 8, 0.58) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7, 8, 10, 0.72) 0%,
            rgba(7, 8, 10, 0.18) 18%,
            transparent 48%
        ) !important;
}

.perfume-hero-family {
    position: absolute;
    z-index: -2;
    top: -10%;
    bottom: -10%;
    background-image: var(
        --family-image,
        url("../assets/olfactive-family-atlas.jpg")
    );
    background-repeat: no-repeat;
    background-size: var(--family-image-size, 400% 400%);
    background-position: var(
        --family-image-position,
        var(--family-x) var(--family-y)
    );
    opacity: 0.66 !important;
    filter:
        saturate(1.02)
        brightness(0.88)
        contrast(1.22) !important;
    mix-blend-mode: normal;
}

.perfume-hero-family-1 {
    inset: 0 !important;
    opacity: 1 !important;
    background-image: var(--family-image) !important;
    background-size: cover !important;
    background-position: 70% center !important;
    filter:
        brightness(0.78)
        contrast(1.16)
        saturate(1.02) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.perfume-hero-family-2,
.perfume-hero-family-3 {
    display: none !important;
}

.perfume-hero-bottle-wrap {
    position: relative;
    z-index: 3;
    display: grid;
    min-width: 0;
    place-items: end center;
    padding: 54px 2px 42px 14px;
}

.perfume-hero-bottle-wrap::before {
    position: absolute;
    top: 52%;
    left: 50%;
    z-index: 0;
    width: 78%;
    height: 86%;
    background:
        radial-gradient(
            ellipse at 42% 45%,
            color-mix(in srgb, var(--hero-aura-primary, #c9a45c) 28%, transparent) 0%,
            transparent 68%
        ),
        radial-gradient(
            ellipse at 62% 42%,
            color-mix(in srgb, var(--hero-aura-secondary, #c9a45c) 22%, transparent) 0%,
            transparent 66%
        );
    content: "";
    pointer-events: none;
    filter: blur(28px);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
}

.perfume-hero-bottle-wrap::after {
    position: absolute;
    right: 14%;
    bottom: 28px;
    left: 11%;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.64);
    content: "";
    filter: blur(12px);
}

.perfume-hero-bottle {
    position: relative;
    z-index: 1;
    width: min(112%, 248px);
    height: 246px;
    object-fit: contain;
    object-position: center bottom;
    filter:
        brightness(var(--hero-category-brightness, 1.06))
        contrast(1.03)
        drop-shadow(0 22px 20px rgba(0, 0, 0, 0.42));
    transform: translateY(5%) scale(0.75);
    transform-origin: center bottom;
}

.perfume-hero-copy {
    position: relative;
    z-index: 5;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 58px 18px 54px 12px;
    transform: translateX(10%) scale(1.15);
    transform-origin: center left;
}

.perfume-hero-copy .perfume-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 8px;
    color: var(--parfum-gold);
    font-size: 10px;
    font-weight: 700 !important;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.perfume-hero-copy .perfume-brand::after {
    content: '';
    flex: 1;
    height: 1px;
    min-width: 28px;
    background: linear-gradient(
        90deg,
        rgba(220, 184, 89, 0.85),
        rgba(220, 184, 89, 0.08)
    );
}

.perfume-hero-copy h2 {
    margin: 0;
    color: var(--parfum-ivory);
    font-family: var(--font-family-display);
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 0.92;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.72),
        0 0 24px rgba(0, 0, 0, 0.36);
}

.perfume-rating {
    margin-top: 11px;
    color: var(--parfum-gold-bright) !important;
    font-size: 17px !important;
    letter-spacing: 3px;
}

.perfume-score {
    display: grid;
    gap: 0;
    margin-top: 8px;
}

.perfume-hero-copy .perfume-score small {
    color: var(--parfum-muted);
    font-size: 12px !important;
}

.perfume-hero-copy .perfume-score strong {
    color: var(--parfum-gold-bright);
    font-family: var(--font-family-display);
    font-size: 25px;
    font-weight: 700 !important;
}

.perfume-score strong span {
    color: var(--parfum-copy);
    font-size: 15px;
}

.perfume-hero-copy small,
.perfume-hero-copy span {
    font-weight: 600 !important;
}

.perfume-hero--niche {
    --hero-category-brightness: 1.10;
    --hero-category-glow: 0.34;
}

.perfume-hero--designer {
    --hero-category-brightness: 1.05;
    --hero-category-glow: 0.26;
}

.perfume-hero--arab {
    --hero-category-brightness: 1.00;
    --hero-category-glow: 0.20;
}

@media (min-width: 960px) {
    .perfume-hero-copy,
    .perfume-hero-bottle {
        transform: none;
    }
}