/* ==========================================================================
   ANAZ — Hero Banner widget (Monks Logistics)
   Derived from html/css/hero-banner.css + the inline <style> of
   html/hero-banner.html by renaming the `hero` block to `monks-hero-banner`;
   the rules are otherwise unchanged. WordPress / Elementor additions are in
   the last section of this file. Requires base.css (tokens).

   Layout
     ≥1024px  two columns: text (left) + visual stage bleeding to the right
              viewport edge; capability strip under the text.
     <1024px  single column: text → stage → capability strip.
   ========================================================================== */


.monks-hero-banner {
    --hero-gap: 2.4%;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(180deg, var(--anaz-white) 0%, var(--anaz-cool-white) 62%, var(--anaz-ice) 100%);
    color: var(--anaz-text);
}

/* Navy wedge: continues the header's upper-right block into the hero */
.monks-hero-banner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    width: var(--anaz-shape-w);
    height: clamp(44px, 7vw, 92px);
    background: linear-gradient(160deg, var(--anaz-navy-dark) 0%, var(--anaz-navy) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    pointer-events: none;
}

.monks-hero-banner__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "content"
        "stage"
        "caps";
    max-width: calc(var(--anaz-container) + 2 * var(--anaz-gutter));
    margin: 0 auto;
    padding: 0 var(--anaz-gutter);
}

/* ---- Text column ------------------------------------------------------- */

.monks-hero-banner__content {
    grid-area: content;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: clamp(32px, 6vw, 56px) 0 28px;
}

/* All slide texts share one grid cell → container height = tallest slide,
   so slide changes never shift the layout. */
.monks-hero-banner__texts {
    display: grid;
}

.monks-hero-banner__text {
    grid-area: 1 / 1;
    min-width: 0;
    visibility: hidden;
}

.monks-hero-banner__text.is-active,
.monks-hero-banner__text.is-leaving {
    visibility: visible;
}

.monks-hero-banner__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--anaz-orange);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-transform: uppercase;
}

.monks-hero-banner__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 3px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.monks-hero-banner__title {
    margin: 0 0 22px;
    color: var(--anaz-navy);
    font-size: clamp(2.3rem, 11.2vw, 3.6rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

/* Each line is a mask for the line-by-line reveal */
.monks-hero-banner__title-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

.monks-hero-banner__title-inner {
    display: inline-block;
}

.monks-hero-banner__title-line--accent {
    color: var(--anaz-orange);
}

.monks-hero-banner__desc {
    max-width: 34rem;
    margin: 0 0 30px;
    color: var(--anaz-text);
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.7;
}

/* ---- Buttons ---------------------------------------------------------- */

.monks-hero-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.monks-hero-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 26px;
    border: 1.5px solid transparent;
    border-radius: var(--anaz-radius-button);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.monks-hero-banner__btn-icon {
    flex: 0 0 auto;
    transition: transform 0.35s var(--anaz-ease);
}

.monks-hero-banner__btn:hover .monks-hero-banner__btn-icon {
    transform: translateX(4px);
}

.monks-hero-banner__btn--primary {
    background: var(--anaz-orange);
    color: var(--anaz-white);
    box-shadow: var(--anaz-shadow-orange);
}

.monks-hero-banner__btn--primary:hover {
    background: var(--anaz-orange-dark);
    box-shadow: 0 16px 30px rgba(255, 101, 0, 0.34);
}

.monks-hero-banner__btn--secondary {
    border-color: var(--anaz-navy);
    background: rgba(255, 255, 255, 0.7);
    color: var(--anaz-navy);
}

.monks-hero-banner__btn--secondary:hover {
    background: var(--anaz-navy);
    color: var(--anaz-white);
}

.monks-hero-banner a:focus-visible,
.monks-hero-banner button:focus-visible {
    outline: none;
    box-shadow: var(--anaz-focus);
}

/* ---- Slider controls -------------------------------------------------- */

.monks-hero-banner__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.monks-hero-banner__controls[hidden] {
    display: none;
}

.monks-hero-banner__dots {
    display: flex;
    gap: 6px;
}

.monks-hero-banner__dot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--anaz-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.25s ease;
}

.monks-hero-banner__dot-bar {
    position: relative;
    display: block;
    width: 30px;
    height: 3px;
    overflow: hidden;
    background: var(--anaz-border);
    transition: width 0.4s var(--anaz-ease);
}

.monks-hero-banner__dot-fill {
    position: absolute;
    inset: 0;
    background: var(--anaz-orange);
    transform: scaleX(0);
    transform-origin: left;
}

.monks-hero-banner__dot:hover {
    color: var(--anaz-navy);
}

.monks-hero-banner__dot[aria-current="true"] {
    color: var(--anaz-navy);
}

.monks-hero-banner__dot[aria-current="true"] .monks-hero-banner__dot-bar {
    width: 56px;
}

/* Without a running timer the active bar is shown full */
.monks-hero-banner__dot[aria-current="true"] .monks-hero-banner__dot-fill {
    transform: scaleX(1);
}

.monks-hero-banner[data-autoplay="running"] .monks-hero-banner__dot[aria-current="true"] .monks-hero-banner__dot-fill {
    transform: scaleX(var(--hero-progress, 0));
}

.monks-hero-banner__buttons {
    display: flex;
    gap: 8px;
}

.monks-hero-banner__ctrl {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--anaz-border);
    border-radius: 50%;
    background: var(--anaz-white);
    color: var(--anaz-navy);
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.monks-hero-banner__ctrl:hover {
    border-color: var(--anaz-navy);
    background: var(--anaz-navy);
    color: var(--anaz-white);
}

.monks-hero-banner__icon-play,
.monks-hero-banner__ctrl--toggle[aria-pressed="true"] .monks-hero-banner__icon-pause {
    display: none;
}

.monks-hero-banner__ctrl--toggle[aria-pressed="true"] .monks-hero-banner__icon-play {
    display: block;
}

/* ---- Visual stage ----------------------------------------------------- */

.monks-hero-banner__stage {
    grid-area: stage;
    position: relative;
    z-index: 1;
    aspect-ratio: 1 / 0.86;
    margin: 8px calc(-1 * var(--anaz-gutter)) 0;
    touch-action: pan-y;
}

.monks-hero-banner__glow {
    position: absolute;
    inset: -10% -10% 0 0;
    z-index: 0;
    background:
        radial-gradient(60% 55% at 60% 45%, rgba(190, 214, 236, 0.55) 0%, rgba(190, 214, 236, 0) 70%);
    pointer-events: none;
}

.monks-hero-banner__map {
    position: absolute;
    right: 0;
    bottom: 1%;
    z-index: 1;
    width: 54%;
    height: auto;
    pointer-events: none;
}

.monks-hero-banner__visuals {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.monks-hero-banner__visual {
    position: absolute;
    inset: 0;
    visibility: hidden;
}

.monks-hero-banner__visual.is-leaving {
    visibility: visible;
    z-index: 1;
}

.monks-hero-banner__visual.is-active {
    visibility: visible;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   Angular photo panels
   Every panel covers the whole stage and is cut to a parallelogram with
   clip-path. All diagonal edges share one slope (dx = 0.34 × dy in stage
   percentages), and neighbouring edges are offset by --hero-gap, which
   leaves the white diagonal separators. Because every polygon lives in the
   same coordinate space, edges stay parallel at any stage aspect ratio.
   The <img> is sized to the panel's bounding box so cropping stays sensible.
     --t/--b  top/bottom (y)      --tl/--tr  top-left/right (x)
     --bl/--br bottom-left/right (x)
   -------------------------------------------------------------------------- */
.monks-hero-banner__panel {
    position: absolute;
    inset: 0;
    margin: 0;
    clip-path: polygon(var(--tl) var(--t), var(--tr) var(--t), var(--br) var(--b), var(--bl) var(--b));
}

.monks-hero-banner__panel img,
.monks-hero-banner__panel-veil {
    position: absolute;
    top: var(--t);
    left: var(--img-x);
    width: var(--img-w);
    height: calc(var(--b) - var(--t));
}

.monks-hero-banner__panel img {
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
    /* Fallback tint if the photo fails to load */
    background: linear-gradient(135deg, #C9D8E6 0%, #E7EEF6 100%);
    filter: saturate(0.92) contrast(1.03);
}

.monks-hero-banner__panel.is-fallback img {
    color: transparent;
}

.monks-hero-banner__panel-veil {
    background: var(--anaz-white);
    transform: scaleX(0);
    transform-origin: right;
    pointer-events: none;
}

/* Panel 1 — sourcing & freight */
.monks-hero-banner__panel--1 {
    --t: 16%;
    --b: 80%;
    --tl: 21.8%;
    --tr: 40%;
    --br: 18.2%;
    --bl: 0%;
    --img-x: 0%;
    --img-w: 40%;
}

/* Panel 2 — warehouse infrastructure (largest) */
.monks-hero-banner__panel--2 {
    --t: 0%;
    --b: 92%;
    --tl: 47.84%;
    --tr: 84%;
    --br: 52.72%;
    --bl: 16.56%;
    --img-x: 16.56%;
    --img-w: 67.44%;
}

/* Panel 3 — product handling (bleeds off the right edge) */
.monks-hero-banner__panel--3 {
    --t: 18%;
    --b: 72%;
    --tl: 80.28%;
    --tr: 100%;
    --br: 100%;
    --bl: 61.92%;
    --img-x: 61.92%;
    --img-w: 38.08%;
}

/* ---- Orange accents (same slope as the panels) ------------------------ */

.monks-hero-banner__band {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.monks-hero-banner__band--1 {
    background: var(--anaz-orange);
    clip-path: polygon(74.5% 77%, 81% 77%, 73.18% 100%, 66.68% 100%);
}

.monks-hero-banner__band--2 {
    background: var(--anaz-orange-light);
    opacity: 0.55;
    clip-path: polygon(83.5% 77%, 86% 77%, 78.18% 100%, 75.68% 100%);
}

.monks-hero-banner__band--3 {
    background: linear-gradient(135deg, var(--anaz-orange) 0%, var(--anaz-orange-light) 100%);
    clip-path: polygon(94% 82%, 100% 82%, 100% 100%, 87.88% 100%);
}

.monks-hero-banner__arrow {
    position: absolute;
    top: 4%;
    left: 23%;
    z-index: 3;
    width: 12%;
    height: auto;
    pointer-events: none;
}

/* ---- Capability strip ------------------------------------------------- */

.monks-hero-banner__capabilities {
    grid-area: caps;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 20px 0 32px;
    list-style: none;
}

.monks-hero-banner__capability {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 8px;
    color: var(--anaz-navy);
    text-align: center;
}

/* Mobile: 3 + 2 arrangement, the last two share the second row */
.monks-hero-banner__capability:nth-child(n + 4) {
    grid-column: span 3;
}

.monks-hero-banner__capability:nth-child(-n + 3) {
    border-bottom: 1px solid var(--anaz-border);
}

.monks-hero-banner__capability:nth-child(2),
.monks-hero-banner__capability:nth-child(3),
.monks-hero-banner__capability:nth-child(5) {
    border-left: 1px solid var(--anaz-border);
}

.monks-hero-banner__capability-icon {
    width: 28px;
    height: 28px;
    color: var(--anaz-navy);
}

.monks-hero-banner__capability-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 559px) {
    .monks-hero-banner__eyebrow {
        font-size: 11px;
        letter-spacing: 0.14em;
    }

    .monks-hero-banner__eyebrow::before {
        width: 18px;
    }

    .monks-hero-banner__controls {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .monks-hero-banner__dots {
        gap: 0;
    }

    .monks-hero-banner__dot-num {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .monks-hero-banner__dot-bar {
        width: 22px;
    }

    .monks-hero-banner__dot[aria-current="true"] .monks-hero-banner__dot-bar {
        width: 40px;
    }

    .monks-hero-banner__ctrl {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 379px) {
    .monks-hero-banner__btn {
        width: 100%;
    }

    .monks-hero-banner__capability-label {
        font-size: 12px;
    }
}

/* Small tablets / large phones */
@media (min-width: 560px) {
    .monks-hero-banner__stage {
        aspect-ratio: 1 / 0.72;
    }

    .monks-hero-banner__capabilities {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .monks-hero-banner__capability,
    .monks-hero-banner__capability:nth-child(n + 4) {
        grid-column: auto;
    }

    .monks-hero-banner__capability:nth-child(-n + 3) {
        border-bottom: 0;
    }

    .monks-hero-banner__capability + .monks-hero-banner__capability {
        border-left: 1px solid var(--anaz-border);
    }
}

/* iPad portrait */
@media (min-width: 768px) {
    .monks-hero-banner__title {
        font-size: clamp(3.6rem, 8vw, 4.75rem);
    }

    .monks-hero-banner__stage {
        aspect-ratio: 1 / 0.62;
        margin-top: 16px;
    }

    .monks-hero-banner__capability {
        padding: 10px 12px;
    }

    .monks-hero-banner__capability-label {
        white-space: nowrap;
    }
}

/* Desktop / iPad landscape: two-column composition */
@media (min-width: 1024px) {
    .monks-hero-banner {
        --hero-edge: max(var(--anaz-gutter), (100vw - var(--anaz-container)) / 2);
    }

    .monks-hero-banner__inner {
        grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "content stage"
            "caps    stage";
        min-height: clamp(620px, calc(100vh - var(--anaz-header-h)), 900px);
        min-height: clamp(620px, calc(100svh - var(--anaz-header-h)), 900px);
    }

    .monks-hero-banner__content {
        padding: clamp(36px, 6vh, 72px) 0 24px;
    }

    .monks-hero-banner__title {
        font-size: calc(0.4rem + 4.5vw);
    }

    /* Stage bleeds to the right viewport edge */
    .monks-hero-banner__stage {
        aspect-ratio: auto;
        margin: 0 calc(-1 * var(--hero-edge)) 0 0;
    }

    .monks-hero-banner__map {
        right: 10%;
        width: 56%;
    }

    .monks-hero-banner__capabilities {
        align-self: end;
        grid-template-columns: repeat(5, auto);
        justify-content: start;
        padding: 0 0 clamp(28px, 5vh, 48px);
    }

    .monks-hero-banner__capability {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 4px clamp(12px, 1.4vw, 22px);
        text-align: left;
    }

    .monks-hero-banner__capability:first-child {
        padding-left: 0;
    }

    .monks-hero-banner__capability-label {
        font-size: 13.5px;
        white-space: nowrap;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .monks-hero-banner__inner {
        grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
        grid-template-areas:
            "content stage"
            "caps    caps";
    }

    .monks-hero-banner__btn {
        padding: 0 22px;
        font-size: 15px;
    }

    .monks-hero-banner__capabilities {
        padding-top: 8px;
    }
}

@media (min-width: 1280px) {
    .monks-hero-banner__inner {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    }

    .monks-hero-banner__title {
        font-size: clamp(4rem, 0.6rem + 4.3vw, 5.5rem);
    }
}

@media (min-width: 1600px) {
    .monks-hero-banner__inner {
        grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    }

    .monks-hero-banner__capability-label {
        font-size: 14.5px;
    }

    .monks-hero-banner__capability-icon {
        width: 32px;
        height: 32px;
    }
}


/* ==========================================================================
   From the inline <style> in html/hero-banner.html
   (slider-control placement, mobile layout, mobile capability carousel)
   ========================================================================== */

@media (max-width: 1023px) {
        .monks-hero-banner__inner {
            grid-template-areas:
                "content"
                "stage"
                "controls"
                "caps";
        }

        .monks-hero-banner__controls {
            grid-area: controls;
            position: relative;
            z-index: 3;
            padding-top: 16px;
        }
    }

    /* Mobile: photo composition first, text below */
    @media (max-width: 767px) {
        .monks-hero-banner__inner {
            grid-template-areas:
                "stage"
                "content"
                "controls"
                "caps";
        }

        .monks-hero-banner__stage {
            margin-top: 0;
        }

        /* Capability carousel: 3 visible, advances one item at a time.
           The <ul> is the viewport; every <li> shifts by --cap-index item widths. */
        .monks-hero-banner__capabilities {
            display: flex;
            overflow: hidden;
            clip-path: inset(0 0 0 1px); /* hide the leading divider */
            touch-action: pan-y;
        }

        .monks-hero-banner__capabilities .monks-hero-banner__capability {
            flex: 0 0 33.3333%;
            border-bottom: 0;
            border-left: 1px solid var(--anaz-border);
            transform: translateX(calc(var(--cap-index, 0) * -100%));
        }

        .monks-hero-banner__capabilities.is-animating .monks-hero-banner__capability {
            transition: transform 0.6s var(--anaz-ease);
        }
    }

    /* Loop clones exist only for the mobile carousel */
    @media (min-width: 768px) {
        .monks-hero-banner__capability--clone {
            display: none;
        }
    }

    @media (min-width: 1024px) {
        .monks-hero-banner__controls:not([hidden]) {
            position: absolute;
            right: var(--anaz-gutter);
            bottom: clamp(20px, 3.5vh, 36px);
            z-index: 5;
            flex-wrap: nowrap;
            gap: 18px;
            padding: 6px 6px 6px 14px;
            border: 1px solid var(--anaz-border);
            border-radius: var(--anaz-radius-button);
            background: rgba(255, 255, 255, 0.9);
            box-shadow: var(--anaz-shadow-soft);
        }

        .monks-hero-banner__controls .monks-hero-banner__dot-bar {
            width: 22px;
        }

        .monks-hero-banner__controls .monks-hero-banner__dot[aria-current="true"] .monks-hero-banner__dot-bar {
            width: 40px;
        }
    }

/* ==========================================================================
   WordPress / Elementor additions
   ========================================================================== */

/* Elementor resets `.elementor a { box-shadow: none }` and
   `.elementor img { height: auto; max-width: 100% }`; restore the design. */
.elementor .monks-hero-banner__btn--primary {
    box-shadow: var(--anaz-shadow-orange);
}

.elementor .monks-hero-banner__btn--primary:hover {
    box-shadow: 0 16px 30px rgba(255, 101, 0, 0.34);
}

.elementor .monks-hero-banner a:focus-visible {
    box-shadow: var(--anaz-focus);
}

.elementor .monks-hero-banner__panel img {
    height: calc(var(--b) - var(--t));
    max-width: none;
}

/* Panel with no image selected: the same tint the original shows when a photo fails */
.monks-hero-banner__panel.is-empty::before {
    content: "";
    position: absolute;
    top: var(--t);
    left: var(--img-x);
    width: var(--img-w);
    height: calc(var(--b) - var(--t));
    background: linear-gradient(135deg, #C9D8E6 0%, #E7EEF6 100%);
}

/* Button icon before the label */
.monks-hero-banner__btn--icon-before {
    flex-direction: row-reverse;
}

.monks-hero-banner__btn--icon-before:hover .monks-hero-banner__btn-icon {
    transform: translateX(-4px);
}

/* Icons chosen from Elementor's icon library */
.monks-hero-banner__btn-icon i,
.monks-hero-banner__capability-icon i {
    display: block;
    font-size: 18px;
    line-height: 1;
}

.monks-hero-banner__capability-icon i {
    font-size: 26px;
}

.monks-hero-banner__btn-icon svg:not([width]) {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

span.monks-hero-banner__btn-icon,
span.monks-hero-banner__capability-icon {
    display: grid;
    place-items: center;
}

span.monks-hero-banner__capability-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ---- Slider setting states ------------------------------------------- */

/* Pagination shown as indicators only ("Clickable Pagination" off) */
span.monks-hero-banner__dot {
    cursor: default;
}

/* Loop off: the arrow at either end is disabled */
.monks-hero-banner__ctrl:disabled {
    opacity: 0.4;
    cursor: default;
}

.monks-hero-banner__ctrl:disabled:hover {
    border-color: var(--anaz-border);
    background: var(--anaz-white);
    color: var(--anaz-navy);
}

/* ---- Decoration toggles ---------------------------------------------- */

.monks-hero-banner--no-wedge::before,
.monks-hero-banner--no-map .monks-hero-banner__map,
.monks-hero-banner--no-accents .monks-hero-banner__band,
.monks-hero-banner--no-accents .monks-hero-banner__arrow {
    display: none;
}

/* ---- Editor ----------------------------------------------------------- */

.monks-hero-banner-notice {
    margin: 0;
    padding: 24px;
    border: 1px dashed var(--anaz-border);
    border-radius: 12px;
    color: var(--anaz-muted);
    font-size: 14px;
    text-align: center;
}

/* ---- Style-control hooks (defaults reproduce the original) ----------- */

/* "Text Alignment" (Elementor) sets these variables */
.monks-hero-banner__text {
    text-align: var(--mhb-text-align, inherit);
}

.monks-hero-banner__eyebrow,
.monks-hero-banner__actions {
    justify-content: var(--mhb-justify, normal);
}

.monks-hero-banner__desc {
    margin-left: var(--mhb-desc-ml, 0);
    margin-right: var(--mhb-desc-mr, 0);
}

/* "Controls Panel Background (desktop)" */
@media (min-width: 1024px) {
    .monks-hero-banner__controls:not([hidden]) {
        background: var(--mhb-controls-bg, rgba(255, 255, 255, 0.9));
    }
}