@media (max-width: 767px){

:root{
    --mb-blue: #4fa9e6;
    --mb-shadow: 0 10px 24px rgba(0,0,0,.12);
  }
  
  /* ==========================================================
     MOBILE HOME ONLY (single source of truth)
     ========================================================== */

  
    /* 0) Safety: stop accidental horizontal clipping */
    body.home,
    body.home #page,
    body.home .site,
    body.home .site-content{
      overflow-x: hidden !important;
    }
  
    /* 1) Hide theme header ONLY on mobile home */
    body.home header#site-header,
    body.home #site-header,
    body.home .site-header,
    body.home .header-mobile,
    body.home .mobile-header,
    body.home .mf-mobile-header,
    body.home .martfury-header-mobile,
    body.home .martfury-header,
    body.home .header-main,
    body.home .header-content,
    body.home .header-layout,
    body.home .topbar-mobile{
      display:none !important;
      height:0 !important;
      overflow:hidden !important;
    }
  
    body.home{
      padding-top:0 !important;
      margin-top:0 !important;
    }
  
    /* ==========================================================
       MOCK HEADER
       ========================================================== */
    body.home .mb-mock-header{
      background:#fff !important;
      padding: 14px 18px !important; /* final */
      width:100% !important;
      max-width:100% !important;
    }
  
    /* Top row: logo + icons (prevents cropping) */
    body.home .mb-mock-top{
      display:grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items:center !important;
      column-gap:12px !important;
      min-height:70px !important;
    }
  
    /* Logo area must be allowed to shrink */
    body.home .mb-logo{
      display:flex !important;
      align-items:center !important;
      gap:0px !important;
      min-width:0 !important;
      max-width:100% !important;
      text-decoration:none !important;
      line-height:1 !important;
      white-space:nowrap;
    }
  

  
    /* If using icon + text logo (optional) */
    body.home .mb-logo-icon{
      width:63px;
      height:67px;
      object-fit:contain;
      display:block;
      position: relative;
        bottom: 10px;
    }
  
    body.home .mb-logo-text{
      font-size:33px;
      font-weight:600;
      line-height:1;
      letter-spacing:-0.6px;
      color:var(--mb-blue);
      position: relative;
      top: 1px;
    }
  
    /* Top-right icons */
    body.home .mb-top-icons{
      display:flex !important;
      align-items:center !important;
      justify-self:end !important;
      gap:0px !important;
    }
  
    body.home .mb-icon{
      position:relative;
      width:40px !important;
      height:40px !important;
      border-radius:12px !important;
      display:flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      color:#374151;
      top: 2px;
    }
  
    body.home .mb-icon svg{
      width:26px !important;
      height:26px !important;
      stroke: rgba(17,24,39,.75) !important;
      stroke-width: 2.25 !important;
    }
  
    body.home .mb-badge{
      position:absolute;
      top:-15px !important;
      right:-5px !important;
      min-width:24px !important;
      height:24px !important;
      border-radius:999px;
      background:#f28b2a;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:13px;
      font-weight:800;
      line-height:1;
      padding:0 6px;
    }
  
    /* ==========================================================
       SEARCH (button inside the field)
       ========================================================== */
    body.home .mb-mock-search{
      margin-top:10px !important;
      padding:0 !important;
    }
  
    body.home .mb-search-form{
      position:relative !important;
      display:block !important;
      background:transparent !important;
      padding:0 !important;
    }
  
    body.home .mb-search-input{
      width:100% !important;
      height:66px !important;
      border-radius:18px !important;
      border: 2px solid rgba(17,24,39,.12) !important;
      background:#fff !important;
  
      padding: 0 86px 0 18px !important; /* final */
      font-size:20px !important;         /* final */
      color:#111827 !important;
      outline:none !important;
      box-shadow:none !important;
    }
  
    body.home .mb-search-input::placeholder{
      font-size:20px !important;
      color: rgba(17,24,39,.32) !important;
    }
  
    body.home .mb-search-input:focus{
      border-color: rgba(79,169,230,.55) !important;
    }
  
    body.home .mb-search-btn{
      position:absolute !important;
      right:10px !important;
      top:50% !important;
      transform:translateY(-50%) !important;
  
      width:72px !important;  /* final */
      height:52px !important;
      border-radius:16px !important;
  
      background:var(--mb-blue) !important;
      border:0 !important;
      padding:0 !important;
  
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
  
      outline:none !important;
      box-shadow:none !important;
    }
  
    body.home .mb-search-btn svg,
    body.home .mb-search-svg{
      width:26px !important;
      height:26px !important;
      fill:none !important;
      stroke:#fff !important;
      stroke-width:2.6 !important;
      stroke-linecap:round !important;
      stroke-linejoin:round !important;
      display:block !important;
    }
  
    /* ==========================================================
       HERO (Figma)
       ========================================================== */
    body.home .mb-hero{
      background:var(--mb-blue) !important;
      width:100% !important;
      max-width:100% !important;
      margin-top:0 !important;
      padding:28px 16px 34px !important;
      box-shadow: inset 0 -30px 60px rgba(0,0,0,.12);
    }
  
    body.home .mb-hero-inner{
      max-width:560px;
      margin:0 auto;
    }
  
    body.home .mb-hero h1{
      color:#fff !important;
      font-weight:800 !important;
      letter-spacing:-0.6px !important;
      font-size:clamp(30px, 8.8vw, 44px) !important;
      line-height:1.05 !important;
      margin:8px 0 14px !important;
    }
  
    body.home .mb-hero p{
      color:rgba(255,255,255,.80) !important;
      font-weight:500;
      font-size:clamp(16px, 5.2vw, 22px) !important;
      line-height:1.3 !important;
      margin:0 0 24px !important;
    }
  
    /* ==========================================================
       CTA CARDS (fit fix)
       ========================================================== */
    body.home .mb-hero-ctas{
      display:grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap:18px !important;
      width:100% !important;
    }
  
    body.home .mb-cta{
      min-width:0 !important;
      box-sizing:border-box !important;
      background:#fff !important;
      border-radius:18px !important;
      padding:18px 14px !important;
      display:flex !important;
      align-items:center !important;
      gap:14px !important;
      text-decoration:none !important;
      box-shadow: var(--mb-shadow) !important;
    }
  
    body.home .mb-cta-ico{
      width:44px !important;
      height:44px !important;
      border-radius:12px !important;
      background: transparent !important;
      box-shadow:none !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      flex:0 0 auto !important;
    }
  
    body.home .mb-cta-ico svg{
      width:24px !important;
      height:24px !important;
      fill:none !important;
      stroke:#0f172a !important;
      stroke-width:2 !important;
      stroke-linecap:round !important;
      stroke-linejoin:round !important;
    }
  
    body.home .mb-cta-text{
      min-width:0 !important;
      color:#0f172a !important;
      font-weight:800 !important;
      line-height:1.05 !important;
      letter-spacing:-0.2px;
      font-size: clamp(16px, 5.2vw, 26px) !important;
    }
  
    body.home .mb-cta-text br{ display:block; }
  
    /* Extra-tight phones */
    @media (max-width: 380px){
      body.home .mb-hero-ctas{ gap:14px !important; }
      body.home .mb-cta{ padding:16px 12px !important; gap:12px !important; }
      body.home .mb-cta-ico{ width:40px !important; height:40px !important; }
    }
  
  
  /* Desktop safety: if markup exists, hide it */
  @media (min-width: 992px){
    body.home .mb-mock-header,
    body.home .mb-hero{ display:none !important; }
  }
  


  /********* Product Tile CSS  *******/
  /* ===== Meddbee Woo Product Tile ===== */
/* =========================================================
   Meddbee – Woo Product Tile (MOBILE ONLY)
   Affects only: Woo product grid items with class mb-product-card
   Desktop remains unchanged.
   ========================================================= */



    /* Card (scope to Woo grid only) */
    .woocommerce ul.products li.product.mb-product-card{
      position: relative;
      background: #fff;
      border-radius: 20px;
      padding: 16px !important;
      box-shadow: 0 10px 24px rgba(0,0,0,.08);
      overflow: hidden;
      list-style: none;
      margin: 0 !important;
    }
  
    /* Links inside tile */
    .woocommerce ul.products li.product.mb-product-card a{
      color: inherit !important;
      text-decoration: none !important;
    }
  
    /* Badge */
    .woocommerce ul.products li.product.mb-product-card .mb-product-badge{
      position: absolute;
      top: 14px;
      right: 14px;
      background: #e2554e;
      color: #fff;
      font-weight: 800;
      font-size: 13px;
      padding: 8px 14px;
      border-radius: 10px;
      line-height: 1;
      z-index: 2;
    }
  
    /* Image area (consistent size like Figma) */
    .woocommerce ul.products li.product.mb-product-card .mb-product-media{
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      overflow: hidden;
      background: #fff;
      padding: 12px;
      margin-bottom: 6px;
    }
  
    .woocommerce ul.products li.product.mb-product-card .mb-product-img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
  
    /* Title (Figma-like: slightly smaller, medium weight, 2-line clamp) */
    .woocommerce ul.products li.product.mb-product-card .mb-product-title{
      margin: 14px 0 8px;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.3;
      color: #1f2937;
  
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  
    /* Price wrapper */
    .woocommerce ul.products li.product.mb-product-card .mb-product-price{
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 14px;
    }
  
    /* Woo sale/regular markup */
    .woocommerce ul.products li.product.mb-product-card .mb-product-price ins{
      text-decoration: none;
      font-size: 18px;
      font-weight: 700;
      color: #5aa9e6;
    }
  
    .woocommerce ul.products li.product.mb-product-card .mb-product-price del{
      font-size: 15px;
      font-weight: 500;
      color: #b0b7c3;
      text-decoration: line-through;
    }
  
    /* Not on sale (Woo may output only .woocommerce-Price-amount) */
    .woocommerce ul.products li.product.mb-product-card .mb-product-price .woocommerce-Price-amount{
      font-size: 12px;
      font-weight: 700;
      color: #5aa9e6;
    }
  
    /* Button (shorter like Figma) */
    .woocommerce ul.products li.product.mb-product-card .mb-product-btn{
      display: block;
      background: #5aa9e6;
      color: #fff !important;
      text-align: center;
      font-weight: 600;
      font-size: 13px;
      padding: 6px 6px;
      border-radius: 12px;
    }



        .woocommerce ul.products{
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 14px !important;
          padding: 0 0px !important;
          margin: 0 !important;
        }
      
        .woocommerce ul.products li.product{
          margin: 0 !important;
          width: auto !important;
          float: none !important;
        }
      
        .woocommerce ul.products li.product.mb-product-card{
          padding: 14px !important;
          border-radius: 18px;
        }
      
        .woocommerce ul.products li.product.mb-product-card .mb-product-media{
          aspect-ratio: 4 / 3;
          padding: 10px;
          margin-bottom: 8px;
        }
      
      /* Product title – Figma-like (mobile only) */
.woocommerce ul.products li.product.mb-product-card .mb-product-title{
    margin: 10px 0 8px;
    font-size: 12px;          /* smaller */
    font-weight: 500;         /* normal/medium */
    line-height: 1.4;         /* more readable */
    color: #1f2937;
  
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.4em * 3);
  }
  
/* === Meddbee product tile alignment fix (mobile) === */


  /* Make grid items stretch to same row height */
  .woocommerce ul.products{
    align-items: stretch !important;
  }

  /* Make each product card a vertical flex container */
  .woocommerce ul.products li.product.mb-product-card{
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Keep title height consistent (3 lines) */
  .woocommerce ul.products li.product.mb-product-card .mb-product-title{
    min-height: calc(1.4em * 3) !important; /* you already do this; keep it enforced */
  }

  /* Make price area a consistent height regardless of sale/not-sale markup */
  .woocommerce ul.products li.product.mb-product-card .mb-product-price{
    min-height: 44px !important;           /* tweak if you want tighter */
    align-items: flex-end !important;
  }

  /* Optional: bring non-sale price size closer to sale price so heights match better */
  .woocommerce ul.products li.product.mb-product-card
  .mb-product-price .woocommerce-Price-amount{
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* Push the button to the bottom of the card */
  .woocommerce ul.products li.product.mb-product-card .mb-product-btn{
    margin-top: auto !important;
  }




  }