/* ==========================================================================
   ILMCode Storefront -- responsive rules
   Loaded after style.css, so these overrides win at small widths.
   ========================================================================== */

/* Hidden at every width by default; the header-switch block below turns it
   on only where the drawer it belongs to can actually open. */
.mobile-menu-scrim { display: none; }

@media (max-width: 1199px) {
    .main-search { max-width: 420px; }
    .header-list-items { gap: 14px; }
}

@media (max-width: 991px) {
    .header-list-items a span { display: none; }
    .header-list-items i { font-size: 18px; }
    .cat_img img, .side_cat_img img { width: 52px; height: 52px; }
    .service_info { padding: 14px 8px; }
    .service_info > div { margin-bottom: 12px; }
}

/* ==========================================================================
   Header switch: desktop nav <-> phone header + drawer.

   Both halves flip together at the SAME width (Bootstrap's lg breakpoint) so
   there is no gap in between. There used to be one: the desktop header only
   hid below 767px while the compact phone header only showed below 767px
   too -- correct at the boundary, but the numbers matched by coincidence of
   both saying "767", not because anything tied them together, and a tablet
   in the 768-991px band got the FULL desktop header (all-categories flyout,
   the main nav links, the hotline) squeezed into a width that never fit it,
   which is what wrapped/overflowed into an unreadable strip.
   ========================================================================== */
@media (max-width: 991.98px) {
    /* .first-nav / .second-nav / .third-nav are the drawer's own category
       tree and live inside .mobile-menu, which is itself display:none above
       this breakpoint -- hiding them here as well left the phone drawer with
       no categories in it at all. */
    .main-header, .hidetosm,
    .mobile_view_display_none { display: none !important; }

    .mobile-header {
        display: block;
        background: #fff;
        box-shadow: var(--shop-shadow);
        position: sticky; top: 0; z-index: 120;
        padding: 9px 0;
    }
    .mobile-header .container { display: flex; align-items: center; gap: 12px; }
    .mobile-logo { display: block; flex: 1 1 auto; }
    .mobile-logo img { max-height: 38px; }
    .mobile-search { display: block; padding: 8px 0 2px; }
    .mobile-search form { display: flex; }
    .mobile-search input {
        flex: 1 1 auto; height: 38px; padding: 0 13px;
        border: 1.5px solid var(--shop-line); border-right: 0;
        border-radius: var(--shop-radius) 0 0 var(--shop-radius); outline: none;
    }
    /* was .msearch_click, which only ever hit the input by mistake */

    .menu-bar { font-size: 21px; color: var(--shop-ink); }

    /* Slide-in drawer. #navbar_top (the sticky compact header) sits at
       z-index: 800 -- this has to clear that or the header paints over the
       top of the open drawer, hiding the logo row and the close button
       behind it exactly where a thumb would reach for them. */
    .mobile-menu {
        display: block;
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 280px; max-width: 84vw;
        background: #fff;
        box-shadow: 4px 0 24px rgba(16, 24, 40, .18);
        transform: translateX(-100%);
        transition: transform .28s ease;
        z-index: 900;
        overflow-y: auto;
        padding-bottom: 30px;
    }
    .mobile-menu.open { transform: translateX(0); }
    .mobile-menu-logo {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px; border-bottom: 1px solid var(--shop-line);
        position: sticky; top: 0; background: #fff; z-index: 2;
    }
    .mobile-menu-logo img { max-height: 36px; }
    .mobile-menu-close {
        width: 32px; height: 32px; flex: 0 0 auto;
        display: flex; align-items: center; justify-content: center;
        border-radius: 999px; background: var(--shop-bg);
        font-size: 16px; cursor: pointer; color: var(--shop-ink);
    }
    .mobile-menu-close:hover { background: var(--shop-line); }

    /* Dark scrim behind the open drawer -- tap it to close, same as the
       filter drawer's own backdrop (#filterBackdrop). display:none by
       default is set once, outside this media query, so a desktop visitor
       never has even an empty fixed-position div sitting over the page. */
    .mobile-menu-scrim {
        display: block;
        position: fixed; inset: 0;
        background: rgba(16, 24, 40, .5);
        z-index: 890;
        opacity: 0; visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }
    .mobile-menu-scrim.show { opacity: 1; visibility: visible; }

    /* Store Management -> Menu -> Mobile menu. Same row shape as the
       category tree below it, so the two lists read as one drawer rather
       than two visually different sections stacked together. */
    .mobile-menu-links {
        border-bottom: 6px solid var(--shop-bg);
    }
    .mobile-menu-links li a {
        display: flex; align-items: center; gap: 10px;
        padding: 11px 14px;
        border-bottom: 1px solid #f0f2f4;
        font-size: 13.5px; font-weight: 600; color: var(--shop-ink);
    }
    .mobile-menu-links li a:hover { color: var(--shop-primary); }
    .mobile-menu-links i { width: 16px; text-align: center; color: var(--shop-primary); font-size: 13px; }
    /* A category link's own picture instead of a Font Awesome icon -- see
       frontEnd/layouts/partials/menu-glyph.blade.php. */
    .mobile-menu-links .menu-glyph-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

    /* A main-menu item with children (e.g. "Shop by Category") gets a
       chevron that expands its own list right there in the drawer -- same
       toggle mechanic as the category tree below it. */
    .mobile-menu-links li.has-submenu { position: relative; }
    .mobile-menu-links li.has-submenu > a { padding-right: 44px; }
    .mobile-submenu-toggle {
        position: absolute; right: 0; top: 0; bottom: 0;
        width: 44px; display: flex; align-items: center; justify-content: center;
        cursor: pointer; color: var(--shop-muted);
        border-bottom: 1px solid #f0f2f4;
    }
    .mobile-submenu-toggle i { transition: transform .2s; }
    .mobile-submenu-toggle.open i { transform: rotate(180deg); }
    .mobile-submenu li a { padding-left: 30px; font-size: 13px; font-weight: 500; }

    .menu-category-name, .menu-subcategory-name, .menu-childcategory-name {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 11px 14px;
        border-bottom: 1px solid #f0f2f4;
        font-size: 13.5px;
    }
    /* Every other .side_cat_img rule is written as '.side_cat_img img' --
       a wrapper holding the picture. Here the class is on the <img> itself,
       so none of them applied and the category thumbnail came through at its
       natural 800px, pushing the name out of the drawer. */
    .menu-category-name { justify-content: flex-start; }
    img.side_cat_img {
        width: 30px; height: 30px; flex: 0 0 auto;
        border-radius: 50%; object-fit: cover;
    }
    .menu-category-name { min-width: 0; }

    .menu-subcategory-name { padding-left: 26px; font-size: 13px; }
    .menu-childcategory-name { padding-left: 38px; font-size: 12.5px; color: var(--shop-muted); }
    /* The chevron is a sibling of the row's <a>, not a child of it, so it
       would otherwise drop onto a line of its own under the category name.
       Same treatment as .mobile-submenu-toggle above: pin it to the right of
       the row it belongs to. */
    .parent-category, .parent-subcategory { position: relative; }
    .parent-category > .menu-category-name,
    .parent-subcategory > .menu-subcategory-name { padding-right: 44px; }
    .menu-category-toggle, .menu-subcategory-toggle {
        position: absolute; right: 0; top: 0;
        width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; color: var(--shop-muted);
    }
    .menu-category-toggle i, .menu-subcategory-toggle i { transition: transform .2s; }
    .menu-category-toggle.active i, .menu-subcategory-toggle.active i { transform: rotate(180deg); }
    /* .parent-category / .parent-subcategory are the category ROWS, not the
       collapsible panels -- the panels are .second-nav / .third-nav, which
       carry their own inline display:none and are slideToggled open. Hiding
       the rows until they gained an .open class nobody ever set meant the
       drawer listed no categories at all. */
    .parent-category, .parent-subcategory { display: block; }

    .mobile-social-link { padding: 14px; }
}

/* Phone-only tweaks -- font size, card padding, floating buttons. The header
   switch above already covers the header/drawer; everything phone-specific
   that is not about the header stays scoped to an actual phone width. */
@media (max-width: 767px) {
    body { font-size: 13.5px; }

    /* Two products per row on phones. */
    .product_item { padding-left: 6px; padding-right: 6px; }
    /* Bigger than it was: the name is what a shopper scans first. */
    .pro_name { font-size: 13.5px; min-height: 38px; }
    .pro_price { font-size: 14px; }
    .cart_btn, .addcartbutton { padding: 8px 10px; font-size: 12px; }

    .section-title-name, .sec_title h2, .sec_title h3 { font-size: 15.5px; }

    .whatsapp-float { width: 46px; height: 46px; right: 12px; bottom: 68px; }
    .whatsapp-float i { font-size: 23px; }
    .scroll-top-btn { width: 40px; height: 40px; right: 12px; bottom: 12px; }
    .call_now_btn { left: 12px; bottom: 12px; padding: 9px 15px; font-size: 12.5px; }

    .cart-dialog { width: calc(100vw - 24px); right: -8px; }

    footer { margin-top: 22px; }
    .footer-top { padding: 24px 0 16px; }
}

@media (max-width: 480px) {
    .cat_img img, .side_cat_img img { width: 44px; height: 44px; }
    .cat_name { font-size: 11.5px; }
    .timer_inner { min-width: 28px; padding: 3px 6px; font-size: 12px; }
}

/* Backdrop behind the mobile drawer. */
.mobile-menu-backdrop {
    position: fixed; inset: 0;
    background: rgba(16, 24, 40, .45);
    z-index: 490;
    display: none;
}
.mobile-menu-backdrop.show { display: block; }