/* ===== 1.5.27 — mobile hardening + optional fixed bottom navigation ===== */
.ts-mobile-bottom-nav,.ts-mobile-nav-layer{display:none}

@media(max-width:767px){
  html,body{max-width:100%;overflow-x:clip}
  body.tecno-shafagh{font-size:14px}
  .ts-container,.ts-layout-wide .ts-container,.ts-layout-boxed .ts-container,.ts-layout-fullscreen .ts-container{
    width:auto!important;
    max-width:none!important;
    margin-inline:max(var(--ts-edge-gap-mobile),8px)!important;
  }
  .ts-main-content{min-width:0;overflow-x:clip}
  .ts-home-slot{min-width:0;margin-top:12px}
  .ts-position,.ts-position-module{min-width:0;max-width:100%}

  /* Mobile header remains compact, searchable and touch friendly. */
  .ts-header-mini{display:none}
  .ts-header-main{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;min-height:auto!important;padding-block:10px}
  .ts-brand{grid-column:1;grid-row:1;justify-content:flex-start;min-width:0}
  .ts-site-logo,.ts-brand .custom-logo{max-width:var(--ts-logo-mobile-width)!important;max-height:var(--ts-logo-mobile-max-height)!important}
  .ts-header-actions{grid-column:2;grid-row:1;margin:0!important;gap:5px!important;justify-content:flex-end!important}
  .ts-header-actions .ts-action{font-size:10px;padding:6px 7px}
  .ts-search{grid-column:1/-1;grid-row:2;width:100%}
  .ts-search input[type="search"]{height:43px;font-size:16px;padding-inline:12px 76px}
  .ts-search button{height:35px;padding-inline:13px}
  .ts-header-nav{min-height:42px;overflow:hidden}
  .ts-mobile-menu-button{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding-inline:4px}
  .ts-primary-nav{overflow-x:auto;scrollbar-width:none;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .ts-primary-nav::-webkit-scrollbar{display:none}
  .ts-primary-nav>ul,.ts-primary-nav .ts-dynamic-menu>ul,.ts-layout-nav-position .ts-dynamic-menu>ul{flex-wrap:nowrap!important;gap:14px!important;min-width:max-content}

  /* Section surfaces must never leak outside the mobile viewport. */
  .ts-banners,.ts-banner,.ts-hero-slider,.ts-posts,.ts-style-service-strip,.ts-content-card,.ts-woocommerce-shell{max-width:100%;min-width:0}
  .ts-banners-banner-grid-2,.ts-banners-banner-grid-3,.ts-banners-banner-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .ts-banners-banner-grid-3 .ts-banner,.ts-banners-banner-grid-2 .ts-banner,.ts-banners-banner-grid-4 .ts-banner{aspect-ratio:auto;min-height:96px}
  .ts-banners-banner-grid-3 .ts-banner img,.ts-banners-banner-grid-2 .ts-banner img,.ts-banners-banner-grid-4 .ts-banner img{min-height:96px;object-fit:cover}
  .ts-banners-wide-banner .ts-banner{aspect-ratio:auto;min-height:92px}
  .ts-banners-wide-banner .ts-banner img{min-height:92px;object-fit:cover}
  .ts-hero-slider{min-height:210px!important}
  .ts-section-head{gap:10px;align-items:center}
  .ts-section-head h2{font-size:15px!important;line-height:1.65}
  .ts-section-head p{font-size:10px}

  /* All standard product sections in all visual layouts become a strict 2-column grid.
     Deal/special carousels intentionally keep their horizontal scrolling behavior. */
  .ts-product-display-product-carousel.ts-carousel,
  .ts-product-display-digi-product-carousel.ts-carousel,
  .ts-product-display-digi-product-panel.ts-carousel,
  .ts-product-display-medical-product-carousel.ts-carousel{
    overflow:visible!important;
  }
  .ts-product-display-product-carousel.ts-carousel>.ts-carousel-btn,
  .ts-product-display-digi-product-carousel.ts-carousel>.ts-carousel-btn,
  .ts-product-display-digi-product-panel.ts-carousel>.ts-carousel-btn,
  .ts-product-display-medical-product-carousel.ts-carousel>.ts-carousel-btn{
    display:none!important;
  }
  .ts-product-display-product-carousel.ts-carousel .ts-products,
  .ts-product-display-digi-product-carousel.ts-carousel .ts-products,
  .ts-product-display-digi-product-panel.ts-carousel .ts-products,
  .ts-product-display-medical-product-carousel.ts-carousel .ts-products{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    width:100%!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    gap:9px!important;
    padding:0!important;
  }
  .ts-product-display-product-carousel.ts-carousel .ts-product-card,
  .ts-product-display-digi-product-carousel.ts-carousel .ts-product-card,
  .ts-product-display-digi-product-panel.ts-carousel .ts-product-card,
  .ts-product-display-medical-product-carousel.ts-carousel .ts-product-card{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:initial!important;
    margin:0!important;
  }
  .ts-product-card{padding:9px!important;border-radius:14px!important}
  .ts-product-image{aspect-ratio:1/1;margin-bottom:7px}
  .ts-product-image img{max-height:132px;max-width:100%}
  .ts-product-card h3{font-size:10.5px!important;line-height:1.65;height:35px;margin-bottom:7px}
  .ts-product-meta{align-items:flex-end;gap:4px;flex-wrap:wrap}
  .ts-price{font-size:10px}

  /* Native WooCommerce archives/shop/category/search: two columns everywhere. */
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce .products,
  .woocommerce-page .products{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin:0!important;
  }
  .woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    float:none!important;
    clear:none!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:9px!important;
  }
  .woocommerce ul.products li.product a img{margin-bottom:8px!important}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:11px!important;line-height:1.65;padding:0!important;min-height:36px}
  .woocommerce ul.products li.product .price{font-size:11px!important}
  .woocommerce ul.products li.product .button{width:100%;text-align:center;font-size:10px;padding:9px 4px!important;margin-top:7px!important}

  /* Category carousels stay horizontal and touch-friendly. */
  .ts-category-carousel{min-width:0;overflow:hidden}
  .ts-category-carousel .ts-categories{max-width:100%;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch}
  .ts-category-carousel .ts-category-card{scroll-snap-align:center}

  /* Posts, services and footer reflow cleanly. */
  .ts-post-list{grid-auto-columns:82%;gap:10px}
  .ts-service-items,.ts-style-service-strip>div,.ts-style-service-strip>ul{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  .ts-style-service-strip p{font-size:10px;text-align:center;padding:8px 4px;background:rgba(255,255,255,.65);border-radius:10px}
  .ts-footer-grid,.ts-digi-footer-grid{grid-template-columns:1fr!important;gap:12px!important;padding-block:18px!important}
  .ts-footer-grid>div{min-width:0;padding:12px;border-radius:14px;background:rgba(255,255,255,.6)}
  .ts-digi-footer-meta{display:grid!important;grid-template-columns:1fr!important;gap:10px}
  .ts-content-layout,.ts-woocommerce-shell{padding-block:12px}
  .ts-content-card{padding:14px;border-radius:16px}
  table{max-width:100%}
  .woocommerce table.shop_table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .woocommerce form .form-row{float:none!important;width:100%!important}

  /* Optional fixed mobile navigation. */
  body.ts-mobile-bottom-nav-enabled{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  body.ts-mobile-bottom-nav-enabled .ts-site-footer{margin-bottom:0}
  .ts-mobile-bottom-nav{
    position:fixed;right:8px;left:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:10020;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;
    min-height:58px;padding:5px;background:rgba(255,255,255,.96);border:1px solid rgba(214,222,232,.96);
    border-radius:18px;box-shadow:0 14px 38px rgba(18,36,58,.18);backdrop-filter:blur(14px);direction:rtl
  }
  .ts-mobile-nav-item{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-width:0;min-height:48px;border:0;background:transparent;color:#647184;border-radius:13px;padding:3px 2px;
    font:inherit;font-size:9px;line-height:1.35;cursor:pointer
  }
  .ts-mobile-nav-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .ts-mobile-nav-item.is-active,.ts-mobile-nav-item[aria-expanded="true"]{color:var(--ts-accent);background:color-mix(in srgb,var(--ts-accent) 9%,white)}
  .ts-mobile-nav-item span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ts-mobile-nav-cart-count{position:absolute;top:1px;right:50%;translate:15px 0;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:20px;background:var(--ts-accent);color:#fff;font-size:8px;font-weight:800;border:2px solid #fff}
  .ts-mobile-nav-cart-count[hidden]{display:none!important}

  .ts-mobile-nav-layer{display:block;position:fixed;inset:0;z-index:10010;pointer-events:none;visibility:hidden}
  .ts-mobile-nav-layer.is-open{pointer-events:auto;visibility:visible}
  .ts-mobile-nav-backdrop{position:absolute;inset:0;border:0;background:rgba(15,27,42,.38);opacity:0;transition:opacity .2s ease}
  .ts-mobile-nav-layer.is-open .ts-mobile-nav-backdrop{opacity:1}
  .ts-mobile-category-drawer{
    position:absolute;right:8px;left:8px;bottom:calc(74px + env(safe-area-inset-bottom,0px));max-height:min(62vh,520px);
    overflow:hidden;background:#fff;border:1px solid #dfe6ee;border-radius:20px;box-shadow:0 18px 48px rgba(18,36,58,.22);
    transform:translateY(18px);opacity:0;transition:transform .2s ease,opacity .2s ease;direction:rtl
  }
  .ts-mobile-nav-layer.is-open .ts-mobile-category-drawer{transform:none;opacity:1}
  .ts-mobile-category-head{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #edf1f5;color:#22344b}
  .ts-mobile-category-close{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:12px;background:#f4f7fa;color:#536276}
  .ts-mobile-category-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .ts-mobile-category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;max-height:calc(min(62vh,520px) - 52px);overflow-y:auto;overscroll-behavior:contain}
  .ts-mobile-category-list a{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:48px;padding:9px 11px;border:1px solid #e7edf3;border-radius:13px;background:#fafcfe;font-size:10px;font-weight:700;color:#2d4056}
  .ts-mobile-category-list small{color:#8592a2;font-size:9px;font-weight:500}
}

@media(max-width:380px){
  .ts-mobile-bottom-nav{right:5px;left:5px;padding-inline:3px}
  .ts-mobile-nav-item{font-size:8.5px}
  .ts-mobile-nav-item svg{width:20px;height:20px}
  .ts-product-card{padding:7px!important}
  .woocommerce ul.products,.woocommerce-page ul.products,.woocommerce .products,.woocommerce-page .products{gap:7px!important}
  .ts-banners-banner-grid-2,.ts-banners-banner-grid-3,.ts-banners-banner-grid-4{grid-template-columns:1fr!important}
}

@media(max-width:767px){
  /* WooCommerce utility pages: remove desktop floats and keep every control usable. */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading{
    float:none!important;width:100%!important;max-width:100%!important;margin-inline:0!important
  }
  .woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
  .woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar{display:none}
  .woocommerce-account .woocommerce-MyAccount-navigation ul{display:flex;gap:7px;min-width:max-content;margin:0;padding:4px;list-style:none}
  .woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:8px 11px;border:1px solid #e2e8ef;border-radius:11px;background:#fff;font-size:10px;white-space:nowrap}
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{border-color:var(--ts-accent);color:var(--ts-accent)}
  .woocommerce-checkout .col2-set,.woocommerce .col2-set{display:grid!important;grid-template-columns:1fr!important;gap:12px}
  .woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2,.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{float:none!important;width:100%!important;margin:0!important}
  .woocommerce-cart .cart-collaterals .cart_totals,.woocommerce-cart .cart-collaterals .cross-sells{float:none!important;width:100%!important}
  .woocommerce .quantity .qty{min-height:38px;max-width:72px}
  .woocommerce input.input-text,.woocommerce select,.woocommerce textarea{max-width:100%;font-size:16px}
  .woocommerce-message,.woocommerce-info,.woocommerce-error{font-size:11px;line-height:1.8;padding:12px 38px 12px 12px!important}
  .woocommerce div.product div.images,.woocommerce div.product div.summary{float:none!important;width:100%!important;max-width:100%!important}
  .woocommerce div.product .woocommerce-tabs ul.tabs{display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:0!important}
  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
  .woocommerce div.product .woocommerce-tabs ul.tabs li{flex:0 0 auto;margin:0 0 0 5px!important}
}

/* ===== Shafaq 1.5.27 — reliable mobile header menu ===== */
@media(max-width:767px){
  .ts-header-nav-wrap{position:relative!important;overflow:visible!important;z-index:120!important}
  .ts-header-nav{
    position:relative!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    width:auto!important;
    min-height:46px!important;
    overflow:visible!important;
  }
  .ts-mobile-menu-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:44px!important;
    padding:7px 10px!important;
    border:0!important;
    background:transparent!important;
    color:inherit!important;
    cursor:pointer!important;
    position:relative!important;
    z-index:2!important;
  }
  .ts-primary-nav{
    display:none!important;
    position:static!important;
    inset:auto!important;
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    margin:0 0 9px!important;
    padding:8px!important;
    background:#fff!important;
    border:1px solid #e2e9ef!important;
    border-radius:14px!important;
    box-shadow:0 12px 30px rgba(15,40,62,.14)!important;
    overflow:visible!important;
    white-space:normal!important;
  }
  .ts-primary-nav.is-open{display:block!important}
  .ts-primary-nav ul,
  .ts-primary-nav>ul,
  .ts-primary-nav .ts-dynamic-menu>ul,
  .ts-layout-nav-position .ts-dynamic-menu>ul{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  .ts-primary-nav li{display:block!important;width:100%!important;min-width:0!important}
  .ts-primary-nav a{
    display:flex!important;
    align-items:center!important;
    min-height:40px!important;
    width:100%!important;
    padding:8px 10px!important;
    border-radius:10px!important;
    color:#203a50!important;
    background:#f8fbfd!important;
    font-size:12px!important;
    line-height:1.7!important;
  }
  .ts-primary-nav .sub-menu{
    position:static!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    margin:4px 0 0!important;
    padding:4px 12px 4px 0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .ts-primary-nav .sub-menu a{min-height:36px!important;background:#fff!important;border:1px solid #edf1f4!important;font-size:11px!important}
}