/*
 * Cookiebot banner for BeautyFokus: bottom bar, same layout as the other shops, in this shop's palette and fonts.
 * Cookiebot ships its own high-specificity styles, hence the #CybotCookiebotDialog prefix and !important.
 * Every selector is scoped to #CybotCookiebotDialog, so nothing else on the page is affected.
 *
 * Tokens
 *   paper #f3f3f3   ink #1d334e   primary #1d334e   hover #2e4d73   accent #dac06c
 */

/* ---------- Bar ---------- */
#CybotCookiebotDialog {
    background: #f3f3f3 !important;
    color: #1d334e !important;
    font-family: opensans-regular, helvetica, sans-serif !important;
    border: 0 !important;
    border-top: 2px solid #1d334e !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#CybotCookiebotDialog *,
#CybotCookiebotDialog *::before,
#CybotCookiebotDialog *::after {
    font-family: inherit !important;
    box-shadow: none !important;
}

/* ---------- Typography ---------- */
/* The "This website uses cookies" heading is not wanted */
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
    display: none !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
    color: #1d334e !important;
    font-family: opensans-semibold, helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText * {
    color: #1d334e !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1.55 !important;
}

#CybotCookiebotDialog a,
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a {
    color: #1d334e !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

#CybotCookiebotDialog a:hover {
    color: #2e4d73 !important;
}

/* ---------- Tabs (Details view) ---------- */
#CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink {
    color: #1d334e !important;
    font-family: opensans-semibold, helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    text-transform: none !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    border-bottom: 2px solid #1d334e !important;
}

/* ---------- Buttons: same style as the shop's buttons (semibold, uppercase, 5px radius, solid), in green ---------- */
#CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
    background: #e1e7ee !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #1d334e !important;
    font-family: opensans-semibold, helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    transition: background-color 0.15s !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyButton:hover {
    background: #d3dae4 !important;
    color: #1d334e !important;
}

/* Primary action: dark green */
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonAccept {
    background: #1d334e !important;
    color: #ffffff !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover,
#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonAccept:hover {
    background: #2e4d73 !important;
    color: #ffffff !important;
}

/* ---------- Category switches: same vibe as the buttons (solid green, 5px radius, no outlines), compact ---------- */
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #e1e7ee !important;
    border: 0 !important;
    border-radius: 4px !important;
    height: 20px !important;
    width: 34px !important;
    min-width: 34px !important;
    transition: background-color 0.15s !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider::before {
    background-color: #1d334e !important;
    border: 0 !important;
    border-radius: 3px !important;
    bottom: auto !important;
    height: 14px !important;
    left: 3px !important;
    top: 3px !important;
    width: 14px !important;
    transform: none !important;
}

#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #1d334e !important;
}

#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider::before {
    background-color: #ffffff !important;
    transform: translateX(14px) !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonLabel,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonDescription,
#CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetails,
#CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetails a {
    color: #1d334e !important;
    font-family: opensans-regular, helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

#CybotCookiebotDialog input:focus-visible + .CybotCookiebotDialogBodyLevelButtonSlider,
#CybotCookiebotDialog button:focus-visible,
#CybotCookiebotDialog a:focus-visible {
    outline: 2px solid #dac06c !important;
    outline-offset: 2px !important;
}

/* Elements Cookiebot hides (e.g. the US "Do not sell" switch) stay hidden */
#CybotCookiebotDialog .CybotCookiebotDialogHide {
    display: none !important;
}

#CybotCookiebotDialog .CybotCookiebotScrollbarContainer {
    display: none !important;
}

/* ---------- Desktop bottom bar: strict grid (scoped to the bar, the details panel keeps Cookiebot's own layout) ---------- */
@media (min-width: 768px) {
    #CybotCookiebotDialog.CybotEdge {
        padding: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
        align-items: center !important;
        padding: 14px 0 !important;
    }

    /* Logo: small, left margin of the grid */
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
        padding: 0 24px !important;
        align-self: center !important;
        height: auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Body: label column | copy column (grid on the content block), switches aligned under the copy */
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody {
        padding: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContent {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        padding: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentTitle {
        display: none !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentText {
        grid-column: 1 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelWrapper,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelButtonsRow {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 28px !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important; /* switches start at the left edge of the content column */
        padding: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelWrapper > *,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelWrapper .CybotCookiebotDialogBodyLevelButtonWrapper {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 22px 0 0 !important;
        padding: 0 !important;
    }

    /* "Show details" sits on the same line as the switches, right-aligned in the copy column */
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody {
        position: relative !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }

    /* Actions: one row, right column */
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollContainer,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 32px 0 0 !important;
        flex: 0 0 auto !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div > div:not(.CybotCookiebotDialogHide) {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
        margin: 0 !important;
        padding: 10px 18px !important;
        height: auto !important;
        width: auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyButtonDecline { order: 1 !important; }
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { order: 2 !important; }
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { order: 3 !important; }
}

/* ---------- "Show details" panel (Consent / Details / About) ---------- */
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton * {
    color: #1d334e !important;
    font-family: opensans-semibold, helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover * {
    color: #1d334e !important;
    text-decoration: underline !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogDetailBulkConsentCount {
    background: #e1e7ee !important;
    border-radius: 4px !important;
    color: #1d334e !important;
    font-family: opensans-semibold, helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeIntro,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeIntro * {
    color: #1d334e !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1.55 !important;
}

#CybotCookiebotDialog .CookieCard {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #d3dae4 !important;
    border-radius: 0 !important;
}

/* Cookiebot's white scroll-fade overlays read as a shadow on the cream background */
#CybotCookiebotDialog .CybotCookiebotFader {
    background-image: linear-gradient(to top, #f3f3f3, rgba(243, 243, 243, 0.8), rgba(243, 243, 243, 0)) !important;
}

#CybotCookiebotDialog .CybotCookiebotFaderLeft,
#CybotCookiebotDialog .CybotCookiebotFaderRight {
    display: none !important;
}

/* Details panel (not the bottom bar): one consistent rhythm, buttons aligned like the bar */
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter {
    border-top: 1px solid #d3dae4 !important;
    padding: 16px 24px !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div,
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div > div:not(.CybotCookiebotDialogHide) {
    justify-content: flex-end !important;
}

/* Bar: label and switch share one centre line */
#CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogBodyLevelButtonWrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogBodyLevelButtonWrapper > *,
#CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogBodyLevelButtonWrapper label {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hidden stays hidden (beats the flex rule above) */
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonWrapper.CybotCookiebotDialogHide,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonWrapper .CybotCookiebotDialogHide {
    display: none !important;
}

/* The switch holder is as tall as the switch, so label and switch centre on one line */
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSliderWrapper {
    height: 20px !important;
    min-height: 0 !important;
    width: 34px !important;
    min-width: 34px !important;
    position: relative !important;
}

/* Details panel: no stray lines under the buttons, short fade, buttons right-aligned like the bar */
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter,
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollContainer,
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollContainer,
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    padding: 0 !important;
    border-top: 0 !important;
}

#CybotCookiebotDialog .CybotCookiebotFader {
    height: 24px !important;
}

/* Details panel: children stretch full width (the centring above is for the bottom bar only) */
#CybotCookiebotDialog:not(.CybotEdge) .CybotCookiebotDialogContentWrapper {
    align-items: stretch !important;
    padding: 0 !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollContainer {
    padding: 16px 24px !important;
    border-top: 1px solid #d3dae4 !important;
}

/* Details panel: breathing room around the logo */
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogHeader {
    padding: 16px 24px 8px !important;
}

/* Bar: close the gap between the paragraph and the switch row */
@media (min-width: 768px) {
    #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogBodyBottomWrapper {
        margin-top: 6px !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody > .CybotCookiebotScrollContainer {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelWrapper {
        height: 24px !important;
    }
}

/* Details panel: logo centred over the tabs, buttons on one line */
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogHeader > * {
    margin-left: auto !important;
    margin-right: auto !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div,
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div > div:not(.CybotCookiebotDialogHide) {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
    margin: 0 !important;
    padding: 10px 24px !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogBodyButtonDecline { order: 1 !important; }
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { order: 2 !important; }
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { order: 3 !important; }

/* Every tab's text (Consent, Details, About) uses the same size as the rest */
#CybotCookiebotDialog [role="tabpanel"] p,
#CybotCookiebotDialog [role="tabpanel"] li,
#CybotCookiebotDialog [role="tabpanel"] [class*="TextAbout"],
#CybotCookiebotDialog [role="tabpanel"] [class*="TextAbout"] * {
    color: #1d334e !important;
    font-family: opensans-regular, helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1.55 !important;
}

#CybotCookiebotDialog [role="tabpanel"] p {
    margin: 0 0 12px !important;
}

/* Details panel: the logo wrapper spreads its content apart, so centre it */
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogHeaderLogosWrap,
#CybotCookiebotDialog:not(.CybotEdge) [id^="CybotCookiebotDialogPoweredby"] {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Bar: the button area sizes to its buttons (German labels are longer), the copy takes the rest */
@media (min-width: 768px) {
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollContainer,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
        max-width: none !important;
        width: max-content !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
        flex: 0 0 auto !important;
    }
}

@media (min-width: 768px) {
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
        padding: 0 !important; /* the 32px right padding lives on the footer only */
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div > div:not(.CybotCookiebotDialogHide) {
        max-width: none !important;
        width: max-content !important;
        flex-wrap: nowrap !important;
    }
}

/* Details panel: centre the logo (ids matched by prefix) */
#CybotCookiebotDialog:not(.CybotEdge) [id^="CybotCookiebotDialogHeaderLogos"] {
    justify-content: center !important;
    width: 100% !important;
}

#CybotCookiebotDialog:not(.CybotEdge) [id^="CybotCookiebotDialogHeaderLogos"] > * {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

/* Same rule with more specificity: Cookiebot styles these wrappers by id */
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogHeader [id^="CybotCookiebotDialogHeaderLogos"] {
    justify-content: center !important;
    width: 100% !important;
}

#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogHeader [id^="CybotCookiebotDialogHeaderLogos"] > *,
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogHeader [id^="CybotCookiebotDialogPoweredby"] {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

/* Details panel: the empty placeholder next to the logo pushed it off-centre */
#CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogHeader [id^="CybotCookiebotDialogHeaderLogos"] > div {
    display: none !important;
}

/* One text size throughout the banner and the panel (13px); only the logo image keeps its own size */
#CybotCookiebotDialog,
#CybotCookiebotDialog * {
    font-size: 13px !important;
}

/* ---------- Bar, medium widths: buttons get their own row so nothing overlaps ---------- */
@media (min-width: 768px) {
    /* The copy column may always shrink, and its switch row may wrap */
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogTabContent {
        min-width: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelWrapper > * {
        flex-wrap: wrap !important;
    }
}

@media (min-width: 768px) and (max-width: 1399px) {
    #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 12px 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
        align-self: center !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollContainer,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter {
        padding: 10px 24px 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollContainer,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
        padding: 0 !important;
    }
}

/* Cookiebot pins the footer absolutely at medium widths; keep it in the flow of the bar */
@media (min-width: 768px) {
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }
}

/* The copy uses the full width of its column at every desktop width */
@media (min-width: 768px) {
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody > .CybotCookiebotScrollContainer {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }
}

/* Logo sits on the vertical centre line of the bar (Cookiebot adds a 26px top margin) */
#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader [id^="CybotCookiebotDialogPoweredby"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------- Phone: a subtle bar at the bottom, not a full-screen sheet ---------- */
@media (max-width: 767px) {
    #CybotCookiebotDialog.CybotEdge {
        top: auto !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: 60vh !important;
        padding: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        position: relative !important;
        padding: 12px 14px 40px !important;
    }

    /* Short, scrollable copy */
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogTabContent {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody > .CybotCookiebotScrollContainer,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody .CybotCookiebotScrollArea {
        max-height: 80px !important;
        padding: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentText {
        margin: 0 !important;
        line-height: 1.5 !important;
    }

    /* The category switches live behind "Details zeigen" */
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelWrapper {
        display: none !important;
    }

    /* the container also holds "Details zeigen" (positioned below), so it stays but takes no space */
    #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogBodyBottomWrapper {
        display: block !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Buttons: one row, equal width */
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollContainer,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: visible !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div > div:not(.CybotCookiebotDialogHide) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px 6px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyButtonDecline { order: 1 !important; }
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { order: 2 !important; }
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { order: 3 !important; }

    /* Bottom row: "Details zeigen" left, logo right */
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails {
        position: absolute !important;
        left: 14px !important;
        bottom: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
        position: absolute !important;
        right: 14px !important;
        bottom: 10px !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader [id^="CybotCookiebotDialogHeaderLogos"] {
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader [id^="CybotCookiebotDialogHeaderLogos"] > div {
        display: none !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader [id^="CybotCookiebotDialogPoweredby"] {
        margin: 0 !important;
        height: 20px !important;
    }

    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader img,
    #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader svg {
        height: 20px !important;
        width: auto !important;
    }
}

/* Phone: Cookiebot centres the popup with top:50% + translate(-50%,-50%); pin it flush to the bottom edge instead */
@media (max-width: 767px) {
    html body #CybotCookiebotDialog.CybotEdge {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
    }
}

/* ---------- Phone: the "Show details" panel is 75% wide, centred, with all three buttons in view ---------- */
@media (max-width: 767px) {
    html body #CybotCookiebotDialog:not(.CybotEdge) {
        width: 75vw !important;
        max-width: 340px !important;
        min-width: 0 !important;
        max-height: 80vh !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
    }

    #CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter {
        padding: 12px 12px !important;
    }

    #CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollContainer,
    #CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div,
    #CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotScrollArea > div > div:not(.CybotCookiebotDialogHide) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: none !important;
        justify-content: stretch !important;
    }

    #CybotCookiebotDialog:not(.CybotEdge) #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px 4px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
}

/* Tablet / small desktop: Cookiebot centres the bar like a popup (top:50% + translate) between ~768 and ~1300px; pin it to the bottom edge */
@media (min-width: 768px) {
    html body #CybotCookiebotDialog.CybotEdge {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
    }
}

/* Tablet / small desktop: Cookiebot stacks the bar wrapper as a column here, which wraps the footer (buttons) off-screen; keep header + text on one row with the footer below */
@media (min-width: 768px) and (max-width: 1399px) {
    html body #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
}

/* Cookiebot prints a "TEST" label on test aliases (staging); never show it */
#CybotCookiebotDialog .CybotCookiebotDialogBodyInternalAlias {
    display: none !important;
}

/* ---------- Tablet / small desktop (768-1399px): two-row grid ----------
   row 1: logo; row 2: copy + switches (left) | buttons (right). Same look as the wide bar, just wrapped. */
@media (min-width: 768px) and (max-width: 1399px) {
    html body #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "header header" "body footer" !important;
        column-gap: 24px !important;
        row-gap: 8px !important;
        align-items: center !important;
        padding: 14px 0 16px !important;
    }

    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
        grid-area: header !important;
        justify-self: start !important;
    }

    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogTabContent {
        grid-area: body !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 0 0 24px !important;
    }

    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody > .CybotCookiebotScrollContainer {
        display: block !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContent {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter {
        grid-area: footer !important;
        width: auto !important;
        flex: none !important;
        padding: 0 24px 0 0 !important;
        align-self: end !important;
        justify-content: flex-end !important;
    }

    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollContainer,
    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
        width: max-content !important;
        flex: none !important;
    }

    /* Switches: label and switch on one line (Cookiebot stacks them at this width) */
    html body #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogBodyLevelButtonWrapper {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        height: 24px !important;
    }

    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelButtons,
    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyFieldsetInnerContainer {
        height: 24px !important;
    }
}

/* Narrow tablet: "Show details" drops below the switches instead of overlapping them */
@media (min-width: 768px) and (max-width: 899px) {
    html body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails {
        position: static !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin: 4px 0 0 !important;
    }
}