/*!
 * Per-OPD layout DNA — banner compositions + menu chrome.
 * Driven by body.opd-banner--* / body.opd-menu--* from App\Support\OpdLayout.
 * Load after idds-note05.css.
 */

/* ========== FULL-SIZE BANNER BASE (all OPD) ========== */
body.skin-magz.opd-layout .nx-opd-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    gap: 0 !important;
}
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    line-height: 0 !important;
}
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .hz-slider,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .hz-slider__frame,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd #carouselExampleIndicators,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .carousel-inner,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .carousel-item,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel__media {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd #carouselExampleIndicators .carousel-item img,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd #carouselExampleIndicators .hero-carousel__img,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel--fit-cover .hero-carousel__img,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel--fit-cover .carousel-item img,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel__img,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .carousel-item img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    transform-origin: center center !important;
    display: block !important;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--idds-primary) 10%, #0f172a),
        color-mix(in srgb, var(--idds-accent) 8%, #1e293b)) !important;
}
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .carousel-item,
body.skin-magz.opd-layout .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel__media {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--idds-primary) 8%, #0f172a),
        color-mix(in srgb, var(--idds-accent) 6%, #1e293b)) !important;
}
body.skin-magz.opd-layout .nx-opd-stage .nx-opd-slider-caption {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
}

/* ========== BANNER LAYOUTS ========== */

/* overlay — identity floats on full-bleed banner */
body.skin-magz.opd-banner--overlay .nx-opd-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(360px, 1fr);
    min-height: clamp(360px, 52vw, 580px);
}
body.skin-magz.opd-banner--overlay .nx-opd-stage > .nx-batik {
    z-index: 2;
    pointer-events: none;
}
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd {
    grid-area: 1 / 1;
    z-index: 1;
    position: relative !important;
    align-self: stretch;
    justify-self: stretch;
    min-height: clamp(360px, 52vw, 580px) !important;
    height: 100% !important;
}
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd .hz-slider,
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd .hz-slider__frame,
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel,
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd #carouselExampleIndicators,
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd .carousel-inner,
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd .carousel-item,
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd .carousel-item.active,
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd #carouselExampleIndicators .carousel-item img,
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd #carouselExampleIndicators .hero-carousel__img,
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd img,
body.skin-magz.opd-banner--overlay .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
body.skin-magz.opd-banner--overlay .nx-opd-stage .nx-opd-hero {
    grid-area: 1 / 1;
    z-index: 4;
    align-self: start;
    justify-self: stretch;
    width: auto;
    max-width: calc(100% - 2rem);
    margin: .85rem 1rem 0;
    padding: .9rem 1rem !important;
    border-radius: 16px;
    background: color-mix(in srgb, var(--idds-primary, #1e293b) 78%, transparent) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.14);
}
body.skin-magz.opd-banner--overlay .nx-opd-stage .nx-opd-slider-caption {
    z-index: 5;
}

/* stack — identity then full banner (default flow, forced bleed) */
body.skin-magz.opd-banner--stack .nx-opd-stage .nx-opd-hero {
    order: 1;
    padding: 1rem 1.15rem .75rem !important;
}
body.skin-magz.opd-banner--stack .nx-opd-stage .home-compose__slider-frame--opd {
    order: 2;
}

/* invert — banner on top */
body.skin-magz.opd-banner--invert .nx-opd-stage {
    display: flex;
    flex-direction: column;
}
body.skin-magz.opd-banner--invert .nx-opd-stage .home-compose__slider-frame--opd { order: 1; }
body.skin-magz.opd-banner--invert .nx-opd-stage .nx-opd-hero {
    order: 2;
    padding: 1rem 1.15rem 1.1rem !important;
}
body.skin-magz.opd-banner--invert .nx-opd-stage .nx-batik { order: 0; }
body.skin-magz.opd-banner--invert .nx-opd-stage .nx-opd-slider-caption {
    /* caption stays on banner (order 1 frame) */
}

/* split — identity left, banner right */
body.skin-magz.opd-banner--split .nx-opd-stage {
    display: grid;
    grid-template-columns: minmax(280px, .95fr) minmax(0, 1.35fr);
    grid-template-rows: 1fr;
    min-height: clamp(320px, 40vw, 480px);
}
body.skin-magz.opd-banner--split .nx-opd-stage > .nx-batik { grid-column: 1 / -1; grid-row: 1; }
body.skin-magz.opd-banner--split .nx-opd-stage .nx-opd-hero {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.15rem 1.1rem !important;
    min-height: inherit;
}
body.skin-magz.opd-banner--split .nx-opd-stage .nx-opd-hero__pillars {
    margin-top: .85rem;
}
body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd {
    grid-column: 2;
    grid-row: 1;
    position: relative !important;
    min-height: inherit;
    height: 100% !important;
}
body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd .hz-slider,
body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd .hz-slider__frame,
body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel,
body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd #carouselExampleIndicators,
body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd .carousel-inner,
body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd .carousel-item,
body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}
body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
@media (max-width: 991.98px) {
    body.skin-magz.opd-banner--split .nx-opd-stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        min-height: 0;
    }
    body.skin-magz.opd-banner--split .nx-opd-stage .nx-opd-hero,
    body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd {
        grid-column: 1;
        grid-row: auto;
        min-height: 0;
    }
    body.skin-magz.opd-banner--split .nx-opd-stage .home-compose__slider-frame--opd img {
        position: static;
        height: clamp(220px, 48vw, 360px) !important;
    }
}

/* cinema — compact identity strip + tall banner */
body.skin-magz.opd-banner--cinema .nx-opd-stage .nx-opd-hero {
    padding: .7rem 1rem .55rem !important;
    gap: .75rem 1.25rem;
}
body.skin-magz.opd-banner--cinema .nx-opd-stage .nx-opd-hero__lead {
    display: none;
}
body.skin-magz.opd-banner--cinema .nx-opd-stage .nx-opd-hero__icon,
body.skin-magz.opd-banner--cinema .nx-opd-stage .nx-opd-hero__mono {
    width: 64px;
    height: 64px;
}
body.skin-magz.opd-banner--cinema .nx-opd-stage .home-compose__slider-frame--opd img {
    height: clamp(320px, 48vw, 560px) !important;
    min-height: 320px !important;
    transform: scale(1.16) !important;
}

/* rail — identity as left vertical rail */
body.skin-magz.opd-banner--rail .nx-opd-stage {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.5fr);
    min-height: clamp(340px, 44vw, 500px);
}
body.skin-magz.opd-banner--rail .nx-opd-stage > .nx-batik { grid-column: 1 / -1; grid-row: 1; }
body.skin-magz.opd-banner--rail .nx-opd-stage .nx-opd-hero {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem 1rem !important;
    background: color-mix(in srgb, var(--idds-primary, #1e293b) 55%, transparent) !important;
    border-right: 1px solid color-mix(in srgb, var(--idds-accent, #a16207) 35%, transparent);
}
body.skin-magz.opd-banner--rail .nx-opd-stage .nx-opd-hero__brand {
    flex-direction: column;
    align-items: flex-start;
}
body.skin-magz.opd-banner--rail .nx-opd-stage .nx-opd-hero__pillars {
    width: 100%;
}
body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd {
    grid-column: 2;
    grid-row: 1;
    position: relative !important;
    min-height: inherit;
    height: 100% !important;
}
body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd .hz-slider,
body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd .hz-slider__frame,
body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel,
body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd #carouselExampleIndicators,
body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd .carousel-inner,
body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd .carousel-item,
body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}
body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
@media (max-width: 991.98px) {
    body.skin-magz.opd-banner--rail .nx-opd-stage {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    body.skin-magz.opd-banner--rail .nx-opd-stage .nx-opd-hero,
    body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd {
        grid-column: 1;
        border-right: 0;
    }
    body.skin-magz.opd-banner--rail .nx-opd-stage .home-compose__slider-frame--opd img {
        position: static;
        height: clamp(220px, 48vw, 360px) !important;
    }
}

/* deck — identity overlaid on lower third of banner */
body.skin-magz.opd-banner--deck .nx-opd-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(380px, 1fr);
    min-height: clamp(380px, 50vw, 560px);
}
body.skin-magz.opd-banner--deck .nx-opd-stage > .nx-batik { z-index: 2; pointer-events: none; }
body.skin-magz.opd-banner--deck .nx-opd-stage .home-compose__slider-frame--opd {
    grid-area: 1 / 1;
    z-index: 1;
    position: relative !important;
    min-height: clamp(380px, 50vw, 560px) !important;
    height: 100% !important;
}
body.skin-magz.opd-banner--deck .nx-opd-stage .home-compose__slider-frame--opd .hz-slider,
body.skin-magz.opd-banner--deck .nx-opd-stage .home-compose__slider-frame--opd .hz-slider__frame,
body.skin-magz.opd-banner--deck .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel,
body.skin-magz.opd-banner--deck .nx-opd-stage .home-compose__slider-frame--opd #carouselExampleIndicators,
body.skin-magz.opd-banner--deck .nx-opd-stage .home-compose__slider-frame--opd .carousel-inner,
body.skin-magz.opd-banner--deck .nx-opd-stage .home-compose__slider-frame--opd .carousel-item,
body.skin-magz.opd-banner--deck .nx-opd-stage .home-compose__slider-frame--opd .hero-carousel__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}
body.skin-magz.opd-banner--deck .nx-opd-stage .home-compose__slider-frame--opd img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.15) !important;
}
body.skin-magz.opd-banner--deck .nx-opd-stage .nx-opd-hero {
    grid-area: 1 / 1;
    z-index: 4;
    align-self: end;
    margin: 0;
    padding: 1rem 1.15rem 2.6rem !important;
    background: linear-gradient(0deg, color-mix(in srgb, var(--idds-primary, #1e293b) 92%, transparent) 0%, transparent 100%) !important;
}
body.skin-magz.opd-banner--deck .nx-opd-stage .nx-opd-slider-caption {
    z-index: 5;
}

/* flush — maximal bleed, minimal identity chrome */
body.skin-magz.opd-banner--flush .nx-opd-stage {
    border-radius: 14px;
}
body.skin-magz.opd-banner--flush .nx-opd-stage .nx-opd-hero {
    padding: .65rem 1rem .45rem !important;
}
body.skin-magz.opd-banner--flush .nx-opd-stage .nx-opd-hero__pillars {
    display: none;
}
body.skin-magz.opd-banner--flush .nx-opd-stage .home-compose__slider-frame--opd img {
    height: clamp(300px, 46vw, 540px) !important;
    transform: scale(1.18) !important;
}
body.skin-magz.opd-banner--flush .nx-opd-stage .nx-batik__side {
    opacity: .55;
}

/* ========== MENU VARIANTS ========== */
body.skin-magz.opd-menu--solid nav.menu {
    background: var(--idds-primary, #1e293b) !important;
    border-bottom: 3px solid var(--idds-accent, #a16207) !important;
}
body.skin-magz.opd-menu--solid nav.menu .nav-list > li > a {
    color: #fff !important;
}
body.skin-magz.opd-menu--solid nav.menu .nav-list > li > a:hover,
body.skin-magz.opd-menu--solid nav.menu .nav-list > li.active > a {
    background: color-mix(in srgb, var(--idds-accent, #a16207) 28%, transparent) !important;
}

body.skin-magz.opd-menu--underline nav.menu {
    background: color-mix(in srgb, var(--idds-primary, #1e293b) 94%, #000) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--idds-accent, #a16207) 35%, transparent) !important;
}
body.skin-magz.opd-menu--underline nav.menu .nav-list > li > a {
    color: rgba(255,255,255,.92) !important;
    box-shadow: inset 0 -3px 0 transparent;
}
body.skin-magz.opd-menu--underline nav.menu .nav-list > li > a:hover,
body.skin-magz.opd-menu--underline nav.menu .nav-list > li.active > a {
    box-shadow: inset 0 -3px 0 var(--idds-accent, #a16207) !important;
    background: transparent !important;
}

body.skin-magz.opd-menu--pill nav.menu {
    background: color-mix(in srgb, var(--idds-primary, #1e293b) 88%, #0f172a) !important;
}
body.skin-magz.opd-menu--pill nav.menu .nav-list {
    gap: .35rem;
    align-items: center;
}
body.skin-magz.opd-menu--pill nav.menu .nav-list > li > a {
    border-radius: 999px !important;
    padding-inline: .95rem !important;
    color: #fff !important;
}
body.skin-magz.opd-menu--pill nav.menu .nav-list > li > a:hover,
body.skin-magz.opd-menu--pill nav.menu .nav-list > li.active > a {
    background: var(--idds-accent, #a16207) !important;
    color: #fff !important;
}

body.skin-magz.opd-menu--rail nav.menu {
    background: #0b1220 !important;
    border-left: 4px solid var(--idds-accent, #a16207) !important;
}
body.skin-magz.opd-menu--rail nav.menu .nav-list > li > a {
    color: #e2e8f0 !important;
    border-left: 3px solid transparent;
    padding-left: .85rem !important;
}
body.skin-magz.opd-menu--rail nav.menu .nav-list > li > a:hover,
body.skin-magz.opd-menu--rail nav.menu .nav-list > li.active > a {
    border-left-color: var(--idds-accent, #a16207) !important;
    background: color-mix(in srgb, var(--idds-primary, #1e293b) 45%, transparent) !important;
}

body.skin-magz.opd-menu--glass nav.menu {
    background: color-mix(in srgb, var(--idds-primary, #1e293b) 72%, transparent) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
}
body.skin-magz.opd-menu--glass nav.menu .nav-list > li > a {
    color: #fff !important;
}
body.skin-magz.opd-menu--glass nav.menu .nav-list > li > a:hover,
body.skin-magz.opd-menu--glass nav.menu .nav-list > li.active > a {
    background: rgba(255,255,255,.14) !important;
}

/* Ink chrome — only for classic top bars (never paint dock/rail shells) */
body.skin-magz.opd-menu--ink.mp-top nav.menu,
body.skin-magz.opd-menu--ink:not(.mp-bottom):not(.mp-float):not(.mp-left):not(.mp-right) nav.menu {
    background: #111827 !important;
    border-bottom: 2px solid var(--idds-accent, #a16207) !important;
}
body.skin-magz.opd-menu--ink nav.menu .nav-list > li > a {
    color: #f8fafc !important;
    letter-spacing: .02em;
}
body.skin-magz.opd-menu--ink nav.menu .nav-list > li > a .nav-ico {
    color: var(--idds-accent, #a16207) !important;
}
body.skin-magz.opd-menu--ink nav.menu .nav-list > li.active > a,
body.skin-magz.opd-menu--ink nav.menu .nav-list > li > a:hover {
    color: var(--idds-accent, #a16207) !important;
    background: rgba(255,255,255,.04) !important;
}
/* If a dock placement remains, keep shell transparent and constrain height */
body.skin-magz.opd-menu--ink.mp-bottom nav.menu,
body.skin-magz.opd-menu--ink.mp-float nav.menu {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    max-height: none !important;
    top: auto !important;
}

body.skin-magz.opd-menu--stripe nav.menu {
    background: var(--idds-primary, #1e293b) !important;
    box-shadow: inset 0 3px 0 var(--idds-accent, #a16207);
}
body.skin-magz.opd-menu--stripe nav.menu .nav-list > li > a {
    color: #fff !important;
}
body.skin-magz.opd-menu--stripe nav.menu .nav-list > li > a:hover,
body.skin-magz.opd-menu--stripe nav.menu .nav-list > li.active > a {
    background: color-mix(in srgb, #fff 12%, transparent) !important;
}

body.skin-magz.opd-menu--block nav.menu {
    background: color-mix(in srgb, var(--idds-primary, #1e293b) 92%, #000) !important;
}
body.skin-magz.opd-menu--block nav.menu .nav-list {
    gap: .3rem;
}
body.skin-magz.opd-menu--block nav.menu .nav-list > li > a {
    border-radius: 10px !important;
    margin-block: .35rem;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.1);
}
body.skin-magz.opd-menu--block nav.menu .nav-list > li > a:hover,
body.skin-magz.opd-menu--block nav.menu .nav-list > li.active > a {
    background: var(--idds-accent, #a16207) !important;
    border-color: transparent !important;
}

/*
 * Dock/float + menu chrome — one continuous shell.
 * mp-float / mp-bottom paint the capsule on nav.menu > .container.
 * Chrome variants that also paint nav.menu create a darker full-width slab
 * behind the pill (e.g. BKAD rail + float). Keep outer transparent; move fill
 * onto the capsule so colors connect.
 */
@media (min-width: 992px) {
    body.skin-magz.mp-float.opd-menu--rail nav.menu,
    body.skin-magz.mp-bottom.opd-menu--rail nav.menu,
    body.skin-magz.mp-float.opd-menu--solid nav.menu,
    body.skin-magz.mp-bottom.opd-menu--solid nav.menu,
    body.skin-magz.mp-float.opd-menu--pill nav.menu,
    body.skin-magz.mp-bottom.opd-menu--pill nav.menu,
    body.skin-magz.mp-float.opd-menu--underline nav.menu,
    body.skin-magz.mp-bottom.opd-menu--underline nav.menu,
    body.skin-magz.mp-float.opd-menu--glass nav.menu,
    body.skin-magz.mp-bottom.opd-menu--glass nav.menu,
    body.skin-magz.mp-float.opd-menu--stripe nav.menu,
    body.skin-magz.mp-bottom.opd-menu--stripe nav.menu,
    body.skin-magz.mp-float.opd-menu--block nav.menu,
    body.skin-magz.mp-bottom.opd-menu--block nav.menu {
        background: transparent !important;
        border: 0 !important;
        border-left: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    body.skin-magz.mp-float.opd-menu--rail nav.menu > .container,
    body.skin-magz.mp-bottom.opd-menu--rail nav.menu > .container {
        background: #0b1220 !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-left: 4px solid var(--idds-accent, #a16207) !important;
        box-shadow:
            0 18px 40px rgba(15, 23, 42, .28),
            inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    }

    body.skin-magz.mp-float.opd-menu--solid nav.menu > .container,
    body.skin-magz.mp-bottom.opd-menu--solid nav.menu > .container {
        background: var(--idds-primary, #1e293b) !important;
        border: 1px solid color-mix(in srgb, var(--idds-accent, #a16207) 45%, transparent) !important;
        box-shadow: 0 18px 40px color-mix(in srgb, var(--idds-primary, #1e293b) 28%, transparent) !important;
    }

    body.skin-magz.mp-float.opd-menu--pill nav.menu > .container,
    body.skin-magz.mp-bottom.opd-menu--pill nav.menu > .container {
        background: color-mix(in srgb, var(--idds-primary, #1e293b) 88%, #0f172a) !important;
    }

    body.skin-magz.mp-float.opd-menu--underline nav.menu > .container,
    body.skin-magz.mp-bottom.opd-menu--underline nav.menu > .container {
        background: color-mix(in srgb, var(--idds-primary, #1e293b) 94%, #000) !important;
        border-bottom: 2px solid color-mix(in srgb, var(--idds-accent, #a16207) 55%, transparent) !important;
    }

    body.skin-magz.mp-float.opd-menu--glass nav.menu > .container,
    body.skin-magz.mp-bottom.opd-menu--glass nav.menu > .container {
        background: color-mix(in srgb, var(--idds-primary, #1e293b) 72%, transparent) !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    body.skin-magz.mp-float.opd-menu--stripe nav.menu > .container,
    body.skin-magz.mp-bottom.opd-menu--stripe nav.menu > .container {
        background: var(--idds-primary, #1e293b) !important;
        box-shadow:
            inset 0 3px 0 var(--idds-accent, #a16207),
            0 18px 40px rgba(15, 23, 42, .28) !important;
    }

    body.skin-magz.mp-float.opd-menu--block nav.menu > .container,
    body.skin-magz.mp-bottom.opd-menu--block nav.menu > .container {
        background: color-mix(in srgb, var(--idds-primary, #1e293b) 92%, #000) !important;
    }
}