/* =====================================================================
   mobile.css — শুধু ফোন/ট্যাবলেটে (১০০০px বা তার কম) চলে।
   কম্পিউটারের চেহারা এতে একদম বদলায় না।
   বন্ধ করতে চাইলে header.php থেকে mobile.css আর mobile.js এর লাইন দুটো মুছুন।
   ===================================================================== */

/* কম্পিউটারে ফোনের উপাদান লুকানো */
@media (min-width: 1001px) {
    .mm-toggle, .mm-drawer, .mm-overlay, .mm-bar { display: none !important; }
}

@media (max-width: 1000px) {

    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }
    body.has-mm-bar { padding-bottom: 62px; }
    a { -webkit-tap-highlight-color: rgba(98, 37, 24, .15); }
    body img { max-width: 100%; }

    /* ---------- হেডার ---------- */
    #sticky-header-with-topbar { display: none !important; }
    #htc__header > .mainmenu__wrap { position: sticky; top: 0; z-index: 999; background: #fff; }
    /* style.css এ .container-fluid এ ১০% !important ফাঁকা আছে, ফোনে সেটা বাতিল */
    /* (header.php এ .wrapper আগেই বন্ধ হয়, তাই body দিয়ে ধরা হয়েছে) */
    body .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
    body .row { margin-left: -10px; margin-right: -10px; }
    #htc__header .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
    #htc__header .row { margin-left: 0; margin-right: 0; }
    #htc__header .menumenu__container { padding: 6px 12px !important; min-height: 0 !important; height: auto !important; }

    #htc__header .header-top {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    }
    #htc__header .header-top:before, #htc__header .header-top:after { display: none; }
    #htc__header .header-top > [class*="col-"] {
        float: none; width: auto; padding: 0; min-height: 0;
    }
    /* ১ম = লোগো, ২য় = ব্যানার, ৩য় = যোগাযোগ (ফোনে নিচের বারে যাবে) */
    #htc__header .header-top > :nth-child(1) { order: 1; }
    #htc__header .header-top > :nth-child(2) { order: 3; flex: 0 0 100%; width: 100%; margin-top: 6px; }
    #htc__header .header-top > :nth-child(3) { display: none; }
    #htc__header .header__right { display: none; }
    #htc__header .header-top, #htc__header .logo, #htc__header .logo-image { margin: 0 !important; padding: 0 !important; }
    #htc__header .logo-image { width: auto; height: auto; }
    #htc__header .logo-image a { display: block; line-height: 0; }
    #htc__header .logo-image img { width: auto; height: auto; max-height: 44px; }
    #htc__header .top-banner-image { height: auto; margin-top: 0; }
    #htc__header .top-banner-image img { width: 100%; height: auto; display: block; }

    /* জাভাস্ক্রিপ্ট চালু হলে তবেই পুরনো মেনু লুকাবে (না চললে পুরনো মেনু থাকবে) */
    html.mm-ready .header-bottom { display: none !important; }

    /* ---------- হ্যামবার্গার বাটন ---------- */
    .mm-toggle {
        order: 2; width: 44px; height: 44px; border: 0; padding: 0;
        background: transparent; position: relative; cursor: pointer;
    }
    .mm-toggle span {
        position: absolute; left: 10px; right: 10px; height: 3px;
        border-radius: 2px; background: #622518;
    }
    .mm-toggle span:nth-child(1) { top: 14px; }
    .mm-toggle span:nth-child(2) { top: 21px; }
    .mm-toggle span:nth-child(3) { top: 28px; }

    /* ---------- স্লাইড মেনু ---------- */
    .mm-overlay {
        position: fixed; top: 0; right: 0; bottom: 0; left: 0;
        background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden;
        transition: opacity .25s, visibility .25s; z-index: 100000;
    }
    .mm-drawer {
        position: fixed; top: 0; right: 0; bottom: 0; width: 84%; max-width: 330px;
        background: #fff; z-index: 100001; display: flex; flex-direction: column;
        -webkit-transform: translateX(105%); transform: translateX(105%);
        transition: transform .28s ease; box-shadow: -4px 0 16px rgba(0, 0, 0, .25);
        font-family: Georgia, serif;
    }
    html.mm-open .mm-overlay { opacity: 1; visibility: visible; }
    html.mm-open .mm-drawer { -webkit-transform: none; transform: none; }
    html.mm-lock, html.mm-lock body { overflow: hidden; }

    .mm-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 8px 0 16px; height: 52px; background: #622518; color: #fff;
        font-size: 16px; font-weight: 700; flex: 0 0 auto;
    }
    .mm-close {
        width: 44px; height: 44px; border: 0; background: transparent; color: #fff;
        font-size: 30px; line-height: 44px; cursor: pointer; padding: 0;
    }
    .mm-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    .mm-list, .mm-list ul { list-style: none; margin: 0; padding: 0; }
    .mm-list li { position: relative; border-bottom: 1px solid #eee; margin: 0; padding: 0; float: none; width: auto; }
    .mm-list a {
        display: block; padding: 14px 52px 14px 16px; color: #222;
        font-size: 15px; font-weight: 700; text-decoration: none; line-height: 1.3;
        text-transform: uppercase; letter-spacing: .3px;
    }
    .mm-list ul { display: none; background: #f7f4ee; }
    .mm-list li.mm-open > ul { display: block; }
    .mm-list ul a { padding-left: 28px; font-weight: 600; font-size: 14px; text-transform: none; letter-spacing: 0; }
    .mm-list ul ul a { padding-left: 40px; }
    .mm-list li.mm-open > a { color: #622518; }
    .mm-arrow {
        position: absolute; top: 0; right: 0; width: 52px; height: 48px;
        border: 0; background: transparent; padding: 0; cursor: pointer;
    }
    .mm-arrow:after {
        content: ""; position: absolute; left: 20px; top: 16px; width: 8px; height: 8px;
        border-right: 2px solid #622518; border-bottom: 2px solid #622518;
        -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: transform .2s;
    }
    .mm-list li.mm-open > .mm-arrow:after {
        top: 21px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);
    }
    .mm-foot { flex: 0 0 auto; padding: 12px 16px; border-top: 1px solid #eee; background: #faf8f4; font-family: Arial, sans-serif; }
    .mm-foot a { display: block; padding: 6px 0; color: #622518; font-weight: 700; font-size: 15px; text-decoration: none; }

    /* ---------- নিচের Call / WhatsApp বার ---------- */
    .mm-bar {
        position: fixed; left: 0; right: 0; bottom: 0; display: flex; z-index: 99990;
        background: #fff; box-shadow: 0 -2px 8px rgba(0, 0, 0, .18); padding: 7px 8px;
        font-family: Arial, sans-serif;
    }
    .mm-bar a {
        flex: 1 1 0; display: flex; align-items: center; justify-content: center;
        height: 44px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 15px;
        text-decoration: none;
    }
    .mm-bar a + a { margin-left: 8px; }
    .mm-bar .mm-call { background: #622518; }
    .mm-bar .mm-wa { background: #25D366; }
    .mm-bar svg { width: 20px; height: 20px; margin-right: 8px; fill: #fff; }
    body.has-mm-bar #scrollUp { bottom: 74px; }

    /* ---------- হোম/ক্যাটাগরি: প্রোডাক্টের গ্রিড ---------- */
    .section__title--2 h2 {
        font-size: 17px !important; line-height: 1.3; margin: 14px 0 4px; padding: 0 !important;
    }
    .htc__category__area .row, .htc__product__container .row, .htc__product__area--2 .row { margin-left: 0; margin-right: 0; }
    .htc__category__area .row > .col-xs-12, .htc__product__area--2 .row > .col-xs-12 { padding-left: 4px; padding-right: 4px; }

    .htc__category__area, .htc__product__container { height: auto !important; overflow: visible !important; }
    .product__list, .product__wrap {
        display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 8px; gap: 8px;
        height: auto !important; min-height: 0 !important; position: static !important;
        margin: 8px 0 0 !important; padding: 0 !important; overflow: visible !important;
    }
    .product__list:before, .product__list:after,
    .product__wrap:before, .product__wrap:after { display: none !important; content: none !important; }
    .product__list > [class*="col-"], .product__wrap > [class*="col-"] {
        float: none !important; width: auto !important; max-width: none !important; height: auto !important;
        position: static !important; -webkit-transform: none !important; transform: none !important;
        left: auto !important; top: auto !important; margin: 0 !important; padding: 0 !important;
        box-sizing: border-box; min-width: 0;
    }
    @media (min-width: 600px) {
        .product__list, .product__wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (min-width: 820px) {
        .product__list, .product__wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    .category {
        margin: 0 !important; background: #fff; border: 1px solid #e8e2d8;
        border-radius: 8px; overflow: hidden; height: 100% !important; box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }
    .ht__cat__thumb { background: #fff; height: auto !important; overflow: hidden; border-bottom: 1px solid #f1ede6; }
    .ht__cat__thumb a { display: block; }
    .ht__cat__thumb img {
        display: block; width: 100% !important; height: auto !important; max-height: none !important;
        aspect-ratio: 1 / 1; object-fit: contain; margin: 0 auto;
    }
    .fr__product__inner { padding: 6px 6px 10px !important; text-align: center; }
    .fr__product__inner .rating { line-height: 1; }
    .fr__product__inner .rating span { font-size: 15px; }
    body .fr__product__inner h4 {
        font-size: 13px !important; line-height: 1.3 !important; margin: 4px 0;
        min-height: 2.6em; display: -webkit-box !important;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    body .fr__product__inner h4 a { font-size: 13px !important; }
    .fr__pro__prize li { font-size: 12px; margin: 0 3px; }

    /* ---------- প্রোডাক্টের বিস্তারিত পেজ ---------- */
    .ht__bradcaump__wrap { height: auto !important; padding: 8px 0 !important; }
    .htc__product__details.ptb--100 { padding-top: 12px; padding-bottom: 20px; }
    .smt-40, .xmt-40 { margin-top: 14px !important; }
    .portfolio-full-image.tab-content > .active { width: 100% !important; height: auto !important; }
    .portfolio-full-image.tab-content .tab-pane img { width: 100%; height: auto; }
    .product__small__images {
        position: static !important; -webkit-transform: none !important; transform: none !important;
        left: auto !important; margin-top: 10px;
    }
    .ht__product__dtl h2 { font-size: 18px; line-height: 1.35; }
    .ht__pro__details__content { padding-bottom: 20px !important; }
    .pro__tab__content__inner { overflow-x: auto; word-wrap: break-word; }
    .pro__tab__content__inner img { max-width: 100% !important; height: auto !important; }
    .pro__tab__content__inner iframe, .pro__tab__content__inner video { max-width: 100%; }
    .htc__product__area--2.pb--100 { padding-bottom: 24px; }

    /* ---------- সার্চ বক্স (যেসব পেজে দেখায়) ---------- */
    .col-md-12.search { width: 100% !important; margin: 0 !important; }
}