/*
 * Storefront viewport management
 * Desktop: 1200px and wider
 * Tablet and iPad: 768px to 1199.98px
 * Unfolded foldables: 600px to 767.98px with a near-square viewport
 * Mobile: below 768px
 */

@media (min-width: 1200px) {
    .ldm-page,
    .ldm-main,
    .ldm-topnav__inner {
        min-width: 0;
    }
}

/* Tablets and iPads use a compact navigation rail, leaving enough width for
   page content in both portrait and landscape orientations. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    :root {
        --ldm-page-padding: 16px;
    }

    .ldm-sidebar,
    .ldm-sidebar.sidebar-expanded,
    .ldm-sidebar.sidebar-collapsed {
        display: flex;
        width: var(--ldm-sidebar-collapsed, 80px);
    }

    .ldm-page,
    .main-content-expanded,
    .main-content-collapsed {
        width: calc(100% - var(--ldm-sidebar-collapsed, 80px));
        max-width: calc(100vw - var(--ldm-sidebar-collapsed, 80px));
        min-width: 0;
        margin-left: var(--ldm-sidebar-collapsed, 80px);
    }

    .ldm-main,
    .ldm-topnav__inner {
        width: 100%;
        max-width: 100%;
    }

    .ldm-sidebar__header {
        justify-content: center;
        padding: 20px 8px;
    }

    .ldm-sidebar__toggle,
    .ldm-sidebar .logo-full,
    .ldm-sidebar .sidebar-label {
        display: none;
    }

    .ldm-sidebar .logo-icon {
        display: block;
    }

    .ldm-sidebar__nav,
    .ldm-sidebar__footer {
        padding-inline: 8px;
    }

    .ldm-sidebar__item {
        justify-content: center;
        padding-inline: 12px;
    }

    .ldm-sidebar__item:hover .ldm-nav-tooltip,
    .ldm-sidebar__item:focus-visible .ldm-nav-tooltip {
        opacity: 1;
    }

    .ldm-topnav__title h2 {
        display: none;
    }

    .ldm-mobile-brand {
        display: inline-flex;
    }

    .ldm-topnav__inner {
        min-width: 0;
        align-items: center;
        flex-direction: row;
        gap: 16px;
    }

    .ldm-topnav__actions,
    .storefront-search {
        min-width: 0;
    }

    .ldm-topnav__actions {
        width: auto;
        max-width: none;
    }

    .home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-curated-grid {
        grid-template-columns: 1fr;
    }

    .home-curated-product__media,
    .home-merchant-card__media {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .ldm-bento-grid {
        grid-template-columns: 2fr 1fr;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .home-curated-rail,
    .home-merchant-rail {
        grid-auto-columns: calc((100% - 32px) / 3);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-curated-rail,
    .home-merchant-rail {
        grid-auto-columns: calc((100% - 48px) / 4);
    }
}

/* Unfolded devices are wide enough for paired content but still need the
   touch-first navigation and spacing used by the mobile shell. */
@media (min-width: 600px) and (max-width: 767.98px) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3) {
    :root {
        --ldm-page-padding: 20px;
    }

    .home-curated-rail,
    .home-merchant-rail {
        grid-auto-columns: calc((100% - 16px) / 2);
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    .home-curated-product__media,
    .home-merchant-card__media {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 767.98px) {
    .ldm-page,
    .ldm-main,
    .ldm-topnav__inner,
    .ldm-topnav__actions,
    .ldm-section,
    .home-slider-heading,
    .home-subsection-heading {
        min-width: 0;
    }

    .ldm-page,
    .main-content-expanded,
    .main-content-collapsed {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 599.98px) {
    :root {
        --ldm-page-padding: 16px;
    }
}

/* ── Cart and checkout (views/cart.php, views/checkout.php) ─────────────────
 * Breakpoints follow cart.css / checkout.css:
 *   Unfolded foldables and tablets (Galaxy Z Fold inner 884×1104): 621px to 900px
 *   Large phones (iPhone 16 Pro Max 440×956, Pixel 9 412×924):       401px to 620px
 *   Small phones (Galaxy S21 360×800, Z Fold cover 344×882):   400px and below
 */

/* All screens: totals keep the currency and amount together. */
.checkout-totals section p {
    flex-wrap: wrap;
    column-gap: 12px;
}

.checkout-totals strong,
.cart-bottom-bar strong,
.cart-bottom-bar a {
    white-space: nowrap;
}

.cart-bottom-bar div {
    min-width: 0;
}

/* Unfolded foldables and tablets: the step tabs scroll inside the form column
   instead of pushing it under the Order Summary. */
@media (min-width: 621px) and (max-width: 900px) {
    .checkout-main > section {
        min-width: 0;
    }

    .checkout-steps {
        overflow-x: auto;
    }

    .checkout-steps button {
        flex: 0 0 auto;
    }
}

/* Large phones: the fixed Back / Continue bar and cart bottom bar fit as designed. */

/* Small phones: tighter bottom bars so the buttons stay on one line. */
@media (max-width: 400px) {
    .checkout-actions {
        gap: 10px;
    }

    .checkout-actions button {
        gap: 6px;
        font-size: 15px;
        padding: 13px 12px;
        white-space: nowrap;
    }

    .checkout-actions button .material-symbols-outlined {
        font-size: 20px;
    }

    .cart-bottom-bar {
        gap: 10px;
        padding-inline: 14px;
    }

    .cart-bottom-bar span {
        font-size: 13px;
    }

    .cart-bottom-bar strong {
        font-size: 20px;
    }

    .cart-bottom-bar a {
        font-size: 15px;
        padding: 13px 14px;
    }
}