:root {
    --yotel-purple: #772583;
    --yotel-purple-rgb: 119, 37, 131;
    --font-primary: Arial, Helvetica, sans-serif;
    --primary-color: var(--yotel-purple);
    --primary-color-rgb: var(--yotel-purple-rgb);
    --secondary-color: var(--yotel-purple);
    --secondary-color-rgb: var(--yotel-purple-rgb);
    --logo-height: 10rem;
}

/* J. Louis - Follow the standard continuous drawer composition used by the Hilton reference tour. */
aside {
    padding-top: 0.5rem;
    /* J. Louis - When ::before supplies the CSS gradient, keep this base alpha at zero to avoid compounded opacity. */
    background-color: rgba(255, 255, 255, 0) !important;
}

/* J. Louis - Reuse the Executive Centre CSS wash with YOTEL's purple brand colour. */
aside::before {
    background-image: linear-gradient(
        to bottom,
        white 0%,
        color-mix(in srgb, var(--yotel-purple) 12%, white) 24%,
        color-mix(in srgb, var(--yotel-purple) 52%, white) 64%,
        color-mix(in srgb, var(--yotel-purple) 20%, white) 82%,
        white 100%
    ) !important;
    opacity: 0.5 !important;
}

/* J. Louis - Brand only the top-level accordion group headers with YOTEL purple. */
aside acc-menu > acc-menu-item-children > acc-menu-group > acc-menu-item-title {
    background-color: rgba(var(--yotel-purple-rgb), 0.82) !important;
    color: #ffffff !important;
}

aside acc-menu > acc-menu-item-children > acc-menu-group.open > acc-menu-item-title,
aside acc-menu > acc-menu-item-children > acc-menu-group > acc-menu-item-title:hover,
aside acc-menu > acc-menu-item-children > acc-menu-group > acc-menu-item-title:focus {
    background-color: var(--yotel-purple) !important;
}

/* J. Louis - Carry YOTEL purple through shared button icons without recolouring their white surfaces. */
section[btns][common] my-btn svg *,
section[btns][mice] my-btn svg *,
section[btns][nav] my-btn svg .icon,
section[btns][nav] my-btn svg .icon2 {
    fill: var(--yotel-purple) !important;
}

/* J. Louis - Brand every state of the SVG dot navigation and its check mark. */
dots-menu dots-menu-item .dot_ring {
    fill: var(--yotel-purple) !important;
}

dots-menu dots-menu-item .dot_stroke {
    fill: white !important;
}

dots-menu dots-menu-item .dot_hover {
    fill: white !important;
}

dots-menu dots-menu-item .dot_check {
    fill: white !important;
    stroke: var(--yotel-purple) !important;
}

dots-menu dots-menu-item.active .dot_check,
dots-menu dots-menu-item:hover .dot_check {
    fill: var(--yotel-purple) !important;
    stroke: white !important;
}

/* J. Louis - Replace the accordion's white visited tick with the same YOTEL purple. */
aside acc-menu acc-menu-item.visited > acc-menu-item-title::before,
aside acc-menu acc-menu-group.visited > acc-menu-item-title::before {
    border-color: var(--yotel-purple) !important;
}

aside section[logo] {
    margin-bottom: 0;
}

@media screen and (max-width: 500px) {
    /* J. Louis - Give the single-line YOTEL mark the standard mobile drawer breathing room. */
    aside section[logo] {
        padding: 1rem 0;
    }
}

/* J. Louis - Float the collapsed scene title directly over the panorama without a glass tile. */
body:not(.descr) my-description div.title-stage {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
}

body:not(.descr) my-description div.title-stage my-description-title {
    color: #ffffff !important;
    text-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.8);
}