/* Zhiroz Mobile Bottom Dock
   One fixed mobile/tablet shell with three vertically stacked rows:
   Row 3 (top) = optional admin announcement/media
   Row 2        = optional page-owned context action
   Row 1 (bottom)= persistent primary navigation
   Only this shell owns fixed positioning, safe-area and global bottom offset. */

:root {
    --site-mobile-bottom-dock-height: 64px;
}

.site-mobile-bottom-dock {
    display: none;
}

@media (max-width: 991.98px) {
    body.has-site-mobile-bottom-dock {
        padding-bottom: var(--site-mobile-bottom-dock-height, 0px) !important;
    }

    .site-mobile-bottom-dock {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1050;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
        border-top: 1px solid #e8e8e8;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.05);
        direction: rtl;
    }

    .site-mobile-bottom-dock-row {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        flex: 0 0 auto;
        background: #fff;
    }

    .site-mobile-bottom-dock-row--announcement:empty,
    .site-mobile-bottom-dock-row--context:empty {
        display: none;
    }

    .site-mobile-bottom-dock-row--announcement {
        height: var(--mobile-bottom-announcement-height, 56px);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding-inline: 12px;
        border-bottom: 1px solid #eee;
    }

    .site-mobile-bottom-dock-row--announcement.is-image {
        padding-inline: 0;
    }

    .mobile-bottom-dock-announcement-link,
    .mobile-bottom-dock-announcement-content {
        width: 100%;
        height: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        text-decoration: none;
        text-align: center;
    }

    .mobile-bottom-dock-announcement-text {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 700;
        color: #333;
    }

    .mobile-bottom-dock-announcement-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .site-mobile-bottom-dock-row--context {
        height: var(--mobile-bottom-context-height, 68px);
        overflow: hidden;
        border-bottom: 1px solid #e8e8e8;
        background: rgba(255, 255, 255, 0.98);
    }

    .site-mobile-bottom-dock-row--context > [data-mobile-bottom-context-source] {
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Row 2 RTL contract: the primary CTA lives on the visual right/start side;
       price / summary / status lives on the visual left/end side. Consumers keep
       their own markup, but use the shared height token for the primary control. */
    .site-mobile-bottom-dock-row--context .btn-add-cart,
    .site-mobile-bottom-dock-row--context .cart-mobile-checkout-action {
        height: var(--mobile-bottom-context-button-height, 48px);
        min-height: var(--mobile-bottom-context-button-height, 48px);
        max-height: var(--mobile-bottom-context-button-height, 48px);
    }

    .site-mobile-bottom-dock-row--context .pdp-cart-stepper {
        min-height: var(--mobile-bottom-context-button-height, 48px);
    }

    .site-mobile-bottom-dock-row--navigation {
        height: var(--mobile-bottom-nav-height, 64px);
        background: #fff;
    }

    .site-mobile-bottom-dock-row--navigation .mobile-bottom-nav {
        position: static !important;
        inset: auto !important;
        display: block !important;
        width: 100%;
        height: var(--mobile-bottom-nav-height, 64px);
        padding: 0;
        border: 0;
        box-shadow: none;
        background: #fff;
    }

    .site-mobile-bottom-dock-row--navigation .mobile-bottom-nav > .container,
    .site-mobile-bottom-dock-row--navigation .bottom-nav-items {
        height: 100%;
    }

    .site-mobile-bottom-dock-row--navigation .bottom-nav-item .site-icon {
        width: var(--mobile-bottom-nav-icon-size, 24px);
        height: var(--mobile-bottom-nav-icon-size, 24px);
        flex-basis: var(--mobile-bottom-nav-icon-size, 24px);
    }
}

@supports (width: 100dvw) {
    @media (max-width: 991.98px) {
        .site-mobile-bottom-dock {
            max-width: 100dvw;
        }
    }
}

/* Row 3 is intentionally a mobile-only campaign surface. Tablet keeps the
   persistent navigation and may use Row 2 context actions, but does not reuse
   the 390px image crop contract. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .site-mobile-bottom-dock-row--announcement {
        display: none;
    }
}