/* ==========================================================================
   BILLO BAZAR - RESPONSIVE LAYOUT & MEDIA QUERIES
   ========================================================================== */

/* Product Grids */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.category-slider-grid {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    /* A tall chip must not drag the rest of the strip open with it. */
    align-items: flex-start;
}
.category-slider-grid::-webkit-scrollbar {
    display: none;
}

.category-chip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 78px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}

.category-chip-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px; /* Elegant rounded-square styling */
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-chip-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Approved category with no image of its own: show its initial, not a broken icon. */
.category-chip-initial {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    user-select: none;
}

.category-chip-item:hover .category-chip-icon {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 8px 18px rgba(255, 106, 0, 0.18);
}

.category-chip-label {
    margin-top: 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    line-height: 1.25;
    /* Two lines is the whole budget: a long free-text label used to stretch
       the horizontal strip and leave a band of empty space under the chips. */
    max-width: 92px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Two-column layout for Checkout, Product Details, Cart, Account */
.layout-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1.75rem;
    align-items: start;
}

.layout-2col > *,
.details-grid > * {
    min-width: 0;
}

.details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

/* Breakpoint: Desktop to Tablet (<= 1024px) */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
    .layout-2col {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 1.25rem;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* Breakpoint: Tablet to Mobile (<= 768px) */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); /* Space for bottom navigation */
    }

    .desktop-nav {
        display: none;
    }

    .bottom-nav {
        display: flex;
    }

    .header-inner {
        height: 56px;
    }

    /* The brand never wraps (white-space:nowrap) and never shrinks, so at
       phone widths it is scaled down instead of pushing the action icons
       out of the 360px viewport. */
    .brand-title {
        font-size: 1.1rem;
    }

    /* Search now lives on its own compact row on every breakpoint. */
    .header-search-row {
        padding-bottom: 0.55rem;
    }

    /* Search page: header search row is skipped; keep the same rhythm. */
    .site-header--single-row {
        padding-bottom: 0.55rem;
    }

    .header-search-wrap {
        max-width: 100%;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .layout-2col, .details-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .modal-content {
        padding: 1.15rem;
        border-radius: var(--radius-md);
    }

    /* The floating assistant must stay usable on small screens: it is anchored
       between the bottom nav and the top bar, and never wider than the view. */
    .ai-chat-window {
        left: 8px;
        right: 8px;
        width: auto;
        /* Same bottom inset as the cart and purchase bars: the navigation is
           64px PLUS the device safe area, so a hard 74px buried the chat
           header's close button behind it on notched phones. */
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        /* 72dvh on a 568px screen put the top of the window under the two-row
           header; reserve the header height too so the close button always
           stays on screen. */
        height: min(72dvh, calc(100dvh - 74px - var(--bb-header-height, 112px) - 8px), 460px);
    }

    .ai-fab {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        width: 46px;
        height: 46px;
    }

    /* Toasts are the only layer that starts from the physical top of the screen,
       so they need the notch inset, and a 340px bubble anchored 20px from the
       right reached the opposite edge inside the 12px page gutter on a 360px
       phone. */
    #toastContainer {
        top: calc(16px + env(safe-area-inset-top, 0px));
        left: 12px;
        right: 12px;
        align-items: flex-end;
    }

    #toastContainer .toast {
        max-width: 100%;
    }

    /* Long product names must not force sideways scrolling. */
    .product-card-title {
        overflow-wrap: anywhere;
    }
}

/* Breakpoint: Small Mobile (<= 480px) */
@media (max-width: 480px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .product-card-title {
        font-size: 0.8rem;
        min-height: 2.2rem;
    }

    .current-price {
        font-size: 0.95rem;
    }

    .btn-lg {
        padding: 0.85rem 1.25rem;
        font-size: 0.925rem;
    }
}