/* =========================================================
   LASTO MOBILE COMPARE — FINAL POLISH / SINGLE SOURCE OF TRUTH
   2026-08-10
   Mobile only (<=768px). Keeps Compare function unchanged.
   ========================================================= */

@media (max-width:768px){
    /* -----------------------------------------------------
       TOOLBAR
       Filter + Sort + Grid/List + Compare + Count stay in
       one compact row, including while Compare Mode is ON.
       ----------------------------------------------------- */
    .products-page .products-toolbar{
        /* STICKY GAP FIX 2026-08-10
           Use the actual shared header height (68px/72px) instead of the
           legacy --mobile-header-height (112px), so the toolbar sticks
           directly below the visible header with no empty gap. */
        top:var(--lasto-header-top-height,68px)!important;
        display:grid!important;
        grid-template-columns:36px minmax(0,1fr)!important;
        align-items:center!important;
        gap:6px!important;
        min-height:46px!important;
    }
    .products-page .products-toolbar-left{
        width:36px!important;
        min-width:36px!important;
        display:block!important;
    }
    .products-page .products-toolbar-right{
        min-width:0!important;
        width:100%!important;
        margin:0!important;
        display:grid!important;
        grid-template-columns:minmax(70px,1fr) auto auto auto!important;
        grid-template-rows:34px!important;
        align-items:center!important;
        gap:5px!important;
    }
    .products-page .products-toolbar-right>label{display:none!important}
    .products-page #products-sort{
        grid-column:1!important;
        grid-row:1!important;
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
        min-height:34px!important;
        height:34px!important;
        padding-top:0!important;
        padding-bottom:0!important;
        font-size:9px!important;
    }
    .products-page .view-switch{
        grid-column:2!important;
        grid-row:1!important;
        display:flex!important;
        align-items:center!important;
        gap:4px!important;
        flex:0 0 auto!important;
    }
    .products-page .view-button{
        width:34px!important;
        min-width:34px!important;
        height:34px!important;
        min-height:34px!important;
        padding:0!important;
    }

    .products-page .compare-mode-toggle,
    .products-page .compare-mode-toggle.is-active,
    .products-page .compare-mode-toggle:not(.is-active){
        grid-column:3!important;
        grid-row:1!important;
        justify-self:end!important;
        width:auto!important;
        min-width:34px!important;
        height:34px!important;
        min-height:34px!important;
        margin:0!important;
        padding:0 8px!important;
        gap:5px!important;
        border-radius:8px!important;
        font-size:8.5px!important;
        line-height:1!important;
        white-space:nowrap!important;
        overflow:hidden!important;
    }
    .products-page .compare-mode-toggle:not(.is-active){
        width:34px!important;
        max-width:34px!important;
        padding:0!important;
    }
    .products-page .compare-mode-toggle:not(.is-active) [data-compare-mode-label],
    .products-page .compare-mode-toggle:not(.is-active) strong{
        display:none!important;
    }
    .products-page .compare-mode-toggle.is-active [data-compare-mode-label]{
        display:inline!important;
    }
    .products-page .compare-mode-toggle.is-active strong{display:none!important}
    .products-page .compare-mode-toggle .icon{
        width:14px!important;
        height:14px!important;
        flex:0 0 14px!important;
    }

    .products-page .compare-mode-summary{
        grid-column:4!important;
        grid-row:1!important;
        width:auto!important;
        max-width:none!important;
        justify-self:end!important;
        margin:0!important;
        text-align:right!important;
        color:var(--mobile-muted,#717783)!important;
        font-size:8.5px!important;
        font-weight:700!important;
        line-height:1!important;
        white-space:nowrap!important;
    }
    .products-page .compare-mode-summary[hidden]{display:none!important}

    /* -----------------------------------------------------
       FIXED COMPARE TRAY
       Compact tray above bottom nav. Height is measured by
       product-compare.js and exposed as --mobile-compare-tray-height.
       ----------------------------------------------------- */
    .products-page .compare-floating-bar{
        left:6px!important;
        right:6px!important;
        bottom:calc(var(--mobile-nav-height,64px) + var(--mobile-safe-bottom,0px) + 5px)!important;
        width:auto!important;
        max-height:none!important;
        padding:0!important;
        border:1px solid rgba(118,92,255,.34)!important;
        border-radius:13px!important;
        overflow:hidden!important;
        box-shadow:0 -7px 24px rgba(12,18,30,.16)!important;
    }
    .products-page .compare-floating-inner{
        width:100%!important;
        max-width:none!important;
        min-height:0!important;
        padding:6px!important;
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto!important;
        grid-template-rows:auto auto!important;
        align-items:center!important;
        gap:5px 7px!important;
    }
    .products-page .compare-floating-heading{
        grid-column:1!important;
        grid-row:1!important;
        min-width:0!important;
        gap:5px!important;
    }
    .products-page .compare-floating-icon{
        width:28px!important;
        height:28px!important;
        flex:0 0 28px!important;
        border-radius:8px!important;
    }
    .products-page .compare-floating-icon .icon{
        width:14px!important;
        height:14px!important;
    }
    .products-page .compare-floating-heading>div{min-width:0!important}
    .products-page .compare-floating-heading strong{
        font-size:8.5px!important;
        line-height:1.1!important;
    }
    .products-page .compare-floating-heading>div span{
        display:block!important;
        max-width:100%!important;
        margin-top:1px!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;
        font-size:6.8px!important;
        line-height:1.1!important;
    }
    .products-page .compare-floating-actions{
        grid-column:2!important;
        grid-row:1!important;
        gap:0!important;
    }
    .products-page .compare-clear-button{display:none!important}
    .products-page .compare-now-button{
        min-width:96px!important;
        min-height:31px!important;
        height:31px!important;
        padding:0 8px!important;
        border-radius:8px!important;
        font-size:7.3px!important;
        line-height:1!important;
    }
    .products-page .compare-now-button span{margin-left:3px!important}

    /* Selected products remain visible, but take only one slim row. */
    .products-page .compare-selected-products{
        grid-column:1/-1!important;
        grid-row:2!important;
        min-width:0!important;
        display:grid!important;
        grid-auto-flow:column!important;
        grid-auto-columns:112px!important;
        grid-template-columns:none!important;
        gap:5px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        padding:0!important;
        scrollbar-width:none!important;
        overscroll-behavior-inline:contain!important;
        scroll-snap-type:x proximity!important;
    }
    .products-page .compare-selected-products::-webkit-scrollbar{display:none!important}
    .products-page .compare-selected-product,
    .products-page .compare-add-placeholder{
        min-height:38px!important;
        max-height:38px!important;
        border-radius:8px!important;
        scroll-snap-align:start!important;
    }
    .products-page .compare-selected-product{
        padding:3px 18px 3px 3px!important;
        grid-template-columns:26px minmax(0,1fr)!important;
        gap:4px!important;
    }
    .products-page .compare-selected-product img{
        width:26px!important;
        height:26px!important;
        border-radius:5px!important;
    }
    .products-page .compare-selected-product strong,
    .products-page .compare-selected-product span{
        font-size:6.3px!important;
        line-height:1.05!important;
    }
    .products-page .compare-selected-product span{margin-top:1px!important}
    .products-page .compare-selected-remove{
        top:2px!important;
        right:2px!important;
        width:15px!important;
        height:15px!important;
        font-size:10px!important;
    }
    .products-page .compare-add-placeholder{
        padding:3px 7px!important;
        gap:4px!important;
    }
    .products-page .compare-add-placeholder span{
        width:20px!important;
        height:20px!important;
        font-size:13px!important;
    }
    .products-page .compare-add-placeholder strong{font-size:6.5px!important}

    /* -----------------------------------------------------
       SAFE SPACE
       Dynamic tray height prevents the final products/content
       from being trapped behind the fixed tray + bottom nav.
       ----------------------------------------------------- */
    body.products-page.compare-bar-visible{
        padding-bottom:calc(
            var(--mobile-nav-height,64px)
            + var(--mobile-safe-bottom,0px)
            + var(--mobile-compare-tray-height,86px)
            + 16px
        )!important;
    }
    body.products-page.compare-mode-active .products-catalog-layout{
        padding-bottom:0!important;
    }
    body.products-page.compare-mode-active{
        scroll-padding-bottom:calc(
            var(--mobile-nav-height,64px)
            + var(--mobile-safe-bottom,0px)
            + var(--mobile-compare-tray-height,86px)
            + 18px
        )!important;
    }
    .products-page .compare-toast{
        bottom:calc(
            var(--mobile-nav-height,64px)
            + var(--mobile-safe-bottom,0px)
            + var(--mobile-compare-tray-height,86px)
            + 10px
        )!important;
    }

    /* Compare Mode must never change product-grid width. */
    body.products-page.compare-mode-active .product-catalog,
    body.products-page.compare-mode-active .products-catalog-layout,
    body.products-page.compare-mode-active .products-results-panel,
    body.products-page.compare-mode-active .products-grid{
        min-width:0!important;
        max-width:100%!important;
    }
}

/* Extra compression for the smallest required mobile widths. */
@media (max-width:390px){
    .products-page .products-toolbar-right{
        grid-template-columns:minmax(62px,1fr) auto auto auto!important;
        gap:4px!important;
    }
    .products-page #products-sort{font-size:8.3px!important}
    .products-page .view-switch{gap:3px!important}
    .products-page .view-button{
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
        min-height:32px!important;
    }
    .products-page .compare-mode-toggle,
    .products-page .compare-mode-toggle.is-active{
        min-width:32px!important;
        height:32px!important;
        min-height:32px!important;
        padding:0 6px!important;
        gap:4px!important;
        font-size:7.7px!important;
    }
    .products-page .compare-mode-toggle:not(.is-active){
        width:32px!important;
        max-width:32px!important;
        padding:0!important;
    }
    .products-page .compare-mode-summary{font-size:7.8px!important}
    .products-page .compare-selected-products{grid-auto-columns:106px!important}
    .products-page .compare-now-button{min-width:90px!important;font-size:6.9px!important}
}