/* QPROCURE UI FINAL V70 - merged cleanup */
/* Order preserved from the previously working patch stack. */

/* ===== qprocure-home-banners-v51.css ===== */

/* QPROCURE HOME BANNERS V51 */
.qp-banner-live-v51{
  position:relative!important;
  overflow:hidden!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
}
.qp-banner-live-v51 .qp-dash-hero-copy-v41,
.qp-banner-live-v51 .qp-v38-hero-copy{
  position:relative!important;
  z-index:2!important;
}
.qp-banner-dots-v51{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  gap:6px;
}
.qp-banner-dots-v51 button{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  cursor:pointer;
  background:rgba(255,255,255,.55);
}
.qp-banner-dots-v51 button.active{
  width:20px;
  background:#ffbd00;
}


/* V51: uploaded Supabase image must replace the old decorative skyline */
.qp-banner-live-v51 .qp-dash-city-v41{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Keep hero text on top of the uploaded image */
.qp-banner-live-v51 .qp-dash-hero-copy-v41{
  position:relative !important;
  z-index:4 !important;
}

/* Let the uploaded image visually span the complete hero */
.qp-banner-live-v51{
  grid-template-columns:1fr !important;
  min-height:220px !important;
}

/* Text stays in the left portion, preserving the reference layout */
.qp-banner-live-v51 .qp-dash-hero-copy-v41{
  width:58% !important;
  max-width:720px !important;
}

/* Slight overlay only on the text side for readability */
.qp-banner-live-v51:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,rgba(39,10,83,.82) 0%,rgba(56,17,105,.58) 42%,rgba(42,12,83,.08) 72%,transparent 100%) !important;
}

.qp-banner-live-v51 .qp-banner-dots-v51{
  z-index:6 !important;
}

@media(max-width:900px){
  .qp-banner-live-v51 .qp-dash-hero-copy-v41{
    width:72% !important;
  }
}
@media(max-width:700px){
  .qp-banner-live-v51 .qp-dash-hero-copy-v41{
    width:100% !important;
  }
}


/* ===== qprocure-arabic-menu-fix-v53.css ===== */


/* =========================================================
   QPROCURE ARABIC MENU FIX V53
   Arabic changes text direction only.
   Desktop menu/sidebar must stay in the SAME physical place
   and SAME order as English.
   ========================================================= */

@media (min-width: 901px){

  /* Never mirror the application shell */
  html[dir="rtl"] body .app,
  html[dir="rtl"] body.qp-authenticated .app{
    direction:ltr !important;
  }

  /* Sidebar permanently on LEFT */
  html[dir="rtl"] body .app > aside.sidebar,
  html[dir="rtl"] body aside.sidebar{
    position:fixed !important;
    left:0 !important;
    right:auto !important;
    top:0 !important;
    bottom:0 !important;
    transform:none !important;
    direction:ltr !important;
  }

  /* Main content always starts after left sidebar */
  html[dir="rtl"] body .app > main.main,
  html[dir="rtl"] body main.main{
    margin-left:185px !important;
    margin-right:0 !important;
    direction:ltr !important;
  }

  /* Keep top header physical order identical to English */
  html[dir="rtl"] body .topbar,
  html[dir="rtl"] body header.topbar{
    direction:ltr !important;
  }

  /* Sidebar rows do not reverse icon/text positions */
  html[dir="rtl"] body .sidebar nav,
  html[dir="rtl"] body .sidebar .nav,
  html[dir="rtl"] body .sidebar .nav-item,
  html[dir="rtl"] body .sidebar a{
    direction:ltr !important;
  }

  /* Arabic menu labels themselves read RTL */
  html[dir="rtl"] body .sidebar .nav-item span,
  html[dir="rtl"] body .sidebar a span,
  html[dir="rtl"] body .sidebar .menu-label,
  html[dir="rtl"] body .sidebar .nav-label{
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    text-align:right !important;
  }

  /* Keep menu section headings aligned and stable */
  html[dir="rtl"] body .sidebar .section-title,
  html[dir="rtl"] body .sidebar .nav-section-title,
  html[dir="rtl"] body .sidebar .menu-section-title{
    direction:rtl !important;
    text-align:right !important;
  }

  /* My Account remains below the main navigation and scrolls normally */
  html[dir="rtl"] body .sidebar .my-account,
  html[dir="rtl"] body .sidebar .account-section{
    direction:ltr !important;
  }

  /* Search text can be Arabic without flipping the header */
  html[dir="rtl"] body .topbar input[type="search"],
  html[dir="rtl"] body .topbar .search input,
  html[dir="rtl"] body .search input{
    direction:rtl !important;
    text-align:right !important;
  }

  /* Dashboard layout never mirrors */
  html[dir="rtl"] body .qp-v38-shell,
  html[dir="rtl"] body .qp-dash-shell-v41{
    direction:ltr !important;
  }

  /* Right-side map / auctions stay on the RIGHT */
  html[dir="rtl"] body .qp-v38-side,
  html[dir="rtl"] body .qp-dash-side-v41{
    direction:ltr !important;
  }
}

/* Mobile: Arabic text RTL, but menu drawer behavior remains controlled
   by the existing mobile CSS/JS. */
@media (max-width: 900px){
  html[dir="rtl"] body .mobile-menu,
  html[dir="rtl"] body .mobile-sidebar,
  html[dir="rtl"] body .mobile-menu-panel{
    direction:rtl !important;
  }
}


/* ===== qprocure-mobile-logo-move-v61.css ===== */


/* =========================================================
   QPROCURE MOBILE LOGO MOVE V61
   - Remove large logo from mobile side drawer
   - Show compact logo inside "My QProcure" bottom-nav item
   - Desktop unaffected
   ========================================================= */

@media (max-width: 900px){

  /* Hide logo block inside opened mobile drawer/sidebar */
  body .sidebar .logo,
  body .sidebar .brand,
  body .sidebar .sidebar-logo,
  body .mobile-sidebar .logo,
  body .mobile-sidebar .brand,
  body .mobile-menu-panel .logo,
  body .mobile-menu-panel .brand,
  body .sidebar > a:first-child img,
  body .sidebar img[alt*="QProcure" i],
  body .sidebar img[src*="logo" i]{
    display:none !important;
  }

  /* Remove the large empty area previously reserved for logo */
  body .sidebar{
    padding-top:14px !important;
  }

  /* Compact icon/logo within My QProcure bottom navigation */
  #qpMobileBottomNav .qp-myqprocure-logo-v61{
    width:30px;
    height:30px;
    object-fit:contain;
    display:block;
    margin:0 auto 3px;
  }

  #qpMobileBottomNav .qp-myqprocure-icon-fallback-v61{
    display:none !important;
  }

  #qpMobileBottomNav .qp-myqprocure-v61{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:1px !important;
  }
}


/* ===== qprocure-mobile-banner-above-menu-v64.css ===== */


/* =========================================================
   QPROCURE MOBILE BANNER ABOVE MENU V64
   Correct order:
   TOPBAR
   ADMIN BANNER
   MOBILE PRIMARY NAV
   MOBILE PAGE CONTENT
   ========================================================= */

#qpMobileAdminBannerV64{display:none}

@media(max-width:900px){
  #qpMobileAdminBannerV64{
    display:block;
    position:relative;
    margin:10px 12px 8px;
    min-height:165px;
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(105deg,#35105f 0%,#54159a 58%,#7427bf 100%);
    background-size:cover;
    background-position:center;
    color:#fff;
  }

  #qpMobileAdminBannerV64 .qp-v64-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(34,7,74,.90) 0%,rgba(64,18,121,.60) 52%,rgba(36,8,72,.12) 100%);
    pointer-events:none;
  }

  #qpMobileAdminBannerV64 .qp-v64-copy{
    position:relative;
    z-index:2;
    width:72%;
    padding:18px 16px 28px;
  }

  #qpMobileAdminBannerV64 h2{
    margin:0 0 6px;
    color:#fff;
    font-size:22px;
    line-height:1.08;
    font-weight:800;
  }

  #qpMobileAdminBannerV64 p{
    margin:0 0 12px;
    color:rgba(255,255,255,.9);
    font-size:12px;
    line-height:1.45;
  }

  #qpMobileAdminBannerV64 .qp-v64-btn{
    border:0;
    border-radius:8px;
    min-height:36px;
    padding:0 13px;
    background:#fff;
    color:#51169a;
    font-size:12px;
    font-weight:800;
  }

  #qpMobileAdminBannerV64 .qp-v64-dots{
    position:absolute;
    z-index:3;
    left:50%;
    bottom:9px;
    transform:translateX(-50%);
    display:flex;
    gap:5px;
  }

  #qpMobileAdminBannerV64 .qp-v64-dots button{
    width:7px;height:7px;padding:0;border:0;border-radius:999px;
    background:rgba(255,255,255,.55);
  }

  #qpMobileAdminBannerV64 .qp-v64-dots button.active{
    width:20px;background:#ffbd00;
  }

  /* Nav should be normal flow BELOW banner */
  #qpMobilePrimaryNav{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    z-index:15 !important;
    margin:0 0 8px !important;
    background:#fff !important;
  }

  /* Hide the old static mobile marketplace hero/card because admin banner replaces it */
  .qp-mobile-marketplace-v36 .qp-mobile-hero,
  .qp-mobile-marketplace-v36 .qp-mobile-marketplace-hero,
  .qp-mobile-marketplace-v36 [class*="hero"]{
    display:none !important;
  }

  /* Remove reserved space from old nav/hero */
  .qp-mobile-marketplace-v36{
    padding-top:0 !important;
    margin-top:0 !important;
  }
}


/* ===== qprocure-mobile-banner-gap-fix-v65.css ===== */


/* =========================================================
   QPROCURE MOBILE BANNER GAP FIX V65
   Removes the old reserved space above the new mobile banner.
   ========================================================= */

@media (max-width:900px){

  /* Old layout reserved space for BOTH topbar + primary nav.
     Primary nav is now below the banner, so reserve only topbar. */
  body.qp-authenticated main.main,
  body.qp-authenticated .main{
    padding-top:calc(var(--qp-mobile-topbar-h, 64px) + env(safe-area-inset-top)) !important;
  }

  /* Banner sits immediately after the topbar */
  #qpMobileAdminBannerV64{
    margin-top:0 !important;
  }

  /* Prevent extra first-child spacing */
  main.main > #qpMobileAdminBannerV64:first-of-type{
    margin-top:0 !important;
  }
}

@media (max-width:700px){
  body.qp-authenticated main.main,
  body.qp-authenticated .main{
    padding-top:calc(var(--qp-mobile-topbar-h, 64px) + env(safe-area-inset-top)) !important;
  }
}


/* ===== qprocure-mobile-category-direct-v66.css ===== */


/* =========================================================
   QPROCURE MOBILE CATEGORY DIRECT V66
   Tapping Plumbing / Electrical / Building Materials etc.
   shows that category's materials immediately on mobile.
   ========================================================= */

@media(max-width:900px){
  .qp-mobile-category-products-v66{
    margin:10px 12px 14px;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
  }

  .qp-mobile-category-products-head-v66{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 12px 8px;
  }

  .qp-mobile-category-products-head-v66 h2{
    margin:0;
    font-size:19px;
    line-height:1.2;
    color:#151529;
  }

  .qp-mobile-category-products-head-v66 small{
    color:#7b7d89;
    font-size:11px;
  }

  .qp-mobile-category-products-grid-v66{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    padding:0 12px 13px;
  }

  .qp-mobile-category-product-v66{
    border:1px solid #e7e3ee;
    border-radius:11px;
    background:#fff;
    overflow:hidden;
    text-align:left;
    padding:0;
  }

  .qp-mobile-category-product-v66 .pic{
    height:132px;
    display:grid;
    place-items:center;
    background:#f5f1fa;
    overflow:hidden;
  }

  .qp-mobile-category-product-v66 .pic img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .qp-mobile-category-product-v66 .copy{
    display:block;
    padding:9px;
  }

  .qp-mobile-category-product-v66 .copy b{
    display:block;
    font-size:13px;
    line-height:1.25;
    color:#151529;
    margin-bottom:4px;
  }

  .qp-mobile-category-product-v66 .copy strong{
    display:block;
    color:#5815a2;
    font-size:14px;
  }

  .qp-mobile-category-product-v66 .copy small{
    display:block;
    margin-top:3px;
    color:#858896;
    font-size:10px;
  }

  .qp-mobile-category-empty-v66{
    grid-column:1/-1;
    padding:28px 16px;
    text-align:center;
    color:#777b88;
    border:1px dashed #ddd8e7;
    border-radius:10px;
  }

  .qp-mobile-category-tabs-v36 button.qp-v66-selected{
    color:#5815a2 !important;
    font-weight:800 !important;
    border-bottom:3px solid #5815a2 !important;
  }
}


/* ===== qprocure-mobile-menu-compact-top-v67.css ===== */


/* =========================================================
   QPROCURE MOBILE MENU COMPACT + TOP V67
   - Drawer narrower
   - Drawer appears above banner/content/bottom nav
   - Starts directly under top bar
   - Independent scroll
   ========================================================= */

@media (max-width: 900px){

  /* Overlay must cover the whole app */
  #mobileMenuOverlay,
  .mobile-menu-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:9998 !important;
    background:rgba(20,18,30,.42) !important;
  }

  /* Main mobile drawer */
  body .sidebar,
  body .mobile-sidebar,
  body .mobile-menu-panel{
    position:fixed !important;
    top:var(--qp-mobile-topbar-h, 64px) !important;
    bottom:0 !important;
    left:0 !important;
    right:auto !important;

    width:min(76vw, 300px) !important;
    min-width:0 !important;
    max-width:300px !important;

    height:calc(100dvh - var(--qp-mobile-topbar-h, 64px)) !important;
    max-height:calc(100dvh - var(--qp-mobile-topbar-h, 64px)) !important;

    z-index:9999 !important;
    background:#fff !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;

    padding:10px 10px 110px !important;
    box-shadow:16px 0 34px rgba(20,10,45,.22) !important;
  }

  /* Keep drawer above homepage banner / primary tabs / floating chat / bottom nav */
  #qpMobileAdminBannerV64,
  #qpMobilePrimaryNav,
  #qpMobileBottomNav,
  #floatingChatButton,
  .floating-chat-btn{
    z-index:100 !important;
  }

  /* Compact menu items */
  body .sidebar .nav-item,
  body .sidebar nav a,
  body .sidebar > a{
    min-height:36px !important;
    padding:7px 10px !important;
    margin:1px 0 !important;
    border-radius:7px !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }

  body .sidebar .nav-item svg,
  body .sidebar .nav-item i,
  body .sidebar nav a svg,
  body .sidebar nav a i{
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
  }

  body .sidebar .section-title,
  body .sidebar .nav-section-title,
  body .sidebar .menu-section-title{
    margin:9px 0 4px !important;
    padding:4px 8px !important;
    font-size:10px !important;
  }

  /* No giant logo block in the drawer */
  body .sidebar .logo,
  body .sidebar .brand,
  body .sidebar .sidebar-logo,
  body .mobile-sidebar .logo,
  body .mobile-sidebar .brand,
  body .mobile-menu-panel .logo,
  body .mobile-menu-panel .brand{
    display:none !important;
  }

  /* Remove any large top spacer inside drawer */
  body .sidebar > :first-child,
  body .mobile-sidebar > :first-child,
  body .mobile-menu-panel > :first-child{
    margin-top:0 !important;
  }

  /* Bottom nav never overlays drawer because drawer is above it */
  #qpMobileBottomNav{
    z-index:500 !important;
  }

  /* Drawer still wins */
  body .sidebar,
  body .mobile-sidebar,
  body .mobile-menu-panel{
    z-index:10001 !important;
  }
  #mobileMenuOverlay,
  .mobile-menu-overlay{
    z-index:10000 !important;
  }

  /* Chat stays behind drawer */
  #floatingChatButton,
  .floating-chat-btn{
    z-index:400 !important;
  }
}

/* Extra narrow phones */
@media (max-width: 430px){
  body .sidebar,
  body .mobile-sidebar,
  body .mobile-menu-panel{
    width:min(72vw, 285px) !important;
    max-width:285px !important;
  }
}


/* ===== qprocure-mobile-menu-final-v68.css ===== */


/* =========================================================
   QPROCURE MOBILE MENU FINAL V68
   - narrower drawer
   - drawer overlays banner/content
   - bottom nav + chat hidden while menu is open
   - starts directly below topbar
   ========================================================= */

@media (max-width:900px){

  /* Drawer */
  body .sidebar{
    position:fixed !important;
    top:64px !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;

    width:min(68vw,260px) !important;
    min-width:0 !important;
    max-width:260px !important;

    height:calc(100dvh - 64px) !important;
    max-height:calc(100dvh - 64px) !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;

    padding:8px 8px 26px !important;
    background:#fff !important;

    z-index:2147483000 !important;
    box-shadow:14px 0 30px rgba(25,10,50,.22) !important;
  }

  /* Overlay must stay BELOW the drawer, but ABOVE page */
  #mobileMenuOverlay,
  .mobile-menu-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:2147482000 !important;
    background:rgba(20,18,30,.48) !important;
  }

  /* Compact rows */
  body .sidebar .nav-item,
  body .sidebar nav a,
  body .sidebar > a{
    min-height:34px !important;
    padding:6px 9px !important;
    margin:1px 0 !important;
    border-radius:7px !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
  }

  body .sidebar .section-title,
  body .sidebar .nav-section-title,
  body .sidebar .menu-section-title{
    margin:7px 0 3px !important;
    padding:3px 8px !important;
    font-size:9px !important;
  }

  /* No drawer logo */
  body .sidebar .logo,
  body .sidebar .brand,
  body .sidebar .sidebar-logo,
  body .sidebar img[alt*="QProcure" i],
  body .sidebar img[src*="logo" i]{
    display:none !important;
  }

  /* While menu is open, nothing may sit above it */
  body:has(#mobileMenuOverlay.open) #qpMobileBottomNav,
  body:has(.mobile-menu-overlay.open) #qpMobileBottomNav,
  body:has(#mobileMenuOverlay.open) #floatingChatButton,
  body:has(.mobile-menu-overlay.open) #floatingChatButton,
  body:has(#mobileMenuOverlay.open) .floating-chat-btn,
  body:has(.mobile-menu-overlay.open) .floating-chat-btn{
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Defensive z-index lowering */
  #qpMobileBottomNav{
    z-index:100 !important;
  }
  #floatingChatButton,
  .floating-chat-btn{
    z-index:120 !important;
  }
}

@media(max-width:430px){
  body .sidebar{
    width:min(66vw,250px) !important;
    max-width:250px !important;
  }
}


/* ===== qprocure-mobile-menu-overlay-fix-v69.css ===== */


/* =========================================================
   QPROCURE MOBILE MENU OVERLAY FIX V69
   Fixes dark overlay appearing on TOP of drawer.
   ========================================================= */

@media (max-width:900px){

  /* Drawer always pure white and visually above everything */
  body .sidebar.mobile-open,
  body .sidebar{
    position:fixed !important;
    top:64px !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;

    width:min(68vw,260px) !important;
    max-width:260px !important;
    min-width:0 !important;

    background:#fff !important;
    opacity:1 !important;
    filter:none !important;
    backdrop-filter:none !important;

    z-index:2147483646 !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;

    box-shadow:8px 0 20px rgba(20,10,45,.12) !important;
  }

  /* IMPORTANT:
     overlay begins AFTER the menu width, so it can never darken the drawer */
  #mobileMenuOverlay,
  .mobile-menu-overlay{
    position:fixed !important;
    top:64px !important;
    bottom:0 !important;
    left:min(68vw,260px) !important;
    right:0 !important;

    width:auto !important;
    height:auto !important;

    background:rgba(20,18,30,.24) !important;
    opacity:1 !important;
    visibility:visible !important;

    z-index:2147483000 !important;
  }

  /* Closed overlay stays hidden */
  #mobileMenuOverlay:not(.open),
  .mobile-menu-overlay:not(.open){
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  #mobileMenuOverlay.open,
  .mobile-menu-overlay.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* No dark effect on the drawer itself */
  body:has(#mobileMenuOverlay.open) .sidebar,
  body:has(.mobile-menu-overlay.open) .sidebar{
    opacity:1 !important;
    filter:none !important;
    background:#fff !important;
  }
}

@media(max-width:430px){
  body .sidebar.mobile-open,
  body .sidebar{
    width:min(66vw,250px) !important;
    max-width:250px !important;
  }

  #mobileMenuOverlay,
  .mobile-menu-overlay{
    left:min(66vw,250px) !important;
  }
}



/* =========================================================
   V83 - CATEGORY IMAGE CONTAINMENT
   Prevent category images from extending below/through cards.
   ========================================================= */

/* Dashboard category cards */
#page-dashboard [class*="categor"] img,
#page-dashboard .category-card img,
#page-dashboard .qp-category-card img,
#page-dashboard .qp-dash-category-card img,
#page-dashboard .qp-category-item img{
  max-width:100% !important;
  max-height:72px !important;
  width:auto !important;
  height:72px !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  margin:0 auto !important;
}

/* Any category tile must clip its media */
#page-dashboard .category-card,
#page-dashboard .qp-category-card,
#page-dashboard .qp-dash-category-card,
#page-dashboard .qp-category-item,
#page-dashboard [class*="category-card"],
#page-dashboard [class*="category-item"]{
  overflow:hidden !important;
  position:relative !important;
}

/* Limit likely media/image wrappers inside category tiles */
#page-dashboard [class*="category-card"] > :first-child,
#page-dashboard [class*="category-item"] > :first-child{
  max-height:86px !important;
  overflow:hidden !important;
}

/* Desktop category grid shown in screenshot */
@media (min-width:901px){
  #page-dashboard [class*="categor"] img{
    max-height:64px !important;
    height:64px !important;
  }
}

/* Mobile */
@media (max-width:900px){
  #page-dashboard [class*="categor"] img{
    max-height:58px !important;
    height:58px !important;
  }
}




/* =========================================================
   QPROCURE V85 - SUPPLIER MAP + CATEGORY FILTERS
   ========================================================= */
.qp-supplier-map-filters-v85{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:0 0 10px;
  scrollbar-width:thin;
}
.qp-supplier-map-filters-v85 button{
  flex:0 0 auto;
  border:1px solid #ddd6e8;
  background:#fff;
  color:#373044;
  border-radius:999px;
  padding:7px 12px;
  font-size:11px;
  cursor:pointer;
}
.qp-supplier-map-filters-v85 button.active{
  background:#5815a2;
  border-color:#5815a2;
  color:#fff;
}
.qp-supplier-list-v85{
  display:grid;
  gap:8px;
}
.qp-supplier-row-v85{
  width:100%;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  align-items:center;
  text-align:left;
  border:1px solid #e4deec;
  background:#fff;
  border-radius:10px;
  padding:9px;
  cursor:pointer;
}
.qp-supplier-row-v85:hover{
  border-color:#6a22ad;
  box-shadow:0 4px 14px rgba(65,20,110,.08);
}
.qp-supplier-logo-v85{
  width:42px;height:42px;border-radius:9px;
  background:#f7f3fb;display:grid;place-items:center;overflow:hidden;
}
.qp-supplier-logo-v85 img{
  width:100%;height:100%;object-fit:contain;padding:3px;
}
.qp-supplier-row-v85 b{
  display:block;font-size:12px;color:#171324;margin-bottom:3px;
}
.qp-supplier-row-v85 small{
  display:block;font-size:10px;color:#7d7b87;
}
.qp-supplier-empty-v85{
  padding:18px;text-align:center;color:#7b7d88;
  border:1px dashed #ddd6e8;border-radius:10px;background:#fff;
}
.qp-map-popup-v85 b{font-size:13px}
.qp-map-popup-v85 div{font-size:11px;margin-top:3px}
.qp-map-popup-v85 small{display:block;font-size:10px;margin-top:5px;color:#777}

@media(max-width:900px){
  .qp-supplier-map-filters-v85{
    padding:0 10px 8px;
  }
}




/* =========================================================
   QPROCURE V86 - SUPPLIERS PAGE LAYOUT FIX
   Fixes oversized vertical category pills shown in V85.
   ========================================================= */

#page-suppliers #qpSupplierMapFiltersV85{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:7px !important;
  width:100% !important;
  min-height:42px !important;
  height:auto !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:0 0 10px !important;
  margin:0 !important;
  white-space:nowrap !important;
  scrollbar-width:thin;
}

#page-suppliers #qpSupplierMapFiltersV85 button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;

  width:auto !important;
  min-width:0 !important;
  max-width:none !important;

  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;

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

  border:1px solid #ddd6e8 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#373044 !important;

  font-size:11px !important;
  line-height:1 !important;
  white-space:nowrap !important;

  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  transform:none !important;
}

#page-suppliers #qpSupplierMapFiltersV85 button.active{
  background:#5815a2 !important;
  border-color:#5815a2 !important;
  color:#fff !important;
}

/* Keep the map wide and the supplier list aligned beside it */
#page-suppliers .qp-supplier-map-layout-v86{
  display:grid !important;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr) !important;
  gap:14px !important;
  align-items:start !important;
}

#page-suppliers .qp-supplier-map-main-v86{
  min-width:0 !important;
}

#page-suppliers .qp-supplier-list-panel-v86{
  min-width:0 !important;
}

/* Supplier cards */
#page-suppliers #qpSupplierListV85{
  display:grid !important;
  gap:8px !important;
}

#page-suppliers .qp-supplier-row-v85{
  width:100% !important;
  min-height:58px !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  padding:9px 10px !important;
  border-radius:10px !important;
}

/* Remove any old empty message once V85 list is mounted */
#page-suppliers .qp-v86-hide-old-empty{
  display:none !important;
}

@media(max-width:900px){
  #page-suppliers .qp-supplier-map-layout-v86{
    grid-template-columns:1fr !important;
  }

  #page-suppliers #qpSupplierMapFiltersV85{
    padding:0 0 8px !important;
  }

  #page-suppliers #qpSupplierMapFiltersV85 button{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    padding:0 10px !important;
    font-size:10px !important;
  }
}



/* =========================================================
   QPROCURE V88 - SUPPLIER MAP LOGO MARKERS
   ========================================================= */
.qp-supplier-logo-marker-v88{
  background:transparent !important;
  border:none !important;
}
.qp-supplier-logo-marker-v88 .qp-supplier-pin-v88{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  border:3px solid #5b17a4;
  box-shadow:0 4px 15px rgba(38,14,68,.28);
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}
.qp-supplier-logo-marker-v88 .qp-supplier-pin-v88 img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:4px;
  background:#fff;
}
.qp-supplier-logo-marker-v88 .qp-supplier-pin-v88 span{
  font-size:15px;
  font-weight:800;
  color:#5b17a4;
}
.qp-supplier-logo-marker-v88 .qp-supplier-pin-v88:after{
  content:"";
  position:absolute;
  width:13px;
  height:13px;
  background:#5b17a4;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%) rotate(45deg);
  border-radius:2px;
  z-index:-1;
}


/* =========================================================
   QPROCURE V90 - CLICK SUPPLIER -> LOGO PIN
   ========================================================= */
.qp-selected-supplier-pin-v90{
  background:transparent !important;
  border:none !important;
}
.qp-selected-supplier-pin-v90 .qp-selected-pin-inner-v90{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#fff;
  border:3px solid #5b17a4;
  box-shadow:0 5px 18px rgba(45,18,82,.32);
  display:grid;
  place-items:center;
  position:relative;
  overflow:visible;
}
.qp-selected-supplier-pin-v90 .qp-selected-pin-inner-v90 img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:contain;
  background:#fff;
  padding:4px;
}
.qp-selected-supplier-pin-v90 .qp-selected-pin-inner-v90 span{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:17px;
  font-weight:800;
  color:#5b17a4;
  background:#fff;
}
.qp-selected-supplier-pin-v90 .qp-selected-pin-inner-v90:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-9px;
  width:14px;
  height:14px;
  background:#5b17a4;
  transform:translateX(-50%) rotate(45deg);
  border-radius:2px;
  z-index:-1;
}
.qp-supplier-row-v85.qp-selected-v90{
  border-color:#5b17a4 !important;
  box-shadow:0 0 0 2px rgba(91,23,164,.08) !important;
}



/* =========================================================
   QPROCURE V93 - ALL REGISTERED SUPPLIERS
   ========================================================= */
#qpSupplierListV85 .qp-supplier-row-v93{
  width:100%;
  min-height:62px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  text-align:left;
  border:1px solid #e4deec;
  background:#fff;
  border-radius:10px;
  padding:9px 10px;
  cursor:pointer;
}
#qpSupplierListV85 .qp-supplier-row-v93:hover{
  border-color:#6a22ad;
  box-shadow:0 4px 14px rgba(65,20,110,.08);
}
#qpSupplierListV85 .qp-supplier-row-v93.qp-selected-v90{
  border-color:#5b17a4 !important;
  box-shadow:0 0 0 2px rgba(91,23,164,.08) !important;
}
.qp-supplier-status-v93{
  font-size:9px;
  border-radius:999px;
  padding:4px 7px;
  white-space:nowrap;
}
.qp-supplier-status-v93.has-location{
  background:#eaf8ef;
  color:#167a43;
}
.qp-supplier-status-v93.no-location{
  background:#fff5db;
  color:#9a6500;
}



/* =========================================================
   QPROCURE V94 - PUBLIC SUPPLIER DIRECTORY
   ========================================================= */
#qpSupplierListV85{
  display:grid !important;
  gap:8px !important;
}
#qpSupplierListV85 .qp-supplier-row-v94{
  width:100% !important;
  min-height:62px !important;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) auto !important;
  gap:10px !important;
  align-items:center !important;
  text-align:left !important;
  border:1px solid #e4deec !important;
  background:#fff !important;
  border-radius:10px !important;
  padding:9px 10px !important;
  cursor:pointer !important;
}
#qpSupplierListV85 .qp-supplier-row-v94:hover,
#qpSupplierListV85 .qp-supplier-row-v94.qp-selected-v94{
  border-color:#5b17a4 !important;
  box-shadow:0 0 0 2px rgba(91,23,164,.08) !important;
}
.qp-supplier-status-v94{
  font-size:9px;
  border-radius:999px;
  padding:4px 7px;
  white-space:nowrap;
}
.qp-supplier-status-v94.has-location{background:#eaf8ef;color:#167a43}
.qp-supplier-status-v94.no-location{background:#fff5db;color:#9a6500}

.qp-supplier-pin-v94{
  background:transparent !important;
  border:none !important;
}
.qp-supplier-pin-v94 .qp-pin-inner-v94{
  width:50px;
  height:50px;
  border-radius:50%;
  background:#fff;
  border:3px solid #5b17a4;
  box-shadow:0 5px 18px rgba(45,18,82,.30);
  display:grid;
  place-items:center;
  position:relative;
}
.qp-supplier-pin-v94 .qp-pin-inner-v94 img{
  width:42px;height:42px;border-radius:50%;
  object-fit:contain;background:#fff;padding:3px;
}
.qp-supplier-pin-v94 .qp-pin-inner-v94 span{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  font-size:16px;font-weight:800;color:#5b17a4;background:#fff;
}
.qp-supplier-pin-v94 .qp-pin-inner-v94:after{
  content:"";
  position:absolute;left:50%;bottom:-9px;
  width:14px;height:14px;background:#5b17a4;
  transform:translateX(-50%) rotate(45deg);
  border-radius:2px;z-index:-1;
}




/* =========================================================
   QPROCURE V95 - DASHBOARD NEARBY SUPPLIERS
   ========================================================= */
.qp-nearby-logo-pin-v95{
  background:transparent !important;
  border:none !important;
}
.qp-nearby-logo-pin-v95 .qp-nearby-pin-inner-v95{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#fff;
  border:2px solid #5b17a4;
  box-shadow:0 3px 10px rgba(45,18,82,.25);
  display:grid;
  place-items:center;
  position:relative;
}
.qp-nearby-logo-pin-v95 .qp-nearby-pin-inner-v95 img{
  width:30px;
  height:30px;
  border-radius:50%;
  object-fit:contain;
  background:#fff;
  padding:2px;
}
.qp-nearby-logo-pin-v95 .qp-nearby-pin-inner-v95 span{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:800;
  color:#5b17a4;
  background:#fff;
}
.qp-nearby-logo-pin-v95 .qp-nearby-pin-inner-v95:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:9px;
  height:9px;
  background:#5b17a4;
  transform:translateX(-50%) rotate(45deg);
  border-radius:1px;
  z-index:-1;
}



/* =========================================================
   QPROCURE V96 - MOBILE MENU NOT STUCK
   - menu panel scrolls independently
   - no full page freeze after open
   - menu can close and body scroll returns
   ========================================================= */
@media (max-width:900px){

  body.qp-authenticated .sidebar,
  body.qp-authenticated aside.sidebar{
    position:fixed !important;
    top:var(--qp-mobile-topbar-h,64px) !important;
    left:0 !important;
    bottom:var(--qp-mobile-bottom-h,68px) !important;
    height:auto !important;
    max-height:none !important;

    width:min(82vw,280px) !important;
    min-width:0 !important;
    max-width:280px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;

    z-index:2147482001 !important;
    background:#fff !important;

    transform:translateX(-105%) !important;
    transition:transform .22s ease !important;
  }

  body.qp-authenticated .sidebar.mobile-open,
  body.qp-authenticated aside.sidebar.mobile-open{
    transform:translateX(0) !important;
  }

  html[dir="rtl"] body.qp-authenticated .sidebar,
  html[dir="rtl"] body.qp-authenticated aside.sidebar{
    left:auto !important;
    right:0 !important;
    transform:translateX(105%) !important;
  }

  html[dir="rtl"] body.qp-authenticated .sidebar.mobile-open,
  html[dir="rtl"] body.qp-authenticated aside.sidebar.mobile-open{
    transform:translateX(0) !important;
  }

  #mobileMenuOverlay,
  .mobile-menu-overlay{
    position:fixed !important;
    inset:var(--qp-mobile-topbar-h,64px) 0 var(--qp-mobile-bottom-h,68px) 0 !important;
    z-index:2147482000 !important;
    background:rgba(20,18,30,.38) !important;
  }

  #mobileMenuOverlay:not(.open),
  .mobile-menu-overlay:not(.open){
    display:none !important;
  }

  #mobileMenuOverlay.open,
  .mobile-menu-overlay.open{
    display:block !important;
  }

  /* keep content scrollable; only menu itself is fixed */
  body.qp-authenticated,
  html{
    overflow-y:auto !important;
    height:auto !important;
  }

  body.qp-authenticated.menu-open{
    overflow-y:auto !important;
  }

  /* sidebar brand stays compact */
  body.qp-authenticated .sidebar .brand{
    flex:0 0 auto !important;
  }

  /* menu list itself can scroll all the way */
  body.qp-authenticated .sidebar nav,
  body.qp-authenticated .sidebar .user-menu-scroll{
    overflow:visible !important;
    max-height:none !important;
  }
}




/* =========================================================
   QPROCURE V97 - MOBILE SIDEBAR BOTTOM / HEIGHT FIX
   Fixes extra blank/cut area at the bottom of the open menu.
   ========================================================= */
@media (max-width:900px){

  body.qp-authenticated .sidebar,
  body.qp-authenticated aside.sidebar{
    top:var(--qp-mobile-topbar-h,64px) !important;
    bottom:var(--qp-mobile-bottom-h,68px) !important;
    height:auto !important;
    max-height:calc(100dvh - var(--qp-mobile-topbar-h,64px) - var(--qp-mobile-bottom-h,68px)) !important;

    padding-bottom:0 !important;
    margin-bottom:0 !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;
  }

  /* The actual menu content scrolls, not the whole sidebar shell */
  body.qp-authenticated .sidebar nav,
  body.qp-authenticated aside.sidebar nav{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding-bottom:14px !important;
  }

  /* account/language blocks stay naturally at the bottom without huge gap */
  body.qp-authenticated .sidebar .user-menu-scroll,
  body.qp-authenticated aside.sidebar .user-menu-scroll{
    overflow:visible !important;
    flex:0 0 auto !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  body.qp-authenticated .sidebar > :last-child,
  body.qp-authenticated aside.sidebar > :last-child{
    margin-bottom:0 !important;
    padding-bottom:8px !important;
  }

  /* Keep mobile bottom nav on top, without covering menu content */
  #qpMobileBottomNav,
  .qp-mobile-bottom-nav{
    z-index:2147482100 !important;
  }
}




/* =========================================================
   QPROCURE V98 - MOBILE BOTTOM CLEANUP
   Removes residual/cut content visible under bottom navigation.
   ========================================================= */
@media (max-width:900px){

  :root{
    --qp-mobile-bottom-h:68px;
  }

  html,
  body{
    min-height:100% !important;
    overflow-x:hidden !important;
  }

  body.qp-authenticated{
    padding-bottom:var(--qp-mobile-bottom-h,68px) !important;
  }

  /* Main app content must stop above fixed bottom navigation */
  body.qp-authenticated .main,
  body.qp-authenticated main.main,
  body.qp-authenticated .content,
  body.qp-authenticated .page,
  body.qp-authenticated .home-main-layout{
    padding-bottom:calc(var(--qp-mobile-bottom-h,68px) + 10px) !important;
    margin-bottom:0 !important;
  }

  /* Bottom nav sits cleanly over content */
  #qpMobileBottomNav,
  .qp-mobile-bottom-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:var(--qp-mobile-bottom-h,68px) !important;
    min-height:var(--qp-mobile-bottom-h,68px) !important;
    max-height:var(--qp-mobile-bottom-h,68px) !important;
    background:#fff !important;
    border-top:1px solid #e9e6ef !important;
    z-index:2147483000 !important;
    overflow:hidden !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
    box-sizing:content-box !important;
  }

  /* Prevent old/footer fragments from showing below mobile nav */
  body.qp-authenticated footer,
  body.qp-authenticated .footer,
  body.qp-authenticated .site-footer,
  body.qp-authenticated .desktop-footer{
    display:none !important;
  }

  /* Hide any legacy mobile nav duplicate */
  body.qp-authenticated nav.mobile-bottom-nav:not(#qpMobileBottomNav):not(.qp-mobile-bottom-nav),
  body.qp-authenticated .mobile-nav:not(#qpMobileBottomNav):not(.qp-mobile-bottom-nav){
    display:none !important;
  }

  /* Sidebar ends exactly above bottom nav */
  body.qp-authenticated .sidebar,
  body.qp-authenticated aside.sidebar{
    bottom:var(--qp-mobile-bottom-h,68px) !important;
    max-height:calc(100dvh - var(--qp-mobile-topbar-h,64px) - var(--qp-mobile-bottom-h,68px)) !important;
  }

  /* Remove accidental negative/translated fragments at document bottom */
  body.qp-authenticated > script + *,
  body.qp-authenticated .qp-mobile-bottom-nav ~ *{
    margin-bottom:0 !important;
  }
}






/* =========================================================
   QPROCURE V100 - BOTTOM NAV ABOVE OPEN MOBILE MENU
   Move/fix nav outside clipped app stacking context.
   ========================================================= */
@media (max-width:900px){

  body > #qpMobileBottomNav,
  body > .qp-mobile-bottom-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;

    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    visibility:visible !important;
    opacity:1 !important;

    background:#fff !important;
    border-top:1px solid #e7e3ec !important;
    box-shadow:0 -4px 14px rgba(30,18,45,.06) !important;

    z-index:2147483647 !important;
    transform:none !important;
    clip:auto !important;
    overflow:visible !important;
    pointer-events:auto !important;
  }

  body.menu-open > #qpMobileBottomNav,
  body.menu-open > .qp-mobile-bottom-nav{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:2147483647 !important;
  }

  /* Side menu and dim overlay must physically stop above bottom navigation */
  body.qp-authenticated .sidebar,
  body.qp-authenticated aside.sidebar{
    bottom:68px !important;
    max-height:calc(100dvh - var(--qp-mobile-topbar-h,64px) - 68px) !important;
  }

  #mobileMenuOverlay,
  .mobile-menu-overlay{
    bottom:68px !important;
  }

  /* Keep the requested two-letter icon clean */
  body > #qpMobileBottomNav .qp-my-qprocure-badge-v99,
  body > .qp-mobile-bottom-nav .qp-my-qprocure-badge-v99{
    width:24px !important;
    height:24px !important;
    border-radius:7px !important;
    display:grid !important;
    place-items:center !important;
    background:#5b17a4 !important;
    color:#fff !important;
    font-size:9px !important;
    font-weight:800 !important;
  }
}




/* =========================================================
   QPROCURE V101 - STABLE MOBILE MENU + BOTTOM NAV
   Fixes:
   - left sidebar scroll reaches Settings/Language
   - bottom nav no longer blinks/disappears repeatedly
   - no DOM re-parenting loop
   ========================================================= */
@media (max-width:900px){

  :root{
    --qp-mobile-topbar-h:64px;
    --qp-mobile-bottom-h:68px;
  }

  /* SIDEBAR SHELL */
  body.qp-authenticated .sidebar,
  body.qp-authenticated aside.sidebar{
    position:fixed !important;
    top:var(--qp-mobile-topbar-h) !important;
    bottom:var(--qp-mobile-bottom-h) !important;
    left:0 !important;

    width:min(78vw,280px) !important;
    max-width:280px !important;
    min-width:0 !important;

    height:auto !important;
    max-height:calc(100dvh - var(--qp-mobile-topbar-h) - var(--qp-mobile-bottom-h)) !important;

    display:block !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;

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

    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;

    z-index:2147483000 !important;
    background:#fff !important;
  }

  html[dir="rtl"] body.qp-authenticated .sidebar,
  html[dir="rtl"] body.qp-authenticated aside.sidebar{
    left:auto !important;
    right:0 !important;
  }

  /* IMPORTANT: do not make nav a second scroll container */
  body.qp-authenticated .sidebar nav,
  body.qp-authenticated aside.sidebar nav,
  body.qp-authenticated .sidebar .user-menu-scroll,
  body.qp-authenticated aside.sidebar .user-menu-scroll{
    overflow:visible !important;
    max-height:none !important;
    height:auto !important;
  }

  /* Extra space after final sidebar item so it can scroll fully above bottom bar */
  body.qp-authenticated .sidebar > :last-child,
  body.qp-authenticated aside.sidebar > :last-child{
    padding-bottom:22px !important;
  }

  /* OVERLAY STOPS ABOVE BOTTOM NAV */
  #mobileMenuOverlay,
  .mobile-menu-overlay{
    position:fixed !important;
    top:var(--qp-mobile-topbar-h) !important;
    bottom:var(--qp-mobile-bottom-h) !important;
    left:0 !important;
    right:0 !important;
    z-index:2147482000 !important;
  }

  /* BOTTOM NAV: STABLE AND ALWAYS VISIBLE */
  #qpMobileBottomNav,
  .qp-mobile-bottom-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:var(--qp-mobile-bottom-h) !important;
    min-height:var(--qp-mobile-bottom-h) !important;
    max-height:var(--qp-mobile-bottom-h) !important;

    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;

    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;

    background:#fff !important;
    border-top:1px solid #e7e3ec !important;
    box-shadow:0 -3px 12px rgba(30,18,45,.06) !important;

    z-index:2147483646 !important;
    pointer-events:auto !important;
    overflow:hidden !important;
  }

  body.menu-open #qpMobileBottomNav,
  body.menu-open .qp-mobile-bottom-nav{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
  }

  /* QP icon */
  #qpMobileBottomNav .qp-my-qprocure-badge-v99,
  .qp-mobile-bottom-nav .qp-my-qprocure-badge-v99{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    border-radius:7px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 auto 2px !important;
    background:#5b17a4 !important;
    color:#fff !important;
    font-size:9px !important;
    font-weight:800 !important;
  }

  /* content always has room for fixed bottom nav */
  body.qp-authenticated{
    padding-bottom:var(--qp-mobile-bottom-h) !important;
  }
}








/* =========================================================
   QPROCURE V104 - MOBILE MY ACCOUNT DRAWER
   - My Account removed from main sidebar on mobile
   - Opens from top-right user circle (J/avatar)
   - Main sidebar and account drawer are mutually exclusive
   ========================================================= */
@media (max-width:900px){

  /* Hide My Account block from the MAIN sidebar only */
  body.qp-authenticated .sidebar .qp-v104-hide-main-account{
    display:none !important;
  }

  /* Account drawer */
  #qpMobileAccountDrawerV104{
    position:fixed !important;
    top:var(--qp-mobile-topbar-h,64px) !important;
    right:0 !important;
    bottom:var(--qp-mobile-bottom-h,68px) !important;

    width:min(78vw,300px) !important;
    max-width:300px !important;
    min-width:0 !important;

    background:#fff !important;
    z-index:2147483200 !important;
    box-shadow:-10px 0 28px rgba(25,14,45,.16) !important;

    transform:translateX(105%) !important;
    transition:transform .22s ease !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;

    padding:14px 12px 18px !important;
  }

  #qpMobileAccountDrawerV104.open{
    transform:translateX(0) !important;
  }

  /* Arabic: account drawer comes from left so avatar/account remains opposite main menu */
  html[dir="rtl"] #qpMobileAccountDrawerV104{
    right:auto !important;
    left:0 !important;
    transform:translateX(-105%) !important;
    box-shadow:10px 0 28px rgba(25,14,45,.16) !important;
  }

  html[dir="rtl"] #qpMobileAccountDrawerV104.open{
    transform:translateX(0) !important;
  }

  #qpMobileAccountOverlayV104{
    position:fixed !important;
    top:var(--qp-mobile-topbar-h,64px) !important;
    left:0 !important;
    right:0 !important;
    bottom:var(--qp-mobile-bottom-h,68px) !important;
    background:rgba(20,18,30,.34) !important;
    z-index:2147483100 !important;
    display:none !important;
  }

  #qpMobileAccountOverlayV104.open{
    display:block !important;
  }

  .qp-account-head-v104{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:4px 4px 14px !important;
    border-bottom:1px solid #ece8f1 !important;
    margin-bottom:10px !important;
  }

  .qp-account-avatar-v104{
    width:42px !important;
    height:42px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:#f0e9fb !important;
    color:#5b17a4 !important;
    font-weight:800 !important;
    font-size:15px !important;
    flex:0 0 42px !important;
  }

  .qp-account-head-text-v104{
    min-width:0 !important;
  }

  .qp-account-head-text-v104 b{
    display:block !important;
    font-size:13px !important;
    color:#171324 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .qp-account-head-text-v104 small{
    display:block !important;
    margin-top:2px !important;
    font-size:10px !important;
    color:#8a8791 !important;
  }

  .qp-account-menu-v104{
    display:grid !important;
    gap:4px !important;
  }

  .qp-account-item-v104{
    width:100% !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    border:0 !important;
    background:#fff !important;
    color:#20192c !important;
    text-align:left !important;
    border-radius:8px !important;
    padding:0 10px !important;
    font:inherit !important;
    font-size:13px !important;
    cursor:pointer !important;
  }

  .qp-account-item-v104:hover,
  .qp-account-item-v104.active{
    background:#5b17a4 !important;
    color:#fff !important;
  }

  .qp-account-item-v104 .qp-account-icon-v104{
    width:18px !important;
    text-align:center !important;
    flex:0 0 18px !important;
  }

  /* User circle should feel clickable */
  .qp-v104-account-trigger{
    cursor:pointer !important;
    position:relative !important;
    z-index:2147483500 !important;
  }
}




/* =========================================================
   QPROCURE V105 - MOBILE SIDEBAR CLEAN LAYOUT
   Fixes huge blank area and keeps language + bottom nav visible.
   ========================================================= */
@media (max-width:900px){

  body.qp-authenticated .sidebar,
  body.qp-authenticated aside.sidebar{
    top:var(--qp-mobile-topbar-h,64px) !important;
    bottom:var(--qp-mobile-bottom-h,68px) !important;
    height:auto !important;
    max-height:calc(100dvh - var(--qp-mobile-topbar-h,64px) - var(--qp-mobile-bottom-h,68px)) !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;
    padding:0 !important;
  }

  /* Main navigation scrolls only if necessary */
  body.qp-authenticated .sidebar nav,
  body.qp-authenticated aside.sidebar nav{
    flex:0 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding:0 0 6px !important;
  }

  /* Language selector sits directly after menu, not at bottom of a huge spacer */
  body.qp-authenticated .sidebar .mobile-language-choice,
  body.qp-authenticated .sidebar [class*="language"],
  body.qp-authenticated aside.sidebar .mobile-language-choice,
  body.qp-authenticated aside.sidebar [class*="language"]{
    flex:0 0 auto !important;
    margin-top:8px !important;
    margin-bottom:0 !important;
    padding:12px 18px 14px !important;
  }

  /* remove inherited spacers/grow blocks in sidebar */
  body.qp-authenticated .sidebar .grow-card,
  body.qp-authenticated .sidebar [class*="grow"],
  body.qp-authenticated aside.sidebar .grow-card,
  body.qp-authenticated aside.sidebar [class*="grow"]{
    flex-grow:0 !important;
  }

  /* bottom nav always visible */
  #qpMobileBottomNav,
  .qp-mobile-bottom-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:68px !important;
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:2147483646 !important;
  }

  /* Sidebar + overlays stop above bottom navigation */
  #mobileMenuOverlay,
  .mobile-menu-overlay,
  #qpMobileAccountOverlayV104{
    bottom:68px !important;
  }

  #qpMobileAccountDrawerV104{
    bottom:68px !important;
  }
}




/* =========================================================
   QPROCURE V106 - ACCOUNT DRAWER TRIGGER FIX
   ========================================================= */
@media (max-width:900px){
  #qpMobileAccountDrawerV104{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  #qpMobileAccountDrawerV104:not(.open){
    pointer-events:none !important;
  }

  .qp-v106-account-trigger{
    cursor:pointer !important;
    pointer-events:auto !important;
    user-select:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }
}






/* =========================================================
   QPROCURE V108 - EXCLUSIVE MOBILE MENUS
   Only one drawer can be visible at a time.
   ========================================================= */
@media (max-width:900px){
  body.qp-main-menu-open-v108 #qpMobileAccountDrawerV104{
    transform:translateX(105%) !important;
    pointer-events:none !important;
  }

  html[dir="rtl"] body.qp-main-menu-open-v108 #qpMobileAccountDrawerV104{
    transform:translateX(-105%) !important;
  }

  body.qp-main-menu-open-v108 #qpMobileAccountOverlayV104{
    display:none !important;
  }

  body.qp-account-open-v108 .sidebar,
  body.qp-account-open-v108 aside.sidebar{
    transform:translateX(-105%) !important;
    pointer-events:none !important;
  }

  html[dir="rtl"] body.qp-account-open-v108 .sidebar,
  html[dir="rtl"] body.qp-account-open-v108 aside.sidebar{
    transform:translateX(105%) !important;
  }

  body.qp-account-open-v108 #mobileMenuOverlay,
  body.qp-account-open-v108 .mobile-menu-overlay{
    display:none !important;
  }
}







/* =========================================================
   QPROCURE V110 - QP BADGE PERMANENTLY DISABLED
   No QP badge is allowed in mobile bottom navigation.
   ========================================================= */
@media (max-width:900px){
  #qpMobileBottomNav .qp-my-qprocure-badge-v99,
  .qp-mobile-bottom-nav .qp-my-qprocure-badge-v99,
  #qpMobileBottomNav [data-qp-badge="QP"],
  .qp-mobile-bottom-nav [data-qp-badge="QP"]{
    display:none !important;
  }
}




/* =========================================================
   QPROCURE V111 - REMOVE OLD MY QPROCURE LOGO FROM BOTTOM NAV
   The remaining logo is .qp-myqprocure-logo-v61 (assets/logo.svg)
   inside #qpMobileAccount.
   ========================================================= */
@media (max-width:900px){
  #qpMobileAccount .qp-myqprocure-logo-v61,
  #qpMobileAccount img[src*="assets/logo.svg"],
  #qpMobileBottomNav #qpMobileAccount > img,
  .qp-mobile-bottom-nav #qpMobileAccount > img{
    display:none !important;
  }

  /* keep the My QProcure item compact after logo removal */
  #qpMobileAccount{
    gap:1px !important;
  }
}




/* =========================================================
   QPROCURE V112 - MOBILE MENU VISIBILITY
   ========================================================= */
@media (max-width:900px){
  body.qp-authenticated .sidebar,
  body.qp-authenticated aside.sidebar{
    transform:translateX(-105%) !important;
    transition:transform .22s ease !important;
  }

  body.qp-authenticated .sidebar.mobile-open,
  body.qp-authenticated aside.sidebar.mobile-open{
    transform:translateX(0) !important;
  }

  html[dir="rtl"] body.qp-authenticated .sidebar,
  html[dir="rtl"] body.qp-authenticated aside.sidebar{
    left:auto !important;
    right:0 !important;
    transform:translateX(105%) !important;
  }

  html[dir="rtl"] body.qp-authenticated .sidebar.mobile-open,
  html[dir="rtl"] body.qp-authenticated aside.sidebar.mobile-open{
    transform:translateX(0) !important;
  }

  #mobileMenuOverlay,
  .mobile-menu-overlay{
    display:none !important;
  }

  #mobileMenuOverlay.open,
  .mobile-menu-overlay.open{
    display:block !important;
  }
}




/* =========================================================
   QPROCURE V113 - LOGOUT IN MY ACCOUNT DRAWER
   ========================================================= */
@media (max-width:900px){

  #qpMobileAccountDrawerV104 .qp-account-logout-v113{
    margin-top:12px !important;
    padding-top:12px !important;
    border-top:1px solid #ece8f1 !important;
  }

  #qpMobileAccountDrawerV104 .qp-account-logout-v113 button{
    width:100% !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    border:0 !important;
    border-radius:8px !important;
    padding:0 10px !important;
    background:#fff3f2 !important;
    color:#b42318 !important;
    font:inherit !important;
    font-size:13px !important;
    font-weight:700 !important;
    cursor:pointer !important;
    text-align:left !important;
  }

  #qpMobileAccountDrawerV104 .qp-account-logout-v113 button:active{
    background:#ffe4e1 !important;
  }

  #qpMobileAccountDrawerV104 .qp-logout-icon-v113{
    width:18px !important;
    flex:0 0 18px !important;
    text-align:center !important;
  }
}




/* =========================================================
   QPROCURE V114 - MOBILE DRAWERS FINAL BEHAVIOR
   - only one drawer visible
   - J tap opens/closes account drawer
   - hamburger opens/closes main menu
   - no overlap
   ========================================================= */
@media (max-width:900px){

  /* MAIN MENU */
  body.qp-authenticated .sidebar,
  body.qp-authenticated aside.sidebar{
    position:fixed !important;
    top:var(--qp-mobile-topbar-h,64px) !important;
    bottom:var(--qp-mobile-bottom-h,68px) !important;
    left:0 !important;
    width:min(78vw,280px) !important;
    max-width:280px !important;
    background:#fff !important;
    z-index:2147483200 !important;
    transform:translateX(-105%) !important;
    transition:transform .20s ease !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.qp-authenticated .sidebar.mobile-open,
  body.qp-authenticated aside.sidebar.mobile-open{
    transform:translateX(0) !important;
  }

  html[dir="rtl"] body.qp-authenticated .sidebar,
  html[dir="rtl"] body.qp-authenticated aside.sidebar{
    left:auto !important;
    right:0 !important;
    transform:translateX(105%) !important;
  }

  html[dir="rtl"] body.qp-authenticated .sidebar.mobile-open,
  html[dir="rtl"] body.qp-authenticated aside.sidebar.mobile-open{
    transform:translateX(0) !important;
  }

  /* ACCOUNT DRAWER */
  #qpMobileAccountDrawerV114{
    position:fixed !important;
    top:var(--qp-mobile-topbar-h,64px) !important;
    right:0 !important;
    bottom:var(--qp-mobile-bottom-h,68px) !important;
    width:min(78vw,300px) !important;
    max-width:300px !important;
    background:#fff !important;
    z-index:2147483300 !important;
    transform:translateX(105%) !important;
    transition:transform .20s ease !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    box-shadow:-10px 0 28px rgba(25,14,45,.15) !important;
  }

  #qpMobileAccountDrawerV114.open{
    transform:translateX(0) !important;
  }

  html[dir="rtl"] #qpMobileAccountDrawerV114{
    right:auto !important;
    left:0 !important;
    transform:translateX(-105%) !important;
    box-shadow:10px 0 28px rgba(25,14,45,.15) !important;
  }

  html[dir="rtl"] #qpMobileAccountDrawerV114.open{
    transform:translateX(0) !important;
  }

  /* SHARED OVERLAY */
  #qpMobileDrawerOverlayV114{
    position:fixed !important;
    top:var(--qp-mobile-topbar-h,64px) !important;
    left:0 !important;
    right:0 !important;
    bottom:var(--qp-mobile-bottom-h,68px) !important;
    background:rgba(20,18,30,.38) !important;
    z-index:2147483100 !important;
    display:none !important;
  }

  #qpMobileDrawerOverlayV114.open{
    display:block !important;
  }

  /* ACCOUNT CONTENT */
  .qp-account-head-v114{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:18px 16px 14px !important;
    border-bottom:1px solid #ece8f1 !important;
  }
  .qp-account-avatar-v114{
    width:42px !important;
    height:42px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:#efe8fb !important;
    color:#5b17a4 !important;
    font-weight:800 !important;
  }
  .qp-account-menu-v114{
    padding:10px 12px 14px !important;
  }
  .qp-account-item-v114{
    width:100% !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    border:0 !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#20192c !important;
    padding:0 10px !important;
    font:inherit !important;
    font-size:13px !important;
    text-align:left !important;
  }
  .qp-account-item-v114:active{
    background:#f2ebfb !important;
  }
  .qp-account-logout-v114{
    margin-top:10px !important;
    padding-top:10px !important;
    border-top:1px solid #ece8f1 !important;
  }
  .qp-account-logout-v114 button{
    width:100% !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    border:0 !important;
    border-radius:8px !important;
    background:#fff3f2 !important;
    color:#b42318 !important;
    padding:0 10px !important;
    font:inherit !important;
    font-size:13px !important;
    font-weight:700 !important;
  }

  /* Bottom nav remains above content, below drawers */
  #qpMobileBottomNav,
  .qp-mobile-bottom-nav{
    z-index:2147483400 !important;
  }
}




/* =========================================================
   QPROCURE V115 - GUEST MENU CLEANUP
   ========================================================= */
@media (max-width:900px){
  body.qp-guest .sidebar .qp-guest-hide-v115,
  body.qp-guest aside.sidebar .qp-guest-hide-v115{
    display:none !important;
  }
}









/* =========================================================
   QPROCURE V118 - STABLE LOGOUT
   One persistent logout row. No blinking / re-creation loop.
   ========================================================= */
@media (max-width:900px){
  .qp-main-logout-v118{
    margin:10px 12px 12px !important;
    padding-top:10px !important;
    border-top:1px solid #ece8f1 !important;
    flex:0 0 auto !important;
    display:block !important;
  }

  .qp-main-logout-v118 button{
    width:100% !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    border:0 !important;
    border-radius:8px !important;
    background:#fff3f2 !important;
    color:#b42318 !important;
    padding:0 12px !important;
    font:inherit !important;
    font-size:13px !important;
    font-weight:700 !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    position:relative !important;
    z-index:5 !important;
  }

  .qp-main-logout-v118 button:active{
    background:#ffe5e2 !important;
  }
}




/* =========================================================
   QPROCURE V119 - MY QPROCURE ACCOUNT + LOGIN GAP FIX
   ========================================================= */
@media (max-width:900px){

  /* Remove the extra blank space below topbar after login */
  body.qp-authenticated .main,
  body.qp-authenticated main.main{
    padding-top:var(--qp-mobile-topbar-h,64px) !important;
    margin-top:0 !important;
  }

  body.qp-authenticated .content,
  body.qp-authenticated section.content,
  body.qp-authenticated #page-dashboard{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  body.qp-authenticated .qp-mobile-marketplace-v36,
  body.qp-authenticated .qp-desktop-dashboard-v41{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* My QProcure bottom item should be visibly interactive */
  #qpMobileAccount,
  #qpMobileBottomNav [data-mobile-page="account"],
  .qp-mobile-bottom-nav [data-mobile-page="account"]{
    cursor:pointer !important;
    pointer-events:auto !important;
  }

  #qpMobileAccount.qp-active-v119,
  #qpMobileBottomNav [data-mobile-page="account"].qp-active-v119{
    color:#5b17a4 !important;
  }
}




/* =========================================================
   QPROCURE V120 - MOBILE COMPANY PROFILE BETTER DISTRIBUTION
   ========================================================= */
@media (max-width:900px){

  /* company page spacing */
  #page-company,
  #page-company.page.active{
    padding:10px 8px 84px !important;
  }

  /* Hero card: logo left, details right */
  #page-company .company-hero{
    display:grid !important;
    grid-template-columns:78px minmax(0,1fr) !important;
    gap:12px !important;
    align-items:start !important;
    padding:12px !important;
    margin:0 0 12px !important;
  }

  #page-company .company-hero > *{
    min-width:0 !important;
  }

  /* Logo block */
  #page-company .company-hero .company-logo-card,
  #page-company .company-hero [class*="logo"]{
    max-width:78px !important;
  }

  #page-company .company-hero img{
    max-width:68px !important;
    max-height:68px !important;
    object-fit:contain !important;
  }

  /* Company title/details */
  #page-company .company-hero h1,
  #page-company .company-hero h2{
    font-size:20px !important;
    line-height:1.15 !important;
    margin:2px 0 6px !important;
    overflow-wrap:anywhere !important;
  }

  #page-company .company-hero p,
  #page-company .company-hero small,
  #page-company .company-hero .company-meta{
    font-size:12px !important;
    line-height:1.45 !important;
  }

  /* Buttons under hero span full width */
  #page-company .company-hero .company-actions,
  #page-company .company-hero + .company-actions,
  #page-company .company-hero button[id*="Edit"],
  #page-company .company-hero button[class*="edit"]{
    grid-column:1 / -1 !important;
  }

  #page-company .company-hero + button,
  #page-company .company-hero + .btn,
  #page-company button[id*="editCompany" i],
  #page-company button[class*="edit-company" i]{
    width:100% !important;
    min-height:42px !important;
    margin:0 0 12px !important;
  }

  /* Tabs: horizontal scroll, equal breathing room */
  #page-company .company-tabs{
    display:flex !important;
    gap:4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    padding:0 4px !important;
    margin:0 0 12px !important;
  }

  #page-company .company-tabs::-webkit-scrollbar{
    display:none !important;
  }

  #page-company .company-tabs button,
  #page-company .company-tabs a{
    flex:0 0 auto !important;
    min-height:42px !important;
    padding:0 12px !important;
    font-size:13px !important;
  }

  /* Content cards */
  #page-company .company-grid,
  #page-company .company-details-grid,
  #page-company [class*="company-grid"]{
    display:block !important;
  }

  #page-company .company-card,
  #page-company .card,
  #page-company [class*="panel"]{
    margin-bottom:10px !important;
  }

  #page-company .company-card,
  #page-company [class*="company-card"]{
    padding:12px !important;
  }

  /* Edit buttons inside cards align right but don't float awkwardly */
  #page-company .company-card button,
  #page-company [class*="company-card"] button{
    max-width:100% !important;
  }

  /* keep company status/badge compact */
  #page-company .status,
  #page-company [class*="status"],
  #page-company .badge{
    width:max-content !important;
    max-width:100% !important;
  }
}




/* =========================================================
   QPROCURE V121 - REMOVE EXTRA MOBILE SPACE UNDER TOPBAR
   Screenshot showed .main padding-top = topbar + primary nav.
   The primary nav is already inside normal page flow, so only
   the fixed topbar height should be reserved.
   ========================================================= */
@media (max-width:900px){

  body.qp-guest .main,
  body.qp-authenticated .main,
  body.qp-guest main.main,
  body.qp-authenticated main.main{
    padding-top:var(--qp-mobile-topbar-h,64px) !important;
    margin-top:0 !important;
  }

  body.qp-guest .content,
  body.qp-authenticated .content,
  body.qp-guest section.content,
  body.qp-authenticated section.content{
    padding-top:0 !important;
    margin-top:0 !important;
  }

  /* Do not reserve the mobile primary-nav height a second time */
  body.qp-guest #qpMobilePrimaryNav,
  body.qp-authenticated #qpMobilePrimaryNav,
  body.qp-guest .qp-mobile-primary-nav,
  body.qp-authenticated .qp-mobile-primary-nav{
    position:relative !important;
    top:auto !important;
  }

  /* Dashboard/banner starts immediately below topbar */
  body.qp-guest #page-dashboard,
  body.qp-authenticated #page-dashboard,
  body.qp-guest .qp-mobile-marketplace-v36,
  body.qp-authenticated .qp-mobile-marketplace-v36,
  body.qp-guest .qp-desktop-dashboard-v41,
  body.qp-authenticated .qp-desktop-dashboard-v41{
    margin-top:0 !important;
    padding-top:0 !important;
  }
}




/* =========================================================
   QPROCURE V122 - MOBILE BANNER / TOP GAP FINAL FIX
   DevTools showed #qpMobileAdminBannerV64 / .qp-v64-copy
   still adding the remaining blank space under the topbar.
   ========================================================= */
@media (max-width:900px){

  /* main reserves ONLY the fixed topbar */
  body.qp-guest .main,
  body.qp-authenticated .main,
  body.qp-guest main.main,
  body.qp-authenticated main.main{
    padding-top:var(--qp-mobile-topbar-h,64px) !important;
    margin-top:0 !important;
  }

  /* mobile banner begins immediately after topbar */
  #qpMobileAdminBannerV64{
    display:block !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;

    margin:0 !important;
    margin-top:0 !important;
    padding-top:0 !important;

    width:100% !important;
    min-height:0 !important;
  }

  #qpMobileAdminBannerV64 .qp-v64-copy,
  #qpMobileAdminBannerV64 .qp-v64-shade,
  #qpMobileAdminBannerV64 .qp-v64-dots{
    margin-top:0 !important;
  }

  #qpMobileAdminBannerV64 .qp-v64-copy{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
  }

  /* remove inherited spacer before/after banner */
  .topbar + #qpMobileAdminBannerV64,
  header.topbar + #qpMobileAdminBannerV64{
    margin-top:0 !important;
  }

  #qpMobileAdminBannerV64 + #qpMobilePrimaryNav,
  #qpMobileAdminBannerV64 + .qp-mobile-primary-nav{
    margin-top:0 !important;
  }

  /* no extra space on page/content wrapper */
  section.content,
  .content,
  #page-dashboard,
  .qp-desktop-dashboard-v41,
  .qp-mobile-marketplace-v36{
    margin-top:0 !important;
  }
}







/* =========================================================
   QPROCURE V124 - RESTORE MOBILE BANNER WITHOUT TOP GAP
   Banner is active again, but no artificial blank space is added.
   ========================================================= */
@media (max-width:900px){

  body.qp-guest .main,
  body.qp-authenticated .main,
  body.qp-guest main.main,
  body.qp-authenticated main.main{
    padding-top:var(--qp-mobile-topbar-h,64px) !important;
    margin-top:0 !important;
  }

  #qpMobileAdminBannerV64{
    display:block !important;
    visibility:visible !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding-top:0 !important;
    overflow:hidden !important;
  }

  #qpMobileAdminBannerV64 .qp-v64-copy,
  #qpMobileAdminBannerV64 .qp-v64-shade,
  #qpMobileAdminBannerV64 .qp-v64-dots{
    margin-top:0 !important;
  }

  #qpMobileAdminBannerV64 .qp-v64-copy{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
  }

  section.content,
  .content,
  #page-dashboard,
  .qp-mobile-marketplace-v36,
  .qp-desktop-dashboard-v41{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  #qpMobilePrimaryNav,
  .qp-mobile-primary-nav{
    margin-top:0 !important;
  }
}




/* =========================================================
   QPROCURE V126 - VERIFIED COMPANIES ON HOME
   ========================================================= */
.qp-verified-home-v126{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:10px 8px 12px;
  scrollbar-width:none;
}
.qp-verified-home-v126::-webkit-scrollbar{display:none}
.qp-verified-company-v126{
  flex:0 0 210px;
  min-width:210px;
  border:1px solid #ebe6f2;
  background:#fff;
  border-radius:12px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.qp-verified-logo-v126{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:10px;
  border:1px solid #eee8f5;
  display:grid;place-items:center;
  overflow:hidden;background:#faf8fd;
}
.qp-verified-logo-v126 img{width:100%;height:100%;object-fit:contain}
.qp-verified-logo-v126 span{font-weight:800;color:#5b17a4}
.qp-verified-info-v126{min-width:0}
.qp-verified-name-v126{
  font-weight:800;font-size:13px;color:#171324;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qp-verified-badge-v126{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:4px;padding:3px 7px;border-radius:999px;
  background:#ecfdf3;color:#067647;font-size:10px;font-weight:700;
}
.qp-verified-empty-v126{
  padding:24px 12px;text-align:center;color:#777;font-size:12px;
}
@media(max-width:900px){
  .qp-verified-company-v126{flex-basis:175px;min-width:175px;padding:10px}
}




/* =========================================================
   QPROCURE V128 - SAFE VERIFIED COMPANY CARD
   ========================================================= */
.qp-verified-home-v128{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px 8px;
  scrollbar-width:none;
}
.qp-verified-home-v128::-webkit-scrollbar{display:none}
.qp-verified-company-v128{
  flex:0 0 190px;
  min-width:190px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #ebe6f2;
  border-radius:10px;
  background:#fff;
  padding:9px;
  text-align:left;
  cursor:pointer;
}
.qp-verified-logo-v128{
  width:38px;height:38px;flex:0 0 38px;
  border:1px solid #eee8f5;border-radius:8px;
  display:grid;place-items:center;overflow:hidden;background:#faf8fd;
  color:#5b17a4;font-weight:800;
}
.qp-verified-logo-v128 img{width:100%;height:100%;object-fit:contain}
.qp-verified-text-v128{display:block;min-width:0}
.qp-verified-text-v128 b{
  display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qp-verified-text-v128 small{
  display:inline-block;margin-top:3px;color:#067647;background:#ecfdf3;
  padding:2px 6px;border-radius:999px;font-size:9px;font-weight:700;
}
.qp-verified-empty-v128{padding:20px 8px;text-align:center;color:#777;font-size:12px}




/* =========================================================
   QPROCURE V129 - VERIFIED COMPANIES CLEAN CARD
   ========================================================= */
.qp-verified-home-v129{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px 8px 12px;
  scrollbar-width:none;
}
.qp-verified-home-v129::-webkit-scrollbar{display:none}

.qp-verified-company-v129{
  flex:0 0 190px;
  min-width:190px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #ebe6f2;
  border-radius:10px;
  background:#fff;
  padding:9px;
  text-align:left;
  cursor:pointer;
}

.qp-verified-logo-v129{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid #eee8f5;
  border-radius:8px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#faf8fd;
  color:#5b17a4;
  font-weight:800;
}
.qp-verified-logo-v129 img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.qp-verified-text-v129{
  display:block;
  min-width:0;
}
.qp-verified-text-v129 b{
  display:block;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qp-verified-text-v129 small{
  display:inline-block;
  margin-top:3px;
  color:#067647;
  background:#ecfdf3;
  padding:2px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
}
.qp-verified-empty-v129{
  padding:20px 8px;
  text-align:center;
  color:#777;
  font-size:12px;
}


/* QPROCURE V133 - remove stale V132 duplicate guest rows */
.qp-guest-categories-v132,
.qp-guest-products-v132{
  display:none !important;
}



/* =========================================================
   QPROCURE V134 - GUEST BANNER UI
   ========================================================= */
.qp-banner-guest-v134{
  position:relative !important;
  overflow:hidden !important;
  border-radius:12px !important;
  color:#fff !important;
}
.qp-banner-guest-v134::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.qp-banner-copy-v134,
.qp-banner-guest-v134 .qp-v64-copy,
.qp-banner-guest-v134 .qp-dash-hero-copy-v41{
  position:relative !important;
  z-index:2 !important;
  max-width:620px !important;
  padding:28px 32px !important;
  color:#fff !important;
}
.qp-banner-guest-v134 h2{
  margin:0 0 8px !important;
  font-size:30px !important;
  line-height:1.1 !important;
  color:#fff !important;
}
.qp-banner-guest-v134 p{
  margin:0 0 18px !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color:#fff !important;
}
.qp-banner-btn-v134{
  display:inline-flex !important;
  align-items:center !important;
  min-height:38px !important;
  padding:0 14px !important;
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:7px !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700 !important;
  background:rgba(75,15,134,.55) !important;
}
.qp-banner-dots-v134{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
}
.qp-banner-dots-v134 button{
  width:7px;height:7px;border:0;border-radius:999px;
  padding:0;background:rgba(255,255,255,.55);cursor:pointer;
}
.qp-banner-dots-v134 button.active{
  width:22px;background:#ffd400;
}
@media(max-width:900px){
  .qp-banner-copy-v134,
  .qp-banner-guest-v134 .qp-v64-copy,
  .qp-banner-guest-v134 .qp-dash-hero-copy-v41{
    padding:18px 18px 28px !important;
    max-width:82% !important;
  }
  .qp-banner-guest-v134 h2{font-size:23px !important}
  .qp-banner-guest-v134 p{font-size:12px !important}
}




/* =========================================================
   QPROCURE V135 - BANNER + MAP
   ========================================================= */
.qp-v135-copy{
  position:relative!important;
  z-index:3!important;
  width:min(650px,72%)!important;
  padding:28px 32px!important;
  color:#fff!important;
}
.qp-v135-copy h2{
  margin:0 0 8px!important;
  color:#fff!important;
  font-size:30px!important;
  line-height:1.08!important;
}
.qp-v135-copy p{
  margin:0 0 18px!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.45!important;
}
.qp-v135-copy a{
  display:inline-flex!important;
  align-items:center!important;
  min-height:38px!important;
  padding:0 15px!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:7px!important;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:700!important;
  background:rgba(75,15,134,.58)!important;
}
.qp-v135-dots{
  position:absolute!important;
  left:50%!important;
  bottom:10px!important;
  z-index:4!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  gap:6px!important;
}
.qp-v135-dots button{
  width:7px!important;
  height:7px!important;
  border:0!important;
  border-radius:999px!important;
  padding:0!important;
  background:rgba(255,255,255,.55)!important;
}
.qp-v135-dots button.active{
  width:22px!important;
  background:#ffd400!important;
}
.qp-v135-map-icon{
  background:transparent!important;
  border:0!important;
}
.qp-v135-pin{
  width:42px;height:42px;
  border:3px solid #5b17a4;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.qp-v135-pin img{
  width:100%;height:100%;object-fit:contain;
}
@media(max-width:900px){
  .qp-v135-copy{
    width:82%!important;
    padding:18px 18px 28px!important;
  }
  .qp-v135-copy h2{font-size:23px!important}
  .qp-v135-copy p{font-size:12px!important}
}




@media(max-width:900px){
  #qpMobileAccountPanel,
  #qpMobileAccountMenu,
  .qp-mobile-account-panel,
  .qp-mobile-account-menu{
    z-index:100000 !important;
  }

  #qpMobileAccountPanel a,
  #qpMobileAccountPanel button,
  #qpMobileAccountMenu a,
  #qpMobileAccountMenu button,
  .qp-mobile-account-panel a,
  .qp-mobile-account-panel button,
  .qp-mobile-account-menu a,
  .qp-mobile-account-menu button{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
}




/* =========================================================
   QPROCURE V141 - MARKETPLACE DB BANNER
   ========================================================= */
.qp-market-banner-db-v141{
  position:relative !important;
  overflow:hidden !important;
  background-repeat:no-repeat !important;
  border-radius:14px !important;
}
.qp-market-banner-original-v141{
  visibility:hidden !important;
}
.qp-market-banner-copy-v141{
  position:relative !important;
  z-index:3 !important;
  width:min(610px,48%) !important;
  min-height:220px !important;
  padding:30px 32px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  color:#21122c !important;
}
.qp-market-banner-copy-v141 h2{
  margin:0 0 12px !important;
  font-size:34px !important;
  line-height:1.05 !important;
  color:#21122c !important;
}
.qp-market-banner-copy-v141 p{
  margin:0 0 20px !important;
  max-width:520px !important;
  font-size:15px !important;
  line-height:1.5 !important;
  color:#5f5367 !important;
}
.qp-market-banner-copy-v141 a{
  align-self:flex-start !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:40px !important;
  padding:0 17px !important;
  border-radius:8px !important;
  background:#6517a8 !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:800 !important;
}
.qp-market-banner-dots-v141{
  position:absolute !important;
  z-index:4 !important;
  left:50% !important;
  bottom:10px !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  gap:6px !important;
}
.qp-market-banner-dots-v141 button{
  width:7px !important;
  height:7px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(101,23,168,.35) !important;
}
.qp-market-banner-dots-v141 button.active{
  width:22px !important;
  background:#6517a8 !important;
}
@media(max-width:900px){
  .qp-market-banner-copy-v141{
    width:76% !important;
    min-height:180px !important;
    padding:20px 18px 28px !important;
  }
  .qp-market-banner-copy-v141 h2{font-size:25px !important}
  .qp-market-banner-copy-v141 p{font-size:12px !important}
}




/* =========================================================
   QPROCURE V143 - MARKETPLACE HERO CLEAN LAYOUT
   ========================================================= */
.qp-market-hero-clean-v143{
  position:relative !important;
  height:245px !important;
  min-height:245px !important;
  max-height:245px !important;
  overflow:hidden !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center center !important;
}

.qp-market-hero-clean-v143 > .qp-market-old-layer-v143{
  display:none !important;
}

.qp-market-hero-clean-v143 .qp-market-banner-copy-v141{
  position:absolute !important;
  inset:0 auto 0 0 !important;
  width:min(610px,48%) !important;
  min-height:100% !important;
  height:100% !important;
  padding:28px 32px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  z-index:3 !important;
}

.qp-market-hero-clean-v143 .qp-market-banner-dots-v141{
  z-index:5 !important;
}

@media(max-width:900px){
  .qp-market-hero-clean-v143{
    height:190px !important;
    min-height:190px !important;
    max-height:190px !important;
  }
  .qp-market-hero-clean-v143 .qp-market-banner-copy-v141{
    width:78% !important;
    padding:16px 18px 26px !important;
  }
}




/* =========================================================
   QPROCURE V144 - MARKETPLACE PRODUCT CARD LAYOUT
   Fixed image size + clean product typography/alignment
   ========================================================= */

/* Make product card grids consistent */
#page-marketplace .products-grid,
#page-marketplace .marketplace-products-grid,
#page-marketplace .qp-products-grid,
#page-marketplace [class*="product-grid"] {
  align-items: stretch !important;
}

/* Generic product card shells */
#page-marketplace .product-card,
#page-marketplace .qp-product-card,
#page-marketplace .marketplace-product-card,
#page-marketplace [class*="product-card"] {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 430px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* Product image area: SAME height for all products */
#page-marketplace .product-card-image,
#page-marketplace .qp-product-card-image,
#page-marketplace .marketplace-product-image,
#page-marketplace [class*="product-image"],
#page-marketplace [class*="card-image"] {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  overflow: hidden !important;
  background: #f7f6f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Never stretch product images */
#page-marketplace .product-card-image img,
#page-marketplace .qp-product-card-image img,
#page-marketplace .marketplace-product-image img,
#page-marketplace [class*="product-image"] img,
#page-marketplace [class*="card-image"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Product text/content area */
#page-marketplace .product-card-body,
#page-marketplace .qp-product-card-body,
#page-marketplace .marketplace-product-body,
#page-marketplace [class*="product-body"],
#page-marketplace [class*="card-body"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 5px !important;
  padding: 12px 12px 10px !important;
  min-width: 0 !important;
}

/* Product title */
#page-marketplace .product-card-title,
#page-marketplace .qp-product-title,
#page-marketplace .marketplace-product-title,
#page-marketplace [class*="product-title"] {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #24172f !important;
  min-height: 38px !important;
  max-height: 38px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Supplier/company name */
#page-marketplace .product-card-company,
#page-marketplace .qp-product-company,
#page-marketplace .marketplace-product-company,
#page-marketplace [class*="supplier-name"],
#page-marketplace [class*="company-name"] {
  font-size: 11px !important;
  line-height: 1.25 !important;
  color: #80798a !important;
  min-height: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Rating row */
#page-marketplace .product-card-rating,
#page-marketplace .qp-product-rating,
#page-marketplace .marketplace-product-rating,
#page-marketplace [class*="rating"] {
  min-height: 17px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

/* Price row */
#page-marketplace .product-card-price-row,
#page-marketplace .qp-product-price-row,
#page-marketplace .marketplace-product-price-row,
#page-marketplace [class*="price-row"] {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  min-height: 28px !important;
}

#page-marketplace .product-card-price,
#page-marketplace .qp-product-price,
#page-marketplace .marketplace-product-price,
#page-marketplace [class*="product-price"] {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #5b17a4 !important;
}

#page-marketplace .product-card-unit,
#page-marketplace .qp-product-unit,
#page-marketplace .marketplace-product-unit,
#page-marketplace [class*="price-unit"] {
  font-size: 10px !important;
  color: #8d8794 !important;
}

#page-marketplace .product-card-old-price,
#page-marketplace .qp-product-old-price,
#page-marketplace .marketplace-product-old-price,
#page-marketplace [class*="old-price"] {
  font-size: 10px !important;
  color: #aaa4af !important;
  text-decoration: line-through !important;
}

/* Stock/min order row */
#page-marketplace [class*="stock"],
#page-marketplace [class*="availability"] {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* Footer/button aligned at the bottom */
#page-marketplace .product-card-footer,
#page-marketplace .qp-product-card-footer,
#page-marketplace .marketplace-product-footer,
#page-marketplace [class*="card-footer"] {
  margin-top: auto !important;
  padding: 0 12px 12px !important;
}

#page-marketplace .product-card-btn,
#page-marketplace .qp-product-card-btn,
#page-marketplace .marketplace-product-btn,
#page-marketplace [class*="add-to-cart"] {
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

/* Keep discount + favorite badges in fixed positions */
#page-marketplace [class*="discount"],
#page-marketplace [class*="badge"] {
  z-index: 4 !important;
}

@media (max-width: 900px) {
  #page-marketplace .product-card,
  #page-marketplace .qp-product-card,
  #page-marketplace .marketplace-product-card,
  #page-marketplace [class*="product-card"] {
    min-height: 390px !important;
  }

  #page-marketplace .product-card-image,
  #page-marketplace .qp-product-card-image,
  #page-marketplace .marketplace-product-image,
  #page-marketplace [class*="product-image"],
  #page-marketplace [class*="card-image"] {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }

  #page-marketplace .product-card-title,
  #page-marketplace .qp-product-title,
  #page-marketplace .marketplace-product-title,
  #page-marketplace [class*="product-title"] {
    font-size: 14px !important;
  }

  #page-marketplace .product-card-price,
  #page-marketplace .qp-product-price,
  #page-marketplace .marketplace-product-price,
  #page-marketplace [class*="product-price"] {
    font-size: 16px !important;
  }
}




/* QPROCURE V145 - dynamic marketplace product image size */
#page-marketplace .product-card-image,
#page-marketplace .qp-product-card-image,
#page-marketplace .marketplace-product-image,
#page-marketplace [class*="product-image"],
#page-marketplace [class*="card-image"]{
  height:var(--qp-market-product-image-h,220px)!important;
  min-height:var(--qp-market-product-image-h,220px)!important;
  max-height:var(--qp-market-product-image-h,220px)!important;
}
@media(max-width:900px){
  #page-marketplace .product-card-image,
  #page-marketplace .qp-product-card-image,
  #page-marketplace .marketplace-product-image,
  #page-marketplace [class*="product-image"],
  #page-marketplace [class*="card-image"]{
    height:var(--qp-market-product-image-h-mobile,180px)!important;
    min-height:var(--qp-market-product-image-h-mobile,180px)!important;
    max-height:var(--qp-market-product-image-h-mobile,180px)!important;
  }
}




/* =========================================================
   QPROCURE V146 - MARKETPLACE ALL PRODUCTS COMPACT
   Smaller, cleaner and more ordered product cards
   ========================================================= */

#page-marketplace .products-grid,
#page-marketplace .marketplace-products-grid,
#page-marketplace .qp-products-grid,
#page-marketplace [class*="product-grid"]{
  gap:10px !important;
  align-items:stretch !important;
}

#page-marketplace .product-card,
#page-marketplace .qp-product-card,
#page-marketplace .marketplace-product-card,
#page-marketplace [class*="product-card"]{
  min-height:360px !important;
  border-radius:11px !important;
  overflow:hidden !important;
}

#page-marketplace .product-card-image,
#page-marketplace .qp-product-card-image,
#page-marketplace .marketplace-product-image,
#page-marketplace [class*="product-image"],
#page-marketplace [class*="card-image"]{
  height:150px !important;
  min-height:150px !important;
  max-height:150px !important;
  background:#f7f6f9 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

#page-marketplace .product-card-image img,
#page-marketplace .qp-product-card-image img,
#page-marketplace .marketplace-product-image img,
#page-marketplace [class*="product-image"] img,
#page-marketplace [class*="card-image"] img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

#page-marketplace .product-card-body,
#page-marketplace .qp-product-card-body,
#page-marketplace .marketplace-product-body,
#page-marketplace [class*="product-body"],
#page-marketplace [class*="card-body"]{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  gap:3px !important;
  padding:9px 10px 8px !important;
  min-width:0 !important;
}

#page-marketplace .product-card-title,
#page-marketplace .qp-product-title,
#page-marketplace .marketplace-product-title,
#page-marketplace [class*="product-title"]{
  font-size:13px !important;
  line-height:1.2 !important;
  min-height:31px !important;
  max-height:31px !important;
  margin:0 !important;
  font-weight:800 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

#page-marketplace .product-card-company,
#page-marketplace .qp-product-company,
#page-marketplace .marketplace-product-company,
#page-marketplace [class*="supplier-name"],
#page-marketplace [class*="company-name"]{
  font-size:9.5px !important;
  min-height:12px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#page-marketplace .product-card-rating,
#page-marketplace .qp-product-rating,
#page-marketplace .marketplace-product-rating,
#page-marketplace [class*="rating"]{
  font-size:9.5px !important;
  min-height:13px !important;
  gap:3px !important;
}

#page-marketplace .product-card-price-row,
#page-marketplace .qp-product-price-row,
#page-marketplace .marketplace-product-price-row,
#page-marketplace [class*="price-row"]{
  display:flex !important;
  align-items:baseline !important;
  flex-wrap:wrap !important;
  min-height:22px !important;
  gap:3px !important;
}

#page-marketplace .product-card-price,
#page-marketplace .qp-product-price,
#page-marketplace .marketplace-product-price,
#page-marketplace [class*="product-price"]{
  font-size:15px !important;
  line-height:1.05 !important;
  font-weight:800 !important;
  color:#5b17a4 !important;
}

#page-marketplace .product-card-unit,
#page-marketplace .qp-product-unit,
#page-marketplace .marketplace-product-unit,
#page-marketplace [class*="price-unit"],
#page-marketplace [class*="old-price"]{
  font-size:8.5px !important;
}

#page-marketplace [class*="stock"],
#page-marketplace [class*="availability"],
#page-marketplace [class*="min-order"]{
  font-size:8.5px !important;
}

#page-marketplace .product-card-footer,
#page-marketplace .qp-product-card-footer,
#page-marketplace .marketplace-product-footer,
#page-marketplace [class*="card-footer"]{
  margin-top:auto !important;
  padding:0 10px 9px !important;
}

#page-marketplace .product-card-btn,
#page-marketplace .qp-product-card-btn,
#page-marketplace .marketplace-product-btn,
#page-marketplace [class*="add-to-cart"]{
  min-height:32px !important;
  height:32px !important;
  font-size:11px !important;
  border-radius:7px !important;
}

#page-marketplace [class*="favorite"],
#page-marketplace [class*="wishlist"]{
  transform:scale(.88);
  transform-origin:top right;
}

#page-marketplace [class*="discount"],
#page-marketplace [class*="badge"]{
  font-size:8px !important;
}

@media(min-width:1200px){
  #page-marketplace .products-grid,
  #page-marketplace .marketplace-products-grid,
  #page-marketplace .qp-products-grid,
  #page-marketplace [class*="product-grid"]{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

@media(max-width:900px){
  #page-marketplace .product-card,
  #page-marketplace .qp-product-card,
  #page-marketplace .marketplace-product-card,
  #page-marketplace [class*="product-card"]{
    min-height:330px !important;
  }

  #page-marketplace .product-card-image,
  #page-marketplace .qp-product-card-image,
  #page-marketplace .marketplace-product-image,
  #page-marketplace [class*="product-image"],
  #page-marketplace [class*="card-image"]{
    height:140px !important;
    min-height:140px !important;
    max-height:140px !important;
  }
}