/* ===== Default (Desktop) ===== */
.whb-hidden-lg { display: none; }
.whb-visible-lg { display: flex; }

/* ===== Tablet & Mobile (≤1024px) ===== */
@media (max-width: 1024px) {
    .whb-visible-lg { display: none !important; }
    .whb-hidden-lg  { display: flex !important; gap: 12px; }
    .whb-hidden-mobile { display: none !important; }

    .hero-row { grid-template-columns: 1fr; }
    .banner-triple { grid-template-columns: repeat(2, 1fr); }
    .featured-row { grid-template-columns: 1fr; }
    .featured-side { flex-direction: row; justify-content: center; }
    .gift-carousel { grid-template-columns: repeat(3, 1fr); }
    .blog-carousel { grid-template-columns: repeat(2, 1fr); }
    .footer-widgets { grid-template-columns: repeat(2, 1fr); }
    .wd-toolbar { display: flex; }
    body { padding-bottom: 60px; }

    /* موبایل: هدر */
    .whb-top-bar { display: none !important; }
    .whb-header-bottom { display: none !important; }
}

/* ===== Small Mobile (≤767px) ===== */
@media (max-width: 767px) {
    .banner-triple { grid-template-columns: 1fr; }
    .gift-carousel { grid-template-columns: repeat(2, 1fr); }
    .blog-carousel { grid-template-columns: 1fr; }
    .footer-widgets { grid-template-columns: 1fr 1fr 1fr; }
    .wd-copyrights .container { flex-direction: column; gap: 10px; text-align: center; }
    .wd-quickview-content { grid-template-columns: 1fr; }
    .section-title { font-size: 18px; }
}
/* ===== FIX: Container width on mobile ===== */
@media (max-width: 1640px) {
    :root { --wd-container-w: 100%; }
    .container { max-width: 100% !important; }
}

/* ============================================
   Mobile Menu (off-canvas)
   ============================================ */
@media (max-width: 1024px) {

    .mobile-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 290px;
        max-width: 85vw;
        background: #fff;
        box-shadow: -4px 0 20px rgba(0,0,0,.15);
        z-index: 10000;
        transform: translateX(100%);
        transition: transform .3s ease;
        overflow-y: auto;
        padding: 0 0 20px;
        display: block !important;
    }

    .mobile-nav.open {
        transform: translateX(0);
    }

    .mobile-nav .wd-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        border-bottom: 1px solid #eee;
        background: #fafbfc;
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .mobile-nav .wd-heading .title {
        font-size: 15px;
        font-weight: 700;
        color: #222;
    }
    .mobile-nav .close-btn {
        background: transparent;
        border: none;
        font-size: 22px;
        line-height: 1;
        color: #666;
        cursor: pointer;
        padding: 4px 8px;
    }

    .mobile-nav .wd-search-form {
        display: flex;
        padding: 12px 18px;
        gap: 6px;
        border-bottom: 1px solid #f0f0f0;
    }
    .mobile-nav .wd-search-form input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-family: inherit;
        font-size: 13px;
    }
    .mobile-nav .wd-search-form .searchsubmit {
        padding: 8px 14px;
        background: #d32f2f;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-nav .mobile-menu {
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .mobile-nav .mobile-menu a {
        padding: 11px 18px;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        border-right: 3px solid transparent;
        transition: background .15s, color .15s;
    }
    .mobile-nav .mobile-menu a:hover,
    .mobile-nav .mobile-menu a:active {
        background: #fafafa;
        color: #d32f2f;
        border-right-color: #d32f2f;
    }

    .mobile-nav .mobile-categories {
        padding: 14px 18px;
    }
    .mobile-nav .mobile-categories h4 {
        font-size: 13px;
        font-weight: 700;
        color: #222;
        margin: 0 0 10px;
    }
    .mobile-nav .mobile-categories-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mobile-nav .mobile-categories-list li {
        border-bottom: 1px solid #f5f5f5;
    }
    .mobile-nav .mobile-categories-list a {
        display: block;
        padding: 9px 0;
        color: #444;
        text-decoration: none;
        font-size: 13px;
    }
    .mobile-nav .mobile-categories-list a:hover {
        color: #d32f2f;
    }
}

/* overlay */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
    pointer-events: none;
}
.mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* روی دسکتاپ مخفی */
@media (min-width: 1025px) {
    .mobile-nav {
        display: none !important;
    }
    .mobile-nav-overlay {
        display: none !important;
    }
}