/* Responsive Category Grid */
.responsive-category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.responsive-category-grid .col-md-6 {
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
}

/* Mobile (< 768px) - 1 Column */
@media (max-width: 767px) {
    .responsive-category-grid .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Tablet (768px - 991px) - 2 Columns */
@media (min-width: 768px) and (max-width: 991px) {
    .responsive-category-grid .col-md-6 {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }
}

/* Desktop Large (992px - 1199px) - 2 Columns */
@media (min-width: 992px) and (max-width: 1199px) {
    .responsive-category-grid .col-md-6 {
        flex: 0 0 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }
}

/* Desktop XL (1200px+) - 3 Columns */
@media (min-width: 1200px) {
    .responsive-category-grid .col-md-6 {
        flex: 0 0 calc(33.333% - 8px);
        max-width: calc(33.333% - 8px);
    }
}

/* ============================================================
   DESKTOP (>= 992px) LAYOUT FIX  — TMM / ItemsViewNew Index
   ------------------------------------------------------------
   Scoped to min-width:992px ONLY. Mobile (<768px) and tablet
   (768-991px) rules are intentionally NOT touched.

   Problem it fixes:
   - style.css pins .main-content to max-width:480px (phone width)
     with no desktop override, so on desktop the category/item
     panels were stuck in a narrow 480px strip inside the wide
     left column (the big empty white area), and clicking a
     category showed items in that same cramped strip.
   - Category/item cards use Bootstrap "col-lg-6" (50% => 2-up).
   Result: categories & items now fill the desktop column and
   auto-fit as many cards per row as the width allows.
   ============================================================ */
@media (min-width: 992px) {

    /* 1) Let ONLY the category / sub-category / item listing panels
          fill the desktop content column instead of the hard-coded
          480px width. (Cart, checkout and item-detail panels also use
          .main-content, so we deliberately scope by id and leave them
          exactly as they were.) */
    #divCategoryList.main-content,
    #divSubCategoryList.main-content,
    #divMainItemList.main-content {
        max-width: 100% !important;
    }

    #divCategoryList .item-list-title,
    #divSubCategoryList .item-list-title,
    #divMainItemList .item-list-title {
        max-width: 100% !important;
    }

    /* 2) Category grid -> auto-fit by width (min card ~180px). */
    #categoryList.responsive-category-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }

    /* 3) Item grid -> auto-fit by width (min card ~200px) so items
          fill the width on desktop just like the category grid. */
    #itemlist {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }

    /* 4) Neutralise the Bootstrap col-* sizing on the cards so the
          CSS grid controls the columns (was col-lg-6 = 50%). */
    #categoryList.responsive-category-grid > [class*="col-"],
    #itemlist > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ============================================================
   FOLLOW-UP FIX 1 — MOBILE: minimum 2 categories per row
   ------------------------------------------------------------
   The category grid was collapsing to 1 card per row on phones.
   Cause: the base ".responsive-category-grid" adds gap:12px on top
   of the Bootstrap col-6 (50%) cards, so 50% + 50% + 12px overflows
   the row and the 2nd card wraps. The item grid (#itemlist) is a
   plain .form-row with no gap, which is why it correctly shows 2-up.
   Removing the gap on mobile makes the category grid behave exactly
   like the item grid. Scoped to <=767px — tablet & desktop untouched.
   ============================================================ */
@media (max-width: 767px) {
    #categoryList.responsive-category-grid {
        gap: 0;
    }
}

/* ============================================================
   FOLLOW-UP FIX 2 — DESKTOP: Item Details uses the full screen
   ------------------------------------------------------------
   #divMainItemDetails was confined to the narrow left column (and,
   on Design2, the 480px .main-content cap). On desktop we promote it
   to a full-viewport overlay so the item details page takes over the
   whole screen. It is toggled with display:none/block by OnItemClick,
   so these rules only take effect while it is visible. No JS change
   and NO mobile change (scoped to >=992px; phone view is left as-is).
   ============================================================ */
@media (min-width: 992px) {
    #divMainItemDetails {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw !important;   /* beat the .main-content 480px cap */
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        z-index: 1000;                 /* above the page, below BS modals (1050) */
        overflow-x: hidden;
        overflow-y: auto;
        background-color: var(--product_details_background_color, #ffffff);
        padding: 0 0 40px;
    }

    /* Full-screen overlay, but keep the details content centred and
       readable on wide monitors. Raise this max-width (or set 100%)
       if you want the content edge-to-edge. */
    #divMainItemDetails .product-details-inner {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Centre the "related items" slider that sits below the price.
       It is a sibling of .product-details-inner with a fixed 566px
       width, so on the full-screen layout it was stuck to the left.
       margin:auto centres it on the same axis as the content above.
       (The owl slider inside is sized to 566px at init, so we centre
       the container rather than resize it.) */
    #divMainItemDetails .category-carousel {
        margin-left: auto;
        margin-right: auto;
        float: none;
    }

    /* The item-details header (back arrow + category name) is
       position:sticky (top:0). In this view it had no solid background
       and was capped at 480px, so while scrolling the wider centred
       item image showed through / past it (the image looked "cut" at
       the header line). Give the header the full content width and a
       solid page-coloured background so the image scrolls cleanly
       behind it. Desktop only; mobile/tablet header is unchanged. */
    #divMainItemDetails .item-list-title {
        max-width: 100% !important;
        width: 100%;
        background-color: var(--product_details_background_color, #faf7f1);
    }
}

/* ============================================================
   FOLLOW-UP FIX 3 — DESKTOP: header colour + footer full width
   ------------------------------------------------------------
   Both .top-header and .powered-by are position:fixed with
   width:100% but capped at max-width:480px (phone width) and no
   desktop override — so on desktop the navy header colour stopped
   at 480px (white gap beside the language/feedback icons) and the
   "Powered by" footer was a small 480px white box on the left.
   Remove the cap on desktop so both span the full width. The
   header's icons sit in a justify-content-between row, so they
   spread to the edges exactly as they already do on mobile.
   Desktop only — mobile/tablet are left untouched.
   ============================================================ */
@media (min-width: 992px) {
    #divleftsideMenuListView .top-header {
        max-width: 100% !important;
    }

    #divleftsideMenuListView .powered-by {
        max-width: 100% !important;
    }
}

/* ============================================================
   FOLLOW-UP FIX 4 — MOBILE: keep the "Powered by" footer visible
   ------------------------------------------------------------
   The footer (.powered-by) is position:fixed at the bottom, but on
   mobile it was reported as not showing. Nothing in the CSS hides it,
   so this rule pins it down explicitly — fixed, full width, at the
   very bottom, above the content — to guarantee it renders on phones.
   This is the ONLY mobile rule for the footer; desktop keeps the
   full-width version from Fix 3 above.
   ============================================================ */
@media (max-width: 767px) {
    #divleftsideMenuListView .powered-by {
        display: block !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 60 !important;
    }
}

/* ============================================================
   FOLLOW-UP FIX 5 — Category card background follows the theme
   ------------------------------------------------------------
   The category cards' background must track the theme variable
   --category_page_card_primary_background_color. style.css sets it via
   ".category-page-bg .card-primary", but that was not taking effect
   (source-order / specificity). Reassert it here (loaded last) at higher
   specificity so the "Category card background" colour always applies.
   ============================================================ */
#categoryList .card-primary,
#SubcategoryList .card-primary {
    background-color: var(--category_page_card_primary_background_color, #ffffff) !important;
}