/* Shared frontend header and floating control geometry. */
:root {
    --darling-control-size: 48px;
    --darling-control-gap: 14px;
    --darling-control-edge: max(18px, env(safe-area-inset-right));
    --darling-control-bottom: calc(18px + env(safe-area-inset-bottom));
}
html { scroll-padding-bottom: calc(var(--darling-control-bottom) + var(--darling-control-size) + 16px); }
body.theme-darling .button-up {
    right: var(--darling-control-edge);
    bottom: var(--darling-control-bottom);
    width: var(--darling-control-size);
    height: var(--darling-control-size);
    padding: 10px;
    border: 1px solid rgb(216 33 52 / .55);
    border-radius: 4px;
    background: #21080e;
    box-shadow: 0 4px 18px rgb(0 0 0 / .3);
    z-index: 55;
    transition: opacity .2s, background-color .2s;
    transform: none;
}
body.theme-darling .button-up[hidden] { display: none; }
body.theme-darling .button-up:hover { background: #4a101c; border-color: #d82134; transform: none; }
body.theme-darling .button-up:focus-visible,
body.theme-darling .darling-floating-cart-root .dfc-floating-cart:focus-visible {
    outline: 2px solid #fff; outline-offset: 3px;
}
body.theme-darling .darling-floating-cart-root .dfc-floating-cart {
    top: auto;
    right: var(--darling-control-edge);
    bottom: calc(var(--darling-control-bottom) + var(--darling-control-size) + var(--darling-control-gap));
    transform: none;
    z-index: 55;
}
/* Modal and menu layers own the viewport while open. */
body:has(.menu.active) .button-up,
body:has(.menu.active) .dfc-floating-cart,
body:has(.is-drawer-open) .button-up,
body:has(.menu.active) .darling-mobile-controls-surface {
    visibility: hidden; pointer-events: none;
}

@media (max-width: 767px) {
    :root {
        --darling-control-size: 44px;
        --darling-control-edge: max(10px, env(safe-area-inset-right));
        --darling-control-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    /* Equal side tracks keep the logo centered with real space for both labels. */
    body.theme-darling header.header > .container {
        width: 100%; max-width: none;
        padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right));
    }
    body.theme-darling header.header .header__wrapper {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(98px, 30vw, 128px) minmax(0, 1fr);
        align-items: center; gap: 6px; min-height: 44px;
    }
    body.theme-darling header.header .header__wrapper > .logo {
        position: relative; inset: auto; transform: none;
        width: 100%; max-width: none; margin: 0; grid-column: 2; grid-row: 1;
    }
    body.theme-darling header.header .logo img { display: block; width: 100%; height: auto; }
    body.theme-darling header.header .header__wrapper > .burger {
        grid-column: 1; grid-row: 1; justify-self: start;
        min-height: 44px; gap: 4px; margin: 0; padding: 0;
    }
    body.theme-darling header.header .burger__icon { width: 28px; height: 40px; padding: 11px 3px; flex-shrink: 0; }
    body.theme-darling header.header .burger.active .burger__icon::before { transform: translateY(7.5px) rotate(45deg); }
    body.theme-darling header.header .burger.active .burger__icon::after { transform: translateY(-7.5px) rotate(-45deg); }
    body.theme-darling header.header .burger__text { display: inline; font-size: 12px; letter-spacing: 0; }
    body.theme-darling header.header .header__wrapper > .darling-header-actions {
        grid-column: 3; grid-row: 1; justify-self: end; min-width: 0;
    }
    body.theme-darling header.header .btn-border--header {
        width: auto; min-width: 0; max-width: none; min-height: 40px;
        margin: 0; padding: 8px; font-size: 12px; line-height: 1.1; white-space: nowrap;
    }
    body.theme-darling header.header .burger:focus-visible { outline: 2px solid white; outline-offset: 2px; }
    body.theme-darling.darling-product-landing-page:has(.darling-product-landing) .header {
        position: relative; inset: auto; padding-block: 8px;
        background: #080507;
    }
    body.theme-darling .darling-floating-cart-root .dfc-floating-cart {
        width: var(--darling-control-size); height: var(--darling-control-size);
        bottom: var(--darling-control-bottom);
        border-radius: 4px;
    }
    /* A single compact bottom dock gives the launchers a dedicated surface.
       Its end spacer and scroll padding keep the final content/focused CTA reachable. */
    body.theme-darling:has(.darling-floating-cart:not([hidden])) .button-up {
        right: calc(var(--darling-control-edge) + var(--darling-control-size) + var(--darling-control-gap));
    }
    body.theme-darling:has(.darling-floating-cart:not([hidden]))::after,
    body.theme-darling:has(.button-up.is-visible)::after {
        content: ''; display: block;
        height: calc(var(--darling-control-bottom) + var(--darling-control-size) + 10px);
    }
    .darling-mobile-controls-surface {
        position: fixed; inset: auto 0 0; z-index: 54;
        height: calc(var(--darling-control-bottom) + var(--darling-control-size) + 8px);
        background: #0c0609; border-top: 1px solid rgb(216 33 52 / .24);
        pointer-events: none;
    }
    .darling-mobile-controls-surface[hidden] { display: none; }
    body.theme-darling .darling-floating-cart-root .dfc-floating-cart__halo { display: none; }
    body.theme-darling .darling-floating-cart-root .dfc-floating-cart__icon { left: 10px; top: 7px; width: 24px; height: 24px; }
    body.theme-darling .darling-floating-cart-root .dfc-floating-cart__count {
        right: 2px; bottom: 2px; min-width: 19px; height: 19px; padding: 0 4px; font-size: 11px;
    }
}
@media (max-width: 350px) {
    body.theme-darling header.header .header__wrapper { grid-template-columns: minmax(0, 1fr) 98px minmax(0, 1fr); gap: 4px; }
    body.theme-darling header.header .btn-border--header { font-size: 11px; padding-inline: 7px; }
    body.theme-darling header.header .burger__text { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    body.theme-darling .button-up { transition: none; }
}