.shh-settings-wrap .shh-select-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 12px;
    background: #fff;
}

.shh-copy-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.shh-copy-button {
    min-width: 180px;
}

.shh-hero-transition-duration {
    margin-top: 0.75rem;
}

.shh-version {
    color: #000 !important;
}

.sticky-header,
.peek-a-boo-header,
.hero-header {
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: transform 0.28s ease, background-color 0.28s ease, opacity 0.28s ease, color 0.28s ease;
}

.sticky-header {
    position: sticky;
    top: env(safe-area-inset-top, 0);
}

.peek-a-boo-header {
    position: sticky;
    top: env(safe-area-inset-top, 0);
}

.peek-a-boo-header.peek-a-boo-header--hidden {
    transform: translateY(-110%);
}

.hero-header {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    width: 100%;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-color: transparent !important;
    z-index: 1000;
    transition: transform var(--shh-hero-transition-duration, 300ms) ease, background-color var(--shh-hero-transition-duration, 300ms) ease, opacity var(--shh-hero-transition-duration, 300ms) ease, color var(--shh-hero-transition-duration, 300ms) ease;
}

.hero-header.hero-header--activated {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: none !important;
    border: none !important;
    border-color: transparent !important;
}

.hero-header,
.hero-header * {
    transition: background-color var(--shh-hero-transition-duration, 300ms) ease, border-color var(--shh-hero-transition-duration, 300ms) ease, box-shadow var(--shh-hero-transition-duration, 300ms) ease, opacity var(--shh-hero-transition-duration, 300ms) ease, color var(--shh-hero-transition-duration, 300ms) ease;
}

.hero-header.hero-header--transparent:not(.hero-header--activated),
.hero-header.hero-header--content-visible:not(.hero-header--activated) {
    background: transparent !important;
    background-color: transparent !important;
}

.hero-header.hero-header--transparent:not(.hero-header--activated) {
    box-shadow: none !important;
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: none !important;
}

.hero-header.hero-header--transparent:not(.hero-header--activated) .wp-block-group,
.hero-header.hero-header--transparent:not(.hero-header--activated) .wp-block-group__inner-container,
.hero-header.hero-header--transparent:not(.hero-header--activated) .wp-block-navigation,
.hero-header.hero-header--transparent:not(.hero-header--activated) .wp-block-navigation__responsive-container,
.hero-header.hero-header--transparent:not(.hero-header--activated) .wp-block-site-logo,
.hero-header.hero-header--transparent:not(.hero-header--activated) .wp-block-site-title,
.hero-header.hero-header--content-visible:not(.hero-header--activated) .wp-block-group,
.hero-header.hero-header--content-visible:not(.hero-header--activated) .wp-block-group__inner-container {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.hero-header.hero-header--transparent:not(.hero-header--activated) * {
    opacity: 0;
    visibility: hidden;
}

.hero-header.hero-header--content-visible:not(.hero-header--activated) * {
    opacity: 1;
    visibility: visible;
}

body.shh-hero-header-active,
body.shh-hero-header-active main,
body.shh-hero-header-active .site-content,
body.shh-hero-header-active .content-area,
body.shh-hero-header-active .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.shh-hero-header-active .wp-block-template-part,
body.shh-hero-header-active .site-header,
body.shh-hero-header-active header {
    margin-top: 0 !important;
}

body.shh-hero-header-active,
body.shh-hero-header-active main,
body.shh-hero-header-active .site-content,
body.shh-hero-header-active .content-area,
body.shh-hero-header-active .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.shh-hero-header-active .wp-block-template-part,
body.shh-hero-header-active .site-header,
body.shh-hero-header-active header {
    margin-top: 0 !important;
}

@media screen and (max-width: 980px) {
    .peek-a-boo-header.peek-a-boo-header--hidden {
        transform: translateY(-110%);
    }
}