.srb-banner[hidden] {
    display: none !important;
}

/*
 * Page-builder shortcode widgets can remain as flex/grid items even when the
 * banner itself is hidden. That can leave a small gap where the banner would
 * have appeared. The JS applies this class to the complete shortcode widget
 * until a live banner has actually been rendered.
 */
.srb-banner-host--collapsed {
    display: none !important;
}

/*
 * Hide common shortcode wrappers immediately, before JavaScript completes its
 * availability request. :has() is supported by current major browsers; the JS
 * class above provides the behavioural fallback and keeps the state correct.
 */
/* Dedicated Elementor containers should disappear as well, otherwise the
 * container's own padding/min-height can remain visible even with the widget
 * hidden. These selectors cover current flexbox-container markup. */
.e-con:has(> .elementor-widget-shortcode:only-child .srb-banner[hidden]),
.e-con:has(> .e-con-inner > .elementor-widget-shortcode:only-child .srb-banner[hidden]),
.elementor-widget-shortcode:has(.srb-banner[hidden]),
.wp-block-shortcode:has(.srb-banner[hidden]),
.brxe-shortcode:has(.srb-banner[hidden]),
.et_pb_code:has(.srb-banner[hidden]),
.fl-module-html:has(.srb-banner[hidden]) {
    display: none !important;
}

.srb-banner {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0;
    line-height: 0;
}

.srb-banner__link,
.srb-banner__picture {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.srb-banner__picture {
    box-sizing: border-box;
    overflow: hidden;
}

.srb-banner__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-width: 767px) {
    .srb-banner {
        max-width: 400px;
    }
}