@media (max-width: 767px){

  /* =========================
     Meddbee Home – Mobile Base
     ========================= */

  :root{
    --mb-bg: #f5f7fb;
    --mb-text: #0b1220;
    --mb-muted: #6b7280;
    --mb-link: #2b7de9;

    --mb-hero-1: #27b2f3;
    --mb-hero-2: #149ee3;

    --mb-primary: #1ea0f2;
    --mb-card: #ffffff;
    --mb-card-radius: 18px;
    --mb-shadow: 0 10px 26px rgba(0,0,0,.08);

    --mb-footer: #0b1220;
    --mb-footer-text: rgba(255,255,255,.85);
  }

  body.home .mb-home{ background: var(--mb-bg); }

  /* Section wrapper */
  body.home .mb-home-section{ padding: 14px 14px 4px; }
  body.home .mb-home-section__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin: 6px 0 10px;
  }
  body.home .mb-home-section__head h2{
    margin:0;
    font-size:17px;
    font-weight:800;
    color:var(--mb-text);
  }
  body.home .mb-home-section__link{
    font-size:12px;
    font-weight:600;
    color:var(--mb-link);
    text-decoration:none;
  }

  /* =========================
     Header + Search polish
     ========================= */
  body.home .site-header,
  body.home header.site-header,
  body.home .header-main,
  body.home .header-row{ background:#fff !important; }

  body.home .site-header .header-main{
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }

  /* Logo sizing */
  body.home .site-header .site-logo img,
  body.home .site-header .logo img{
    height: 28px !important;
    width: auto !important;
    object-fit: contain;
  }

  /* Icons align */
  body.home .site-header .header-icons a,
  body.home .site-header .header-icon,
  body.home .site-header .header-elements a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }
  body.home .site-header i{ font-size: 18px; line-height:1; }

  /* Cart badge */
  body.home .site-header .mini-cart-counter,
  body.home .site-header .cart-counter{
    transform: translate(6px,-6px);
  }

  /* Search spacing + sizing */
  body.home .site-header .header-search,
  body.home .site-header .header-search-form{
    margin-bottom: 8px !important;
  }

  body.home .site-header input[type="search"],
  body.home .site-header input.search-field{
    height: 44px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    padding-left: 14px !important;
    padding-right: 54px !important;
  }

  body.home .site-header button[type="submit"],
  body.home .site-header .search-submit{
    position:absolute;
    right: 6px;
    top: 6px;
    height: 32px;
    width: 44px;
    border-radius: 12px;
  }

  /* Reduce header → hero gap */
  body.home header{ margin-bottom: 0 !important; }

  /* =========================
     Hero (supports both .mb-home-hero and optional .mb-hero)
     ========================= */

  /* main hero background */
  body.home .mb-home-hero,
  body.home .mb-hero,
  body.home .mb-hero-wrap{
    background: linear-gradient(180deg, var(--mb-hero-1) 0%, var(--mb-hero-2) 100%) !important;
  }

  body.home .mb-home-hero{ padding: 14px; margin-top: -15px !important; }
  body.home .mb-home-hero__inner{ border-radius: 14px; color:#fff; padding-top: 14px !important; }
  body.home .mb-home-hero__inner h1{ color:white ;}

  body.home .mb-home-hero h1{
    margin: 10px 0 6px;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 600;
  }
  body.home .mb-home-hero p{
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.35;
    opacity: .95;
  }

  /* Hero buttons (your theme-based buttons) */
  body.home .mb-home-hero__actions{
    display:flex;
    gap:14px;
    padding: 8px 0 6px;
  }

  body.home .mb-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius: 9px;
    padding: 6px 6px;
    font-weight: 700;
    font-size: 13px;
    text-decoration:none;
    border: 0;
    cursor:pointer;
  }

  body.home .mb-btn--light{
    background:#fff;
    color:black;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    font-weight: 400;
  }

  body.home .mb-btn--primary{
    background: #5aa9e6;
    color:#fff;
    box-shadow: 0 10px 18px rgba(30,160,242,.25);
  }

  body.home .mb-btn--full{ width:100%; }
  body.home .mb-ico{ font-size:18px; }

  /* Optional hero system (if you ever use .mb-hero-actions) */
  body.home .mb-hero-actions{ gap:14px; }
  body.home .mb-hero-actions a{
    background:#fff !important;
    color:#0b5ed7 !important;
    border-radius:14px !important;
    padding:14px 18px !important;
    font-weight:700 !important;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
  }

  /* =========================
     Categories – one-line swipe (YOUR REAL HTML)
     .mb-cat-grid > .mb-cat
     ========================= */
  body.home .mb-cat-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 6px 2px 10px !important;
    margin: 0 !important;

    /* kill any old grid behavior */
    grid-template-columns: unset !important;
    grid-auto-flow: unset !important;
  }
  body.home .mb-cat-grid::-webkit-scrollbar{ display:none !important; }
  body.home .mb-cat-grid{ scrollbar-width:none !important; }

  body.home .mb-cat-grid > .mb-cat{
    flex:0 0 auto !important;
    width:92px !important;
    scroll-snap-align:start !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    text-align:center !important;
    text-decoration:none !important;
    color:#1b1f2a;
  }

  body.home .mb-cat-grid .mb-cat__icon{
    width:75px !important;
    height:75px !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 auto 6px !important;
    background:#f3f6ff !important;
    font-size:22px !important;
    line-height:1 !important;
  }

  body.home .mb-cat-grid .mb-cat__label{
    display:block !important;
    font-size:15px !important;
    font-weight:400 !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:92px !important;
    margin-top: 10px;
  }

  /* =========================
     Product cards
     ========================= */
  body.home .mb-card-grid{ display:grid; gap:12px; padding-bottom: 8px; }
  body.home .mb-card-grid--2{ grid-template-columns: repeat(2, 1fr); }

  body.home .mb-product-card{
    background: var(--mb-card);
    border-radius: var(--mb-card-radius) !important;
    overflow:hidden;
    box-shadow: var(--mb-shadow) !important;
  }

  body.home .mb-product-card__img{ position:relative; background:#fff; padding: 10px; }
  body.home .mb-product-card__img img{
    width:100%;
    height:118px;
    object-fit:contain;
    display:block;
  }

  body.home .mb-product-card__body{ padding: 10px 10px 12px; }

  body.home .mb-product-card__title{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#1b1f2a;
    text-decoration:none;
    line-height:1.2;
    min-height:30px;
  }

  body.home .mb-price{
    margin: 6px 0 10px;
    font-size:12px;
    font-weight:800;
    color: var(--mb-link);
  }

  body.home .mb-price del{
    opacity:.55;
    font-weight:700;
    margin-left:6px;
  }

  /* badges */
  body.home .mb-badge{
    position:absolute;
    top:10px;
    left:20px;
    border-radius: 8px;
    padding: 4px 8px;
    font-size:10px;
    font-weight:900;
    color:#fff;
    background:#ff4d4f;
  }

  /* allow optional right badge */
  body.home .mb-badge.right{ left:auto; right:10px; }

  /* =========================
     New Arrivals swipe
     ========================= */
  body.home .mb-swipe{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding: 2px 14px 12px;
    margin: 0 -14px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  body.home .mb-swipe::-webkit-scrollbar{ display:none; }

  body.home .mb-mini-card{
    scroll-snap-align:start;
    min-width: 138px;
    background:#fff;
    border-radius: var(--mb-card-radius);
    box-shadow: var(--mb-shadow);
    padding:10px;
    position:relative;
    display:flex;
    flex-direction:column;
  }
  body.home .mb-mini-card__img img{
    width:100%;
    height:88px;
    object-fit:contain;
    display:block;
  }
  body.home .mb-mini-card__title{
    margin-top:6px;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    color:#1b1f2a;
    line-height:1.15;
    min-height:28px;
  }
  body.home .mb-mini-card__price{
    margin-top:6px;
    font-size:12px;
    font-weight:800;
    color: var(--mb-link);
  }
  body.home .mb-mini-card__cta{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    height:36px;
    border-radius:10px;
    background: #5aa9e6;
    color:#fff !important;
    font-weight:800;
    font-size:12px;
    text-decoration:none !important;
  }
  body.home .mb-mini-card__cta:active{ transform: translateY(1px); }

  /* Rating */
  body.home .mb-rating{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    margin-top:6px;
    color: var(--mb-muted);
  }
  body.home .mb-stars{ letter-spacing:1px; opacity:.9; }
  body.home .mb-rating__meta{ font-weight:700; }

  /* =========================
     CTA Banner
     ========================= */
  body.home .mb-cta{ padding:14px; }
  body.home .mb-cta__inner{
    background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
    border-radius: 18px;
    padding: 16px 14px;
    text-align:center;
    color:#fff;
    box-shadow: 0 14px 28px rgba(14,165,233,.25);
  }
  body.home .mb-cta__icon{ font-size:28px; margin-bottom:6px; }
  body.home .mb-cta h3{ margin:0 0 6px; font-size:18px; font-weight:900; }
  body.home .mb-cta p{ margin:0 0 12px; font-size:12px; opacity:.95; }
  body.home .mb-btn--cta{ display:inline-flex; padding:10px 16px; border-radius:12px; font-weight:900; }

  /* Helpers */
  body.home .mb-empty{ padding:10px 0 18px; color:var(--mb-muted); font-weight:600; font-size:13px; }

  /* =========================
     Footer – your real markup (2 columns)
     ========================= */
  body.home .mb-footer-mobile{
    background: var(--mb-footer) !important;
    padding: 18px 14px 26px !important;
    color: var(--mb-footer-text) !important;
  }
  body.home .mb-footer-mobile-inner{
    background: var(--mb-footer) !important;
    border-radius: 18px !important;
    padding: 22px 18px !important;
  }
  body.home .mb-footer-cols{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 22px !important;
    align-items:start !important;
  }
  body.home .mb-footer-col-title{
    color:#fff !important;
    font-weight:800 !important;
    margin-bottom:10px !important;
  }
  body.home .mb-footer-links{
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  body.home .mb-footer-links li{ margin:0 0 10px !important; }
  body.home .mb-footer-links a{
    color: var(--mb-footer-text) !important;
    text-decoration:none !important;
  }

  /* Hide bottom mobile nav on homepage (mockup) */
  body.home .mb-bottom-nav,
  body.home .mf-mobile-nav,
  body.home .mobile-bottom-nav,
  body.home .sticky-footer-nav,
  body.home .mb-mobile-nav{
    display:none !important;
  }

  /* Keep your content padding tweak */
  body.home .site-content{ padding-top: 20px !important; }

/*********************************************
  HOME OVERRIDES (strong) — paste at bottom
*********************************************/

/* --- 1) Fix NEW / OFF badges (stop ribbon, make pill) --- */

/* Ensure image wrappers are positioning context */
body.home .mb-home-section .mb-product-card__img,
body.home .mb-home-section .mb-mini-card__img {
  position: relative !important;
}

/* Force all badges to be small pills */
body.home .mb-home-section .mb-product-card__img .mb-badge,
body.home .mb-home-section .mb-mini-card__img .mb-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;

  /* kill "ribbon" behavior */
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;

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

  padding: 4px 10px !important;
  border-radius: 999px !important;
  line-height: 1 !important;

  z-index: 10 !important;
  transform: none !important;
}

/* If theme is specifically styling NEW as a ribbon, nuke it harder */
body.home .mb-home-section .mb-mini-card__img .mb-badge--new {
  left: 10px !important;
  top: 10px !important;
  width: auto !important;
  right: auto !important;
  border-radius: 999px !important;
}

/* --- 2) Fix price wrapping / broken layout --- */

/* Make price elements stay inline and never wrap */
body.home .mb-home-section .woocommerce-Price-amount {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: baseline !important;
}

body.home .mb-home-section .woocommerce-Price-currencySymbol {
  white-space: nowrap !important;
  display: inline !important;
  margin-left: 2px !important;
}

/* Force ins/del to sit on same line */
body.home .mb-home-section .mb-price ins,
body.home .mb-home-section .mb-price del,
body.home .mb-home-section .mb-mini-card__price ins,
body.home .mb-home-section .mb-mini-card__price del {
  display: inline !important;
  white-space: nowrap !important;
}

body.home .mb-home-section .mb-price del,
body.home .mb-home-section .mb-mini-card__price del {
  margin-left: 6px !important;
}

/* If any theme makes the whole price container blocky, force it inline */
body.home .mb-home-section .mb-price,
body.home .mb-home-section .mb-mini-card__price {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* --- 3) Optional: keep card heights aligned (helps mockup look) --- */
body.home .mb-home-section .mb-product-card__title,
body.home .mb-home-section .mb-mini-card__title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  min-height: 32px !important;
}
/*********************************************
  NEW ARRIVALS: fix price overflow + spacing
*********************************************/

/* Card internal spacing */
body.home .mb-home-section .mb-mini-card {
  padding: 12px !important;
  gap: 10px !important;
}

/* Keep image area consistent */
body.home .mb-home-section .mb-mini-card__img {
  margin-bottom: 2px !important;
}

/* Title: 2 lines, consistent height */
body.home .mb-home-section .mb-mini-card__title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  min-height: 34px !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
}

/* PRICE: force everything inline + no weird wrapping */
body.home .mb-home-section .mb-mini-card__price,
body.home .mb-home-section .mb-mini-card__price * {
  display: inline !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* If price is too wide, allow gentle horizontal scroll instead of breaking layout */
body.home .mb-home-section .mb-mini-card__price {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
body.home .mb-home-section .mb-mini-card__price::-webkit-scrollbar {
  display: none !important;
}

/* Make del look lighter + keep spacing */
body.home .mb-home-section .mb-mini-card__price del {
  margin-left: 8px !important;
  opacity: 0.55 !important;
}

/* CTA pinned and spaced */
body.home .mb-home-section .mb-mini-card__cta {
  margin-top: 8px !important;
}


/***Sunday ***/

/* =========================================
   Shop by Category – Figma colors + background
   (YOUR HTML: .mb-home-section .mb-cat-grid .mb-cat)
   ========================================= */

/* 1) Make the whole section pure white (remove theme gray) */
.mb-home-section{
  background: #ffffff !important;
}

/* Optional: if your theme applies a gray to inner wrappers */
.mb-home-section .mb-cat-grid{
  background: transparent !important;
}

/* 2) Header typography */
.mb-home-section__head h2{
  color:#0F172A !important;   /* Figma */
  font-weight:800;
}

.mb-home-section__link{
  color:#18B0F1 !important;   /* Figma */
  font-weight:700;
}

/* 3) Category layout (keep it simple) */
.mb-home-section .mb-cat-grid{
  display:flex !important;
  gap:28px !important;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 2px 6px;
}

/* 4) Each category item */
.mb-home-section .mb-cat{
  flex:0 0 auto;
  min-width: 120px;
  text-align:center;
  text-decoration:none;
}

/* 5) The circle around each icon (THIS is the main Figma look) */
.mb-home-section .mb-cat__icon{
  margin: 0 auto 12px;
  width: 112px;
  height: 112px;

  border-radius:999px;

  /* Figma light tinted circle */
  background: #FAF5FF !important;

  /* Figma-like soft shadow */
  box-shadow:
    0 10px 22px rgba(0,0,0,0.06),
    0 2px 8px rgba(0,0,0,0.04);

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

  /* emoji size (since you use emoji right now) */
  font-size: 38px;
  line-height: 1;

  /* ensure it doesn't look washed out */
  opacity:1 !important;
}

/* 6) Label text */
.mb-home-section .mb-cat__label{
  display:block;
  color:#374151 !important;  /* Figma */
  font-size: 18px;
  font-weight:700;
  line-height:1.15;
}
.mb-home-section .mb-cat__icon img{
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}
body.home .btn-hero {
  padding: 10px 9px;
  font-weight:500!important;
  font-size:14px!important;
}
  
}