/* Mobile bottom navigation.
   Single owner of .quick-actions layout and icons.
   The bar is aligned to the visible storefront page-card area, not to the full viewport. */

.scroll-top-button {
    --scroll-progress: 0deg;
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(22px + env(safe-area-inset-bottom));
    z-index: 126;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0;
    background: conic-gradient(rgba(35, 88, 246, .72) var(--scroll-progress), rgba(35, 88, 246, .10) 0deg);
    box-shadow: 0 10px 22px rgba(17, 26, 54, .15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.96);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.scroll-top-button::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: inherit;
    background: #0f172a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

.scroll-top-button::after {
    content: "↑";
    position: relative;
    z-index: 1;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 16px;
    font-weight: 950;
    line-height: 1;
}

.scroll-top-button.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-top-button:hover {
    transform: translateY(-1px) scale(1.02);
}

@media (max-width: 767px) {
    :root {
        --ip-shell-gap: clamp(16px, 4vw, 72px);
        --ip-page-pad: clamp(12px, 2vw, 30px);
        --ip-shell-width: min(var(--container, 1440px), calc(100dvw - var(--ip-shell-gap)));
        --ip-page-left: calc((100dvw - var(--ip-shell-width)) / 2 + var(--ip-page-pad));
        --ip-page-width: calc(var(--ip-shell-width) - (var(--ip-page-pad) * 2));
    }

    body {
        padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    }

    .quick-actions {
        position: fixed;
        left: var(--ip-page-left);
        right: auto;
        bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 125;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        gap: 0;
        width: min(360px, var(--ip-page-width));
        max-width: var(--ip-page-width);
        min-width: 0;
        min-height: 58px;
        box-sizing: border-box;
        padding: 6px 8px;
        overflow: hidden;
        border: 1px solid rgba(17, 26, 54, .07);
        border-radius: 20px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 14px 34px rgba(17, 26, 54, .16);
        backdrop-filter: blur(14px);
        transform: none;
        transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
    }

    .quick-actions a,
    .quick-actions button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 3px 1px;
        overflow: hidden;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: #707a92;
        font-size: 9.5px;
        font-weight: 850;
        line-height: 1;
        text-decoration: none;
        appearance: none;
        cursor: pointer;
        transition: background .16s ease, color .16s ease, transform .16s ease;
    }

    .quick-actions a.is-active {
        background: #eef4ff;
        color: #2358f6;
    }

    .quick-actions a:active,
    .quick-actions button:active {
        transform: translateY(1px);
    }

    .quick-actions span {
        position: relative;
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 23px;
        height: 23px;
        color: currentColor;
    }

    .quick-actions svg {
        width: 21px;
        height: 21px;
        fill: currentColor;
    }

    .quick-actions b {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        color: currentColor;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 9px;
        font-weight: 850;
        line-height: 1.05;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-actions em {
        position: absolute;
        top: -5px;
        right: -7px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: #2358f6;
        color: #fff;
        font-size: 10px;
        font-style: normal;
        font-weight: 950;
        line-height: 16px;
        text-align: center;
    }

    .scroll-top-button {
        right: calc(var(--ip-page-left) + 4px);
        bottom: calc(80px + env(safe-area-inset-bottom));
        width: 36px;
        height: 36px;
    }

    .scroll-top-button::before {
        inset: 5px;
    }

    .scroll-top-button::after {
        width: 22px;
        height: 22px;
        font-size: 15px;
    }

    body.menu-open .quick-actions,
    body.catalog-drawer-open .quick-actions,
    body.filters-open .quick-actions,
    body.lightbox-open .quick-actions,
    body.menu-open .scroll-top-button,
    body.catalog-drawer-open .scroll-top-button,
    body.filters-open .scroll-top-button,
    body.lightbox-open .scroll-top-button {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(calc(100% + 20px));
    }
}

@media (min-width: 768px) {
    .quick-actions {
        display: none;
    }
}