:root {
    --salon-3d-shadow: 0 24px 54px rgba(83, 49, 32, 0.18), 0 8px 20px rgba(177, 104, 71, 0.12);
    --salon-3d-shadow-hover: 0 30px 66px rgba(83, 49, 32, 0.22), 0 10px 26px rgba(177, 104, 71, 0.16);
    --salon-3d-ring: rgba(205, 137, 100, 0.34);
}

img[src*="assets/images/3d-salon/"],
.salon-3d-image {
    border-radius: clamp(18px, 2vw, 30px);
    box-shadow: var(--salon-3d-shadow);
    filter: saturate(0.94) contrast(1.02) brightness(1.015);
    object-fit: cover;
    transform: perspective(1100px) translateZ(0);
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

a:hover img[src*="assets/images/3d-salon/"],
button:hover img[src*="assets/images/3d-salon/"],
label:hover img[src*="assets/images/3d-salon/"],
.salon-3d-image:hover {
    box-shadow: var(--salon-3d-shadow-hover);
    filter: saturate(0.98) contrast(1.025) brightness(1.035);
    transform: perspective(1100px) translateY(-3px) rotateX(0.7deg) rotateY(-0.7deg);
}

/* Accurate catalogue, guide and assistant images keep their content while
   receiving the same calm depth and warm salon-light treatment. */
.hair-style-visual img,
.hair-option-visual img,
.cw-hair-studio-promo-thumb img,
.makeup-before-after-visual img,
img[src*="assets/img/hair-studio/styles/"],
img[src*="assets/img/makeup-studio/makeup-before-after"],
img[src*="assets/images/ai-assistant/"],
img[src*="assets/images/client-guide/"] {
    border: 1px solid rgba(205, 137, 100, 0.24);
    box-shadow: 0 14px 32px rgba(83, 49, 32, 0.16), inset 0 0 0 1px rgba(255, 248, 239, 0.5);
    filter: saturate(0.92) sepia(0.035) contrast(1.015);
    transform: perspective(900px) translateZ(0);
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.hair-style-visual:hover img,
.hair-option-card:hover .hair-option-visual img,
.cw-hair-studio-promo-inline:hover .cw-hair-studio-promo-thumb img {
    box-shadow: 0 20px 40px rgba(83, 49, 32, 0.2), 0 0 24px rgba(224, 159, 117, 0.18);
    filter: saturate(0.98) sepia(0.02) contrast(1.025) brightness(1.025);
    transform: perspective(900px) translateY(-3px) rotateX(1deg);
}

.booking-modern-hero {
    align-items: center;
    display: grid;
    gap: clamp(1rem, 2vw, 2rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(210px, 0.48fr) minmax(280px, 0.72fr);
    overflow: hidden;
    position: relative;
}

.booking-modern-hero .booking-hero-visual-3d {
    align-self: stretch;
    min-height: 210px;
    position: relative;
}

.booking-modern-hero .booking-hero-visual-3d::after {
    background: radial-gradient(circle at 68% 48%, rgba(239, 174, 126, 0.28), transparent 54%);
    content: "";
    inset: -12%;
    pointer-events: none;
    position: absolute;
}

.booking-modern-hero .booking-hero-visual-3d img {
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.booking-service-image img,
.booking-selected-service > div > img,
.booking-summary-card > img,
.booking-service-placeholder img {
    aspect-ratio: 4 / 3;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.booking-service-placeholder {
    background: #f4e8dd;
    display: block;
    overflow: hidden;
}

.cw-header {
    background:
        linear-gradient(90deg, rgba(246, 238, 229, 0.98) 0%, rgba(246, 238, 229, 0.92) 44%, rgba(246, 238, 229, 0.2) 70%, transparent 100%),
        url("../images/3d-salon/community-salon-calm-3d.webp") right center / min(52%, 720px) 100% no-repeat,
        #f6eee5;
    border: 1px solid rgba(176, 117, 87, 0.16);
    border-radius: 28px;
    box-shadow: 0 22px 52px rgba(83, 49, 32, 0.11);
    min-height: 220px;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 2.7rem);
    padding-right: clamp(20rem, 46vw, 44rem);
}

.cw-header .cw-title-block {
    max-width: 620px;
    position: relative;
    z-index: 1;
}

.brand-experience-visual picture,
.client-guide-visual picture,
.client-guide-tour-visual picture,
.style-studio-hero-media,
.style-studio-scene-banner,
.makeup-arrival-backdrop-wrap,
.makeup-story-card,
.hair-studio-arrival-stage {
    isolation: isolate;
    position: relative;
}

.brand-experience-visual picture::after,
.client-guide-visual picture::after,
.style-studio-hero-media::after,
.style-studio-scene-banner::after {
    background: linear-gradient(135deg, rgba(255, 248, 239, 0.22), transparent 42%, rgba(203, 128, 91, 0.14));
    border-radius: inherit;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

@media (max-width: 900px) {
    html:has(body.booking-body),
    body.booking-body {
        max-width: 100%;
        overflow-x: clip;
    }

    body.booking-body .booking-shell,
    body.booking-body .booking-modern-hero,
    body.booking-body .booking-modern-hero > * {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }

    body.booking-body .booking-modern-hero :where(h1, p, span) {
        overflow-wrap: anywhere;
    }

    .booking-modern-hero {
        grid-template-columns: 1fr;
    }

    .booking-modern-hero .booking-hero-visual-3d {
        min-height: 240px;
    }

    .cw-header {
        background:
            linear-gradient(180deg, rgba(246, 238, 229, 0.98) 0%, rgba(246, 238, 229, 0.88) 46%, rgba(246, 238, 229, 0.14) 72%, transparent 100%),
            url("../images/3d-salon/community-salon-calm-3d.webp") center bottom / 100% auto no-repeat,
            #f6eee5;
        min-height: 430px;
        padding-right: clamp(1rem, 5vw, 2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    img[src*="assets/images/3d-salon/"],
    .salon-3d-image,
    .hair-style-visual img,
    .hair-option-visual img,
    .cw-hair-studio-promo-thumb img,
    img[src*="assets/img/hair-studio/styles/"],
    img[src*="assets/img/makeup-studio/makeup-before-after"] {
        transition: none;
    }

    a:hover img[src*="assets/images/3d-salon/"],
    button:hover img[src*="assets/images/3d-salon/"],
    label:hover img[src*="assets/images/3d-salon/"],
    .salon-3d-image:hover,
    .hair-style-visual:hover img,
    .hair-option-card:hover .hair-option-visual img,
    .cw-hair-studio-promo-inline:hover .cw-hair-studio-promo-thumb img {
        transform: none;
    }
}