@media (max-width: 767px){

  .mb-shop-mobile{
    padding: 12px 12px 24px;
    background: #f6f8fc;
  }

  /* =========================
     SEARCH (match mock)
     ========================= */
  .mb-shop-mobile__search{ margin: 6px 0 12px; }
  .mb-shop-mobile__search label{ display:none !important; }

  .mb-shop-mobile__search .mb-search{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
  }

  /* left icon (inside pill) */
  .mb-shop-mobile__search .mb-search__icon{
    width:44px;
    height:44px;
    border-radius:14px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    flex:0 0 auto;
    color:#111;
  }

  .mb-shop-mobile__search .mb-search__field{
    flex:1;
    width:100%;
    height:44px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.10);
    background:#fff;
    outline:none;
  }

  /* remove left icon spacing (we removed left icon from HTML) */
.mb-shop-mobile__search .mb-search__field{
  padding-left: 16px !important;
}


  /* right submit (icon only) */
  .mb-shop-mobile__search .mb-search__submit{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:14px;
    border:0;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    color:#111;
  }

  /* =========================
     QUICK CATEGORIES (swipe tiles)
     ========================= */
  .mb-shop-mobile__quickcats{
    display:flex;
    gap:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 2px 12px;
    margin: 10px 0 12px;
    scroll-snap-type: x mandatory;
  }
  .mb-shop-mobile__quickcats::-webkit-scrollbar{ display:none; }

  .mb-shop-mobile__quickcats .mb-qc{
    flex:0 0 auto;
    width:82px;
    height:86px;
    border-radius:16px;
    background:#fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    scroll-snap-align:start;
    text-decoration:none !important;
    color:#111 !important;
  }

  .mb-shop-mobile__quickcats .mb-qc-ic{
    width:42px;
    height:42px;
    border-radius:14px;
    background:#f3f5f7;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .mb-shop-mobile__quickcats .mb-qc-ic::after{
    content:"";
    width:22px;
    height:22px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:22px 22px;
    opacity:.95;
  }

  .mb-shop-mobile__quickcats .mb-qc-txt{
    font-weight:800;
    font-size:12px;
    line-height:1;
  }

  /* Icons per category (uses mb-qc--{slug} on the <a>) */
  .mb-qc--lab .mb-qc-ic::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231aa0d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v6l-5.5 9.5A4 4 0 0 0 8 22h8a4 4 0 0 0 3.5-4.5L14 8V2'/%3E%3Cpath d='M8 16h8'/%3E%3C/svg%3E");
  }
  .mb-qc--surgical .mb-qc-ic::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 20 4'/%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3C/svg%3E");
  }
  .mb-qc--diagnosis .mb-qc-ic::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231aa0d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6c-2 0-3.5 1-4.5 2.5S13 12 12 12s-2.5-2-3.5-3.5S6 6 4 6'/%3E%3Cpath d='M4 18c2 0 3.5-1 4.5-2.5S11 12 12 12s2.5 2 3.5 3.5S18 18 20 18'/%3E%3Cpath d='M12 2v20'/%3E%3C/svg%3E");
  }
  .mb-qc--consumable .mb-qc-ic::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2v6l6 6-6 6v2H10v-2L4 14l6-6V2z'/%3E%3C/svg%3E");
  }

  /* HERO — match mockup text rhythm */
.mb-shop-mobile__hero a{
  display:block;
  padding:18px;
  border-radius:18px;
  background:#1ea7e1;
  color:#fff;
  text-decoration:none;
  margin: 8px 0 16px;
  line-height:1.35;
}

.mb-shop-mobile__hero a > span{
  display:block;
  font-size:22px;
  font-weight:900;
  line-height:1.05;
  margin:0 0 6px;
}

/* visually split "Connect with 1000+" and "Importers" */
.mb-shop-mobile__hero a > span::after{
  white-space:pre;
  display:block;
  font-size:22px;
  font-weight:900;
  line-height:1.05;
}

/* CTA button */
.mb-hero-btn{
  display:inline-block;
  margin-top:12px;
  padding:10px 16px;
  background:#fff;
  color:#111;
  border-radius:999px;
  font-style:normal;
  font-weight:800;
}
/* =========================
 4 COLOR TILES (bottom)
 ========================= */
.mb-tiles{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 16px 0 -62px !important;
}

.mb-tiles .mb-tile{
  display:block !important;
  border-radius: 18px !important;
  padding: 16px !important;
  min-height: 92px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
  line-height: 1.15 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtext */
.mb-tiles .mb-tile small{
  display:block !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  opacity: .92 !important;
}

/* Background colors */
.mb-tile--blue{ background:#2563eb !important; }
.mb-tile--green{ background:#16a34a !important; }
.mb-tile--orange{ background:#f97316 !important; }
.mb-tile--purple{ background:#9333ea !important; }

/* Soft highlight bubble (like mockup) */
.mb-tiles .mb-tile::after{
  content:"";
  position:absolute;
  right:-28px;
  top:-28px;
  width:120px;
  height:120px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
}

/* tighten top spacing */
.mb-shop-mobile__search{ margin-bottom: 10px !important; }
.mb-shop-mobile__quickcats{ margin: 6px 0 10px !important; padding-bottom: 10px !important; }
/* hero headline + subtext spacing */
.mb-shop-mobile__hero a{ padding: 16px !important; }
.mb-shop-mobile__hero a > span{
font-size: 20px !important;
line-height: 1.12 !important;
margin-bottom: 6px !important;
}
.mb-shop-mobile__hero a{
font-size: 14px !important;
line-height: 1.3 !important;
}
.mb-hero-btn{ margin-top: 10px !important; }
/* make product tiles denser (mobile) */
.mb-hscroll .products .product,
.mb-grid .products .product{
border-radius: 16px !important;
overflow: hidden;
}

/* image area height (prevents super tall cards) */
.mb-hscroll .products .product img,
.mb-grid .products .product img{
height: 120px !important;
object-fit: cover !important;
}

/* title + price spacing */
.mb-hscroll .products .product .woocommerce-loop-product__title,
.mb-grid .products .product .woocommerce-loop-product__title{
font-size: 13px !important;
line-height: 1.2 !important;
margin: 8px 10px 6px !important;
}

.mb-hscroll .products .product .price,
.mb-grid .products .product .price{
margin: 0 10px 10px !important;
font-size: 13px !important;
}

/* button less dominant */
.mb-hscroll .products .product a.button,
.mb-grid .products .product a.button{
margin: 0 10px 12px !important;
padding: 8px 10px !important;
border-radius: 12px !important;
font-size: 12px !important;
}
.mb-shop-mobile .mb-sec__head h2{
  margin: 14px 0 10px !important;
}
.mb-tiles .mb-tile{
  min-height: 104px !important;
  padding: 18px !important;
}
.mb-tiles .mb-tile{
  font-size: 15px !important;
}
.mb-tiles .mb-tile small{
  font-size: 12px !important;
  margin-top: 10px !important;
}
  /* =========================================================
   Meddbee Mobile Footer (Dark + 2 columns)
   Targets your custom footer HTML only
   ========================================================= */

  .mb-footer-mobile{
    background: #071b3a;            /* dark navy */
    color: #e6eefc;
    padding: 22px 16px 18px;
  }

  .mb-footer-mobile-inner{
    max-width: 520px;
    margin: 0 auto;
  }

  /* Brand */
  .mb-footer-brand-title{
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0 0 6px;
    color: #ffffff;
  }
  .mb-footer-brand-sub{
    font-size: 13px;
    line-height: 1.4;
    opacity: .9;
    margin: 0 0 16px;
  }

  /* Two columns */
  .mb-footer-cols{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-top: 6px;
  }

  .mb-footer-col-title{
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px;
  }

  /* Links (remove bullets + default blue) */
  .mb-footer-links{
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .mb-footer-links li{
    margin: 0 0 8px;
  }
  .mb-footer-links a{
    color: rgba(230,238,252,.92) !important;
    text-decoration: none !important;
    font-size: 13px;
    line-height: 1.35;
    display: inline-block;
  }
  .mb-footer-links a:hover,
  .mb-footer-links a:focus{
    color: #ffffff !important;
    text-decoration: underline !important;
  }

  /* Divider */
  .mb-footer-divider{
    height: 1px;
    background: rgba(255,255,255,.14);
    margin: 16px 0 14px;
  }

  /* Social row */
  .mb-footer-social{
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 12px;
  }
  .mb-footer-social .mb-social{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.10);
    color: #ffffff !important;
    text-decoration: none !important;
  }
  .mb-footer-social .mb-social i{
    font-size: 16px;
    line-height: 1;
  }

  /* Copyright */
  .mb-footer-copy{
    font-size: 12px;
    opacity: .85;
  }
/* Quick category icon holder */
.mb-shop-mobile__quickcats .mb-qc-ic{
  width:56px;
  height:56px;
  border-radius:16px;
  background:#fff;
  box-shadow: 0 10px 18px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 10px;
}

/* Quick category SVG sizing */
.mb-shop-mobile__quickcats .mb-qc-ic img{
  width:30px;
  height:30px;
  object-fit:contain;
  display:block;
}
/* Kill any old quickcat icon injection (pseudo-elements / backgrounds) */
.mb-shop-mobile__quickcats .mb-qc-ic::before,
.mb-shop-mobile__quickcats .mb-qc-ic::after{
  content: none !important;
  display: none !important;
}

.mb-shop-mobile__quickcats .mb-qc-ic{
  background-image: none !important;
}

/* ==================================================
   QUICK CATEGORIES: move text outside the white box
   ================================================== */

/* The <a> should be "transparent container", not a box */
.mb-shop-mobile__quickcats .mb-qc{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  text-decoration: none;
}

/* Some themes put pseudo backgrounds on the <a> */
.mb-shop-mobile__quickcats .mb-qc::before,
.mb-shop-mobile__quickcats .mb-qc::after{
  content: none !important;
  display: none !important;
}

/* The icon holder becomes the ONLY white box */
.mb-shop-mobile__quickcats .mb-qc-ic{
  width: 78px !important;
  height: 78px !important;
  border-radius: 22px !important;

  background: #fff !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 0 10px 0 !important;
  padding: 0 !important;

  background-image: none !important;
}

/* Kill any old injected icon */
.mb-shop-mobile__quickcats .mb-qc-ic::before,
.mb-shop-mobile__quickcats .mb-qc-ic::after{
  content: none !important;
  display: none !important;
}

/* Icon size */
.mb-shop-mobile__quickcats .mb-qc-ic img{
  width: 34px !important;
  height: 34px !important;
  display: block;
  object-fit: contain;
}

/* Text BELOW the box (no background) */
.mb-shop-mobile__quickcats .mb-qc-txt{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  display: block !important;
  text-align: center;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;

  color: #0F172A !important;
}


}