:root{--bg:#f6f7fb;--card:#fff;--text:#1f2937;--muted:#6b7280;--brand:#0d6efd;--border:#e5e7eb}.body-bg{background:var(--bg);color:var(--text)}.app-card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.05)}.product-img{height:170px;object-fit:contain;object-position:center;background:#fff;border:1px solid var(--border);border-radius:14px;padding:6px}.thumb{width:58px;height:58px;object-fit:contain;object-position:center;background:#fff;border:1px solid var(--border);border-radius:10px;padding:3px}.sticky-cart{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);z-index:1030;padding:10px 14px;box-shadow:0 -6px 18px rgba(0,0,0,.08)}.selected-badge{position:absolute;top:8px;right:8px;font-size:14px}.qty-btn{width:36px;height:36px;font-weight:700}.admin-sidebar a{display:block;padding:10px 12px;border-radius:10px;color:#1f2937;text-decoration:none}.admin-sidebar a:hover,.admin-sidebar a.active{background:#e9f2ff;color:#0d6efd}.table-responsive{border-radius:14px}.big-total{font-size:1.8rem;font-weight:800}.form-control,.form-select,.btn{border-radius:10px}.navbar{box-shadow:0 3px 14px rgba(0,0,0,.06)}@media(max-width:768px){.product-img{height:150px}.big-total{font-size:1.45rem}.admin-sidebar{display:flex;overflow:auto;gap:6px}.admin-sidebar a{white-space:nowrap}.table{font-size:14px}}
.sidebar-label,.menu-title{font-size:1rem;font-weight:700;color:#1f2937;padding:10px 12px;text-transform:none;letter-spacing:0}.promo-alert{border-color:#bbf7d0;background:linear-gradient(135deg,#f0fdf4,#ffffff)}.promo-flag{font-size:28px;line-height:1}.promo-badge{position:absolute;top:8px;left:8px;background:#16a34a;color:#fff;font-size:11px;font-weight:800;padding:4px 7px;border-radius:999px;z-index:2}.selected-badge{z-index:3}.form-text{font-size:12px}

.menu-title{display:block;padding:10px 12px;border-radius:10px;color:#1f2937;text-decoration:none;font-weight:700;background:#f8fafc;border:1px solid #e5e7eb;margin-bottom:6px}
@media(max-width:768px){.menu-title{white-space:nowrap;display:flex;align-items:center;margin-bottom:0}}
.payment-action-box{border:2px dashed #f59e0b;background:#fffbeb;border-radius:16px;padding:14px}
.upload-proof-box{border:2px dashed #0d6efd;background:#f8fbff;border-radius:16px;padding:14px}
.send-option-box{border:1px solid #d1fae5;background:#f0fdf4;border-radius:16px;padding:14px}
.action-icon{font-size:1.2rem}


/* Cart checkout modal: keep header/footer fixed and scroll only cart form content */
#cartModal .modal-dialog{max-height:calc(100vh - 1rem);}
#cartModal .modal-content{max-height:calc(100vh - 1rem);display:flex;flex-direction:column;}
#cartModal .modal-body{overflow-y:auto;max-height:calc(100vh - 170px);padding-bottom:18px;}
#cartRows{max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:14px;background:#fff;}
#cartRows .table{margin-bottom:0;min-width:620px;}
#cartRows thead th{position:sticky;top:0;background:#fff;z-index:2;}
#cartModal .modal-footer{position:sticky;bottom:0;background:#fff;z-index:3;border-top:1px solid var(--border);}

/* Product module: only product table area scrolls; controls remain fixed */
.product-page-shell{height:calc(100vh - 92px);display:flex;flex-direction:column;min-height:0;}
.product-page-toolbar{flex:0 0 auto;}
.product-table-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.product-table-card .product-search-bar{flex:0 0 auto;}
.product-table-scroll{flex:1 1 auto;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:14px;}
.product-table-scroll table{min-width:1180px;margin-bottom:0;}
.product-table-scroll thead th{position:sticky;top:0;background:#fff;z-index:2;box-shadow:0 1px 0 var(--border);}
@media(max-width:768px){
  #cartModal .modal-dialog{margin:.25rem;max-height:calc(100vh - .5rem);}
  #cartModal .modal-content{max-height:calc(100vh - .5rem);}
  #cartModal .modal-body{max-height:calc(100vh - 155px);}
  #cartRows{max-height:210px;}
  .product-page-shell{height:calc(100vh - 82px);}
  .product-table-scroll table{min-width:1050px;}
}

/* Customer profile flow */
.customer-profile-btn{white-space:nowrap;border-radius:999px}
.app-card-soft{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px}
#profileSummary{line-height:1.4}
@media(max-width:576px){.navbar-brand{font-size:1rem}.customer-profile-btn{padding:.35rem .6rem}}


/* Backend fixed layout: topbar and main menu stay visible; content scrolls separately */
.admin-body{height:100vh;overflow:hidden;}
.admin-topbar{z-index:1040;}
.admin-shell{height:calc(100vh - 64px);overflow:hidden;}
.admin-layout{height:100%;min-height:0;}
.admin-menu-col{height:100%;min-height:0;}
.admin-sidebar{position:sticky;top:0;max-height:calc(100vh - 88px);overflow-y:auto;}
.admin-content{height:100%;min-height:0;overflow-y:auto;padding-bottom:24px;}
.menu-title{font-size:1.28rem!important;font-weight:800!important;line-height:1.2;padding:11px 12px;margin-bottom:8px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;color:#1f2937;}
.admin-sidebar a{font-size:1rem;}

/* Backend tables: sortable + sticky table header */
.admin-content .table-responsive{max-height:calc(100vh - 245px);overflow:auto;border:1px solid var(--border);border-radius:14px;}
.admin-content .table-responsive table{margin-bottom:0;min-width:760px;}
.admin-content table thead th{position:sticky;top:0;background:#fff;z-index:5;box-shadow:0 1px 0 var(--border);}
.sortable-th{cursor:pointer;user-select:none;white-space:nowrap;}
.sortable-th:after{content:' ⇅';font-size:.78rem;color:#94a3b8;}
.sortable-th[data-sort-dir="asc"]:after{content:' ↑';color:#0d6efd;font-weight:800;}
.sortable-th[data-sort-dir="desc"]:after{content:' ↓';color:#0d6efd;font-weight:800;}

/* Product page: menu/sidebar stays still, toolbar stays above, only product table scrolls */
.product-page-shell{height:100%;display:flex;flex-direction:column;min-height:0;}
.product-page-toolbar{flex:0 0 auto;}
.product-table-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.product-table-card .product-search-bar{flex:0 0 auto;}
.product-table-scroll{flex:1 1 auto;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:14px;}
.product-table-scroll table{min-width:1180px;margin-bottom:0;}
.product-table-scroll thead th{position:sticky;top:0;background:#fff;z-index:6;box-shadow:0 1px 0 var(--border);}

/* Checkout modal: entire lower part must be reachable by scroll on mobile/desktop */
#cartModal .modal-dialog{height:calc(100dvh - 1rem);max-height:calc(100dvh - 1rem);margin:.5rem auto;}
#cartModal .modal-content{height:100%;max-height:100%;display:flex;flex-direction:column;overflow:hidden;}
#cartModal .modal-header{flex:0 0 auto;}
#cartModal .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:110px;}
#cartModal .modal-footer{flex:0 0 auto;background:#fff;border-top:1px solid var(--border);}
#cartRows{max-height:240px;overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff;}
#cartRows .table{margin-bottom:0;min-width:620px;}
#cartRows thead th{position:sticky;top:0;background:#fff;z-index:2;}

@media(max-width:991px){
  .admin-body{overflow:auto;height:auto;}
  .admin-shell{height:auto;overflow:visible;}
  .admin-layout{height:auto;}
  .admin-menu-col{height:auto;}
  .admin-sidebar{position:sticky;top:64px;z-index:1035;max-height:none;overflow-x:auto;overflow-y:hidden;display:flex;gap:6px;align-items:center;}
  .admin-sidebar a,.menu-title{white-space:nowrap;margin-bottom:0;}
  .menu-title{font-size:1.18rem!important;}
  .admin-content{height:auto;overflow:visible;}
  .admin-content .table-responsive{max-height:70vh;}
}
@media(max-width:576px){
  #cartModal .modal-dialog{height:100dvh;max-height:100dvh;margin:0;}
  #cartModal .modal-content{border-radius:0;}
  #cartModal .modal-body{padding-bottom:130px;}
  #cartRows{max-height:190px;}
}


/* FINAL FIX 2026-05-16: checkout modal must scroll inside the modal, not behind page.
   The form is the direct child of modal-content, so it also must be a flex column. */
#cartModal{--tw-modal-gap:12px;}
#cartModal .modal-dialog,
#cartModal .modal-dialog.modal-dialog-scrollable{
  height:calc(100dvh - (var(--tw-modal-gap) * 2)) !important;
  max-height:calc(100dvh - (var(--tw-modal-gap) * 2)) !important;
  margin:var(--tw-modal-gap) auto !important;
  display:flex !important;
  align-items:stretch !important;
}
#cartModal .modal-content{
  height:100% !important;
  max-height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
#cartModal form,
#cartModal .checkout-form{
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
#cartModal .modal-header{
  flex:0 0 auto !important;
}
#cartModal .modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  padding-bottom:28px !important;
}
#cartModal .modal-footer{
  flex:0 0 auto !important;
  position:relative !important;
  bottom:auto !important;
  background:#fff !important;
  z-index:4 !important;
}
#cartRows{
  max-height:220px !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
#cartRows .table-responsive{max-height:none !important;overflow:visible !important;border:0 !important;}

/* FINAL FIX: backend menu fixed separately; only content/table scrolls on desktop */
@media(min-width:992px){
  .admin-body{height:100dvh !important;overflow:hidden !important;}
  .admin-topbar{height:64px;min-height:64px;}
  .admin-shell{height:calc(100dvh - 64px) !important;overflow:hidden !important;}
  .admin-layout{height:100% !important;min-height:0 !important;}
  .admin-menu-col{height:100% !important;min-height:0 !important;overflow:hidden !important;}
  .admin-sidebar{height:100% !important;max-height:100% !important;overflow-y:auto !important;position:relative !important;top:auto !important;}
  .admin-content{height:100% !important;min-height:0 !important;overflow-y:auto !important;}
  .product-page-shell{height:100% !important;min-height:0 !important;overflow:hidden !important;}
  .product-page-toolbar{flex:0 0 auto !important;}
  .product-table-card{flex:1 1 auto !important;min-height:0 !important;overflow:hidden !important;}
  .product-table-scroll{flex:1 1 auto !important;min-height:0 !important;overflow:auto !important;}
  .product-table-scroll thead th{position:sticky !important;top:0 !important;z-index:10 !important;background:#fff !important;}
}
.menu-title{
  font-size:1.45rem !important;
  font-weight:900 !important;
  padding:12px 12px !important;
  margin-bottom:8px !important;
  display:block !important;
  text-align:left !important;
}
@media(max-width:576px){
  #cartModal{--tw-modal-gap:0px;}
  #cartModal .modal-dialog,
  #cartModal .modal-dialog.modal-dialog-scrollable{
    width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
  }
  #cartModal .modal-content{border-radius:0 !important;}
  #cartRows{max-height:180px !important;}
}


/* IMAGE FIT FIX: customer product pictures show full picture, not cropped */
.product-img{
  width:100% !important;
  height:170px !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  padding:6px !important;
}
.thumb{
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff !important;
}
.customer-banner-img{
  width:100% !important;
  max-height:260px !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff !important;
  border-radius:18px !important;
}
@media(max-width:768px){
  .product-img{height:150px !important;}
  .customer-banner-img{max-height:210px !important;}
}

/* THUMBNAIL QUALITY FIX: show full product photo without cropping */
.product-photo-frame{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  min-height:150px !important;
  max-height:210px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
  border:1px solid #e5e7eb !important;
  border-radius:16px !important;
  padding:8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7) !important;
}
.product-photo-frame .product-img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:12px !important;
  padding:0 !important;
  background:transparent !important;
  display:block !important;
}
.product-photo-frame .no-photo{
  background:#f8fafc !important;
  border:1px dashed #d1d5db !important;
}
.product-card .app-card{
  overflow:hidden !important;
}
@media(max-width:768px){
  .product-photo-frame{min-height:135px !important;max-height:180px !important;padding:6px !important;}
}

/* CUSTOMER PRODUCT CARD FINAL: full picture thumbnail, bigger price/qty, cleaner positions */
#productGrid{align-items:stretch;}
.customer-product-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:390px !important;
  border-radius:18px !important;
  overflow:hidden !important;
}
.customer-product-card .product-photo-frame{
  width:100% !important;
  height:230px !important;
  min-height:230px !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:16px !important;
  padding:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.customer-product-card .product-photo-frame .product-img,
.customer-product-card .product-img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:12px !important;
  padding:0 !important;
  background:#fff !important;
  display:block !important;
}
.customer-product-card .selected-badge{
  top:8px !important;
  right:8px !important;
  min-width:38px !important;
  height:38px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
  font-size:1.15rem !important;
  font-weight:900 !important;
  z-index:6 !important;
}
.customer-product-card .selected-badge.d-none{display:none !important;}
.customer-product-card .promo-badge{z-index:6 !important;}
.product-info-area{
  flex:1 1 auto !important;
  min-height:74px !important;
  padding:2px 4px 0 4px !important;
}
.product-name-title{
  font-size:1.02rem !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  color:#111827 !important;
  margin-bottom:8px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.product-meta-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:6px !important;
}
.product-category-pill{
  display:inline-flex !important;
  align-items:center !important;
  max-width:100% !important;
  padding:5px 10px !important;
  border:1px solid #dbeafe !important;
  border-radius:999px !important;
  background:#eff6ff !important;
  color:#374151 !important;
  font-size:.9rem !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.product-promo-text{
  display:inline-flex !important;
  color:#15803d !important;
  font-size:.86rem !important;
  font-weight:800 !important;
}
.product-bottom-bar{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-top:10px !important;
  padding:8px 4px 2px 4px !important;
  border-top:1px solid #f1f5f9 !important;
}
.product-price-block{
  min-width:0 !important;
  flex:1 1 auto !important;
}
.product-main-price{
  font-size:1.45rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#0d6efd !important;
  white-space:nowrap !important;
}
.product-normal-price{
  font-size:.92rem !important;
  color:#6b7280 !important;
  text-decoration:line-through !important;
  line-height:1.1 !important;
  margin-bottom:2px !important;
}
.product-qty-control{
  flex:0 0 auto !important;
  display:grid !important;
  grid-template-columns:42px 34px 42px !important;
  align-items:center !important;
  justify-content:end !important;
  gap:6px !important;
}
.product-qty-control .qty-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  border-radius:12px !important;
  font-size:1.25rem !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.product-qty-control .qty{
  min-width:34px !important;
  text-align:center !important;
  font-size:1.25rem !important;
  line-height:1 !important;
  color:#111827 !important;
}
@media(min-width:1200px){
  .customer-product-card .product-photo-frame{height:250px !important;min-height:250px !important;}
  .customer-product-card{min-height:420px !important;}
}
@media(max-width:768px){
  #productGrid{--bs-gutter-x:.75rem;--bs-gutter-y:.75rem;}
  .customer-product-card{min-height:335px !important;border-radius:16px !important;}
  .customer-product-card .product-photo-frame{height:170px !important;min-height:170px !important;padding:7px !important;border-radius:14px !important;}
  .product-name-title{font-size:.95rem !important;line-height:1.22 !important;min-height:42px !important;margin-bottom:6px !important;}
  .product-info-area{min-height:76px !important;padding:0 2px !important;}
  .product-category-pill{font-size:.82rem !important;padding:4px 8px !important;max-width:100% !important;}
  .product-main-price{font-size:1.32rem !important;}
  .product-bottom-bar{gap:6px !important;padding:7px 2px 1px 2px !important;}
  .product-qty-control{grid-template-columns:38px 30px 38px !important;gap:4px !important;}
  .product-qty-control .qty-btn{width:38px !important;height:38px !important;min-width:38px !important;font-size:1.15rem !important;border-radius:11px !important;}
  .product-qty-control .qty{min-width:30px !important;font-size:1.15rem !important;}
  .customer-product-card .selected-badge{min-width:34px !important;height:34px !important;font-size:1rem !important;}
}
@media(max-width:420px){
  .customer-product-card{min-height:320px !important;}
  .customer-product-card .product-photo-frame{height:155px !important;min-height:155px !important;}
  .product-name-title{font-size:.9rem !important;}
  .product-main-price{font-size:1.22rem !important;}
  .product-qty-control{grid-template-columns:36px 28px 36px !important;}
  .product-qty-control .qty-btn{width:36px !important;height:36px !important;min-width:36px !important;}
  .product-qty-control .qty{min-width:28px !important;}
}

/* REVERT STYLE + MEENA-LIKE IMAGE THUMBNAIL FIX
   Keep the original Toko Warisan grid style, but make customer product photos
   display like grocery thumbnails: full image visible, centered, clean white box, no crop. */
#productGrid{align-items:stretch !important;}
.customer-product-card{
  display:flex !important;
  flex-direction:column !important;
  background:#fff !important;
  border-radius:18px !important;
}
.customer-product-card .product-photo-frame{
  width:100% !important;
  height:245px !important;
  min-height:245px !important;
  max-height:245px !important;
  background:#fff !important;
  border:1px solid #eef0f3 !important;
  border-radius:16px !important;
  padding:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8) !important;
}
.customer-product-card .product-photo-frame img.product-img,
.customer-product-card img.product-img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  background:transparent !important;
  display:block !important;
}
.customer-product-card .product-img.no-photo{
  width:100% !important;
  height:100% !important;
  border:1px dashed #d1d5db !important;
  border-radius:12px !important;
  background:#f8fafc !important;
}
.customer-product-card .product-info-area{
  padding:4px 6px 0 6px !important;
}
.customer-product-card .product-name-title{
  font-size:1.02rem !important;
  font-weight:850 !important;
  line-height:1.25 !important;
}
.customer-product-card .product-main-price{
  font-size:1.45rem !important;
  font-weight:900 !important;
}
.customer-product-card .product-bottom-bar{
  margin-top:auto !important;
}
@media(min-width:1200px){
  .customer-product-card .product-photo-frame{
    height:260px !important;
    min-height:260px !important;
    max-height:260px !important;
  }
}
@media(max-width:768px){
  .customer-product-card .product-photo-frame{
    height:180px !important;
    min-height:180px !important;
    max-height:180px !important;
    padding:8px !important;
  }
  .customer-product-card .product-main-price{font-size:1.28rem !important;}
}
@media(max-width:420px){
  .customer-product-card .product-photo-frame{
    height:165px !important;
    min-height:165px !important;
    max-height:165px !important;
  }
}


/* 2026-05-17 FINAL: mobile-app style product thumbnails + strict product-table-only scrolling */
/* Customer product cards: pastel thumbnail box like modern grocery/mobile apps */
#productGrid{align-items:stretch !important;}
#productGrid > .product-card .customer-product-card{
  border-radius:18px !important;
  border:1px solid #eef0f4 !important;
  box-shadow:0 8px 22px rgba(15,23,42,.055) !important;
  padding:10px !important;
  background:#ffffff !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:360px !important;
  overflow:hidden !important;
}
#productGrid > .product-card .product-photo-frame{
  width:100% !important;
  height:210px !important;
  min-height:210px !important;
  max-height:210px !important;
  border:0 !important;
  border-radius:18px !important;
  padding:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:#f4f0ff !important;
  box-shadow:none !important;
}
#productGrid > .product-card:nth-child(6n+1) .product-photo-frame{background:#fff0e8 !important;}
#productGrid > .product-card:nth-child(6n+2) .product-photo-frame{background:#fff8d9 !important;}
#productGrid > .product-card:nth-child(6n+3) .product-photo-frame{background:#f0ecff !important;}
#productGrid > .product-card:nth-child(6n+4) .product-photo-frame{background:#ffeef5 !important;}
#productGrid > .product-card:nth-child(6n+5) .product-photo-frame{background:#eaf8ef !important;}
#productGrid > .product-card:nth-child(6n+6) .product-photo-frame{background:#eef7ff !important;}
#productGrid > .product-card .product-photo-frame img.product-img,
#productGrid > .product-card .customer-product-card img.product-img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  filter:drop-shadow(0 12px 12px rgba(15,23,42,.08));
}
#productGrid > .product-card .product-img.no-photo{
  width:100% !important;
  height:100% !important;
  border:1px dashed #cbd5e1 !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.65) !important;
}
#productGrid > .product-card .product-info-area{
  padding:9px 4px 0 4px !important;
  min-height:78px !important;
}
#productGrid > .product-card .product-name-title{
  color:#111827 !important;
  font-size:1.02rem !important;
  font-weight:850 !important;
  line-height:1.22 !important;
  letter-spacing:.005em !important;
  margin-bottom:7px !important;
}
#productGrid > .product-card .product-category-pill{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  color:#6b7280 !important;
  font-size:.9rem !important;
  border-radius:0 !important;
}
#productGrid > .product-card .product-bottom-bar{
  border-top:0 !important;
  padding:8px 3px 2px 3px !important;
  margin-top:auto !important;
  align-items:center !important;
}
#productGrid > .product-card .product-main-price{
  font-size:1.42rem !important;
  font-weight:900 !important;
  color:#111827 !important;
}
#productGrid > .product-card .product-normal-price{
  color:#6b7280 !important;
  font-size:.86rem !important;
}
#productGrid > .product-card .product-qty-control{
  grid-template-columns:40px 32px 40px !important;
  gap:5px !important;
}
#productGrid > .product-card .product-qty-control .qty-btn{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  border-radius:12px !important;
  font-size:1.15rem !important;
}
#productGrid > .product-card .product-qty-control .qty{
  min-width:32px !important;
  font-size:1.18rem !important;
  font-weight:900 !important;
}
#productGrid > .product-card .selected-badge{
  top:14px !important;
  right:14px !important;
  border-radius:12px !important;
  min-width:36px !important;
  height:36px !important;
  font-weight:900 !important;
  font-size:1.05rem !important;
}
@media(min-width:1200px){
  #productGrid > .product-card .product-photo-frame{height:230px !important;min-height:230px !important;max-height:230px !important;}
  #productGrid > .product-card .customer-product-card{min-height:390px !important;}
}
@media(max-width:768px){
  #productGrid{--bs-gutter-x:.75rem;--bs-gutter-y:.75rem;}
  #productGrid > .product-card .customer-product-card{min-height:315px !important;border-radius:16px !important;padding:8px !important;}
  #productGrid > .product-card .product-photo-frame{height:155px !important;min-height:155px !important;max-height:155px !important;padding:11px !important;border-radius:16px !important;}
  #productGrid > .product-card .product-name-title{font-size:.92rem !important;line-height:1.18 !important;}
  #productGrid > .product-card .product-info-area{min-height:72px !important;padding-top:8px !important;}
  #productGrid > .product-card .product-main-price{font-size:1.22rem !important;}
  #productGrid > .product-card .product-qty-control{grid-template-columns:36px 28px 36px !important;gap:4px !important;}
  #productGrid > .product-card .product-qty-control .qty-btn{width:36px !important;height:36px !important;min-width:36px !important;}
  #productGrid > .product-card .product-qty-control .qty{min-width:28px !important;font-size:1.08rem !important;}
}
@media(max-width:420px){
  #productGrid > .product-card .customer-product-card{min-height:300px !important;}
  #productGrid > .product-card .product-photo-frame{height:140px !important;min-height:140px !important;max-height:140px !important;}
}

/* Backend desktop layout: menu stays still; product toolbar stays still; ONLY product table body scrolls. */
@media(min-width:992px){
  html, body.admin-body{height:100% !important;overflow:hidden !important;}
  .admin-topbar{height:58px !important;min-height:58px !important;z-index:1050 !important;}
  .admin-shell{
    height:calc(100vh - 58px) !important;
    max-height:calc(100vh - 58px) !important;
    overflow:hidden !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
  .admin-layout{height:100% !important;min-height:0 !important;overflow:hidden !important;}
  .admin-menu-col{height:100% !important;min-height:0 !important;overflow:hidden !important;}
  .admin-sidebar{
    position:relative !important;
    top:auto !important;
    height:100% !important;
    max-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  .admin-content{height:100% !important;min-height:0 !important;overflow-y:auto !important;overflow-x:hidden !important;}
  body.page-products .admin-content{display:flex !important;flex-direction:column !important;overflow:hidden !important;}
  body.page-products .product-page-shell{height:100% !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;}
  body.page-products .product-page-toolbar{flex:0 0 auto !important;position:relative !important;z-index:9 !important;background:var(--bg) !important;padding-bottom:4px !important;}
  body.page-products .product-table-card{flex:1 1 auto !important;min-height:0 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;}
  body.page-products .product-search-bar{flex:0 0 auto !important;}
  body.page-products .product-table-scroll{flex:1 1 auto !important;min-height:0 !important;overflow:auto !important;border:1px solid var(--border) !important;border-radius:14px !important;}
  body.page-products .product-table-scroll table{margin-bottom:0 !important;min-width:1180px !important;}
  body.page-products .product-table-scroll thead th{position:sticky !important;top:0 !important;z-index:20 !important;background:#fff !important;box-shadow:0 2px 0 var(--border) !important;}
}
.menu-title{
  font-size:1.42rem !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  padding:12px 12px !important;
  margin-bottom:8px !important;
  line-height:1.15 !important;
}

/* =========================================================
   2026-05-17 USER REQUEST FINAL FIX
   1) Customer product photos like modern app thumbnails:
      pastel box, full image, no crop, clean quality.
   2) Backend: top header + main menu stay still. On Products page,
      product toolbar/search stay still and ONLY the product table scrolls.
   ========================================================= */

/* Customer product card thumbnail style - app-like pastel image boxes */
#productGrid{
  align-items:stretch !important;
}
#productGrid > .product-card .customer-product-card{
  background:#fff !important;
  border:1px solid #edf0f5 !important;
  border-radius:20px !important;
  padding:10px !important;
  box-shadow:0 8px 20px rgba(15,23,42,.045) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
#productGrid > .product-card .product-photo-frame{
  width:100% !important;
  height:205px !important;
  min-height:205px !important;
  max-height:205px !important;
  border:0 !important;
  border-radius:18px !important;
  padding:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-shadow:none !important;
  background:#f3efff !important;
}
#productGrid > .product-card:nth-child(6n+1) .product-photo-frame{background:#fff0e8 !important;}
#productGrid > .product-card:nth-child(6n+2) .product-photo-frame{background:#fff8d9 !important;}
#productGrid > .product-card:nth-child(6n+3) .product-photo-frame{background:#f0ecff !important;}
#productGrid > .product-card:nth-child(6n+4) .product-photo-frame{background:#ffeef5 !important;}
#productGrid > .product-card:nth-child(6n+5) .product-photo-frame{background:#eaf8ef !important;}
#productGrid > .product-card:nth-child(6n+6) .product-photo-frame{background:#eef7ff !important;}
#productGrid > .product-card .product-photo-frame img.product-img,
#productGrid > .product-card .customer-product-card img.product-img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  background:transparent !important;
  filter:drop-shadow(0 10px 10px rgba(15,23,42,.08)) !important;
}
#productGrid > .product-card .product-img.no-photo{
  width:100% !important;
  height:100% !important;
  border:1px dashed #cbd5e1 !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.65) !important;
}
#productGrid > .product-card .product-info-area{
  min-height:74px !important;
  padding:10px 4px 0 4px !important;
}
#productGrid > .product-card .product-name-title{
  font-size:.98rem !important;
  font-weight:850 !important;
  line-height:1.22 !important;
  color:#111827 !important;
  margin:0 0 6px 0 !important;
}
#productGrid > .product-card .product-category-pill{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  color:#6b7280 !important;
  font-size:.86rem !important;
}
#productGrid > .product-card .product-bottom-bar{
  margin-top:auto !important;
  border-top:0 !important;
  padding:8px 3px 2px 3px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}
#productGrid > .product-card .product-main-price{
  font-size:1.36rem !important;
  font-weight:900 !important;
  color:#111827 !important;
  line-height:1 !important;
}
#productGrid > .product-card .product-qty-control{
  display:grid !important;
  grid-template-columns:40px 32px 40px !important;
  gap:5px !important;
  align-items:center !important;
}
#productGrid > .product-card .product-qty-control .qty-btn{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  padding:0 !important;
  border-radius:12px !important;
  font-weight:900 !important;
  font-size:1.12rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#productGrid > .product-card .product-qty-control .qty{
  min-width:32px !important;
  text-align:center !important;
  font-size:1.14rem !important;
  font-weight:900 !important;
}
@media(min-width:1200px){
  #productGrid > .product-card .product-photo-frame{height:225px !important;min-height:225px !important;max-height:225px !important;}
}
@media(max-width:768px){
  #productGrid{--bs-gutter-x:.75rem !important;--bs-gutter-y:.75rem !important;}
  #productGrid > .product-card .customer-product-card{border-radius:17px !important;padding:8px !important;}
  #productGrid > .product-card .product-photo-frame{height:155px !important;min-height:155px !important;max-height:155px !important;padding:12px !important;border-radius:16px !important;}
  #productGrid > .product-card .product-info-area{min-height:70px !important;padding-top:8px !important;}
  #productGrid > .product-card .product-name-title{font-size:.91rem !important;line-height:1.18 !important;}
  #productGrid > .product-card .product-main-price{font-size:1.18rem !important;}
  #productGrid > .product-card .product-qty-control{grid-template-columns:35px 26px 35px !important;gap:4px !important;}
  #productGrid > .product-card .product-qty-control .qty-btn{width:35px !important;height:35px !important;min-width:35px !important;border-radius:10px !important;}
  #productGrid > .product-card .product-qty-control .qty{min-width:26px !important;font-size:1.02rem !important;}
}

/* Backend strict non-moving menu + Products table-only scroll */
@media(min-width:992px){
  html, body.admin-body{
    width:100% !important;
    height:100vh !important;
    max-height:100vh !important;
    overflow:hidden !important;
  }
  body.admin-body .admin-topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:60px !important;
    min-height:60px !important;
    z-index:1200 !important;
  }
  body.admin-body .admin-shell{
    position:fixed !important;
    top:60px !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:hidden !important;
    padding:12px !important;
  }
  body.admin-body .admin-layout{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
  }
  body.admin-body .admin-menu-col{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
  }
  body.admin-body .admin-sidebar{
    position:relative !important;
    top:auto !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  body.admin-body .admin-content{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  body.admin-body:not(.page-products) .admin-content .table-responsive{
    max-height:calc(100vh - 255px) !important;
    overflow:auto !important;
  }

  body.admin-body.page-products .admin-content{
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  body.admin-body.page-products .product-page-shell{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  body.admin-body.page-products .product-page-toolbar{
    flex:0 0 auto !important;
    position:relative !important;
    z-index:30 !important;
    background:var(--bg) !important;
    padding-bottom:6px !important;
  }
  body.admin-body.page-products .product-table-card{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  body.admin-body.page-products .product-search-bar{
    flex:0 0 auto !important;
  }
  body.admin-body.page-products .product-table-scroll{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:auto !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
  }
  body.admin-body.page-products .product-table-scroll table{
    min-width:1180px !important;
    margin-bottom:0 !important;
  }
  body.admin-body.page-products .product-table-scroll thead th{
    position:sticky !important;
    top:0 !important;
    z-index:40 !important;
    background:#fff !important;
    box-shadow:0 2px 0 var(--border) !important;
  }
}


/* CUSTOMER SCROLL UNLOCK FIX
   Backend pages intentionally lock scrolling so the menu/table can stay fixed.
   Customer page must remain normal page-scrollable. */
html:has(body.customer-body),
body.customer-body:not(.modal-open){
  height:auto !important;
  min-height:100% !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  position:static !important;
  touch-action:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
body.customer-body{
  padding-bottom:96px !important;
}
body.customer-body .navbar.sticky-top{
  z-index:1040 !important;
}
body.customer-body #productGrid{
  overflow:visible !important;
}
body.customer-body .product-card,
body.customer-body .customer-product-card{
  touch-action:auto !important;
}
/* Keep checkout/payment modals scrollable while customer page itself is allowed to scroll. */
body.customer-body.modal-open{
  overflow:hidden !important;
}
body.customer-body #cartModal .modal-dialog{
  height:calc(100dvh - 1rem) !important;
  max-height:calc(100dvh - 1rem) !important;
}
body.customer-body #cartModal .modal-content{
  height:100% !important;
  max-height:100% !important;
}
body.customer-body #cartModal .modal-body{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
@media(max-width:768px){
  body.customer-body{padding-bottom:110px !important;}
}

/* =========================================================
   ADMIN CRUD MODAL FINAL FIX
   This makes CRUD modals work even if Bootstrap JS/CDN fails
   and keeps modals above the fixed backend topbar/menu.
   ========================================================= */
body.admin-body .modal{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:5000 !important;
  width:100% !important;
  height:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  outline:0 !important;
}
body.admin-body .modal:not(.show){display:none !important;}
body.admin-body .modal.show{display:block !important;}
body.admin-body .modal-dialog{
  position:relative !important;
  width:auto !important;
  max-width:min(760px, calc(100vw - 24px)) !important;
  margin:24px auto !important;
  pointer-events:none !important;
}
body.admin-body .modal-dialog.modal-lg,
body.admin-body .modal-lg{
  max-width:min(980px, calc(100vw - 24px)) !important;
}
body.admin-body .modal-dialog-scrollable{
  height:calc(100dvh - 48px) !important;
}
body.admin-body .modal-dialog-scrollable .modal-content{
  max-height:100% !important;
}
body.admin-body .modal-content{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-height:calc(100dvh - 48px) !important;
  pointer-events:auto !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.18) !important;
  border-radius:18px !important;
  box-shadow:0 28px 90px rgba(15,23,42,.32) !important;
  overflow:hidden !important;
}
body.admin-body .modal-header,
body.admin-body .modal-footer{
  flex:0 0 auto !important;
  background:#fff !important;
  z-index:2 !important;
}
body.admin-body .modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
body.admin-body .modal-backdrop{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  z-index:4990 !important;
  width:100vw !important;
  height:100vh !important;
  background:#000 !important;
}
body.admin-body .modal-backdrop.show{opacity:.45 !important;}
body.admin-body.modal-open{overflow:hidden !important;}
body.admin-body.modal-open .admin-topbar{z-index:1200 !important;}
body.admin-body .btn-close{
  cursor:pointer !important;
}
@media(max-width:768px){
  body.admin-body .modal-dialog,
  body.admin-body .modal-dialog.modal-lg,
  body.admin-body .modal-lg{
    max-width:calc(100vw - 12px) !important;
    margin:6px auto !important;
  }
  body.admin-body .modal-content{
    max-height:calc(100dvh - 12px) !important;
    border-radius:14px !important;
  }
  body.admin-body .modal-dialog-scrollable{
    height:calc(100dvh - 12px) !important;
  }
}

/* =========================================================
   PRODUCT/CRUD MODAL FREEZE FIX
   CRUD modal-content contains a <form> wrapper, so the form itself
   must be the scrollable flex column. Without this, the footer/cancel
   can go outside the visible screen and the page feels frozen.
   ========================================================= */
body.admin-body .modal-content > form{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-height:calc(100dvh - 48px) !important;
  min-height:0 !important;
  overflow:hidden !important;
}
body.admin-body .modal-content > form > .modal-header,
body.admin-body .modal-content > form > .modal-footer{
  flex:0 0 auto !important;
  background:#fff !important;
  z-index:4 !important;
}
body.admin-body .modal-content > form > .modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
body.admin-body .modal-content > form > .modal-footer{
  position:sticky !important;
  bottom:0 !important;
  border-top:1px solid var(--border) !important;
}
body.admin-body .modal-backdrop{
  pointer-events:none !important;
}
@media(max-width:768px){
  body.admin-body .modal-content > form{
    max-height:calc(100dvh - 12px) !important;
  }
}

/* =========================================================
   ADMIN MODAL CENTER + SOFT BACKDROP FIX
   - Keep CRUD popup centered on the screen
   - Reduce screen dim so the page does not feel too dark
   - Keep modal body scrollable and close/cancel reachable
   ========================================================= */
body.admin-body .modal.show{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px !important;
  overflow:hidden !important;
}
body.admin-body .modal-dialog,
body.admin-body .modal-dialog.modal-lg,
body.admin-body .modal-lg{
  margin:0 auto !important;
  transform:none !important;
  max-height:calc(100dvh - 24px) !important;
}
body.admin-body .modal-dialog-scrollable{
  height:auto !important;
  max-height:calc(100dvh - 24px) !important;
}
body.admin-body .modal-content{
  max-height:calc(100dvh - 24px) !important;
  border-radius:18px !important;
}
body.admin-body .modal-content > form{
  max-height:calc(100dvh - 24px) !important;
}
body.admin-body .modal-backdrop.show,
body.admin-body .modal-backdrop.fade.show,
body.admin-body .modal-backdrop.tw-backdrop.show{
  opacity:.16 !important;
  background:#000 !important;
}
body.admin-body .modal-backdrop{
  pointer-events:none !important;
}
body.admin-body.modal-open .admin-shell,
body.admin-body.modal-open .admin-topbar,
body.admin-body.modal-open .sidebar,
body.admin-body.modal-open .admin-content{
  filter:none !important;
  opacity:1 !important;
}
@media(max-width:768px){
  body.admin-body .modal.show{
    align-items:center !important;
    padding:8px !important;
  }
  body.admin-body .modal-dialog,
  body.admin-body .modal-dialog.modal-lg,
  body.admin-body .modal-lg{
    width:100% !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
  }
  body.admin-body .modal-content,
  body.admin-body .modal-content > form{
    max-height:calc(100dvh - 16px) !important;
  }
}


/* =========================================================
   CUSTOMER ORDER HISTORY SCROLL FIX
   Earlier backend fixed-layout CSS accidentally made global <html> overflow hidden.
   Customer pages must scroll normally, while admin pages keep their fixed menu/table layout.
   ========================================================= */
html{
  height:auto !important;
  min-height:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
body.customer-body,
body.customer-history-page{
  min-height:100dvh !important;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
body.customer-history-page .container{
  padding-bottom:110px !important;
}
body.customer-history-page .app-card{
  overflow:visible !important;
}
body.customer-history-page .table-responsive{
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
@media(min-width:992px){
  html:has(body.admin-body){
    height:100% !important;
    overflow:hidden !important;
  }
  html:has(body.customer-body),
  html:has(body.customer-history-page){
    height:auto !important;
    overflow-y:auto !important;
  }
}


/* =========================================================
   MOBILE PRODUCT CARD PRICE/QTY OVERLAP FIX
   On small phones the price and +/- control must not share
   one narrow line. Put price on first row and qty controls
   on second row, full width.
   ========================================================= */
@media (max-width: 576px){
  #productGrid > .product-card .product-bottom-bar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    align-items:stretch !important;
    padding:9px 2px 2px 2px !important;
  }
  #productGrid > .product-card .product-price-block{
    width:100% !important;
    min-width:0 !important;
  }
  #productGrid > .product-card .product-main-price{
    font-size:1.30rem !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }
  #productGrid > .product-card .product-normal-price{
    font-size:.86rem !important;
  }
  #productGrid > .product-card .product-qty-control{
    width:100% !important;
    display:grid !important;
    grid-template-columns:42px 1fr 42px !important;
    gap:8px !important;
    align-items:center !important;
  }
  #productGrid > .product-card .product-qty-control .qty-btn{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:12px !important;
    font-size:1.15rem !important;
  }
  #productGrid > .product-card .product-qty-control .qty{
    min-width:0 !important;
    text-align:center !important;
    font-size:1.22rem !important;
    font-weight:900 !important;
    line-height:42px !important;
  }
  #productGrid > .product-card .customer-product-card{
    min-height:360px !important;
  }
}
@media (max-width: 380px){
  #productGrid > .product-card .product-photo-frame{
    height:135px !important;
    min-height:135px !important;
    max-height:135px !important;
  }
  #productGrid > .product-card .product-name-title{
    font-size:.86rem !important;
  }
  #productGrid > .product-card .product-main-price{
    font-size:1.20rem !important;
  }
  #productGrid > .product-card .product-qty-control{
    grid-template-columns:38px 1fr 38px !important;
    gap:6px !important;
  }
  #productGrid > .product-card .product-qty-control .qty-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }
  #productGrid > .product-card .product-qty-control .qty{
    line-height:38px !important;
    font-size:1.12rem !important;
  }
}

/* =========================================================
   WHATSAPP RESULT PAGE: keep buttons clean on mobile
   ========================================================= */
@media (max-width:576px){
  .send-option-box{font-size:.95rem;}
}

/* =========================================================
   MOBILE PRODUCT CARD PRICE POSITION FIX
   User requested: move the price to the top of the picture
   so the - / qty / + control never overlaps with price.
   ========================================================= */
@media (max-width: 576px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    position:relative !important;
    overflow:hidden !important;
    min-height:360px !important;
  }

  body.customer-body #productGrid > .product-card .product-price-block{
    position:static !important;
    top:auto !important;
    left:auto !important;
    z-index:auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.20rem !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    letter-spacing:-.02em !important;
    margin:0 !important;
  }

  body.customer-body #productGrid > .product-card .product-normal-price{
    font-size:.78rem !important;
    line-height:1 !important;
    margin-bottom:2px !important;
    white-space:nowrap !important;
  }

  body.customer-body #productGrid > .product-card .product-bottom-bar{
    display:block !important;
    padding:8px 2px 2px 2px !important;
    margin-top:auto !important;
  }

  body.customer-body #productGrid > .product-card .product-qty-control{
    width:100% !important;
    display:grid !important;
    grid-template-columns:44px 1fr 44px !important;
    gap:10px !important;
    align-items:center !important;
  }

  body.customer-body #productGrid > .product-card .product-qty-control .qty-btn{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:13px !important;
    font-size:1.20rem !important;
  }

  body.customer-body #productGrid > .product-card .product-qty-control .qty{
    min-width:0 !important;
    text-align:center !important;
    font-size:1.20rem !important;
    font-weight:900 !important;
    line-height:44px !important;
  }
}

@media (max-width: 380px){
  body.customer-body #productGrid > .product-card .product-price-block{
    position:static !important;
    top:auto !important;
    left:auto !important;
    padding:0 !important;
    border-radius:0 !important;
    max-width:none !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.08rem !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control{
    grid-template-columns:40px 1fr 40px !important;
    gap:8px !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control .qty-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control .qty{
    line-height:40px !important;
    font-size:1.12rem !important;
  }
}

/* Customer notification banner/module */
.customer-notice-banner{
  border-left:6px solid #ffc107 !important;
  background:linear-gradient(135deg,#fffbe6,#fff) !important;
}
.customer-notice-banner .notice-icon{
  width:40px;height:40px;border-radius:12px;background:#ffc107;display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto;
}
.customer-notice-banner .notice-title{font-size:1.05rem;font-weight:700;color:#162033;margin-bottom:2px;}
.notice-list-item{border:1px solid #e9eef6;border-radius:16px;background:#fff;}
#noticeBtn{min-width:42px;}
@media(max-width:576px){
  .customer-notice-banner{font-size:.95rem;}
  .customer-notice-banner .notice-icon{width:34px;height:34px;font-size:18px;}
}

/* Notification modal freeze/sound fix */
#noticeModal { z-index: 2060; }
.modal-backdrop { z-index: 2050; }
#noticeModal .modal-dialog { max-width: 520px; margin-left: auto; margin-right: auto; }
#noticeModal .modal-content { max-height: 88vh; border-radius: 18px; overflow: hidden; }
#noticeModal .modal-body { overflow-y: auto; max-height: 62vh; }
.customer-notice-banner { cursor: pointer; }
@media (max-width: 575.98px) {
  #noticeModal .modal-dialog { margin: .75rem; }
  #noticeModal .modal-body { max-height: 66vh; }
}

/* =========================================================
   CUSTOMER NOTICE + PROFILE + MOBILE PRODUCT NAME FIX
   - Notice banner only says "New Things for you" and opens the notice popup.
   - Bell button removed from header; profile button stays visible.
   - Product names get more room on mobile.
   ========================================================= */
body.customer-body .customer-notice-banner{
  cursor:pointer !important;
  border-left:0 !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,#fff7d6,#ffffff) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
}
body.customer-body .customer-notice-banner .notice-icon{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:#ffc107 !important;
  color:#111827 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:21px !important;
  flex:0 0 auto !important;
}
body.customer-body .customer-notice-banner .notice-title{
  font-size:1.12rem !important;
  font-weight:900 !important;
  color:#111827 !important;
  margin:0 !important;
}
body.customer-body .customer-profile-main{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  min-height:36px !important;
}
body.customer-body .profile-head-icon{
  width:24px !important;
  height:24px !important;
  border-radius:50% !important;
  background:#ffffff !important;
  color:#0d6efd !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  line-height:1 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.12) !important;
}
@media(max-width:576px){
  body.customer-body .navbar .container{
    gap:6px !important;
    flex-wrap:nowrap !important;
  }
  body.customer-body .navbar-brand{
    font-size:.95rem !important;
    max-width:45vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  body.customer-body .customer-profile-main{
    width:42px !important;
    height:38px !important;
    padding:0 !important;
  }
  body.customer-body .profile-head-icon{
    width:27px !important;
    height:27px !important;
    font-size:16px !important;
  }
  body.customer-body #productGrid > .product-card .customer-product-card{
    min-height:400px !important;
  }
  body.customer-body #productGrid > .product-card .product-info-area{
    min-height:116px !important;
    padding:10px 4px 0 4px !important;
    flex:1 1 auto !important;
  }
  body.customer-body #productGrid > .product-card .product-name-title,
  #productGrid > .product-card .product-name-title{
    display:block !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:unset !important;
    overflow:visible !important;
    white-space:normal !important;
    min-height:72px !important;
    max-height:none !important;
    font-size:.92rem !important;
    line-height:1.22 !important;
    margin-bottom:7px !important;
  }
  body.customer-body #productGrid > .product-card .product-meta-row{
    min-height:24px !important;
  }
}
@media(max-width:380px){
  body.customer-body .navbar-brand{max-width:40vw !important;font-size:.9rem !important;}
  body.customer-body #productGrid > .product-card .customer-product-card{min-height:390px !important;}
  body.customer-body #productGrid > .product-card .product-info-area{min-height:112px !important;}
  body.customer-body #productGrid > .product-card .product-name-title{font-size:.86rem !important;min-height:76px !important;}
}

/* =========================================================
   2026-05-17 PRODUCT NAME MORE SPACE FIX
   Customer product cards: allow longer product names to show.
   Keeps image thumbnail full-fit and moves price/qty safely apart.
   ========================================================= */
body.customer-body #productGrid > .product-card .product-info-area{
  min-height:118px !important;
  padding-top:8px !important;
}
body.customer-body #productGrid > .product-card .product-name-title{
  -webkit-line-clamp:4 !important;
  line-clamp:4 !important;
  min-height:74px !important;
  max-height:92px !important;
  line-height:1.28 !important;
  overflow:hidden !important;
  word-break:break-word !important;
}
body.customer-body #productGrid > .product-card .customer-product-card{
  min-height:430px !important;
}
@media (max-width: 576px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    min-height:435px !important;
  }
  body.customer-body #productGrid > .product-card .product-info-area{
    min-height:128px !important;
  }
  body.customer-body #productGrid > .product-card .product-name-title{
    -webkit-line-clamp:4 !important;
    line-clamp:4 !important;
    min-height:82px !important;
    max-height:104px !important;
    font-size:.92rem !important;
    line-height:1.28 !important;
  }
}
@media (max-width: 380px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    min-height:420px !important;
  }
  body.customer-body #productGrid > .product-card .product-info-area{
    min-height:122px !important;
  }
  body.customer-body #productGrid > .product-card .product-name-title{
    min-height:78px !important;
    max-height:100px !important;
    font-size:.86rem !important;
  }
}

/* =========================================================
   2026-05-17 FULL PACKAGE FINAL UI FIX
   1) Profile icon uses visible SVG, not emoji color.
   2) Mobile product name gets more space and can wrap fully.
   3) Product card grows safely without hiding name.
   ========================================================= */
body.customer-body .customer-profile-main{
  background:#0d6efd !important;
  color:#fff !important;
  border-color:#0d6efd !important;
}
body.customer-body .profile-head-icon{
  background:#ffffff !important;
  color:#0d6efd !important;
  border:2px solid rgba(255,255,255,.95) !important;
  width:28px !important;
  height:28px !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
}
body.customer-body .profile-head-icon svg{
  display:block !important;
  width:17px !important;
  height:17px !important;
}

body.customer-body #productGrid > .product-card .customer-product-card{
  height:auto !important;
  min-height:455px !important;
  display:flex !important;
  flex-direction:column !important;
}
body.customer-body #productGrid > .product-card .product-info-area{
  flex:0 0 auto !important;
  min-height:0 !important;
  height:auto !important;
  padding:11px 4px 0 4px !important;
}
body.customer-body #productGrid > .product-card .product-name-title{
  display:block !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  overflow:visible !important;
  white-space:normal !important;
  word-break:break-word !important;
  min-height:0 !important;
  max-height:none !important;
  font-size:1rem !important;
  line-height:1.26 !important;
  margin-bottom:8px !important;
}
body.customer-body #productGrid > .product-card .product-meta-row{
  min-height:24px !important;
  margin-bottom:6px !important;
}
body.customer-body #productGrid > .product-card .product-bottom-bar{
  margin-top:auto !important;
}
@media(max-width:576px){
  body.customer-body .customer-profile-main{
    width:44px !important;
    height:40px !important;
    min-width:44px !important;
    padding:0 !important;
  }
  body.customer-body .profile-head-icon{
    width:30px !important;
    height:30px !important;
  }
  body.customer-body .profile-head-icon svg{
    width:18px !important;
    height:18px !important;
  }
  body.customer-body #productGrid > .product-card .customer-product-card{
    min-height:455px !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    height:155px !important;
    min-height:155px !important;
    max-height:155px !important;
  }
  body.customer-body #productGrid > .product-card .product-name-title{
    font-size:.92rem !important;
    line-height:1.24 !important;
  }
}
@media(max-width:380px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    min-height:445px !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    height:138px !important;
    min-height:138px !important;
    max-height:138px !important;
  }
  body.customer-body #productGrid > .product-card .product-name-title{
    font-size:.86rem !important;
    line-height:1.23 !important;
  }
}

/* =========================================================
   FINAL CUSTOMER FLOW FIX 2026-05-17
   - Bootstrap backdrop must never sit above customer modals.
   - Checkout/profile modals scroll and allow typing on mobile.
   - Product name gets more vertical space.
   - Clear cart button fits in sticky cart.
   ========================================================= */
body.customer-body .modal{z-index:2080 !important;}
body.customer-body .modal-backdrop{z-index:2070 !important;}
body.customer-body #profileModal .modal-content,
body.customer-body #payModal .modal-content,
body.customer-body #noticeModal .modal-content{max-height:92dvh !important;overflow:hidden !important;}
body.customer-body #profileModal .modal-body,
body.customer-body #payModal .modal-body,
body.customer-body #noticeModal .modal-body{overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;max-height:70dvh !important;}
body.customer-body #cartModal .modal-dialog{height:calc(100dvh - 10px) !important;max-height:calc(100dvh - 10px) !important;margin:5px auto !important;}
body.customer-body #cartModal .modal-content{height:100% !important;max-height:100% !important;overflow:hidden !important;}
body.customer-body #cartModal .checkout-form{height:100% !important;display:flex !important;flex-direction:column !important;min-height:0 !important;}
body.customer-body #cartModal .modal-header,
body.customer-body #cartModal .modal-footer{flex:0 0 auto !important;}
body.customer-body #cartModal .modal-body{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;padding-bottom:24px !important;}
body.customer-body .sticky-cart-actions .btn{white-space:nowrap !important;}
body.customer-body #clearCartBtn{font-weight:800 !important;}
@media(max-width:576px){
  body.customer-body .sticky-cart .container{align-items:center !important;}
  body.customer-body .sticky-cart-actions{flex-direction:column !important;align-items:stretch !important;gap:6px !important;min-width:48vw !important;}
  body.customer-body .sticky-cart-actions .btn{font-size:.95rem !important;padding:.55rem .75rem !important;}
  body.customer-body #productGrid > .product-card .customer-product-card{min-height:445px !important;}
  body.customer-body #productGrid > .product-card .product-info-area{min-height:155px !important;padding-top:12px !important;}
  body.customer-body #productGrid > .product-card .product-name-title{display:block !important;overflow:visible !important;-webkit-line-clamp:unset !important;white-space:normal !important;min-height:104px !important;max-height:none !important;font-size:.92rem !important;line-height:1.22 !important;}
}
@media(max-width:380px){
  body.customer-body #productGrid > .product-card .customer-product-card{min-height:430px !important;}
  body.customer-body #productGrid > .product-card .product-info-area{min-height:150px !important;}
  body.customer-body #productGrid > .product-card .product-name-title{min-height:108px !important;font-size:.86rem !important;}
}

/* Outlets public cards */
.outlet-public-img-wrap{height:190px;border-radius:18px;background:#f7f7fb;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--border);}
.outlet-public-img-wrap img{max-width:100%;max-height:100%;object-fit:contain;padding:8px;}
.outlet-card-public{min-height:100%;}
@media(max-width:576px){
  .customer-body .navbar .container{gap:6px !important;}
  .customer-body .navbar .btn{font-size:.78rem;padding:.35rem .5rem;}
  .customer-body .navbar-brand{font-size:.95rem;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* Checkout payable summary: show final payable before WhatsApp/email. */
.checkout-payable-box {
  border: 1px solid rgba(25, 135, 84, 0.18);
  background: linear-gradient(180deg, #f5fff8 0%, #ffffff 100%);
}
.checkout-payable-box .summary-line {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.total-payable-row {
  font-size: 1.22rem;
  color: #075e2f;
}
.total-payable-row b {
  font-size: 1.55rem;
}
@media (max-width: 575.98px) {
  .total-payable-row { font-size: 1.08rem; }
  .total-payable-row b { font-size: 1.35rem; }
  .checkout-payable-box { position: relative; z-index: 1; }
}

/* =========================================================
   CUSTOMER MODAL FREEZE FINAL FIX
   Customer profile/cart/payment/notification modals use manual display.
   Keep modal above backdrop, allow input typing, and keep inner body scrollable.
   ========================================================= */
body.customer-body .tw-customer-backdrop,
body.customer-body .modal-backdrop.tw-customer-backdrop{
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,23,42,.28) !important;
  z-index:6990 !important;
  opacity:1 !important;
}
body.customer-body .modal.tw-manual-modal,
body.customer-body .modal.show{
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:7000 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  pointer-events:auto !important;
  padding:10px !important;
}
body.customer-body .modal-dialog{
  pointer-events:auto !important;
  position:relative !important;
  z-index:7010 !important;
}
body.customer-body #profileModal .modal-dialog,
body.customer-body #noticeModal .modal-dialog,
body.customer-body #payModal .modal-dialog{
  max-height:calc(100dvh - 24px) !important;
  margin:12px auto !important;
}
body.customer-body #profileModal .modal-content,
body.customer-body #noticeModal .modal-content,
body.customer-body #payModal .modal-content{
  max-height:calc(100dvh - 24px) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
body.customer-body #profileModal form{
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
body.customer-body #profileModal .modal-body,
body.customer-body #noticeModal .modal-body,
body.customer-body #payModal .modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
body.customer-body #profileModal .modal-footer,
body.customer-body #noticeModal .modal-footer,
body.customer-body #payModal .modal-footer{
  flex:0 0 auto !important;
  background:#fff !important;
}
body.customer-body #cartModal .modal-dialog{
  height:calc(100dvh - 20px) !important;
  max-height:calc(100dvh - 20px) !important;
  margin:10px auto !important;
}
body.customer-body #cartModal .modal-content,
body.customer-body #cartModal .checkout-form{
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
body.customer-body #cartModal .modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  padding-bottom:24px !important;
}
body.customer-body #cartModal .modal-footer{
  flex:0 0 auto !important;
  background:#fff !important;
  border-top:1px solid var(--border) !important;
}
@media(max-width:576px){
  body.customer-body .modal.tw-manual-modal,
  body.customer-body .modal.show{padding:0 !important;}
  body.customer-body #cartModal .modal-dialog,
  body.customer-body #profileModal .modal-dialog,
  body.customer-body #noticeModal .modal-dialog,
  body.customer-body #payModal .modal-dialog{
    width:100% !important;
    max-width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
  }
  body.customer-body #cartModal .modal-content,
  body.customer-body #profileModal .modal-content,
  body.customer-body #noticeModal .modal-content,
  body.customer-body #payModal .modal-content{
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }
}

/* =========================================================
   NOTIFICATION WINDOW RESPONSIVE GRID FIX
   Bigger screens: 3 notification cards per row.
   Tablet: 2 per row. Mobile: 1 per row.
   ========================================================= */
body.customer-body #noticeModal .modal-dialog{
  max-width:min(1120px, calc(100vw - 32px)) !important;
  width:min(1120px, calc(100vw - 32px)) !important;
}
body.customer-body #noticeModal .modal-content{
  border-radius:22px !important;
  max-height:88dvh !important;
}
body.customer-body #noticeModal .modal-body{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
  overflow-y:auto !important;
  max-height:calc(88dvh - 132px) !important;
  padding:18px !important;
}
body.customer-body #noticeModal .notice-list-item{
  margin:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  border-radius:18px !important;
  box-shadow:0 8px 22px rgba(15,23,42,.07) !important;
}
body.customer-body #noticeModal .notice-list-item img{
  width:100% !important;
  height:180px !important;
  object-fit:contain !important;
  background:#f8fafc !important;
  border:1px solid #eef2f7 !important;
}
body.customer-body #noticeModal .notice-list-item .fw-bold{
  font-size:1.02rem !important;
  line-height:1.25 !important;
}
body.customer-body #noticeModal .notice-list-item div:last-child{
  line-height:1.35 !important;
}

@media(max-width:991.98px){
  body.customer-body #noticeModal .modal-dialog{
    max-width:min(760px, calc(100vw - 24px)) !important;
    width:min(760px, calc(100vw - 24px)) !important;
  }
  body.customer-body #noticeModal .modal-body{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
  }
}
@media(max-width:575.98px){
  body.customer-body #noticeModal .modal-dialog{
    width:100% !important;
    max-width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
  }
  body.customer-body #noticeModal .modal-content{
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }
  body.customer-body #noticeModal .modal-body{
    grid-template-columns:1fr !important;
    gap:12px !important;
    max-height:none !important;
    padding:14px !important;
  }
  body.customer-body #noticeModal .notice-list-item img{
    height:210px !important;
  }
}

/* Legal consent / PWA additions */
.legal-consent-box{
  border:1px solid rgba(13,110,253,.18);
  background:#f8fbff;
  border-radius:14px;
  padding:12px;
}
.policy-text{white-space:pre-wrap;line-height:1.65;}
#installPwaBtn{border-radius:999px;}

/* PWA install button and help modal */
.install-pwa-visible { white-space: nowrap; }
.pwa-install-panel { max-width: 520px; width: calc(100% - 24px); }
@media (max-width: 575.98px) {
  #installPwaBtnTop { padding: .25rem .45rem; font-size: .78rem; }
  .navbar .container { gap: .35rem !important; }
}

/* =========================================================
   2026-05-18 PWA INSTALL / CUSTOMER ICON UI FIX
   - Manual install help is a real popup, hidden until opened.
   - Install buttons hide after installed/closed.
   - Add clearer customer action icons without changing logic.
   ========================================================= */
body.customer-body .manual-modal{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  z-index:9000 !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
}
body.customer-body .manual-modal.show{
  display:flex !important;
}
body.customer-body .manual-modal-backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(15,23,42,.28) !important;
}
body.customer-body .manual-modal-panel{
  position:relative !important;
  z-index:9010 !important;
  background:#fff !important;
  border-radius:20px !important;
  box-shadow:0 20px 60px rgba(15,23,42,.22) !important;
  max-height:calc(100dvh - 32px) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
body.customer-body .manual-modal-header,
body.customer-body .manual-modal-footer{
  flex:0 0 auto !important;
  padding:14px 16px !important;
  border-color:#e5e7eb !important;
}
body.customer-body .manual-modal-header{border-bottom:1px solid #e5e7eb !important;}
body.customer-body .manual-modal-footer{border-top:1px solid #e5e7eb !important;}
body.customer-body .manual-modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  padding:16px !important;
}
body.customer-body.modal-open-lite{
  overflow:hidden !important;
}
body.customer-body .install-pwa-visible{
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}
body.customer-body .navbar .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
@media(max-width:575.98px){
  body.customer-body .pwa-install-panel{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
  }
  body.customer-body .manual-modal{padding:10px !important;}
  body.customer-body .manual-modal-header,
  body.customer-body .manual-modal-footer{padding:12px !important;}
  body.customer-body .manual-modal-body{padding:12px !important;}
  body.customer-body #installPwaBtnTop{
    max-width:84px !important;
    padding:.3rem .5rem !important;
    font-size:.78rem !important;
  }
  body.customer-body .navbar .btn-sm{
    min-height:34px !important;
  }
}

/* =========================================================
   CUSTOMER NOTIFICATION BADGE + VIDEO SUPPORT
   ========================================================= */
body.customer-body .notice-bell-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-height:34px !important;
  font-weight:700 !important;
  color:#111827 !important;
  border-color:#f59e0b !important;
  box-shadow:0 4px 12px rgba(245,158,11,.18) !important;
}
body.customer-body #noticeBadge{
  min-width:20px !important;
  min-height:20px !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:.72rem !important;
  border:2px solid #fff !important;
}
body.customer-body #noticeBadge.d-none{display:none !important;}
body.customer-body #enablePushBtn{
  white-space:nowrap !important;
  border-radius:999px !important;
  font-weight:700 !important;
  background:#ffffff !important;
}
body.customer-body .notification-video-wrap{
  position:relative !important;
  width:100% !important;
  aspect-ratio:16/9 !important;
  overflow:hidden !important;
  border-radius:16px !important;
  background:#111827 !important;
  border:1px solid #e5e7eb !important;
}
body.customer-body .notification-video-wrap iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
}
body.customer-body .notification-video-wrap-tiktok{
  aspect-ratio:9/16 !important;
  max-height:620px !important;
  background:#000 !important;
}
body.customer-body .notification-video-player{
  width:100% !important;
  max-height:620px !important;
  border-radius:16px !important;
  background:#000 !important;
  display:block !important;
}
@media(max-width:576px){
  body.customer-body .notice-bell-btn{
    min-width:38px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body.customer-body #enablePushBtn{
    font-size:.78rem !important;
    padding:.25rem .5rem !important;
  }
}


/* =========================================================
   2026-05-18 CUSTOMER HORIZONTAL PRODUCT CARD UPDATE
   Product image stays on the left; name/category/promo/price/qty stay side-by-side on the right.
   This is UI-only. Cart, price, promotion, search and checkout logic are unchanged.
   ========================================================= */
body.customer-body #productGrid{
  align-items:stretch !important;
}
body.customer-body #productGrid > .product-card{
  display:flex !important;
}
body.customer-body #productGrid > .product-card .customer-product-card{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:122px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:12px !important;
  row-gap:6px !important;
  align-items:center !important;
  padding:10px !important;
  border-radius:22px !important;
  overflow:hidden !important;
}
body.customer-body #productGrid > .product-card .product-photo-frame{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:122px !important;
  height:122px !important;
  min-width:122px !important;
  min-height:122px !important;
  max-height:122px !important;
  margin:0 !important;
  padding:7px !important;
  border-radius:18px !important;
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.customer-body #productGrid > .product-card .product-photo-frame .product-img,
body.customer-body #productGrid > .product-card .customer-product-card img.product-img,
body.customer-body #productGrid > .product-card .product-img.no-photo{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  border-radius:14px !important;
  padding:3px !important;
  background:transparent !important;
}
body.customer-body #productGrid > .product-card .product-info-area{
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  flex:0 0 auto !important;
  padding:0 !important;
  align-self:end !important;
}
body.customer-body #productGrid > .product-card .product-name-title{
  display:block !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 0 5px 0 !important;
  overflow:visible !important;
  white-space:normal !important;
  word-break:break-word !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  font-size:1rem !important;
  line-height:1.22 !important;
  font-weight:800 !important;
  color:#111827 !important;
}
body.customer-body #productGrid > .product-card .product-meta-row{
  min-height:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  align-items:center !important;
}
body.customer-body #productGrid > .product-card .product-category-pill,
body.customer-body #productGrid > .product-card .product-promo-text{
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.customer-body #productGrid > .product-card .product-bottom-bar{
  grid-column:2 !important;
  grid-row:2 !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  align-self:start !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}
body.customer-body #productGrid > .product-card .product-price-block{
  min-width:0 !important;
  flex:1 1 auto !important;
  text-align:left !important;
  margin:0 !important;
}
body.customer-body #productGrid > .product-card .product-main-price{
  font-size:1.34rem !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  color:#111827 !important;
  white-space:nowrap !important;
}
body.customer-body #productGrid > .product-card .product-normal-price{
  font-size:.88rem !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}
body.customer-body #productGrid > .product-card .product-qty-control{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:5px !important;
  margin:0 !important;
}
body.customer-body #productGrid > .product-card .product-qty-control .qty-btn{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  padding:0 !important;
  border-radius:12px !important;
  font-size:1.05rem !important;
  line-height:1 !important;
}
body.customer-body #productGrid > .product-card .product-qty-control .qty{
  min-width:24px !important;
  font-size:1.05rem !important;
  text-align:center !important;
}
body.customer-body #productGrid > .product-card .promo-badge{
  top:10px !important;
  left:10px !important;
}
body.customer-body #productGrid > .product-card .selected-badge{
  top:8px !important;
  right:8px !important;
}
@media(max-width:576px){
  body.customer-body #productGrid{
    --bs-gutter-y:.75rem !important;
  }
  body.customer-body #productGrid > .product-card{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
  }
  body.customer-body #productGrid > .product-card .customer-product-card{
    grid-template-columns:112px minmax(0,1fr) !important;
    column-gap:10px !important;
    padding:9px !important;
    border-radius:20px !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    width:112px !important;
    height:112px !important;
    min-width:112px !important;
    min-height:112px !important;
    max-height:112px !important;
    padding:6px !important;
    border-radius:17px !important;
  }
  body.customer-body #productGrid > .product-card .product-name-title{
    font-size:.95rem !important;
    line-height:1.18 !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.22rem !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control .qty-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
  }
}
@media(max-width:380px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    grid-template-columns:96px minmax(0,1fr) !important;
    column-gap:8px !important;
    padding:8px !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    min-height:96px !important;
    max-height:96px !important;
    border-radius:16px !important;
  }
  body.customer-body #productGrid > .product-card .product-name-title{
    font-size:.86rem !important;
    line-height:1.16 !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.06rem !important;
  }
  body.customer-body #productGrid > .product-card .product-bottom-bar{
    gap:5px !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control{
    gap:3px !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control .qty-btn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    border-radius:10px !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control .qty{
    min-width:20px !important;
    font-size:.95rem !important;
  }
}
@media(min-width:1200px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    grid-template-columns:132px minmax(0,1fr) !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    width:132px !important;
    height:132px !important;
    min-width:132px !important;
    min-height:132px !important;
    max-height:132px !important;
  }
}


/* =========================================================
   FINAL PRODUCT CARD PROMO LAYOUT UPDATE
   - Keep main price in original image badge position.
   - Show promotion title + promo price below product name.
   - Works on mobile and desktop.
   ========================================================= */
body.customer-body #productGrid > .product-card .product-info-area{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}
body.customer-body #productGrid > .product-card .product-meta-row{
  margin-bottom:0 !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:2px !important;
  margin-top:2px !important;
  padding:7px 10px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#fff4f6 0%,#fff8f8 100%) !important;
  border:1px solid rgba(255,45,85,.14) !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-title{
  font-size:.79rem !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:#d6336c !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-price{
  font-size:.95rem !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  color:#dc3545 !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-label-only{
  background:linear-gradient(180deg,#fff8ef 0%,#fffdf8 100%) !important;
  border:1px solid rgba(255,153,0,.18) !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-label-only .product-promo-inline-title{
  color:#b35c00 !important;
}
@media(min-width:768px){
  body.customer-body #productGrid > .product-card .product-promo-inline-title{
    font-size:.82rem !important;
  }
  body.customer-body #productGrid > .product-card .product-promo-inline-price{
    font-size:1rem !important;
  }
}
@media(max-width:576px){
  body.customer-body #productGrid > .product-card .product-promo-inline{
    padding:6px 9px !important;
    border-radius:11px !important;
  }
  body.customer-body #productGrid > .product-card .product-promo-inline-title{
    font-size:.76rem !important;
  }
  body.customer-body #productGrid > .product-card .product-promo-inline-price{
    font-size:.92rem !important;
  }
}


/* =========================================================
   FINAL CUSTOMER STICKY SEARCH + CART SUMMARY UPDATE
   - Top header scrolls away; search/category bar stays visible.
   - Sticky cart shows Clear Cart + totals + View Cart in one line on desktop.
   - Mobile keeps small bold totals between Clear Cart and View Cart.
   ========================================================= */
body.customer-body{
  padding-bottom:118px !important;
}
body.customer-body .navbar.sticky-top{
  position:relative !important;
  top:auto !important;
  z-index:1020 !important;
}
body.customer-body .customer-search-sticky{
  position:sticky !important;
  top:0 !important;
  z-index:1042 !important;
  background:#ffffff !important;
  box-shadow:0 8px 22px rgba(15,23,42,.11) !important;
}
body.customer-body .sticky-cart{
  padding:8px 12px !important;
  z-index:1045 !important;
}
body.customer-body .sticky-cart-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
body.customer-body .sticky-action-btn{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  font-weight:800 !important;
}
body.customer-body .sticky-cart-summary{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  color:#111827 !important;
  font-size:.88rem !important;
  font-weight:700 !important;
  line-height:1.15 !important;
}
body.customer-body .sticky-cart-summary span{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:4px !important;
  white-space:nowrap !important;
}
body.customer-body .sticky-cart-summary b{
  font-weight:900 !important;
  color:#111827 !important;
}
body.customer-body .sticky-cart-summary span:nth-child(2) b{
  color:#dc3545 !important;
}
body.customer-body .sticky-cart-summary span:nth-child(4) b{
  font-size:1rem !important;
}
@media(max-width:576px){
  body.customer-body{
    padding-bottom:154px !important;
  }
  body.customer-body .customer-search-sticky{
    margin-left:-2px !important;
    margin-right:-2px !important;
    padding:10px !important;
    border-radius:16px !important;
  }
  body.customer-body .customer-search-sticky .form-control,
  body.customer-body .customer-search-sticky .form-select{
    font-size:.95rem !important;
    min-height:42px !important;
  }
  body.customer-body .sticky-cart-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "clear"
      "summary"
      "view" !important;
    gap:5px !important;
  }
  body.customer-body #clearCartBtn{
    grid-area:clear !important;
  }
  body.customer-body #openCartBtn{
    grid-area:view !important;
  }
  body.customer-body .sticky-cart-summary{
    grid-area:summary !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4px 10px !important;
    justify-items:start !important;
    font-size:.78rem !important;
    font-weight:800 !important;
    padding:2px 2px 0 2px !important;
  }
  body.customer-body .sticky-cart-summary span{
    width:100% !important;
    display:flex !important;
    justify-content:space-between !important;
    gap:4px !important;
  }
  body.customer-body .sticky-cart-summary b{
    font-size:.82rem !important;
  }
  body.customer-body .sticky-action-btn{
    width:100% !important;
    min-height:44px !important;
    font-size:.9rem !important;
    padding:.5rem .45rem !important;
  }
}
@media(min-width:768px){
  body.customer-body{
    padding-bottom:88px !important;
  }
}


/* =========================================================
   FINAL COMPACT PRODUCT/PROMO + STICKY TOTAL UPDATE
   - Remove category under product name.
   - Promo shows title, old price struck out, new price bold.
   - Bottom bar shows only Grand Total between 2 buttons in one line.
   ========================================================= */
body.customer-body #productGrid > .product-card .product-meta-row,
body.customer-body #productGrid > .product-card .product-category-pill{
  display:none !important;
}
body.customer-body #productGrid > .product-card .product-info-area{
  gap:5px !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:1px !important;
  margin-top:2px !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  border-radius:0 !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-title{
  font-size:.78rem !important;
  line-height:1.16 !important;
  font-weight:700 !important;
  color:#6b7280 !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-old-price{
  font-size:.78rem !important;
  line-height:1.05 !important;
  font-weight:700 !important;
  color:#9ca3af !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-old-price s{
  text-decoration-thickness:1.5px !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-price{
  font-size:1rem !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  color:#111827 !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-label-only .product-promo-inline-title{
  color:#6b7280 !important;
}
body.customer-body .sticky-cart{
  padding:7px 10px !important;
}
body.customer-body .sticky-cart-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}
body.customer-body .sticky-cart-summary{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  font-size:.86rem !important;
  font-weight:800 !important;
  text-align:center !important;
}
body.customer-body .sticky-cart-summary span{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.customer-body .sticky-cart-summary b{
  font-size:.98rem !important;
  font-weight:900 !important;
}
body.customer-body .sticky-action-btn{
  min-height:42px !important;
  padding:.48rem .7rem !important;
  font-size:.93rem !important;
}
@media(max-width:576px){
  body.customer-body{
    padding-bottom:86px !important;
  }
  body.customer-body .sticky-cart-row{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
  }
  body.customer-body .sticky-action-btn{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:94px !important;
    min-height:40px !important;
    padding:.42rem .52rem !important;
    font-size:.78rem !important;
    border-radius:12px !important;
  }
  body.customer-body .sticky-cart-summary{
    font-size:.72rem !important;
    line-height:1.08 !important;
  }
  body.customer-body .sticky-cart-summary span{
    white-space:normal !important;
    display:block !important;
  }
  body.customer-body .sticky-cart-summary b{
    display:inline !important;
    font-size:.86rem !important;
  }
  body.customer-body #productGrid > .product-card .product-promo-inline-title,
  body.customer-body #productGrid > .product-card .product-promo-inline-old-price{
    font-size:.74rem !important;
  }
  body.customer-body #productGrid > .product-card .product-promo-inline-price{
    font-size:.92rem !important;
  }
}
@media(min-width:992px){
  body.customer-body .sticky-cart-summary{
    font-size:.92rem !important;
  }
}


/* =========================================================
   FINAL PRODUCT CARD PRICE DUPLICATE FIX
   - Right side top: product name + promotion name only.
   - Right side bottom: current price big, old price small inline.
   - Removes duplicate promo price display.
   ========================================================= */
body.customer-body #productGrid > .product-card .product-info-area{
  align-self:start !important;
  justify-content:flex-start !important;
  gap:4px !important;
}
body.customer-body #productGrid > .product-card .product-name-title{
  margin:0 !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline,
body.customer-body #productGrid > .product-card .product-promo-inline.product-promo-inline-label-only{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:0 !important;
  margin-top:0 !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  border-radius:0 !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-title{
  font-size:.8rem !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  color:#6b7280 !important;
}
body.customer-body #productGrid > .product-card .product-promo-inline-old-price,
body.customer-body #productGrid > .product-card .product-promo-inline-price{
  display:none !important;
}
body.customer-body #productGrid > .product-card .product-bottom-bar{
  align-self:end !important;
  margin-top:auto !important;
  gap:10px !important;
}
body.customer-body #productGrid > .product-card .product-price-block,
body.customer-body #productGrid > .product-card .product-price-block.has-old-price{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  gap:7px !important;
  flex-wrap:nowrap !important;
}
body.customer-body #productGrid > .product-card .product-main-price{
  font-size:1.52rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#111827 !important;
}
body.customer-body #productGrid > .product-card .product-old-price-inline{
  font-size:.8rem !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:#9ca3af !important;
  white-space:nowrap !important;
  padding-bottom:2px !important;
}
body.customer-body #productGrid > .product-card .product-old-price-inline s{
  text-decoration-thickness:1.5px !important;
}
@media(max-width:576px){
  body.customer-body #productGrid > .product-card .product-promo-inline-title{
    font-size:.74rem !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.28rem !important;
  }
  body.customer-body #productGrid > .product-card .product-old-price-inline{
    font-size:.74rem !important;
  }
}
@media(max-width:380px){
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.16rem !important;
  }
  body.customer-body #productGrid > .product-card .product-old-price-inline{
    font-size:.68rem !important;
  }
  body.customer-body #productGrid > .product-card .product-bottom-bar{
    gap:6px !important;
  }
}


/* =========================================================
   FINAL MOBILE POSITION FIX (USER MARKED)
   - Remove mobile image-overlay price bubble.
   - Mobile layout: left image; right top product + promo name; right bottom price + old price inline; qty control unchanged.
   - Mobile sticky cart: Clear Cart | Grand Total | View Cart in one line.
   ========================================================= */
@media (max-width:576px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    position:relative !important;
    overflow:hidden !important;
    min-height:auto !important;
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    row-gap:8px !important;
    align-items:stretch !important;
    padding:10px !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:112px !important;
    height:112px !important;
    min-width:112px !important;
    min-height:112px !important;
    max-height:112px !important;
    margin:0 !important;
    align-self:center !important;
  }
  body.customer-body #productGrid > .product-card .product-info-area{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start !important;
    justify-self:stretch !important;
    padding:0 !important;
    margin:0 !important;
    gap:4px !important;
  }
  body.customer-body #productGrid > .product-card .product-name-title{
    font-size:.94rem !important;
    line-height:1.16 !important;
    margin:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-promo-inline,
  body.customer-body #productGrid > .product-card .product-promo-inline.product-promo-inline-label-only{
    margin:0 !important;
    padding:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-promo-inline-title{
    font-size:.74rem !important;
    line-height:1.12 !important;
    color:#6b7280 !important;
  }
  body.customer-body #productGrid > .product-card .product-bottom-bar{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:end !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  body.customer-body #productGrid > .product-card .product-price-block,
  body.customer-body #productGrid > .product-card .product-price-block.has-old-price{
    position:static !important;
    top:auto !important;
    left:auto !important;
    z-index:auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:6px !important;
    flex:1 1 auto !important;
    text-align:left !important;
    margin:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.26rem !important;
    line-height:1 !important;
    font-weight:900 !important;
    color:#111827 !important;
    margin:0 !important;
    white-space:nowrap !important;
  }
  body.customer-body #productGrid > .product-card .product-old-price-inline{
    font-size:.74rem !important;
    line-height:1 !important;
    font-weight:700 !important;
    color:#9ca3af !important;
    white-space:nowrap !important;
    padding:0 0 2px 0 !important;
    display:inline-block !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
    margin:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control .qty-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:12px !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control .qty{
    min-width:22px !important;
    font-size:1.02rem !important;
  }

  body.customer-body .sticky-cart{
    padding:8px 10px !important;
  }
  body.customer-body .sticky-cart-row{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  body.customer-body .sticky-action-btn{
    width:auto !important;
    flex:0 0 auto !important;
    min-width:100px !important;
    min-height:42px !important;
    padding:.48rem .65rem !important;
    font-size:.84rem !important;
    white-space:nowrap !important;
  }
  body.customer-body .sticky-cart-summary{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:.76rem !important;
    font-weight:800 !important;
    line-height:1.12 !important;
    padding:0 !important;
  }
  body.customer-body .sticky-cart-summary span{
    display:block !important;
    width:auto !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  body.customer-body .sticky-cart-summary b{
    font-size:.92rem !important;
    display:inline !important;
  }
}

@media (max-width:380px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    grid-template-columns:96px minmax(0,1fr) !important;
    column-gap:10px !important;
    padding:9px !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    min-height:96px !important;
    max-height:96px !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.12rem !important;
  }
  body.customer-body #productGrid > .product-card .product-old-price-inline{
    font-size:.68rem !important;
  }
  body.customer-body .sticky-action-btn{
    min-width:92px !important;
    font-size:.78rem !important;
    padding:.42rem .52rem !important;
  }
  body.customer-body .sticky-cart-summary{
    font-size:.72rem !important;
  }
  body.customer-body .sticky-cart-summary b{
    font-size:.86rem !important;
  }
}


/* =========================================================
   FINAL CHECKOUT PANEL TEXT/UI CLEANUP
   - Simpler payment proof block
   - Simpler QR block
   - Remove WhatsApp/Email explanatory box
   ========================================================= */
.checkout-panel-title{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  font-weight:800 !important;
  font-size:1.05rem !important;
  color:#1f2937 !important;
}
.checkout-panel-title-center{
  justify-content:center !important;
}
.checkout-panel-icon{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:1.15rem !important;
  font-weight:900 !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(15,23,42,.10) !important;
}
.checkout-panel-icon.upload{
  background:linear-gradient(180deg,#3b82f6 0%,#0d6efd 100%) !important;
}
.checkout-panel-icon.qr{
  background:linear-gradient(180deg,#f59e0b 0%,#f59e0b 100%) !important;
  color:#111827 !important;
}
.upload-proof-box .form-text,
.payment-action-box .small.text-muted{
  font-size:.96rem !important;
}
@media(max-width:576px){
  .checkout-panel-title{
    font-size:.98rem !important;
    gap:8px !important;
  }
  .checkout-panel-icon{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    border-radius:10px !important;
    font-size:1rem !important;
  }
  .upload-proof-box .form-text,
  .payment-action-box .small.text-muted{
    font-size:.9rem !important;
  }
}


/* =========================================================
   FINAL CHECKOUT UPLOAD + QR COMPACT LAYOUT
   - Upload proof and View QR side-by-side on desktop
   - Remove duplicate helper text
   - Big QR icon button with bold label
   ========================================================= */
.checkout-quick-actions{
  align-items:stretch !important;
}
.checkout-quick-actions .upload-proof-box,
.checkout-quick-actions .payment-action-box{
  margin-top:0 !important;
  height:100% !important;
}
.qr-view-btn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-height:130px !important;
  border-radius:16px !important;
  font-weight:800 !important;
}
.qr-view-icon{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  color:#111827 !important;
  font-size:1.55rem !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  box-shadow:0 6px 14px rgba(15,23,42,.10) !important;
  border:2px solid rgba(17,24,39,.10) !important;
}
.qr-view-label{
  display:block !important;
  font-size:1.12rem !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#111827 !important;
}
@media(max-width:576px){
  .qr-view-btn{
    min-height:112px !important;
    gap:8px !important;
  }
  .qr-view-icon{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    border-radius:14px !important;
    font-size:1.25rem !important;
  }
  .qr-view-label{
    font-size:1rem !important;
  }
}


/* =========================================================
   FINAL MOBILE PRICE + STICKY BAR ALIGNMENT FIX
   - Mobile price stays beside qty, never overlays image.
   - Sticky bar text becomes "Total Payable" and buttons sit side by side.
   ========================================================= */
@media (max-width:576px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    position:relative !important;
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:8px !important;
    align-items:stretch !important;
    min-height:auto !important;
    overflow:hidden !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:112px !important;
    height:112px !important;
    min-width:112px !important;
    min-height:112px !important;
    max-height:112px !important;
    margin:0 !important;
    align-self:center !important;
  }
  body.customer-body #productGrid > .product-card .product-info-area{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start !important;
    padding:0 !important;
    margin:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-bottom-bar{
    grid-column:2 !important;
    grid-row:2 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin:0 !important;
    padding:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-price-block,
  body.customer-body #productGrid > .product-card .product-price-block.has-old-price{
    position:static !important;
    inset:auto !important;
    top:auto !important;
    left:auto !important;
    z-index:auto !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
    flex:1 1 auto !important;
    max-width:none !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:8px !important;
    text-align:left !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.28rem !important;
    line-height:1 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    margin:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-old-price-inline{
    display:inline-block !important;
    font-size:.76rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
    padding:0 0 2px 0 !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
  }

  body.customer-body .sticky-cart{
    padding:8px 10px !important;
  }
  body.customer-body .sticky-cart-row{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  body.customer-body #clearCartBtn{order:2 !important;}
  body.customer-body #openCartBtn{order:3 !important;}
  body.customer-body .sticky-cart-summary{ 
    order:1 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    text-align:left !important;
    justify-content:flex-start !important;
    font-size:.82rem !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    padding-right:4px !important;
  }
  body.customer-body .sticky-cart-summary span{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  body.customer-body .sticky-cart-summary b{
    font-size:.96rem !important;
  }
  body.customer-body .sticky-action-btn{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:92px !important;
    min-height:40px !important;
    padding:.46rem .58rem !important;
    font-size:.80rem !important;
    white-space:nowrap !important;
  }
}
@media (max-width:380px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    grid-template-columns:96px minmax(0,1fr) !important;
    column-gap:10px !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    min-height:96px !important;
    max-height:96px !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.14rem !important;
  }
  body.customer-body #productGrid > .product-card .product-old-price-inline{
    font-size:.68rem !important;
  }
  body.customer-body .sticky-action-btn{
    min-width:86px !important;
    font-size:.75rem !important;
    padding:.4rem .5rem !important;
  }
  body.customer-body .sticky-cart-summary{
    font-size:.74rem !important;
  }
  body.customer-body .sticky-cart-summary b{
    font-size:.86rem !important;
  }
}


/* =========================================================
   FINAL HARD FIX: MOBILE PRICE LOCATION + BOTTOM BUTTONS
   User marked position: price must stay in right content area,
   never as a bubble over the image. Clear Cart and View Cart
   stay beside each other, with Total Payable on the left.
   ========================================================= */
@media (max-width:576px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    position:relative !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:8px !important;
    align-items:stretch !important;
    min-height:132px !important;
    padding:10px !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:112px !important;
    height:112px !important;
    min-width:112px !important;
    min-height:112px !important;
    max-height:112px !important;
    margin:0 !important;
    align-self:center !important;
  }
  body.customer-body #productGrid > .product-card .product-info-area{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start !important;
    justify-self:stretch !important;
    padding:0 !important;
    margin:0 !important;
    min-height:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-name-title{
    margin:0 !important;
    font-size:.94rem !important;
    line-height:1.16 !important;
  }
  body.customer-body #productGrid > .product-card .product-promo-inline-title{
    font-size:.76rem !important;
    line-height:1.12 !important;
  }
  body.customer-body #productGrid > .product-card .product-bottom-bar{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:end !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:9px !important;
    margin:0 !important;
    padding:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-price-block,
  body.customer-body #productGrid > .product-card .product-price-block.has-old-price{
    position:static !important;
    inset:auto !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    z-index:auto !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:7px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    text-align:left !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.24rem !important;
    line-height:1 !important;
    font-weight:900 !important;
    color:#111827 !important;
    white-space:nowrap !important;
    margin:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-old-price-inline{
    display:inline-block !important;
    font-size:.74rem !important;
    line-height:1 !important;
    font-weight:700 !important;
    color:#9ca3af !important;
    white-space:nowrap !important;
    padding:0 0 2px 0 !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
    margin:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control .qty-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:12px !important;
  }

  body.customer-body .sticky-cart{
    padding:8px 10px !important;
  }
  body.customer-body .sticky-cart-row{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  body.customer-body .sticky-cart-summary{
    order:1 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    display:block !important;
    text-align:left !important;
    font-size:.80rem !important;
    line-height:1.12 !important;
    font-weight:800 !important;
    padding:0 !important;
  }
  body.customer-body .sticky-cart-summary span{
    display:block !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  body.customer-body .sticky-cart-summary b{
    display:inline !important;
    font-size:.94rem !important;
    font-weight:900 !important;
  }
  body.customer-body .sticky-cart-buttons{
    order:2 !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
  }
  body.customer-body .sticky-action-btn{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:84px !important;
    min-height:40px !important;
    padding:.42rem .5rem !important;
    font-size:.76rem !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    border-radius:12px !important;
  }
}
@media (max-width:380px){
  body.customer-body #productGrid > .product-card .customer-product-card{
    grid-template-columns:96px minmax(0,1fr) !important;
    column-gap:10px !important;
    min-height:116px !important;
    padding:9px !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    min-height:96px !important;
    max-height:96px !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.10rem !important;
  }
  body.customer-body #productGrid > .product-card .product-old-price-inline{
    font-size:.66rem !important;
  }
  body.customer-body .sticky-cart-row{
    gap:5px !important;
  }
  body.customer-body .sticky-action-btn{
    min-width:76px !important;
    font-size:.70rem !important;
    padding:.38rem .42rem !important;
  }
  body.customer-body .sticky-cart-summary{
    font-size:.70rem !important;
  }
  body.customer-body .sticky-cart-summary b{
    font-size:.82rem !important;
  }
}


/* =========================================================
   FINAL USER REQUEST ROUND
   1) Sticky top navbar + sticky search/category just below it.
   2) Banner, then New Things for you section under that.
   3) Mobile bottom bar = Total Payable on top, buttons below in one row.
   4) Mobile product price stays in right content area, never over image.
   ========================================================= */
body.customer-body .navbar.sticky-top{
  position:sticky !important;
  top:0 !important;
  z-index:1055 !important;
  background:#fff !important;
}
body.customer-body .customer-search-sticky{
  position:sticky !important;
  top:74px !important;
  z-index:1050 !important;
  background:#fff !important;
  margin-top:0 !important;
}
@media (max-width:576px){
  body.customer-body{
    padding-bottom:132px !important;
  }
  body.customer-body .navbar.sticky-top{
    top:0 !important;
  }
  body.customer-body .customer-search-sticky{
    top:64px !important;
    padding:10px !important;
    border-radius:14px !important;
  }

  /* product card mobile layout final lock */
  body.customer-body #productGrid > .product-card .customer-product-card{
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    row-gap:8px !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:112px !important;
    height:112px !important;
    min-width:112px !important;
    min-height:112px !important;
    max-height:112px !important;
    margin:0 !important;
    align-self:center !important;
  }
  body.customer-body #productGrid > .product-card .product-info-area{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start !important;
    padding:0 !important;
    margin:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-bottom-bar{
    grid-column:2 !important;
    grid-row:2 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-price-block,
  body.customer-body #productGrid > .product-card .product-price-block.has-old-price{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    z-index:1 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:6px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    text-align:left !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.18rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
    margin:0 !important;
  }
  body.customer-body #productGrid > .product-card .product-old-price-inline{
    font-size:.72rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
    padding-bottom:2px !important;
    display:inline-block !important;
  }
  body.customer-body #productGrid > .product-card .product-qty-control{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
    margin:0 !important;
  }

  /* bottom bar final mobile layout */
  body.customer-body .sticky-cart{
    padding:8px 10px !important;
  }
  body.customer-body .sticky-cart-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:7px !important;
  }
  body.customer-body .sticky-cart-summary{
    order:1 !important;
    width:100% !important;
    flex:none !important;
    display:block !important;
    text-align:left !important;
    justify-content:flex-start !important;
    font-size:.78rem !important;
    line-height:1.1 !important;
    font-weight:800 !important;
    padding:0 2px !important;
  }
  body.customer-body .sticky-cart-summary span{
    display:block !important;
    white-space:normal !important;
  }
  body.customer-body .sticky-cart-summary b{
    font-size:.95rem !important;
    font-weight:900 !important;
  }
  body.customer-body .sticky-cart-buttons{
    order:2 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  body.customer-body .sticky-action-btn{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:.38rem .35rem !important;
    font-size:.76rem !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    border-radius:12px !important;
  }
}
@media (max-width:380px){
  body.customer-body .customer-search-sticky{
    top:60px !important;
  }
  body.customer-body #productGrid > .product-card .customer-product-card{
    grid-template-columns:96px minmax(0,1fr) !important;
    column-gap:10px !important;
  }
  body.customer-body #productGrid > .product-card .product-photo-frame{
    width:96px !important;
    height:96px !important;
    min-width:96px !important;
    min-height:96px !important;
    max-height:96px !important;
  }
  body.customer-body #productGrid > .product-card .product-main-price{
    font-size:1.08rem !important;
  }
  body.customer-body #productGrid > .product-card .product-old-price-inline{
    font-size:.66rem !important;
  }
  body.customer-body .sticky-action-btn{
    font-size:.72rem !important;
    padding:.35rem .3rem !important;
  }
  body.customer-body .sticky-cart-summary{
    font-size:.74rem !important;
  }
  body.customer-body .sticky-cart-summary b{
    font-size:.88rem !important;
  }
}


/* =========================================================
   FINAL HEADER + STICKY SEARCH + MOBILE BOTTOM BUTTON FIX
   - Header fixed on mobile and laptop.
   - Header only: company logo/name, menu, bell, profile icon.
   - Menu contains Profile, Outlets, Orders.
   - Search + category are sticky below header and side-by-side on mobile.
   - Mobile bottom: Total Payable top, Clear Cart + View Cart below in one row.
   ========================================================= */
:root{--customer-header-height:64px;}
body.customer-body{
  padding-top:var(--customer-header-height) !important;
}
body.customer-body .navbar.customer-topbar,
body.customer-body .navbar.sticky-top.customer-topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:2200 !important;
  min-height:var(--customer-header-height) !important;
  background:#fff !important;
}
body.customer-body .customer-brand{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  max-width:calc(100% - 140px) !important;
  margin-right:auto !important;
}
body.customer-body .customer-brand .thumb{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:10px !important;
}
body.customer-body .customer-brand-name{
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.customer-body .customer-menu-btn,
body.customer-body .notice-bell-btn,
body.customer-body .customer-profile-main{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  font-size:1.08rem !important;
}
body.customer-body .customer-menu-dropdown{
  z-index:2300 !important;
  border-radius:14px !important;
  box-shadow:0 14px 36px rgba(15,23,42,.18) !important;
}
body.customer-body .customer-search-sticky{
  position:sticky !important;
  top:var(--customer-header-height) !important;
  z-index:2150 !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.10) !important;
}
body.customer-body .customer-search-row{
  align-items:center !important;
}
@media(max-width:576px){
  :root{--customer-header-height:58px;}
  body.customer-body{
    padding-top:var(--customer-header-height) !important;
    padding-bottom:132px !important;
  }
  body.customer-body .navbar.customer-topbar .container{
    gap:6px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body.customer-body .customer-brand{
    max-width:calc(100% - 138px) !important;
    font-size:.92rem !important;
  }
  body.customer-body .customer-brand .thumb{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    margin-right:6px !important;
  }
  body.customer-body .customer-menu-btn,
  body.customer-body .notice-bell-btn,
  body.customer-body .customer-profile-main{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:10px !important;
    font-size:.96rem !important;
  }
  body.customer-body .profile-head-icon{
    width:24px !important;
    height:24px !important;
  }
  body.customer-body .profile-head-icon svg{
    width:15px !important;
    height:15px !important;
  }
  body.customer-body .customer-search-sticky{
    top:var(--customer-header-height) !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:8px !important;
    border-radius:14px !important;
  }
  body.customer-body .customer-search-row{
    flex-wrap:nowrap !important;
    --bs-gutter-x:.45rem !important;
  }
  body.customer-body .customer-search-sticky .form-control,
  body.customer-body .customer-search-sticky .form-select{
    min-height:38px !important;
    height:38px !important;
    font-size:.82rem !important;
    padding:.38rem .5rem !important;
    border-radius:10px !important;
  }

  body.customer-body .sticky-cart{
    padding:8px 10px !important;
  }
  body.customer-body .sticky-cart-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:7px !important;
  }
  body.customer-body .sticky-cart-summary{
    order:1 !important;
    width:100% !important;
    flex:none !important;
    display:block !important;
    text-align:left !important;
    justify-content:flex-start !important;
    font-size:.78rem !important;
    line-height:1.1 !important;
    font-weight:800 !important;
    padding:0 2px !important;
  }
  body.customer-body .sticky-cart-summary span{
    display:block !important;
    white-space:normal !important;
  }
  body.customer-body .sticky-cart-summary b{
    font-size:.95rem !important;
    font-weight:900 !important;
  }
  body.customer-body .sticky-cart-buttons{
    order:2 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  body.customer-body .sticky-action-btn{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:.38rem .35rem !important;
    font-size:.76rem !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    border-radius:12px !important;
  }
}
@media(min-width:577px){
  body.customer-body .sticky-cart-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }
  body.customer-body .sticky-cart-summary{
    order:1 !important;
    flex:1 1 auto !important;
    text-align:left !important;
    justify-content:flex-start !important;
  }
  body.customer-body .sticky-cart-buttons{
    order:2 !important;
    display:flex !important;
    flex-direction:row !important;
    gap:10px !important;
  }
}


/* =========================================================
   FINAL MENU + BELL-IN-NOTICE + TRUE STICKY HEADER FIX
   - Header only: company logo/name + 3-line menu.
   - Profile is only inside the 3-line menu.
   - Bell badge is inside the New Things for you panel.
   - Header and search/category stay visible on mobile and laptop.
   - Mobile search/category stay side-by-side.
   ========================================================= */
:root{
  --customer-header-height:64px;
  --customer-search-height:74px;
}
body.customer-body{
  padding-top:calc(var(--customer-header-height) + var(--customer-search-height) + 16px) !important;
}
body.customer-body .navbar.customer-topbar,
body.customer-body .navbar.sticky-top.customer-topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:3000 !important;
  min-height:var(--customer-header-height) !important;
  background:#fff !important;
}
body.customer-body .customer-topbar .container{
  min-height:var(--customer-header-height) !important;
}
body.customer-body .customer-brand{
  max-width:calc(100% - 58px) !important;
}
body.customer-body .customer-menu-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  font-size:1.28rem !important;
  font-weight:900 !important;
  line-height:1 !important;
}
body.customer-body .customer-search-sticky{
  position:fixed !important;
  top:calc(var(--customer-header-height) + 8px) !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(1140px, calc(100% - 24px)) !important;
  z-index:2990 !important;
  margin:0 !important;
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.12) !important;
}
body.customer-body .customer-search-row{
  flex-wrap:nowrap !important;
}
body.customer-body .customer-notice-banner .notice-bell-inside{
  border:0 !important;
  padding:0 !important;
  cursor:pointer !important;
  flex:0 0 auto !important;
}
body.customer-body .customer-notice-banner .notice-bell-inside:focus{
  outline:2px solid rgba(13,110,253,.35) !important;
  outline-offset:2px !important;
}
body.customer-body .customer-notice-banner #noticeBadge{
  font-size:.66rem !important;
}
body.customer-body .customer-profile-main,
body.customer-body .notice-bell-btn{
  display:none !important;
}

@media(max-width:576px){
  :root{
    --customer-header-height:56px;
    --customer-search-height:62px;
  }
  body.customer-body{
    padding-top:calc(var(--customer-header-height) + var(--customer-search-height) + 14px) !important;
  }
  body.customer-body .customer-topbar .container{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body.customer-body .customer-brand{
    max-width:calc(100% - 48px) !important;
    font-size:.92rem !important;
  }
  body.customer-body .customer-brand .thumb{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    margin-right:6px !important;
  }
  body.customer-body .customer-menu-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:11px !important;
    font-size:1.18rem !important;
  }
  body.customer-body .customer-search-sticky{
    top:calc(var(--customer-header-height) + 6px) !important;
    width:calc(100% - 16px) !important;
    padding:8px !important;
    border-radius:14px !important;
  }
  body.customer-body .customer-search-row{
    flex-wrap:nowrap !important;
    --bs-gutter-x:.45rem !important;
  }
  body.customer-body .customer-search-row > .col-7{
    flex:0 0 58.333333% !important;
    max-width:58.333333% !important;
  }
  body.customer-body .customer-search-row > .col-5{
    flex:0 0 41.666667% !important;
    max-width:41.666667% !important;
  }
  body.customer-body .customer-search-sticky .form-control,
  body.customer-body .customer-search-sticky .form-select{
    min-height:38px !important;
    height:38px !important;
    font-size:.82rem !important;
    padding:.36rem .45rem !important;
    border-radius:10px !important;
  }
}


/* CUSTOMER SEARCH/CATEGORY FILTER HARD FIX */
body.customer-body #productGrid > .product-card.d-none,
body.customer-body #productGrid > .product-card[hidden]{
  display:none !important;
}
body.customer-body .customer-search-row{
  flex-wrap:nowrap !important;
}
@media(max-width:576px){
  body.customer-body .customer-search-row > .col-7{flex:0 0 58.333333% !important;width:58.333333% !important;max-width:58.333333% !important;}
  body.customer-body .customer-search-row > .col-5{flex:0 0 41.666667% !important;width:41.666667% !important;max-width:41.666667% !important;}
  body.customer-body #search,
  body.customer-body #cat{font-size:.88rem !important;min-height:40px !important;padding:.45rem .55rem !important;}
}


/* =========================================================
   FINAL HEADER + STICKY SEARCH FIX
   - Header uses Toko Warisan logo blue.
   - Header sticks at top on mobile and laptop.
   - Search/category sticks directly below header without overlap.
   - Mobile search/category stay side-by-side.
   - Mobile bottom cart: Total Payable on top, two buttons below in one row.
   ========================================================= */
:root{
  --tw-logo-blue:#263579;
  --tw-logo-blue-dark:#1f2b67;
  --tw-customer-header-height:60px;
}

body.customer-body .customer-topbar,
body.customer-body .navbar.customer-topbar,
body.customer-body .navbar.sticky-top.customer-topbar{
  position:sticky !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:3000 !important;
  min-height:60px !important;
  background:linear-gradient(90deg,var(--tw-logo-blue-dark),var(--tw-logo-blue)) !important;
  color:#ffffff !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 6px 18px rgba(15,23,42,.20) !important;
}

body.customer-body .customer-topbar .container{
  min-height:60px !important;
  flex-wrap:nowrap !important;
}

body.customer-body .customer-brand,
body.customer-body .customer-brand-name,
body.customer-body .customer-topbar .navbar-brand{
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
  min-width:0 !important;
}

body.customer-body .customer-brand-name{
  display:inline-block !important;
  max-width:62vw !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
}

body.customer-body .customer-brand .thumb,
body.customer-body .customer-topbar .thumb{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  background:#ffffff !important;
  border:2px solid rgba(255,255,255,.90) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.16) !important;
}

body.customer-body .customer-menu-btn{
  color:#ffffff !important;
  border-color:rgba(255,255,255,.72) !important;
  background:rgba(255,255,255,.12) !important;
  font-weight:900 !important;
  box-shadow:none !important;
}

body.customer-body .customer-menu-btn:hover,
body.customer-body .customer-menu-btn:focus{
  color:var(--tw-logo-blue) !important;
  background:#ffffff !important;
  border-color:#ffffff !important;
}

body.customer-body .customer-menu-dropdown{
  z-index:3100 !important;
}

body.customer-body .customer-search-sticky{
  position:sticky !important;
  top:var(--tw-customer-header-height,60px) !important;
  z-index:2990 !important;
  background:#ffffff !important;
  border:1px solid rgba(38,53,121,.12) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.10) !important;
}

body.customer-body .customer-search-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
}

body.customer-body .customer-search-row > div{
  min-width:0 !important;
}

@media(max-width:576px){
  :root{
    --tw-customer-header-height:58px;
  }
  body.customer-body .customer-topbar,
  body.customer-body .navbar.customer-topbar,
  body.customer-body .navbar.sticky-top.customer-topbar{
    min-height:58px !important;
  }
  body.customer-body .customer-topbar .container{
    min-height:58px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    gap:8px !important;
  }
  body.customer-body .customer-brand{
    margin-right:auto !important;
    font-size:.94rem !important;
    line-height:1.1 !important;
  }
  body.customer-body .customer-brand-name{
    max-width:62vw !important;
    font-size:.92rem !important;
  }
  body.customer-body .customer-brand .thumb,
  body.customer-body .customer-topbar .thumb{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    margin-right:6px !important;
  }
  body.customer-body .customer-menu-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    padding:0 !important;
    border-radius:11px !important;
    font-size:1.25rem !important;
    line-height:1 !important;
  }
  body.customer-body .customer-search-sticky{
    top:var(--tw-customer-header-height,58px) !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:8px !important;
    border-radius:14px !important;
  }
  body.customer-body .customer-search-row{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
    --bs-gutter-x:.45rem !important;
  }
  body.customer-body .customer-search-row > .col-7,
  body.customer-body .customer-search-row > div:first-child{
    flex:0 0 58% !important;
    width:58% !important;
    max-width:58% !important;
  }
  body.customer-body .customer-search-row > .col-5,
  body.customer-body .customer-search-row > div:nth-child(2){
    flex:0 0 42% !important;
    width:42% !important;
    max-width:42% !important;
  }
  body.customer-body #search,
  body.customer-body #cat{
    height:38px !important;
    min-height:38px !important;
    font-size:.80rem !important;
    padding:.36rem .42rem !important;
    border-radius:10px !important;
  }

  body.customer-body{
    padding-bottom:132px !important;
  }
  body.customer-body .sticky-cart{
    padding:8px 10px !important;
  }
  body.customer-body .sticky-cart-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:7px !important;
  }
  body.customer-body .sticky-cart-summary{
    order:1 !important;
    width:100% !important;
    display:block !important;
    text-align:left !important;
    font-size:.78rem !important;
    line-height:1.1 !important;
    font-weight:800 !important;
    padding:0 2px !important;
  }
  body.customer-body .sticky-cart-summary span{
    display:block !important;
    white-space:normal !important;
  }
  body.customer-body .sticky-cart-summary b{
    font-size:.95rem !important;
    font-weight:900 !important;
  }
  body.customer-body .sticky-cart-buttons{
    order:2 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  body.customer-body .sticky-action-btn{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:.38rem .35rem !important;
    font-size:.74rem !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    border-radius:12px !important;
  }
}

@media(max-width:380px){
  body.customer-body .customer-brand-name{
    max-width:58vw !important;
    font-size:.86rem !important;
  }
  body.customer-body #search,
  body.customer-body #cat{
    font-size:.74rem !important;
    padding:.32rem .34rem !important;
  }
  body.customer-body .sticky-action-btn{
    font-size:.70rem !important;
    padding:.34rem .30rem !important;
  }
}


/* =========================================================
   FINAL SHARE + TRUE STICKY HEADER/SEARCH ALIGNMENT FIX
   - Removes previous fixed-header padding gap.
   - Header sticks at top; search/category sticks directly under it.
   - Search/category aligns inside the same page container.
   - Adds visible Share button beside menu.
   ========================================================= */
:root{
  --tw-logo-blue:#263579;
  --tw-logo-blue-dark:#1f2b67;
  --tw-customer-header-height:60px;
}
html, body{
  scroll-padding-top:132px !important;
}
body.customer-body{
  padding-top:0 !important;
}
body.customer-body > .container.py-3{
  padding-top:10px !important;
}
body.customer-body .customer-topbar,
body.customer-body .navbar.customer-topbar,
body.customer-body .navbar.sticky-top.customer-topbar{
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  z-index:4000 !important;
  min-height:var(--tw-customer-header-height) !important;
  background:linear-gradient(90deg,var(--tw-logo-blue-dark),var(--tw-logo-blue)) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(15,23,42,.20) !important;
}
body.customer-body .customer-topbar .container{
  min-height:var(--tw-customer-header-height) !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
}
body.customer-body .customer-brand,
body.customer-body .customer-brand-name,
body.customer-body .customer-topbar .navbar-brand{
  color:#fff !important;
  min-width:0 !important;
}
body.customer-body .customer-brand-name{
  max-width:58vw !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.customer-body .customer-share-btn,
body.customer-body .customer-menu-btn{
  color:#fff !important;
  border-color:rgba(255,255,255,.72) !important;
  background:rgba(255,255,255,.12) !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
body.customer-body .customer-share-btn:hover,
body.customer-body .customer-share-btn:focus,
body.customer-body .customer-menu-btn:hover,
body.customer-body .customer-menu-btn:focus{
  color:var(--tw-logo-blue) !important;
  background:#fff !important;
  border-color:#fff !important;
}
body.customer-body .customer-menu-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  border-radius:12px !important;
  font-size:1.25rem !important;
  line-height:1 !important;
}
body.customer-body .customer-share-btn{
  min-height:42px !important;
  padding:.45rem .75rem !important;
  border-radius:12px !important;
  white-space:nowrap !important;
}
body.customer-body .customer-search-sticky{
  position:sticky !important;
  top:var(--tw-customer-header-height) !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:100% !important;
  z-index:3990 !important;
  margin:0 0 12px 0 !important;
  background:#fff !important;
  border:1px solid rgba(38,53,121,.12) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.10) !important;
}
body.customer-body .customer-search-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  width:100% !important;
}
body.customer-body .customer-search-row > div{
  min-width:0 !important;
}
body.customer-body #search,
body.customer-body #cat{
  width:100% !important;
}
@media(max-width:576px){
  :root{
    --tw-customer-header-height:56px;
  }
  html, body{
    scroll-padding-top:116px !important;
  }
  body.customer-body > .container.py-3{
    padding-top:8px !important;
  }
  body.customer-body .customer-topbar .container{
    min-height:56px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    gap:7px !important;
  }
  body.customer-body .customer-brand-name{
    max-width:44vw !important;
    font-size:.88rem !important;
  }
  body.customer-body .customer-topbar .thumb,
  body.customer-body .customer-brand .thumb{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    margin-right:5px !important;
  }
  body.customer-body .customer-share-btn{
    min-height:36px !important;
    padding:.35rem .48rem !important;
    font-size:.76rem !important;
    border-radius:10px !important;
  }
  body.customer-body .customer-menu-btn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    font-size:1.14rem !important;
    border-radius:10px !important;
  }
  body.customer-body .customer-search-sticky{
    top:var(--tw-customer-header-height) !important;
    padding:8px !important;
    border-radius:14px !important;
    margin-bottom:10px !important;
  }
  body.customer-body .customer-search-row{
    --bs-gutter-x:.45rem !important;
    flex-wrap:nowrap !important;
  }
  body.customer-body .customer-search-row > .col-7,
  body.customer-body .customer-search-row > div:first-child{
    flex:0 0 58% !important;
    width:58% !important;
    max-width:58% !important;
  }
  body.customer-body .customer-search-row > .col-5,
  body.customer-body .customer-search-row > div:nth-child(2){
    flex:0 0 42% !important;
    width:42% !important;
    max-width:42% !important;
  }
  body.customer-body #search,
  body.customer-body #cat{
    height:38px !important;
    min-height:38px !important;
    font-size:.78rem !important;
    padding:.34rem .42rem !important;
    border-radius:10px !important;
  }
}
@media(max-width:380px){
  body.customer-body .customer-brand-name{
    max-width:38vw !important;
    font-size:.82rem !important;
  }
  body.customer-body .customer-share-btn{
    font-size:.70rem !important;
    padding:.32rem .38rem !important;
  }
  body.customer-body .customer-menu-btn{
    width:34px !important;
    min-width:34px !important;
  }
}


/* =========================================================
   FINAL STICKY HEADER + SEARCH + NOTICE BADGE REPAIR
   This block intentionally overrides all previous sticky rules.
   - Header is fixed at the top: no top gap.
   - Search/category bar is fixed directly below header.
   - Banner and New Things stay below and scroll normally.
   - Notice bell shows unread badge for new notifications.
   ========================================================= */
:root{
  --tw-logo-blue:#263579;
  --tw-logo-blue-dark:#1f2b67;
  --tw-customer-header-height:60px;
  --tw-customer-search-height:58px;
  --tw-customer-sticky-gap:8px;
}
html{
  scroll-padding-top:calc(var(--tw-customer-header-height) + var(--tw-customer-search-height) + 16px) !important;
}
body.customer-body{
  padding-top:calc(var(--tw-customer-header-height) + var(--tw-customer-search-height) + 14px) !important;
}
body.customer-body > .container.py-3{
  padding-top:0 !important;
}
body.customer-body .navbar.sticky-top.customer-topbar,
body.customer-body .navbar.customer-topbar,
body.customer-body .customer-topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:6000 !important;
  margin:0 !important;
  min-height:var(--tw-customer-header-height) !important;
  background:linear-gradient(90deg,var(--tw-logo-blue-dark),var(--tw-logo-blue)) !important;
  color:#fff !important;
  box-shadow:0 5px 18px rgba(15,23,42,.24) !important;
}
body.customer-body .customer-topbar .container{
  min-height:var(--tw-customer-header-height) !important;
  max-width:1320px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
body.customer-body .customer-topbar .customer-brand,
body.customer-body .customer-topbar .customer-brand-name,
body.customer-body .customer-topbar .navbar-brand{
  color:#fff !important;
}
body.customer-body .customer-menu-btn,
body.customer-body .customer-share-btn{
  color:#fff !important;
  border-color:rgba(255,255,255,.75) !important;
  background:rgba(255,255,255,.14) !important;
  font-weight:800 !important;
}
body.customer-body .customer-menu-btn:hover,
body.customer-body .customer-menu-btn:focus,
body.customer-body .customer-share-btn:hover,
body.customer-body .customer-share-btn:focus{
  color:var(--tw-logo-blue) !important;
  background:#fff !important;
  border-color:#fff !important;
}
body.customer-body .customer-search-sticky{
  position:fixed !important;
  top:var(--tw-customer-header-height) !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(calc(100vw - 24px),1320px) !important;
  max-width:min(calc(100vw - 24px),1320px) !important;
  z-index:5900 !important;
  margin:0 !important;
  padding:10px !important;
  background:#fff !important;
  border:1px solid rgba(38,53,121,.13) !important;
  border-radius:0 0 16px 16px !important;
  box-shadow:0 8px 22px rgba(15,23,42,.14) !important;
}
body.customer-body .customer-search-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  --bs-gutter-x:.65rem !important;
}
body.customer-body .customer-search-row > div{
  min-width:0 !important;
}
body.customer-body #search,
body.customer-body #cat{
  width:100% !important;
  min-height:40px !important;
}
body.customer-body .customer-notice-banner .notice-bell-inside{
  overflow:visible !important;
}
body.customer-body .customer-notice-banner .notice-new-badge,
body.customer-body .customer-notice-banner #noticeBadge{
  min-width:20px !important;
  height:20px !important;
  line-height:14px !important;
  padding:3px 6px !important;
  font-size:.70rem !important;
  font-weight:900 !important;
  border:2px solid #fff !important;
  box-shadow:0 4px 10px rgba(220,53,69,.35) !important;
}
body.customer-body .customer-notice-banner.notice-unread-active{
  border-color:rgba(220,53,69,.20) !important;
  box-shadow:0 10px 24px rgba(220,53,69,.12) !important;
}
@media(max-width:576px){
  :root{
    --tw-customer-header-height:56px;
    --tw-customer-search-height:54px;
  }
  body.customer-body{
    padding-top:calc(var(--tw-customer-header-height) + var(--tw-customer-search-height) + 10px) !important;
  }
  body.customer-body .customer-topbar .container{
    min-height:var(--tw-customer-header-height) !important;
    padding-left:10px !important;
    padding-right:10px !important;
    gap:7px !important;
  }
  body.customer-body .customer-brand-name{
    max-width:48vw !important;
    font-size:.88rem !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  body.customer-body .customer-topbar .thumb,
  body.customer-body .customer-brand .thumb{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    margin-right:5px !important;
  }
  body.customer-body .customer-share-btn{
    min-height:36px !important;
    padding:.33rem .44rem !important;
    font-size:.74rem !important;
    border-radius:10px !important;
  }
  body.customer-body .customer-menu-btn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    padding:0 !important;
    border-radius:10px !important;
    font-size:1.12rem !important;
  }
  body.customer-body .customer-search-sticky{
    top:var(--tw-customer-header-height) !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    padding:8px !important;
    border-radius:0 0 14px 14px !important;
  }
  body.customer-body .customer-search-row{
    flex-wrap:nowrap !important;
    --bs-gutter-x:.45rem !important;
  }
  body.customer-body .customer-search-row > .col-7,
  body.customer-body .customer-search-row > div:first-child{
    flex:0 0 58% !important;
    width:58% !important;
    max-width:58% !important;
  }
  body.customer-body .customer-search-row > .col-5,
  body.customer-body .customer-search-row > div:nth-child(2){
    flex:0 0 42% !important;
    width:42% !important;
    max-width:42% !important;
  }
  body.customer-body #search,
  body.customer-body #cat{
    min-height:38px !important;
    height:38px !important;
    font-size:.78rem !important;
    padding:.34rem .42rem !important;
    border-radius:10px !important;
  }
}
@media(max-width:380px){
  body.customer-body .customer-brand-name{
    max-width:40vw !important;
    font-size:.82rem !important;
  }
  body.customer-body .customer-share-btn{
    font-size:.68rem !important;
    padding:.30rem .36rem !important;
  }
  body.customer-body .customer-menu-btn{
    width:34px !important;
    min-width:34px !important;
  }
}


/* =========================================================
   CATEGORY PICKER ELEMENT FORMAT UPDATE
   - Native select kept hidden for filter logic.
   - Customer sees category names inside neat selectable elements.
   - Long category names wrap neatly up to 3 lines inside each element.
   ========================================================= */
body.customer-body .visually-hidden-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
body.customer-body .category-picker-wrap{
  position:relative !important;
}
body.customer-body .category-picker-btn{
  width:100% !important;
  min-height:48px !important;
  border:1px solid #d9dee8 !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#111827 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  padding:8px 12px !important;
  font-weight:800 !important;
  line-height:1.12 !important;
  text-align:left !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65) !important;
}
body.customer-body .category-picker-btn span:first-child{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}
body.customer-body .category-picker-arrow{
  flex:0 0 auto !important;
  color:#475569 !important;
  font-size:.95rem !important;
}
body.customer-body .category-picker-panel{
  margin-top:8px !important;
  padding:10px !important;
  border:1px solid rgba(13,110,253,.18) !important;
  background:#f8fbff !important;
  border-radius:16px !important;
  box-shadow:0 12px 26px rgba(15,23,42,.12) !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  max-height:245px !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
body.customer-body .category-picker-panel.d-none{
  display:none !important;
}
body.customer-body .category-chip{
  min-height:58px !important;
  border:1px solid #d7e3f7 !important;
  background:#fff !important;
  color:#1f2937 !important;
  border-radius:14px !important;
  padding:7px 8px !important;
  text-align:center !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.08 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 5px 13px rgba(15,23,42,.06) !important;
}
body.customer-body .category-chip span{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  white-space:normal !important;
  word-break:break-word !important;
}
body.customer-body .category-chip.active{
  background:#0d6efd !important;
  color:#fff !important;
  border-color:#0d6efd !important;
  box-shadow:0 8px 18px rgba(13,110,253,.24) !important;
}
@media(max-width:576px){
  body.customer-body .customer-search-row{
    align-items:flex-start !important;
  }
  body.customer-body .category-picker-btn{
    min-height:42px !important;
    padding:6px 9px !important;
    border-radius:11px !important;
    font-size:.78rem !important;
  }
  body.customer-body .category-picker-panel{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:8px !important;
    max-height:210px !important;
  }
  body.customer-body .category-chip{
    min-height:54px !important;
    font-size:.68rem !important;
    padding:6px 5px !important;
    border-radius:12px !important;
  }
}
@media(max-width:380px){
  body.customer-body .category-picker-panel{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body.customer-body .category-chip{
    font-size:.70rem !important;
  }
}


/* =========================================================
   CATEGORY LIST REPAIR
   Keep normal category dropdown visible and add a proper
   horizontal category element list. Category names can wrap
   up to 3 lines inside each element.
   ========================================================= */
body.customer-body .visually-hidden-select{
  position:static !important;
  width:100% !important;
  height:auto !important;
  padding:.5rem .75rem !important;
  margin:0 !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:normal !important;
  border:1px solid #dee2e6 !important;
}
body.customer-body .category-picker-btn,
body.customer-body .category-picker-panel{
  display:none !important;
}
body.customer-body .category-chip-strip{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:8px 2px 2px 2px !important;
  margin-top:2px !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:thin !important;
}
body.customer-body .category-chip-strip .category-chip{
  flex:0 0 128px !important;
  width:128px !important;
  min-height:58px !important;
  border:1px solid #d7e3f7 !important;
  background:#ffffff !important;
  color:#1f2937 !important;
  border-radius:14px !important;
  padding:7px 8px !important;
  text-align:center !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.08 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 5px 13px rgba(15,23,42,.06) !important;
}
body.customer-body .category-chip-strip .category-chip span{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  white-space:normal !important;
  word-break:break-word !important;
}
body.customer-body .category-chip-strip .category-chip.active{
  background:#0d6efd !important;
  color:#fff !important;
  border-color:#0d6efd !important;
  box-shadow:0 8px 18px rgba(13,110,253,.24) !important;
}
@media(max-width:576px){
  body.customer-body .customer-search-sticky{
    padding:8px !important;
  }
  body.customer-body .customer-search-row{
    align-items:flex-start !important;
    --bs-gutter-x:.45rem !important;
    --bs-gutter-y:.35rem !important;
  }
  body.customer-body .customer-search-row > .col-7{
    flex:0 0 58% !important;
    width:58% !important;
    max-width:58% !important;
  }
  body.customer-body .customer-search-row > .col-5{
    flex:0 0 42% !important;
    width:42% !important;
    max-width:42% !important;
  }
  body.customer-body #search,
  body.customer-body #cat{
    height:38px !important;
    min-height:38px !important;
    font-size:.78rem !important;
    padding:.34rem .42rem !important;
    border-radius:10px !important;
  }
  body.customer-body .category-chip-strip{
    gap:6px !important;
    padding-top:6px !important;
  }
  body.customer-body .category-chip-strip .category-chip{
    flex-basis:96px !important;
    width:96px !important;
    min-height:50px !important;
    font-size:.67rem !important;
    padding:5px 5px !important;
    border-radius:12px !important;
  }
}
@media(max-width:380px){
  body.customer-body .category-chip-strip .category-chip{
    flex-basis:90px !important;
    width:90px !important;
    font-size:.65rem !important;
  }
}


/* =========================================================
   FINAL CATEGORY DROPDOWN MENU REPAIR
   - Remove duplicated select/chip category UI.
   - Category now uses a Bootstrap dropdown menu like the 3-line menu.
   - Keeps search + category aligned and sticky.
   ========================================================= */
body.customer-body .customer-search-sticky{
  overflow:visible !important;
}
body.customer-body .customer-search-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(190px, 280px) !important;
  align-items:stretch !important;
  gap:10px !important;
  width:100% !important;
  margin:0 !important;
}
body.customer-body .customer-search-box,
body.customer-body .customer-category-box{
  min-width:0 !important;
}
body.customer-body #search,
body.customer-body .category-menu-button{
  width:100% !important;
  min-height:48px !important;
  height:48px !important;
  border-radius:12px !important;
  font-size:1rem !important;
}
body.customer-body .category-menu-button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  text-align:left !important;
  font-weight:700 !important;
  padding-left:14px !important;
  padding-right:14px !important;
  overflow:hidden !important;
}
body.customer-body #categoryMenuLabel{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.customer-body .category-menu-list{
  min-width:230px !important;
  max-width:min(340px, calc(100vw - 24px)) !important;
  max-height:55vh !important;
  overflow-y:auto !important;
  border-radius:14px !important;
  padding:8px !important;
  box-shadow:0 16px 34px rgba(15,23,42,.18) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  z-index:2100 !important;
}
body.customer-body .category-menu-item{
  border-radius:10px !important;
  padding:10px 12px !important;
  font-size:.95rem !important;
  line-height:1.2 !important;
  white-space:normal !important;
  word-break:break-word !important;
  font-weight:650 !important;
}
body.customer-body .category-menu-item.active{
  background:#0d6efd !important;
  color:#fff !important;
}
body.customer-body .category-chip-strip,
body.customer-body .category-chip,
body.customer-body .category-picker-panel,
body.customer-body .category-elements,
body.customer-body .category-pills,
body.customer-body .category-scroll-row{
  display:none !important;
}
@media(max-width:576px){
  body.customer-body .customer-search-row{
    grid-template-columns:minmax(0, 58%) minmax(112px, 42%) !important;
    gap:6px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    min-height:40px !important;
    height:40px !important;
    border-radius:10px !important;
    font-size:.78rem !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  body.customer-body .category-menu-list{
    position:absolute !important;
    right:0 !important;
    left:auto !important;
    min-width:min(230px, calc(100vw - 20px)) !important;
    max-width:calc(100vw - 20px) !important;
    max-height:52vh !important;
  }
  body.customer-body .category-menu-item{
    font-size:.85rem !important;
    padding:9px 10px !important;
    line-height:1.15 !important;
  }
}
@media(max-width:380px){
  body.customer-body .customer-search-row{
    grid-template-columns:minmax(0, 57%) minmax(106px, 43%) !important;
    gap:5px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    font-size:.74rem !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }
}


/* =========================================================
   FINAL MOBILE SEARCH/CATEGORY PADDING + WIDTH FIX
   - Add clear space between header and search/category bar.
   - Search and category fill the full mobile width cleanly.
   - Category button is wider so names are readable.
   ========================================================= */
:root{
  --tw-customer-header-height:72px;
  --tw-customer-search-height:62px;
  --tw-customer-search-gap:12px;
}
body.customer-body{
  padding-top:calc(var(--tw-customer-header-height) + var(--tw-customer-search-height) + var(--tw-customer-search-gap) + 12px) !important;
}
body.customer-body .customer-topbar,
body.customer-body .navbar.customer-topbar,
body.customer-body .navbar.sticky-top.customer-topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  min-height:var(--tw-customer-header-height) !important;
  z-index:7000 !important;
}
body.customer-body .customer-search-sticky{
  position:fixed !important;
  top:calc(var(--tw-customer-header-height) + var(--tw-customer-search-gap)) !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(calc(100vw - 28px),1320px) !important;
  max-width:min(calc(100vw - 28px),1320px) !important;
  z-index:6900 !important;
  margin:0 !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
body.customer-body .customer-search-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(180px,300px) !important;
  gap:10px !important;
  align-items:center !important;
  width:100% !important;
  margin:0 !important;
}
body.customer-body .customer-search-box,
body.customer-body .customer-category-box{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
}
body.customer-body #search,
body.customer-body .category-menu-button{
  width:100% !important;
  max-width:100% !important;
  min-height:44px !important;
  height:44px !important;
  box-sizing:border-box !important;
}
body.customer-body .category-menu-button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  text-align:left !important;
}
body.customer-body #categoryMenuLabel{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
@media(max-width:576px){
  :root{
    --tw-customer-header-height:96px;
    --tw-customer-search-height:58px;
    --tw-customer-search-gap:10px;
  }
  body.customer-body{
    padding-top:calc(var(--tw-customer-header-height) + var(--tw-customer-search-height) + var(--tw-customer-search-gap) + 10px) !important;
  }
  body.customer-body .customer-search-sticky{
    top:calc(var(--tw-customer-header-height) + var(--tw-customer-search-gap)) !important;
    width:calc(100vw - 22px) !important;
    max-width:calc(100vw - 22px) !important;
    padding:8px 10px !important;
    border-radius:0 0 16px 16px !important;
  }
  body.customer-body .customer-search-row{
    display:grid !important;
    grid-template-columns:minmax(0,55%) minmax(0,45%) !important;
    gap:8px !important;
    width:100% !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    min-height:42px !important;
    height:42px !important;
    border-radius:11px !important;
    font-size:.84rem !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body.customer-body .category-menu-button{
    font-size:.82rem !important;
  }
  body.customer-body #categoryMenuLabel{
    max-width:100% !important;
  }
  body.customer-body .category-menu-list{
    right:0 !important;
    left:auto !important;
    min-width:min(245px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
  }
}
@media(max-width:380px){
  body.customer-body .customer-search-row{
    grid-template-columns:minmax(0,53%) minmax(0,47%) !important;
    gap:6px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    font-size:.78rem !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  body.customer-body .category-menu-button{
    font-size:.76rem !important;
  }
}


/* =========================================================
   FINAL COMPACT HEADER + BETTER MOBILE SEARCH/CATEGORY
   User request: header too wide/tall, search/category too small.
   This final override keeps the header compact and gives the
   search/category row usable width and height on mobile + laptop.
   ========================================================= */
:root{
  --tw-compact-header-h:76px;
  --tw-compact-search-h:66px;
  --tw-compact-gap:8px;
}
body.customer-body{
  padding-top:calc(var(--tw-compact-header-h) + var(--tw-compact-search-h) + var(--tw-compact-gap) + 10px) !important;
}
body.customer-body .customer-topbar,
body.customer-body .navbar.customer-topbar,
body.customer-body .navbar.sticky-top.customer-topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:var(--tw-compact-header-h) !important;
  min-height:var(--tw-compact-header-h) !important;
  max-height:var(--tw-compact-header-h) !important;
  padding:0 !important;
  margin:0 !important;
  z-index:8000 !important;
  display:flex !important;
  align-items:center !important;
  overflow:visible !important;
  background:#23316f !important;
  border:0 !important;
  box-shadow:0 4px 14px rgba(15,23,42,.18) !important;
}
body.customer-body .customer-topbar .container{
  height:100% !important;
  min-height:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  padding-left:18px !important;
  padding-right:18px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
body.customer-body .customer-brand,
body.customer-body .customer-topbar .navbar-brand{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  margin:0 auto 0 0 !important;
  color:#fff !important;
  font-weight:900 !important;
  line-height:1.1 !important;
}
body.customer-body .customer-brand .thumb,
body.customer-body .customer-topbar .thumb{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  border-radius:12px !important;
  padding:3px !important;
  margin-right:8px !important;
  background:#fff !important;
}
body.customer-body .customer-brand-name{
  display:block !important;
  color:#fff !important;
  font-size:1rem !important;
  font-weight:900 !important;
  line-height:1.1 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  max-width:min(42vw, 420px) !important;
}
body.customer-body .customer-share-btn,
body.customer-body .customer-menu-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px !important;
  min-height:40px !important;
  border-radius:12px !important;
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
body.customer-body .customer-share-btn{
  min-width:88px !important;
  padding:.42rem .7rem !important;
  font-size:.88rem !important;
}
body.customer-body .customer-menu-btn{
  min-width:44px !important;
  width:44px !important;
  padding:0 !important;
  font-size:1.35rem !important;
  line-height:1 !important;
}
body.customer-body .customer-share-btn:hover,
body.customer-body .customer-share-btn:focus,
body.customer-body .customer-menu-btn:hover,
body.customer-body .customer-menu-btn:focus{
  background:rgba(255,255,255,.22) !important;
  color:#fff !important;
  border-color:#fff !important;
}

body.customer-body .customer-search-sticky{
  position:fixed !important;
  top:calc(var(--tw-compact-header-h) + var(--tw-compact-gap)) !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(calc(100vw - 32px),1320px) !important;
  max-width:min(calc(100vw - 32px),1320px) !important;
  min-height:var(--tw-compact-search-h) !important;
  margin:0 !important;
  padding:9px 12px !important;
  border-radius:16px !important;
  z-index:7900 !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(15,23,42,.12) !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
body.customer-body .customer-search-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(220px,320px) !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
}
body.customer-body .customer-search-box,
body.customer-body .customer-category-box{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
body.customer-body #search,
body.customer-body .category-menu-button{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:48px !important;
  min-height:48px !important;
  border-radius:13px !important;
  font-size:1rem !important;
  line-height:1.15 !important;
  box-sizing:border-box !important;
}
body.customer-body #search{
  padding-left:16px !important;
  padding-right:16px !important;
}
body.customer-body .category-menu-button{
  padding-left:14px !important;
  padding-right:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  text-align:left !important;
  font-weight:800 !important;
}
body.customer-body #categoryMenuLabel{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.customer-body .category-menu-list{
  right:0 !important;
  left:auto !important;
  min-width:min(280px, calc(100vw - 28px)) !important;
  max-width:calc(100vw - 28px) !important;
  z-index:9000 !important;
}

@media(max-width:576px){
  :root{
    --tw-compact-header-h:78px;
    --tw-compact-search-h:62px;
    --tw-compact-gap:8px;
  }
  body.customer-body{
    padding-top:calc(var(--tw-compact-header-h) + var(--tw-compact-search-h) + var(--tw-compact-gap) + 10px) !important;
  }
  body.customer-body .customer-topbar,
  body.customer-body .navbar.customer-topbar,
  body.customer-body .navbar.sticky-top.customer-topbar{
    height:var(--tw-compact-header-h) !important;
    min-height:var(--tw-compact-header-h) !important;
    max-height:var(--tw-compact-header-h) !important;
  }
  body.customer-body .customer-topbar .container{
    padding-left:12px !important;
    padding-right:12px !important;
    gap:8px !important;
  }
  body.customer-body .customer-brand .thumb,
  body.customer-body .customer-topbar .thumb{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    border-radius:12px !important;
    margin-right:7px !important;
  }
  body.customer-body .customer-brand-name{
    font-size:1rem !important;
    max-width:calc(100vw - 205px) !important;
  }
  body.customer-body .customer-share-btn{
    min-width:78px !important;
    height:39px !important;
    min-height:39px !important;
    padding:.38rem .55rem !important;
    font-size:.82rem !important;
    border-radius:12px !important;
  }
  body.customer-body .customer-menu-btn{
    width:42px !important;
    min-width:42px !important;
    height:39px !important;
    min-height:39px !important;
    font-size:1.35rem !important;
    border-radius:12px !important;
  }
  body.customer-body .customer-search-sticky{
    top:calc(var(--tw-compact-header-h) + var(--tw-compact-gap)) !important;
    left:10px !important;
    right:10px !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    min-height:var(--tw-compact-search-h) !important;
    padding:8px !important;
    border-radius:0 0 16px 16px !important;
  }
  body.customer-body .customer-search-row{
    display:grid !important;
    grid-template-columns:minmax(0, 58%) minmax(0, 42%) !important;
    gap:8px !important;
    align-items:center !important;
    width:100% !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:46px !important;
    min-height:46px !important;
    border-radius:12px !important;
    font-size:.95rem !important;
  }
  body.customer-body #search{
    padding-left:12px !important;
    padding-right:10px !important;
  }
  body.customer-body .category-menu-button{
    padding-left:10px !important;
    padding-right:9px !important;
    font-size:.88rem !important;
  }
  body.customer-body .category-menu-list{
    right:0 !important;
    left:auto !important;
    min-width:min(260px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
  }
}

@media(max-width:380px){
  body.customer-body .customer-brand-name{
    font-size:.92rem !important;
    max-width:calc(100vw - 188px) !important;
  }
  body.customer-body .customer-share-btn{
    min-width:68px !important;
    font-size:.76rem !important;
    padding:.34rem .46rem !important;
  }
  body.customer-body .customer-menu-btn{
    width:39px !important;
    min-width:39px !important;
  }
  body.customer-body .customer-search-row{
    grid-template-columns:minmax(0,56%) minmax(0,44%) !important;
    gap:7px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    font-size:.86rem !important;
  }
  body.customer-body .category-menu-button{
    font-size:.80rem !important;
  }
}


/* =========================================================
   GLOBAL BOOTSTRAP ALERT/WARNING STANDARDIZATION
   UI-only: standard Bootstrap alert boxes and Bootstrap-style alert/confirm modals.
   ========================================================= */
.alert{
  border-radius:14px !important;
  border-width:1px !important;
  box-shadow:0 8px 22px rgba(15,23,42,.05) !important;
}
.alert-success{border-left:4px solid #198754 !important;}
.alert-danger{border-left:4px solid #dc3545 !important;}
.alert-warning{border-left:4px solid #ffc107 !important;}
.alert-info{border-left:4px solid #0dcaf0 !important;}
.alert-secondary{border-left:4px solid #6c757d !important;}
.tw-bootstrap-alert-modal{
  border-radius:18px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 24px 70px rgba(15,23,42,.22) !important;
  overflow:hidden !important;
}
.tw-bootstrap-alert-modal .modal-header,
.tw-bootstrap-alert-modal .modal-footer{
  background:#fff !important;
}
.tw-bootstrap-alert-modal .modal-title{
  color:#111827 !important;
}
body.customer-body .tw-bootstrap-alert-modal .modal-dialog,
body.admin-body .tw-bootstrap-alert-modal .modal-dialog{
  max-width:480px !important;
}


/* =========================================================
   NOTICE MODAL + MOBILE SEARCH/CATEGORY FINAL REPAIR
   - New Things modal appears above sticky header/search and starts lower.
   - Mobile search and category share the full screen width proportionally.
   ========================================================= */
body.customer-body .tw-customer-backdrop,
body.customer-body .modal-backdrop,
body.customer-body .modal-backdrop.tw-customer-backdrop{
  z-index:10900 !important;
}
body.customer-body .modal.tw-manual-modal,
body.customer-body .modal.show,
body.customer-body #noticeModal{
  z-index:11000 !important;
}
body.customer-body #noticeModal .modal-dialog{
  margin-top:calc(var(--tw-compact-header-h, 78px) + var(--tw-compact-search-h, 62px) + var(--tw-compact-gap, 8px) + 18px) !important;
  margin-bottom:18px !important;
}
@media(min-width:577px){
  body.customer-body #noticeModal .modal-dialog{
    margin-top:calc(var(--tw-compact-header-h, 88px) + var(--tw-compact-search-h, 66px) + var(--tw-compact-gap, 10px) + 18px) !important;
  }
}

@media(max-width:576px){
  :root{
    --tw-compact-search-h:66px;
  }
  body.customer-body .customer-search-sticky{
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-width:none !important;
    padding:8px !important;
    min-height:var(--tw-compact-search-h) !important;
    box-sizing:border-box !important;
  }
  body.customer-body .customer-search-row{
    display:grid !important;
    grid-template-columns:minmax(0, 54%) minmax(0, 46%) !important;
    gap:8px !important;
    align-items:center !important;
    width:100% !important;
    margin:0 !important;
  }
  body.customer-body .customer-search-box,
  body.customer-body .customer-category-box{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:50px !important;
    min-height:50px !important;
    font-size:.96rem !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
  }
  body.customer-body #search{
    padding-left:12px !important;
    padding-right:8px !important;
  }
  body.customer-body .category-menu-button{
    padding-left:10px !important;
    padding-right:8px !important;
    font-size:.92rem !important;
    font-weight:800 !important;
    gap:5px !important;
  }
  body.customer-body #categoryMenuLabel{
    min-width:0 !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}
@media(max-width:380px){
  body.customer-body .customer-search-row{
    grid-template-columns:minmax(0, 52%) minmax(0, 48%) !important;
    gap:7px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:48px !important;
    min-height:48px !important;
    font-size:.88rem !important;
  }
  body.customer-body #search{
    padding-left:10px !important;
    padding-right:6px !important;
  }
  body.customer-body .category-menu-button{
    font-size:.84rem !important;
    padding-left:8px !important;
    padding-right:6px !important;
  }
}


/* =========================================================
   FINAL SEARCH + CATEGORY 50/50 FIX
   User request: both fields must be same size and readable.
   Applies to laptop and mobile. UI-only, no logic change.
   ========================================================= */
body.customer-body .customer-search-sticky{
  box-sizing:border-box !important;
  overflow:visible !important;
}
body.customer-body .customer-search-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}
body.customer-body .customer-search-box,
body.customer-body .customer-category-box{
  flex:0 0 calc(50% - 6px) !important;
  width:calc(50% - 6px) !important;
  max-width:calc(50% - 6px) !important;
  min-width:0 !important;
  display:block !important;
  box-sizing:border-box !important;
}
body.customer-body #search,
body.customer-body .category-menu-button{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:56px !important;
  min-height:56px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  border-radius:15px !important;
  font-size:1.08rem !important;
  line-height:1.1 !important;
  box-sizing:border-box !important;
}
body.customer-body #search{
  padding-left:18px !important;
  padding-right:18px !important;
}
body.customer-body .category-menu-button{
  padding-left:18px !important;
  padding-right:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  text-align:left !important;
  font-weight:800 !important;
  gap:10px !important;
}
body.customer-body #categoryMenuLabel{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.customer-body .category-menu-list{
  max-width:calc(100vw - 24px) !important;
  min-width:min(320px, calc(100vw - 24px)) !important;
  z-index:12000 !important;
}
@media(max-width:576px){
  :root{
    --tw-compact-search-h:76px;
  }
  body.customer-body{
    padding-top:calc(var(--tw-compact-header-h, 78px) + var(--tw-compact-search-h, 76px) + var(--tw-compact-gap, 8px) + 10px) !important;
  }
  body.customer-body .customer-search-sticky{
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;
    min-height:var(--tw-compact-search-h, 76px) !important;
    padding:10px !important;
    border-radius:0 0 16px 16px !important;
  }
  body.customer-body .customer-search-row{
    display:flex !important;
    flex-direction:row !important;
    gap:10px !important;
    width:100% !important;
  }
  body.customer-body .customer-search-box,
  body.customer-body .customer-category-box{
    flex:0 0 calc(50% - 5px) !important;
    width:calc(50% - 5px) !important;
    max-width:calc(50% - 5px) !important;
    min-width:0 !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:56px !important;
    min-height:56px !important;
    border-radius:15px !important;
    font-size:1.03rem !important;
  }
  body.customer-body #search{
    padding-left:14px !important;
    padding-right:10px !important;
  }
  body.customer-body .category-menu-button{
    padding-left:14px !important;
    padding-right:10px !important;
    font-size:1.02rem !important;
  }
}
@media(max-width:380px){
  body.customer-body .customer-search-sticky{
    left:10px !important;
    right:10px !important;
    padding:9px !important;
  }
  body.customer-body .customer-search-row{
    gap:8px !important;
  }
  body.customer-body .customer-search-box,
  body.customer-body .customer-category-box{
    flex:0 0 calc(50% - 4px) !important;
    width:calc(50% - 4px) !important;
    max-width:calc(50% - 4px) !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:54px !important;
    min-height:54px !important;
    font-size:.94rem !important;
  }
  body.customer-body #search{
    padding-left:11px !important;
    padding-right:7px !important;
  }
  body.customer-body .category-menu-button{
    padding-left:11px !important;
    padding-right:7px !important;
    font-size:.94rem !important;
  }
}


/* =========================================================
   FINAL REVERT SEARCH/CATEGORY TO SIMPLE ORIGINAL STYLE
   - Laptop/Desktop: one line, search wider + category normal width.
   - Mobile: two lines, search full width then category full width.
   - Controls are normal height, not oversized.
   ========================================================= */
body.customer-body{
  --tw-compact-search-h:62px;
  --tw-customer-search-height:62px;
}
body.customer-body .customer-search-sticky{
  padding:9px 12px !important;
  min-height:auto !important;
  height:auto !important;
  border-radius:14px !important;
  overflow:visible !important;
}
body.customer-body .customer-search-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  margin:0 !important;
}
body.customer-body .customer-search-box{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
}
body.customer-body .customer-category-box{
  flex:0 0 270px !important;
  width:270px !important;
  max-width:36% !important;
  min-width:210px !important;
}
body.customer-body #search,
body.customer-body .category-menu-button{
  width:100% !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:.42rem .75rem !important;
  font-size:.98rem !important;
  line-height:1.15 !important;
  border-radius:11px !important;
}
body.customer-body .category-menu-button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  text-align:left !important;
}
body.customer-body #categoryMenuLabel{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.customer-body .category-menu-list{
  width:100% !important;
  min-width:210px !important;
  max-width:min(360px, calc(100vw - 28px)) !important;
}
@media(max-width:576px){
  body.customer-body{
    --tw-compact-search-h:96px;
    --tw-customer-search-height:96px;
    --customer-search-height:96px;
    padding-top:calc(var(--tw-compact-header-h, 76px) + var(--tw-compact-search-h, 96px) + var(--tw-compact-gap, 8px) + 8px) !important;
  }
  body.customer-body .customer-search-sticky{
    padding:7px 10px !important;
    border-radius:14px !important;
    min-height:96px !important;
    height:auto !important;
  }
  body.customer-body .customer-search-row{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:6px !important;
    width:100% !important;
    margin:0 !important;
  }
  body.customer-body .customer-search-box,
  body.customer-body .customer-category-box{
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    width:100% !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:.34rem .7rem !important;
    font-size:.94rem !important;
    border-radius:11px !important;
  }
  body.customer-body #categoryMenuLabel{
    max-width:calc(100vw - 92px) !important;
  }
  body.customer-body .category-menu-list{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
  }
}
@media(max-width:380px){
  body.customer-body{
    --tw-compact-search-h:92px;
    --tw-customer-search-height:92px;
    --customer-search-height:92px;
  }
  body.customer-body .customer-search-sticky{
    min-height:92px !important;
    padding:6px 9px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    font-size:.9rem !important;
  }
}


/* =========================================================
   FINAL SEARCH/CATEGORY SAME LENGTH FIX
   - Desktop/laptop: one line, both fields same length.
   - Mobile: two lines, both fields full width and same length.
   - Normal height, not oversized.
   ========================================================= */
body.customer-body{
  --tw-compact-search-h:60px !important;
  --tw-customer-search-height:60px !important;
  --customer-search-height:60px !important;
}
body.customer-body .customer-search-sticky{
  padding:8px 12px !important;
  min-height:auto !important;
  height:auto !important;
  border-radius:14px !important;
  overflow:visible !important;
}
body.customer-body .customer-search-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  margin:0 !important;
}
body.customer-body .customer-search-box,
body.customer-body .customer-category-box{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:none !important;
}
body.customer-body #search,
body.customer-body .category-menu-button{
  width:100% !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:.42rem .75rem !important;
  font-size:.96rem !important;
  line-height:1.15 !important;
  border-radius:11px !important;
}
body.customer-body .category-menu-button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  text-align:left !important;
}
body.customer-body #categoryMenuLabel{
  min-width:0 !important;
  max-width:calc(100% - 28px) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
@media(max-width:576px){
  body.customer-body{
    --tw-compact-search-h:92px !important;
    --tw-customer-search-height:92px !important;
    --customer-search-height:92px !important;
    padding-top:calc(var(--tw-compact-header-h, 76px) + var(--tw-compact-search-h, 92px) + var(--tw-compact-gap, 8px) + 8px) !important;
  }
  body.customer-body .customer-search-sticky{
    padding:7px 10px !important;
    min-height:92px !important;
    height:auto !important;
  }
  body.customer-body .customer-search-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
  body.customer-body .customer-search-box,
  body.customer-body .customer-category-box{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    font-size:.93rem !important;
    padding:.34rem .7rem !important;
  }
}
@media(max-width:380px){
  body.customer-body{
    --tw-compact-search-h:88px !important;
    --tw-customer-search-height:88px !important;
    --customer-search-height:88px !important;
  }
  body.customer-body .customer-search-sticky{
    min-height:88px !important;
    padding:6px 9px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    font-size:.9rem !important;
  }
}


/* =========================================================
   FINAL MOBILE ONE-LINE SEARCH + CATEGORY NO-TRUNCATE FIX
   User request: mobile can be one line, but category must NOT show "All...".
   - Mobile: [ Search product ] [ All Categories ] in one row.
   - Category gets enough fixed width to show All Categories.
   - Search uses remaining space.
   - Normal compact height, not too tall.
   ========================================================= */
body.customer-body .customer-search-sticky{
  padding:8px 10px !important;
}
body.customer-body .customer-search-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
}
body.customer-body .customer-search-box{
  flex:1 1 0 !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
}
body.customer-body .customer-category-box{
  flex:0 0 150px !important;
  width:150px !important;
  max-width:150px !important;
  min-width:150px !important;
}
body.customer-body #search,
body.customer-body .category-menu-button{
  height:40px !important;
  min-height:40px !important;
  padding:.42rem .55rem !important;
  font-size:.9rem !important;
  line-height:1.1 !important;
  border-radius:10px !important;
}
body.customer-body .category-menu-button{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:4px !important;
  white-space:nowrap !important;
}
body.customer-body #categoryMenuLabel{
  display:inline-block !important;
  min-width:0 !important;
  max-width:none !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-size:.88rem !important;
  line-height:1.1 !important;
}
body.customer-body .category-menu-list{
  max-width:calc(100vw - 20px) !important;
  width:auto !important;
  min-width:220px !important;
}
@media(max-width:576px){
  body.customer-body .customer-search-sticky{
    padding:7px 8px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  body.customer-body .customer-search-row{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
  }
  body.customer-body .customer-search-box{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  body.customer-body .customer-category-box{
    flex:0 0 142px !important;
    width:142px !important;
    min-width:142px !important;
    max-width:142px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:38px !important;
    min-height:38px !important;
    padding:.38rem .48rem !important;
    font-size:.84rem !important;
    border-radius:10px !important;
  }
  body.customer-body #search::placeholder{
    font-size:.82rem !important;
  }
  body.customer-body #categoryMenuLabel{
    font-size:.82rem !important;
  }
}
@media(max-width:380px){
  body.customer-body .customer-search-row{
    gap:6px !important;
  }
  body.customer-body .customer-category-box{
    flex:0 0 132px !important;
    width:132px !important;
    min-width:132px !important;
    max-width:132px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:36px !important;
    min-height:36px !important;
    padding:.34rem .42rem !important;
    font-size:.78rem !important;
  }
  body.customer-body #categoryMenuLabel{
    font-size:.76rem !important;
  }
}


/* =========================================================
   FINAL SEARCH/CATEGORY COMPACT PADDING FIX
   User marked: remove extra white space below the controls and
   add safe right padding for the category arrow.
   ========================================================= */
body.customer-body .customer-search-sticky{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:7px 10px !important;
  margin-bottom:8px !important;
  border-radius:16px !important;
  display:block !important;
  overflow:visible !important;
}
body.customer-body .customer-search-row{
  height:auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
body.customer-body .customer-search-box{
  flex:1 1 auto !important;
  min-width:0 !important;
}
body.customer-body .customer-category-box{
  flex:0 0 152px !important;
  width:152px !important;
  min-width:152px !important;
  max-width:152px !important;
}
body.customer-body #search,
body.customer-body .category-menu-button{
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  border-radius:12px !important;
  font-size:.9rem !important;
  line-height:1.1 !important;
}
body.customer-body #search{
  padding:.38rem .7rem !important;
}
body.customer-body .category-menu-button{
  padding:.38rem .82rem .38rem .64rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:6px !important;
  overflow:visible !important;
}
body.customer-body .category-menu-button::after{
  flex:0 0 auto !important;
  margin-left:6px !important;
  margin-right:2px !important;
}
body.customer-body #categoryMenuLabel{
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-size:.86rem !important;
}
@media(max-width:576px){
  body.customer-body .customer-search-sticky{
    padding:7px 9px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    margin-bottom:8px !important;
    border-radius:16px !important;
  }
  body.customer-body .customer-search-row{
    gap:8px !important;
  }
  body.customer-body .customer-category-box{
    flex:0 0 150px !important;
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:39px !important;
    min-height:39px !important;
    max-height:39px !important;
  }
  body.customer-body #search{
    padding:.36rem .68rem !important;
    font-size:.86rem !important;
  }
  body.customer-body .category-menu-button{
    padding:.36rem .86rem .36rem .58rem !important;
    font-size:.84rem !important;
  }
  body.customer-body #categoryMenuLabel{
    font-size:.82rem !important;
  }
}
@media(max-width:380px){
  body.customer-body .customer-search-sticky{
    padding:6px 8px !important;
  }
  body.customer-body .customer-search-row{
    gap:6px !important;
  }
  body.customer-body .customer-category-box{
    flex:0 0 142px !important;
    width:142px !important;
    min-width:142px !important;
    max-width:142px !important;
  }
  body.customer-body #search,
  body.customer-body .category-menu-button{
    height:37px !important;
    min-height:37px !important;
    max-height:37px !important;
  }
  body.customer-body #search{
    font-size:.80rem !important;
    padding:.32rem .56rem !important;
  }
  body.customer-body .category-menu-button{
    padding:.32rem .78rem .32rem .48rem !important;
  }
  body.customer-body #categoryMenuLabel{
    font-size:.76rem !important;
  }
}


/* =========================================================
   HEADER INSTALL BUTTON FINAL
   - Show Install button in header beside Share App for browser users.
   - Hide automatically inside installed PWA/standalone mode.
   ========================================================= */
body.customer-body .customer-install-header-btn{
  display:none;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  font-weight:800 !important;
  border-radius:999px !important;
  min-height:32px !important;
  padding:.32rem .62rem !important;
  color:#111827 !important;
}
@media(max-width:576px){
  body.customer-body .customer-install-header-btn{
    min-height:30px !important;
    padding:.28rem .46rem !important;
    font-size:.74rem !important;
  }
  body.customer-body .customer-share-btn{
    font-size:.74rem !important;
    padding:.28rem .46rem !important;
  }
}
@media(display-mode: standalone){
  body.customer-body .customer-install-header-btn,
  body.customer-body #installPwaBtnTop,
  body.customer-body #installPwaBtn{
    display:none !important;
  }
}


/* Available Qty display in customer product card */
body.customer-body #productGrid > .product-card .product-available-qty{
  margin-top:3px !important;
  font-size:.78rem !important;
  line-height:1.15 !important;
  color:#198754 !important;
}
@media(max-width:576px){
  body.customer-body #productGrid > .product-card .product-available-qty{font-size:.72rem !important;}
}


/* =========================================================
   ORDERING FLEXIBLE CHECKOUT + PRODUCT DETAIL UPDATE
   ========================================================= */
.product-name-title,
.product-detail-name,
.product-detail-name-text,
.cart-product-name,
.admin-body td.product-name,
.customer-body .product-name-title{
  color:#374151 !important;
}
.customer-product-card{
  cursor:pointer;
}
.customer-product-card .product-qty-control,
.customer-product-card button{
  cursor:auto;
}
.product-detail-big-img{
  width:100%;
  max-height:420px;
  object-fit:contain;
  object-position:center;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
  padding:10px;
}
.product-detail-no-photo{
  min-height:240px;
  border:1px dashed #d1d5db;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
  background:#f9fafb;
}
.product-detail-desc{
  white-space:pre-wrap;
  font-size:.98rem;
  line-height:1.45;
}
@media(max-width:576px){
  .product-detail-big-img{max-height:320px;}
  .product-detail-no-photo{min-height:180px;}
}


/* Floating customer WhatsApp chat */
.floating-chat-btn{
  position:fixed !important;
  left:14px !important;
  bottom:104px !important;
  z-index:1060 !important;
  border:0 !important;
  border-radius:999px !important;
  background:#198754 !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:10px 13px !important;
  font-weight:800 !important;
  line-height:1 !important;
}
.floating-chat-btn .floating-chat-icon{font-size:1.1rem !important;}
.floating-chat-btn .floating-chat-label{font-size:.86rem !important;}
@media(max-width:576px){
  .floating-chat-btn{
    left:12px !important;
    bottom:128px !important;
    padding:9px 11px !important;
  }
  .floating-chat-btn .floating-chat-label{display:none !important;}
  .floating-chat-btn .floating-chat-icon{font-size:1.25rem !important;}
}


/* =========================================================
   Reset App Data menu item before uninstall
   ========================================================= */
.customer-menu-dropdown .reset-app-menu-item{
  white-space:normal !important;
  line-height:1.18 !important;
  max-width:230px !important;
  font-weight:700 !important;
  color:#b45309 !important;
}
body.customer-body #resetAppDataModal .modal-body ul{
  padding-left:1.2rem !important;
}
body.customer-body #resetAppDataModal .modal-body li{
  margin-bottom:.2rem !important;
}


/* =========================================================
   PRODUCT DETAIL DESCRIPTION LAYOUT FIX
   - Top title only in the modal header.
   - Description uses the area below product photo.
   - Description auto-fits and scrolls when long.
   - Product names use deep gray, not black.
   ========================================================= */
body.customer-body #productGrid > .product-card .product-name-title,
body.customer-body .product-name-title,
.product-detail-name,
.cart-product-name,
.admin-body td.product-name,
.admin-body .product-name{
  color:#374151 !important;
}
#productDetailNameBody,
.product-detail-name-text{
  display:none !important;
}
#productDetailModal .modal-dialog{
  max-width:920px !important;
}
#productDetailModal .modal-content{
  max-height:92vh !important;
  overflow:hidden !important;
}
#productDetailModal .modal-header{
  flex:0 0 auto !important;
}
#productDetailModal .modal-body{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  max-height:calc(92vh - 70px) !important;
  overflow:hidden !important;
  padding:14px !important;
}
#productDetailModal .product-detail-big-img{
  width:100% !important;
  max-height:min(52vh, 520px) !important;
  object-fit:contain !important;
  object-position:center !important;
  flex:0 0 auto !important;
}
#productDetailModal .product-detail-no-photo{
  flex:0 0 auto !important;
}
#productDetailModal .product-detail-desc{
  width:100% !important;
  flex:1 1 auto !important;
  min-height:90px !important;
  max-height:28vh !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  white-space:pre-wrap !important;
  font-size:1rem !important;
  line-height:1.5 !important;
  color:#374151 !important;
  background:#f8fafc !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  margin-top:0 !important;
}
@media(max-width:576px){
  #productDetailModal .modal-dialog{
    margin:10px !important;
  }
  #productDetailModal .modal-body{
    max-height:calc(92vh - 64px) !important;
    padding:12px !important;
  }
  #productDetailModal .product-detail-big-img{
    max-height:42vh !important;
  }
  #productDetailModal .product-detail-desc{
    min-height:100px !important;
    max-height:32vh !important;
    font-size:.95rem !important;
    padding:10px 12px !important;
  }
}

/* =========================================================
   Settings page grouped segments and modern toggles
   ========================================================= */
.settings-section{
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.06) !important;
}
.settings-section-head{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  padding:2px 2px 14px 2px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  margin-bottom:16px !important;
}
.settings-section-icon{
  width:42px !important;
  height:42px !important;
  border-radius:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#f0f7ff,#ffffff) !important;
  border:1px solid rgba(13,110,253,.14) !important;
  box-shadow:0 8px 18px rgba(13,110,253,.08) !important;
  font-size:1.25rem !important;
  flex:0 0 auto !important;
}
.settings-section-head h5{
  margin:0 !important;
  font-weight:900 !important;
  color:#1f2937 !important;
}
.settings-section-head p{
  margin:2px 0 0 0 !important;
  color:#6b7280 !important;
  font-size:.92rem !important;
}
.settings-subtitle{
  font-weight:900 !important;
  color:#374151 !important;
  background:#f8fafc !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:12px !important;
  padding:9px 12px !important;
}
.settings-toggle-card{
  height:100% !important;
  padding:12px 14px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f9fbff 100%) !important;
}
.settings-toggle-card .form-check-input{
  width:3.05em !important;
  height:1.55em !important;
  cursor:pointer !important;
}
.settings-toggle-card .form-check-input:checked{
  background-color:#0d6efd !important;
  border-color:#0d6efd !important;
}
.settings-toggle-card .form-check-label{
  padding-left:6px !important;
  color:#1f2937 !important;
}
@media(max-width:576px){
  .settings-section-head{gap:10px !important;padding-bottom:12px !important;}
  .settings-section-icon{width:38px !important;height:38px !important;border-radius:12px !important;}
  .settings-section-head h5{font-size:1rem !important;}
  .settings-section-head p{font-size:.84rem !important;}
  .settings-toggle-card{padding:10px 12px !important;}
}

/* =========================================================
   Floating customer WhatsApp chat - lighter modern style
   ========================================================= */
.floating-chat-btn{
  background:linear-gradient(180deg,#ecfdf5 0%,#ffffff 100%) !important;
  color:#047857 !important;
  border:1px solid rgba(16,185,129,.28) !important;
  box-shadow:0 10px 24px rgba(4,120,87,.16) !important;
  padding:10px 13px !important;
}
.floating-chat-btn .floating-chat-icon{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#d1fae5 !important;
  color:#047857 !important;
}
.floating-chat-btn .floating-chat-icon svg{
  width:21px !important;
  height:21px !important;
  display:block !important;
}
.floating-chat-btn .floating-chat-label{
  color:#065f46 !important;
  font-weight:900 !important;
}
@media(max-width:576px){
  .floating-chat-btn{
    padding:8px !important;
    border-radius:999px !important;
  }
  .floating-chat-btn .floating-chat-icon{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }
}

/* =========================================================
   CUSTOMER MOBILE PWA UI PHASE 1 - TOP ACTIONS + SCROLL MENU
   - Install app prompt is a floating middle banner.
   - Share and Profile stay side-by-side on the top right.
   - Customer menu items are below the header in a horizontal scroll bar.
   - No business/order logic changed.
   ========================================================= */
:root{
  --tw-ui-phase1-header-h:72px;
  --tw-ui-phase1-menu-h:52px;
  --tw-ui-phase1-search-h:66px;
  --tw-ui-phase1-gap:8px;
}
body.customer-body{
  padding-top:calc(var(--tw-ui-phase1-header-h) + var(--tw-ui-phase1-menu-h) + var(--tw-ui-phase1-search-h) + (var(--tw-ui-phase1-gap) * 2) + 12px) !important;
}
body.customer-body .customer-topbar,
body.customer-body .navbar.customer-topbar,
body.customer-body .navbar.sticky-top.customer-topbar{
  height:var(--tw-ui-phase1-header-h) !important;
  min-height:var(--tw-ui-phase1-header-h) !important;
  max-height:var(--tw-ui-phase1-header-h) !important;
  z-index:8200 !important;
  background:#23316f !important;
}
body.customer-body .customer-topbar .container{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
body.customer-body .customer-top-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex:0 0 auto !important;
}
body.customer-body .customer-profile-top-btn,
body.customer-body .customer-share-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px !important;
  min-height:40px !important;
  border-radius:12px !important;
  color:#fff !important;
  background:rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  font-weight:850 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
body.customer-body .customer-profile-top-btn:hover,
body.customer-body .customer-profile-top-btn:focus,
body.customer-body .customer-share-btn:hover,
body.customer-body .customer-share-btn:focus{
  background:rgba(255,255,255,.24) !important;
  color:#fff !important;
  border-color:#fff !important;
}
body.customer-body .customer-menu-wrap,
body.customer-body .customer-menu-btn,
body.customer-body .customer-menu-dropdown{
  display:none !important;
}
body.customer-body .customer-action-scroll-wrap{
  position:fixed !important;
  top:var(--tw-ui-phase1-header-h) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:var(--tw-ui-phase1-menu-h) !important;
  min-height:var(--tw-ui-phase1-menu-h) !important;
  z-index:8100 !important;
  display:flex !important;
  align-items:center !important;
  background:#ffffff !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 5px 14px rgba(15,23,42,.08) !important;
  overflow:hidden !important;
}
body.customer-body .customer-action-scroll-wrap .container{
  max-width:1320px !important;
}
body.customer-body .customer-action-scroll{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  padding:7px 2px !important;
}
body.customer-body .customer-action-scroll::-webkit-scrollbar{display:none !important;}
body.customer-body .customer-action-chip{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:36px !important;
  border:1px solid rgba(13,110,253,.22) !important;
  background:#f8fbff !important;
  color:#1f3b82 !important;
  border-radius:999px !important;
  padding:.42rem .82rem !important;
  font-size:.88rem !important;
  font-weight:850 !important;
  text-decoration:none !important;
  box-shadow:0 2px 8px rgba(15,23,42,.06) !important;
}
body.customer-body button.customer-action-chip{
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer !important;
}
body.customer-body .customer-action-chip:hover,
body.customer-body .customer-action-chip:focus{
  background:#eaf2ff !important;
  color:#0d47a1 !important;
  border-color:rgba(13,110,253,.38) !important;
}
body.customer-body .customer-search-sticky{
  top:calc(var(--tw-ui-phase1-header-h) + var(--tw-ui-phase1-menu-h) + var(--tw-ui-phase1-gap)) !important;
  z-index:8000 !important;
}
body.customer-body .pwa-floating-install{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%, -50%) !important;
  z-index:7600 !important;
  max-width:min(360px, calc(100vw - 30px)) !important;
  width:auto !important;
  display:none;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:auto !important;
}
body.customer-body .pwa-floating-install-btn{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:11px !important;
  border:0 !important;
  border-radius:22px !important;
  padding:13px 18px !important;
  background:linear-gradient(135deg,#ffcf33,#ffec99) !important;
  color:#111827 !important;
  box-shadow:0 18px 45px rgba(15,23,42,.24) !important;
  font-weight:900 !important;
  text-align:left !important;
  cursor:pointer !important;
}
body.customer-body .pwa-floating-install-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.72) !important;
  font-size:1.4rem !important;
}
body.customer-body .pwa-floating-install-btn b{
  display:block !important;
  font-size:1rem !important;
  line-height:1.15 !important;
}
body.customer-body .pwa-floating-install-btn small{
  display:block !important;
  margin-top:2px !important;
  font-size:.78rem !important;
  line-height:1.1 !important;
  color:#374151 !important;
  font-weight:750 !important;
}
@media(max-width:576px){
  :root{
    --tw-ui-phase1-header-h:68px;
    --tw-ui-phase1-menu-h:50px;
    --tw-ui-phase1-search-h:62px;
    --tw-ui-phase1-gap:8px;
  }
  body.customer-body{
    padding-top:calc(var(--tw-ui-phase1-header-h) + var(--tw-ui-phase1-menu-h) + var(--tw-ui-phase1-search-h) + (var(--tw-ui-phase1-gap) * 2) + 10px) !important;
  }
  body.customer-body .customer-topbar .container{
    padding-left:10px !important;
    padding-right:10px !important;
    gap:6px !important;
  }
  body.customer-body .customer-brand .thumb,
  body.customer-body .customer-topbar .thumb{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    max-height:38px !important;
    margin-right:6px !important;
  }
  body.customer-body .customer-brand-name{
    max-width:calc(100vw - 190px) !important;
    font-size:.95rem !important;
  }
  body.customer-body .customer-top-actions{
    gap:5px !important;
  }
  body.customer-body .customer-profile-top-btn,
  body.customer-body .customer-share-btn{
    height:36px !important;
    min-height:36px !important;
    border-radius:11px !important;
    padding:.32rem .46rem !important;
    font-size:.78rem !important;
  }
  body.customer-body .customer-action-scroll-wrap .container{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body.customer-body .customer-action-scroll{
    gap:7px !important;
    padding:7px 0 !important;
  }
  body.customer-body .customer-action-chip{
    min-height:34px !important;
    padding:.38rem .7rem !important;
    font-size:.80rem !important;
  }
  body.customer-body .customer-search-sticky{
    top:calc(var(--tw-ui-phase1-header-h) + var(--tw-ui-phase1-menu-h) + var(--tw-ui-phase1-gap)) !important;
  }
  body.customer-body .pwa-floating-install{
    max-width:calc(100vw - 28px) !important;
  }
  body.customer-body .pwa-floating-install-btn{
    padding:12px 14px !important;
    border-radius:20px !important;
  }
  body.customer-body .pwa-floating-install-btn b{
    font-size:.92rem !important;
  }
  body.customer-body .pwa-floating-install-btn small{
    font-size:.72rem !important;
  }
}
@media(max-width:380px){
  body.customer-body .customer-brand-name{
    max-width:calc(100vw - 174px) !important;
    font-size:.88rem !important;
  }
  body.customer-body .customer-profile-top-btn,
  body.customer-body .customer-share-btn{
    padding:.30rem .38rem !important;
    font-size:.72rem !important;
  }
}
@media(display-mode: standalone){
  body.customer-body .pwa-floating-install,
  body.customer-body #installPwaBtnFloat,
  body.customer-body #pwaFloatingInstall{
    display:none !important;
  }
}

/* =========================================================
   CUSTOMER PWA QR INSTALL + WHITE PROFILE ICON PATCH 2026-05-27
   ========================================================= */
body.customer-body .customer-profile-top-btn{
  color:#ffffff !important;
}
body.customer-body .customer-profile-svg-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#ffffff !important;
  margin-right:4px !important;
  line-height:1 !important;
}
body.customer-body .customer-profile-svg-icon svg{
  stroke:#ffffff !important;
  color:#ffffff !important;
  display:block !important;
}
body.pwa-install-landing-body{
  min-height:100vh !important;
  padding:0 !important;
  background:linear-gradient(135deg,#eef5ff,#ffffff 52%,#fff7d6) !important;
}
.pwa-install-landing-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.pwa-install-landing-card{
  width:min(100%,460px);
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:26px;
  padding:24px;
  text-align:center;
  box-shadow:0 22px 60px rgba(15,23,42,.15);
}
.pwa-install-logo-wrap{
  width:104px;
  height:104px;
  margin:0 auto 14px;
  border-radius:28px;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);
}
.pwa-install-logo{
  width:88px;
  height:88px;
  object-fit:contain;
  border-radius:22px;
}
.pwa-install-landing-card h1{
  font-size:1.45rem;
  font-weight:900;
  color:#111827;
  margin-bottom:8px;
}
#installPwaFromLandingBtn.install-ready{
  animation:twInstallPulse 1.45s ease-in-out infinite;
}
@keyframes twInstallPulse{
  0%,100%{transform:scale(1);box-shadow:0 8px 18px rgba(245,158,11,.18)}
  50%{transform:scale(1.025);box-shadow:0 14px 30px rgba(245,158,11,.30)}
}
@media print{
  .admin-topbar,.admin-menu-col,.btn{display:none !important;}
  .admin-content{width:100% !important;max-width:100% !important;flex:0 0 100% !important;}
  .app-card{box-shadow:none !important;border:1px solid #ddd !important;}
}

/* SaaS Platform / Merchant menu separation */
.admin-menu-group{border:1px solid #e5e7eb;border-radius:14px;background:#fff;margin-bottom:10px;overflow:hidden;transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;}
.admin-menu-group:hover{box-shadow:0 8px 24px rgba(15,23,42,.08);transform:translateY(-1px);border-color:#bfdbfe;}
.admin-menu-group-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;font-size:1.02rem;font-weight:800;color:#0f172a;background:linear-gradient(135deg,#f8fafc,#eef6ff);cursor:pointer;}
.admin-menu-group .chev{font-size:.9rem;color:#64748b;transition:transform .18s ease;}
.admin-menu-group:hover .chev{transform:rotate(180deg);}
.admin-menu-submenu{padding:6px;}
.admin-sidebar .admin-menu-link{display:flex!important;align-items:center;gap:8px;padding:9px 10px;border-radius:11px;color:#1f2937;text-decoration:none;transition:background .15s ease,color .15s ease,transform .15s ease;}
.admin-sidebar .admin-menu-link:hover,.admin-sidebar .admin-menu-link.active{background:#e9f2ff;color:#0d6efd;transform:translateX(2px);}
.admin-menu-link .menu-icon{width:22px;text-align:center;flex:0 0 22px;}
.admin-menu-back{display:block;margin-bottom:10px;padding:10px 12px;border-radius:12px;background:#111827;color:#fff!important;text-decoration:none!important;font-weight:700;}
.admin-menu-back:hover{background:#0d6efd;color:#fff!important;}
.platform-card{background:linear-gradient(135deg,#ffffff,#f8fbff);}
@media (min-width: 992px){.admin-menu-group.open-on-hover .admin-menu-submenu{max-height:520px;opacity:1;transition:max-height .2s ease, opacity .2s ease;}.admin-menu-group.open-on-hover:hover .admin-menu-submenu{max-height:720px;opacity:1;}}
@media (max-width:768px){.admin-menu-group{min-width:230px;margin-bottom:0}.admin-menu-submenu{display:flex;gap:6px;overflow-x:auto}.admin-sidebar .admin-menu-link{white-space:nowrap}.admin-menu-group-title{white-space:nowrap}.admin-menu-back{white-space:nowrap;margin-bottom:0}}


/* =========================================================
   easy-online Phase 5 UI Polish
   Customer mobile shop + dashboard visual clarity
   CSS only: no business logic changes
   ========================================================= */

:root{
  --eo-primary:#2563eb;
  --eo-primary-dark:#1e40af;
  --eo-soft:#eff6ff;
  --eo-soft-2:#f8fbff;
  --eo-success:#16a34a;
  --eo-warning:#f59e0b;
  --eo-danger:#dc2626;
  --eo-ink:#0f172a;
  --eo-muted:#64748b;
  --eo-border:#dbe7f3;
  --eo-shadow:0 14px 32px rgba(15,23,42,.08);
  --eo-shadow-soft:0 8px 20px rgba(15,23,42,.06);
}

/* General app softness */
.app-card{
  border-color:var(--eo-border);
  box-shadow:var(--eo-shadow-soft);
}
.btn{
  font-weight:600;
}
.btn-primary{
  background:linear-gradient(135deg,var(--eo-primary),#3b82f6);
  border-color:var(--eo-primary);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--eo-primary-dark),var(--eo-primary));
  border-color:var(--eo-primary-dark);
}

/* Customer top bar */
.customer-topbar{
  border-bottom:1px solid rgba(219,231,243,.9);
  backdrop-filter:saturate(160%) blur(10px);
}
.customer-topbar .navbar-brand,
.customer-topbar .fw-bold{
  color:var(--eo-ink);
}
.customer-topbar .btn{
  border-radius:999px;
  padding:.45rem .8rem;
}

/* Customer shop search/category area */
.customer-body .sticky-top + .container,
.customer-body .category-bar,
.customer-body .customer-filter-bar{
  position:relative;
}
.customer-body input[type="search"],
.customer-body #searchInput,
.customer-body .product-search-bar{
  border-radius:999px!important;
  border:1px solid var(--eo-border)!important;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  padding:.82rem 1rem!important;
}
.category-chip,
.cat-chip,
.customer-category-chip,
.customer-body .btn-category{
  border-radius:999px!important;
  border:1px solid #cfe0f5!important;
  background:#fff!important;
  color:#1e3a8a!important;
  box-shadow:0 6px 16px rgba(37,99,235,.06);
  font-weight:700;
  white-space:nowrap;
}
.category-chip.active,
.cat-chip.active,
.customer-category-chip.active,
.customer-body .btn-category.active{
  background:linear-gradient(135deg,var(--eo-primary),#60a5fa)!important;
  color:#fff!important;
  border-color:var(--eo-primary)!important;
}

/* Customer product card */
.customer-product-card{
  border-radius:22px!important;
  border:1px solid #e2e8f0!important;
  box-shadow:0 10px 26px rgba(15,23,42,.07)!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow:hidden;
}
.customer-product-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(15,23,42,.11)!important;
  border-color:#bfdbfe!important;
}
.product-photo-frame{
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border-radius:18px;
  overflow:hidden;
}
.product-img{
  border-radius:18px!important;
  border:1px solid #e2e8f0!important;
  background:#fff!important;
  height:178px;
}
.product-img.no-photo{
  background:linear-gradient(135deg,#f8fafc,#eef2ff)!important;
  color:#94a3b8!important;
  font-weight:700;
}
.customer-product-card .product-name,
.customer-product-card .fw-semibold,
.customer-product-card h6{
  color:var(--eo-ink);
  line-height:1.25;
}
.customer-product-card .price,
.customer-product-card .product-price,
.customer-product-card .text-primary{
  color:var(--eo-primary)!important;
}
.promo-badge{
  border-radius:999px!important;
  background:linear-gradient(135deg,#ef4444,#f97316)!important;
  box-shadow:0 8px 18px rgba(239,68,68,.20);
}
.selected-badge{
  border-radius:999px;
  box-shadow:0 8px 18px rgba(220,38,38,.20);
}

/* Quantity controls */
.qty-btn,
.customer-product-card .btn-sm{
  border-radius:12px!important;
}
.customer-product-card .qty-btn{
  background:#f8fafc;
  border:1px solid #cbd5e1;
  color:#0f172a;
}
.customer-product-card .qty-btn:hover{
  background:#eff6ff;
  border-color:#93c5fd;
}

/* Sticky cart / bottom action */
.sticky-cart{
  border-top:1px solid var(--eo-border);
  box-shadow:0 -10px 30px rgba(15,23,42,.12);
  border-radius:22px 22px 0 0;
}
.sticky-cart .big-total,
.big-total{
  color:var(--eo-ink);
}
.sticky-cart .btn{
  border-radius:14px!important;
}

/* Customer checkout / modal */
.modal-content{
  border-radius:24px!important;
  border:1px solid var(--eo-border);
  box-shadow:0 22px 70px rgba(15,23,42,.18);
}
.modal-header{
  border-bottom:1px solid #e2e8f0;
  background:linear-gradient(180deg,#fff,#f8fbff);
  border-radius:24px 24px 0 0!important;
}
.modal-title{
  color:var(--eo-ink);
  font-weight:800;
}
.form-control,
.form-select{
  border-color:#dbe7f3;
}
.form-control:focus,
.form-select:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 .2rem rgba(37,99,235,.12);
}

/* Product photo gallery modal */
.product-detail-big-img{
  border-radius:22px!important;
  border:1px solid #e2e8f0;
  background:#fff;
  box-shadow:0 10px 26px rgba(15,23,42,.07);
}
.product-detail-thumb-btn{
  border-radius:14px!important;
}
.product-detail-desc{
  background:#f8fbff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:12px 14px;
  color:#334155;
}

/* Floating chat/install/share buttons */
.floating-chat-btn,
.install-floating-btn,
.customer-install-btn{
  border-radius:999px!important;
  box-shadow:0 16px 34px rgba(37,99,235,.20)!important;
}
.floating-chat-btn{
  background:linear-gradient(135deg,#ecfeff,#dbeafe)!important;
  color:#0f172a!important;
  border:1px solid #bae6fd!important;
}

/* Admin dashboard polish */
.eo-hero,
.report-hero{
  background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 56%,#38bdf8 100%)!important;
}
.eo-stat,
.merchant-kpi,
.report-kpi,
.merchant-action-card{
  border:1px solid #e2e8f0!important;
}
.eo-stat-icon,
.merchant-action-icon{
  background:linear-gradient(135deg,#eff6ff,#dbeafe)!important;
  color:#1d4ed8!important;
}

/* Tables */
.table thead th{
  color:#334155;
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.table-hover tbody tr:hover{
  background:#f8fbff;
}

/* Mobile refinement */
@media (max-width: 575.98px){
  .product-img{height:132px}
  .customer-product-card{border-radius:18px!important}
  .customer-topbar .btn{padding:.38rem .58rem;font-size:.84rem}
  .sticky-cart{padding:9px 10px}
  .sticky-cart .btn{padding:.55rem .7rem}
  .modal-content{border-radius:20px!important}
  .app-card{border-radius:16px}
}


/* =========================================================
   easy-online Phase 5B: Customer Notification Restore + W3-modern buttons
   ========================================================= */

/* W3Schools-inspired clean green buttons/chips, with modern spacing */
body.customer-body .customer-action-chip,
body.customer-body .btn-primary,
body.customer-body .sticky-cart .btn-primary,
body.customer-body .modal-footer .btn-primary{
  background:#04AA6D !important;
  border:1px solid #04AA6D !important;
  color:#ffffff !important;
  border-radius:8px !important;
  box-shadow:0 4px 10px rgba(4,170,109,.14) !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}
body.customer-body .customer-action-chip:hover,
body.customer-body .customer-action-chip:focus,
body.customer-body .btn-primary:hover,
body.customer-body .sticky-cart .btn-primary:hover,
body.customer-body .modal-footer .btn-primary:hover{
  background:#059862 !important;
  border-color:#059862 !important;
  color:#ffffff !important;
  transform:translateY(-1px);
}
body.customer-body .btn-outline-primary,
body.customer-body .btn-outline-secondary{
  border-radius:8px !important;
  font-weight:700 !important;
}
body.customer-body .customer-top-actions .btn,
body.customer-body .customer-action-chip{
  min-height:38px !important;
}

/* Notification menu chip */
body.customer-body .customer-notice-chip{
  position:relative !important;
  padding-right:1.05rem !important;
}
body.customer-body .notice-chip-count{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:20px !important;
  height:20px !important;
  margin-left:6px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  background:#ffeb3b !important;
  color:#111827 !important;
  font-size:.74rem !important;
  font-weight:900 !important;
}

/* Restore / modernize New Things card */
body.customer-body .customer-notice-banner{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  border:1px solid #b7f7d5 !important;
  border-left:6px solid #04AA6D !important;
  background:linear-gradient(135deg,#ecfdf5,#ffffff) !important;
  border-radius:18px !important;
  box-shadow:0 10px 24px rgba(4,170,109,.11) !important;
  cursor:pointer !important;
}
body.customer-body .customer-notice-banner:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(4,170,109,.16) !important;
}
body.customer-body .customer-notice-banner .notice-icon,
body.customer-body .notice-bell-inside{
  width:44px !important;
  height:44px !important;
  border-radius:12px !important;
  background:#04AA6D !important;
  color:#ffffff !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:22px !important;
  box-shadow:0 8px 18px rgba(4,170,109,.18) !important;
}
body.customer-body .customer-notice-banner .notice-title{
  color:#064e3b !important;
  font-size:1.08rem !important;
  font-weight:900 !important;
}
body.customer-body #noticeBadge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:22px !important;
  min-height:22px !important;
  border:2px solid #ffffff !important;
  background:#dc2626 !important;
  color:#ffffff !important;
  font-size:.72rem !important;
  font-weight:900 !important;
}
body.customer-body #noticeModal .notice-list-item{
  border:1px solid #dbe7f3 !important;
  border-radius:18px !important;
  background:#ffffff !important;
  box-shadow:0 8px 20px rgba(15,23,42,.06) !important;
}

/* Modern simple cards */
body.customer-body .customer-product-card{
  border-radius:16px !important;
}
body.customer-body .product-img{
  border-radius:14px !important;
}
@media (max-width:575.98px){
  body.customer-body .customer-notice-banner{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  body.customer-body .customer-notice-banner .notice-icon{
    width:40px !important;
    height:40px !important;
  }
}


/* =========================================================
   easy-online Phase 5C: Clean modern customer UI, no icon style
   ========================================================= */

body.customer-body{
  background:
    radial-gradient(circle at top left, rgba(4,170,109,.10), transparent 32%),
    linear-gradient(180deg,#f8fbff 0%,#f5f7fb 100%) !important;
  color:#111827 !important;
}

/* Header */
body.customer-body .customer-topbar{
  background:rgba(255,255,255,.92) !important;
  border-bottom:1px solid rgba(226,232,240,.92) !important;
  box-shadow:0 8px 26px rgba(15,23,42,.06) !important;
}
body.customer-body .customer-brand-name{
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  color:#111827 !important;
}
body.customer-body .customer-top-actions .btn{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #dbe7f3 !important;
  border-radius:10px !important;
  box-shadow:none !important;
}
body.customer-body .customer-top-actions .btn:hover{
  background:#f3f4f6 !important;
}

/* Horizontal menu: clean text pills, no icons */
body.customer-body .customer-action-scroll-wrap{
  background:rgba(255,255,255,.82) !important;
  border-bottom:1px solid #e5e7eb !important;
  backdrop-filter:blur(10px);
}
body.customer-body .customer-action-scroll{
  gap:10px !important;
  padding:10px 2px !important;
}
body.customer-body .customer-action-chip{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #d6e1ee !important;
  border-radius:10px !important;
  min-height:38px !important;
  padding:.48rem .9rem !important;
  font-size:.88rem !important;
  font-weight:800 !important;
  box-shadow:0 6px 16px rgba(15,23,42,.05) !important;
}
body.customer-body .customer-action-chip:hover,
body.customer-body .customer-action-chip:focus{
  background:#04AA6D !important;
  border-color:#04AA6D !important;
  color:#ffffff !important;
  transform:translateY(-1px);
}

/* Search and category controls */
body.customer-body #search,
body.customer-body #searchInput,
body.customer-body .product-search-bar,
body.customer-body input[type="search"]{
  background:#ffffff !important;
  border:1px solid #d6e1ee !important;
  border-radius:14px !important;
  box-shadow:0 8px 22px rgba(15,23,42,.05) !important;
  min-height:46px !important;
  font-weight:600 !important;
}
body.customer-body .category-menu-button,
body.customer-body .category-chip,
body.customer-body .cat-chip,
body.customer-body .customer-category-chip{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #d6e1ee !important;
  border-radius:14px !important;
  min-height:46px !important;
  font-weight:800 !important;
  box-shadow:0 8px 22px rgba(15,23,42,.05) !important;
}
body.customer-body .category-menu-button:hover,
body.customer-body .category-chip.active,
body.customer-body .cat-chip.active{
  background:#111827 !important;
  color:#ffffff !important;
  border-color:#111827 !important;
}

/* New Things card without icon */
body.customer-body .customer-notice-banner{
  border:1px solid #bbf7d0 !important;
  border-left:0 !important;
  background:linear-gradient(135deg,#f0fdf4,#ffffff) !important;
  border-radius:18px !important;
  box-shadow:0 12px 28px rgba(4,170,109,.10) !important;
}
body.customer-body .notice-bell-inside,
body.customer-body .customer-notice-banner .notice-icon{
  width:auto !important;
  min-width:54px !important;
  height:34px !important;
  border-radius:999px !important;
  background:#04AA6D !important;
  color:#ffffff !important;
  font-size:.82rem !important;
  font-weight:900 !important;
  padding:0 12px !important;
  box-shadow:none !important;
}
body.customer-body .notice-text-label{
  display:inline-block !important;
  line-height:1 !important;
}
body.customer-body .customer-notice-banner .notice-title{
  color:#111827 !important;
  font-size:1.02rem !important;
  font-weight:900 !important;
}
body.customer-body #noticeBadge{
  min-width:20px !important;
  min-height:20px !important;
  background:#ef4444 !important;
  border:2px solid #ffffff !important;
}

/* Product grid: modern retail cards */
body.customer-body #productGrid{
  row-gap:14px !important;
}
body.customer-body .customer-product-card{
  border:1px solid #e1e8f0 !important;
  border-radius:18px !important;
  background:#ffffff !important;
  box-shadow:0 10px 26px rgba(15,23,42,.065) !important;
  padding:10px !important;
  overflow:hidden !important;
}
body.customer-body .customer-product-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(15,23,42,.10) !important;
  border-color:#c7d2fe !important;
}
body.customer-body .product-photo-frame{
  background:#f8fafc !important;
  border:1px solid #eef2f7 !important;
  border-radius:16px !important;
}
body.customer-body .product-img{
  height:168px !important;
  border:0 !important;
  background:#ffffff !important;
  border-radius:14px !important;
  padding:8px !important;
}
body.customer-body .customer-product-card .fw-bold,
body.customer-body .customer-product-card .fw-semibold,
body.customer-body .customer-product-card h6{
  color:#111827 !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
}
body.customer-body .customer-product-card .text-muted{
  color:#6b7280 !important;
}
body.customer-body .customer-product-card .price,
body.customer-body .customer-product-card .product-price,
body.customer-body .customer-product-card .text-primary{
  color:#04AA6D !important;
  font-weight:900 !important;
}
body.customer-body .promo-badge{
  background:#111827 !important;
  color:#ffffff !important;
  border-radius:999px !important;
  box-shadow:none !important;
}

/* Buttons: modern W3-inspired, no icon dependency */
body.customer-body .btn-primary,
body.customer-body .sticky-cart .btn-primary,
body.customer-body .modal-footer .btn-primary,
body.customer-body .customer-product-card .btn-primary{
  background:#04AA6D !important;
  border-color:#04AA6D !important;
  color:#ffffff !important;
  border-radius:10px !important;
  box-shadow:0 8px 18px rgba(4,170,109,.18) !important;
}
body.customer-body .btn-primary:hover{
  background:#059862 !important;
  border-color:#059862 !important;
}
body.customer-body .btn-outline-primary,
body.customer-body .btn-outline-secondary,
body.customer-body .btn-outline-success{
  border-radius:10px !important;
  border-color:#d1d5db !important;
  color:#111827 !important;
  background:#ffffff !important;
}
body.customer-body .btn-outline-primary:hover,
body.customer-body .btn-outline-secondary:hover,
body.customer-body .btn-outline-success:hover{
  background:#f3f4f6 !important;
  color:#111827 !important;
}

/* Quantity control */
body.customer-body .qty-btn{
  width:38px !important;
  height:38px !important;
  border-radius:10px !important;
  background:#ffffff !important;
  border:1px solid #d1d5db !important;
  color:#111827 !important;
  box-shadow:none !important;
}
body.customer-body .qty-btn:hover{
  background:#04AA6D !important;
  border-color:#04AA6D !important;
  color:#ffffff !important;
}

/* Sticky cart */
body.customer-body .sticky-cart{
  background:rgba(255,255,255,.96) !important;
  border-top:1px solid #dbe7f3 !important;
  border-radius:20px 20px 0 0 !important;
  box-shadow:0 -12px 32px rgba(15,23,42,.13) !important;
  backdrop-filter:blur(12px);
}
body.customer-body .big-total{
  color:#111827 !important;
  font-weight:900 !important;
}

/* Modals and checkout */
body.customer-body .modal-content{
  border-radius:20px !important;
  border:1px solid #dbe7f3 !important;
}
body.customer-body .modal-header{
  background:#ffffff !important;
  border-bottom:1px solid #e5e7eb !important;
}
body.customer-body .modal-title{
  color:#111827 !important;
  font-weight:900 !important;
}
body.customer-body .form-control,
body.customer-body .form-select{
  border-radius:12px !important;
  border-color:#d6e1ee !important;
  min-height:44px !important;
}

/* Mobile */
@media(max-width:575.98px){
  body.customer-body .product-img{
    height:128px !important;
  }
  body.customer-body .customer-product-card{
    border-radius:16px !important;
    padding:8px !important;
  }
  body.customer-body .customer-action-chip{
    min-height:36px !important;
    padding:.42rem .76rem !important;
  }
  body.customer-body .customer-top-actions .btn{
    min-height:34px !important;
    padding:.36rem .58rem !important;
  }
  body.customer-body .sticky-cart{
    padding:9px 10px !important;
  }
}


/* =========================================================
   easy-online Phase 5D: Application-form theme across app
   - Blue/navy SaaS theme from registration form
   - No button/menu icons
   - Cleaner hover effects
   ========================================================= */

:root{
  --eo-app-bg:#f6f8fc;
  --eo-app-bg-soft:#f8fbff;
  --eo-app-card:#ffffff;
  --eo-app-text:#0f172a;
  --eo-app-muted:#64748b;
  --eo-app-border:#dbe7f6;
  --eo-app-primary:#0d6efd;
  --eo-app-primary-dark:#102f5f;
  --eo-app-primary-soft:#e9f2ff;
  --eo-app-shadow:0 14px 34px rgba(15,23,42,.08);
  --eo-app-shadow-hover:0 20px 46px rgba(15,23,42,.13);
}

/* Main background like registration page */
body.body-bg,
body.customer-body,
body.admin-body{
  background:
    radial-gradient(circle at top left,#eef6ff 0,#f7fbff 34%,#f6f7fb 72%,#f6f7fb 100%) !important;
  color:var(--eo-app-text)!important;
}

/* General cards */
.app-card,
.customer-product-card,
.report-filter-card,
.report-kpi,
.merchant-kpi,
.eo-stat,
.merchant-action-card{
  background:var(--eo-app-card)!important;
  border:1px solid var(--eo-app-border)!important;
  border-radius:20px!important;
  box-shadow:var(--eo-app-shadow)!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
}
.app-card:hover,
.customer-product-card:hover,
.eo-stat:hover,
.merchant-action-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--eo-app-shadow-hover)!important;
  border-color:#b9d5ff!important;
}

/* Header/navbars: same calm registration theme */
.navbar,
.customer-topbar,
.admin-topbar{
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--eo-app-border)!important;
  box-shadow:0 10px 26px rgba(15,23,42,.06)!important;
  backdrop-filter:saturate(160%) blur(10px);
}
.navbar-brand,
.customer-brand-name{
  color:var(--eo-app-text)!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
}

/* Super admin / report hero matches application form hero */
.eo-hero,
.report-hero,
.merchant-hero{
  background:linear-gradient(135deg,#0f172a 0%,#102f5f 46%,#0d6efd 100%)!important;
  color:#ffffff!important;
  border:0!important;
  border-radius:28px!important;
  box-shadow:0 24px 60px rgba(15,23,42,.18)!important;
}
.merchant-hero .text-muted,
.report-hero .opacity-75,
.eo-hero .opacity-75{
  color:rgba(255,255,255,.82)!important;
}
.merchant-hero .badge,
.eo-hero .badge,
.report-hero .badge{
  background:rgba(255,255,255,.16)!important;
  color:#ffffff!important;
  border:1px solid rgba(255,255,255,.20)!important;
}

/* Buttons: application form blue theme */
.btn,
.customer-action-chip,
.pwa-floating-install-btn{
  border-radius:14px!important;
  font-weight:750!important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease!important;
}
.btn:hover,
.customer-action-chip:hover,
.pwa-floating-install-btn:hover{
  transform:translateY(-1px);
}
.btn-primary,
body.customer-body .btn-primary,
body.customer-body .sticky-cart .btn-primary,
body.customer-body .modal-footer .btn-primary,
body.customer-body .customer-product-card .btn-primary{
  background:linear-gradient(135deg,#0d6efd,#66a3ff)!important;
  border-color:#0d6efd!important;
  color:#ffffff!important;
  box-shadow:0 14px 28px rgba(13,110,253,.22)!important;
}
.btn-primary:hover,
body.customer-body .btn-primary:hover{
  background:linear-gradient(135deg,#102f5f,#0d6efd)!important;
  border-color:#102f5f!important;
  color:#ffffff!important;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
body.customer-body .btn-outline-primary,
body.customer-body .btn-outline-secondary,
body.customer-body .btn-outline-success{
  background:#ffffff!important;
  color:#0f172a!important;
  border:1px solid #cfe0f5!important;
  box-shadow:0 8px 20px rgba(15,23,42,.04)!important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
body.customer-body .btn-outline-primary:hover,
body.customer-body .btn-outline-secondary:hover,
body.customer-body .btn-outline-success:hover{
  background:#e9f2ff!important;
  color:#0d47a1!important;
  border-color:#9fc3ff!important;
}

/* Remove/hide menu/button icons globally where possible */
.menu-icon,
.customer-profile-svg-icon,
.pwa-floating-install-icon,
.floating-chat-icon{
  display:none!important;
}
.admin-menu-link .menu-icon,
.admin-sidebar .menu-icon{
  display:none!important;
}

/* Admin sidebar: no icons, clean hover */
.admin-sidebar{
  background:#ffffff!important;
}
.admin-menu-group-title{
  color:#0f172a!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  padding:10px 12px!important;
}
.admin-menu-link,
.admin-sidebar a{
  border-radius:12px!important;
  color:#334155!important;
  font-weight:750!important;
  transition:background .18s ease, color .18s ease, transform .18s ease!important;
}
.admin-menu-link:hover,
.admin-sidebar a:hover{
  background:#e9f2ff!important;
  color:#0d47a1!important;
  transform:translateX(2px);
}
.admin-menu-link.active,
.admin-sidebar a.active{
  background:linear-gradient(135deg,#0d6efd,#66a3ff)!important;
  color:#ffffff!important;
}

/* Dashboard icon boxes become text initials, clean not emoji */
.eo-stat-icon,
.merchant-action-icon{
  background:linear-gradient(135deg,#eef6ff,#dbeafe)!important;
  color:#0d47a1!important;
  border:1px solid #cfe0f5!important;
  font-weight:900!important;
  box-shadow:inset 0 0 0 1px rgba(13,110,253,.08)!important;
}
.merchant-action-card{
  text-decoration:none!important;
}
.merchant-action-card:hover{
  background:#f8fbff!important;
}

/* Customer action menu: blue text buttons, no icons */
body.customer-body .customer-action-scroll-wrap{
  background:rgba(255,255,255,.90)!important;
  border-bottom:1px solid var(--eo-app-border)!important;
  backdrop-filter:blur(10px);
}
body.customer-body .customer-action-chip{
  background:#ffffff!important;
  color:#0f172a!important;
  border:1px solid #cfe0f5!important;
  border-radius:14px!important;
  box-shadow:0 8px 20px rgba(15,23,42,.04)!important;
}
body.customer-body .customer-action-chip:hover,
body.customer-body .customer-action-chip:focus{
  background:#e9f2ff!important;
  color:#0d47a1!important;
  border-color:#9fc3ff!important;
}

/* Customer search/category */
body.customer-body #search,
body.customer-body #searchInput,
body.customer-body .product-search-bar,
body.customer-body input[type="search"],
body.customer-body .category-menu-button,
body.customer-body .category-chip,
body.customer-body .cat-chip,
body.customer-body .customer-category-chip{
  background:#ffffff!important;
  border:1px solid #cfe0f5!important;
  border-radius:16px!important;
  color:#0f172a!important;
  box-shadow:0 8px 20px rgba(15,23,42,.04)!important;
}
body.customer-body .category-menu-button:hover,
body.customer-body .category-chip.active,
body.customer-body .cat-chip.active{
  background:linear-gradient(135deg,#0d6efd,#66a3ff)!important;
  color:#ffffff!important;
  border-color:#0d6efd!important;
}

/* Customer product cards */
body.customer-body .customer-product-card{
  border-radius:20px!important;
}
body.customer-body .product-photo-frame{
  background:linear-gradient(180deg,#ffffff,#f8fbff)!important;
  border:1px solid #eef2f7!important;
  border-radius:18px!important;
}
body.customer-body .product-img{
  border-radius:16px!important;
}
body.customer-body .customer-product-card .price,
body.customer-body .customer-product-card .product-price,
body.customer-body .customer-product-card .text-primary{
  color:#0d6efd!important;
  font-weight:900!important;
}
body.customer-body .promo-badge{
  background:linear-gradient(135deg,#102f5f,#0d6efd)!important;
  color:#ffffff!important;
  border-radius:999px!important;
  box-shadow:0 8px 18px rgba(13,110,253,.20)!important;
}

/* Notification card in application form theme */
body.customer-body .customer-notice-banner{
  border:1px solid #cfe0f5!important;
  border-left:6px solid #0d6efd!important;
  background:linear-gradient(135deg,#eef6ff,#ffffff)!important;
  border-radius:20px!important;
  box-shadow:0 14px 34px rgba(13,110,253,.08)!important;
}
body.customer-body .notice-bell-inside,
body.customer-body .customer-notice-banner .notice-icon{
  background:linear-gradient(135deg,#0d6efd,#66a3ff)!important;
  color:#ffffff!important;
}
body.customer-body .customer-notice-banner .notice-title{
  color:#0f172a!important;
}

/* Tables */
.table thead th{
  background:#f8fbff!important;
  color:#334155!important;
  font-size:.84rem!important;
  text-transform:uppercase;
  letter-spacing:.025em;
}
.table-hover tbody tr:hover{
  background:#f8fbff!important;
}

/* Forms */
.form-control,
.form-select,
body.customer-body .form-control,
body.customer-body .form-select{
  border-radius:14px!important;
  border:1px solid #d8e3f0!important;
}
.form-control:focus,
.form-select:focus,
body.customer-body .form-control:focus,
body.customer-body .form-select:focus{
  border-color:#0d6efd!important;
  box-shadow:0 0 0 .18rem rgba(13,110,253,.12)!important;
}

/* Sticky cart */
body.customer-body .sticky-cart{
  background:rgba(255,255,255,.96)!important;
  border-top:1px solid #dbe7f6!important;
  border-radius:22px 22px 0 0!important;
  box-shadow:0 -12px 32px rgba(15,23,42,.12)!important;
  backdrop-filter:blur(12px);
}

/* Mobile */
@media(max-width:575.98px){
  .btn,
  .customer-action-chip{
    border-radius:12px!important;
  }
  body.customer-body .customer-action-scroll{
    gap:8px!important;
  }
  body.customer-body .product-img{
    height:128px!important;
  }
}


/* =========================================================
   easy-online Phase 5E: Customer Header Registration Theme
   Customer logo/company header uses merchant registration hero color
   ========================================================= */

body.customer-body .customer-topbar{
  background:linear-gradient(135deg,#0f172a 0%,#102f5f 48%,#0d6efd 100%) !important;
  color:#ffffff !important;
  border-bottom:0 !important;
  box-shadow:0 18px 42px rgba(15,23,42,.18) !important;
}

body.customer-body .customer-topbar .container{
  min-height:62px !important;
}

body.customer-body .customer-brand,
body.customer-body .customer-brand-name{
  color:#ffffff !important;
}

body.customer-body .customer-brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

body.customer-body .customer-brand .thumb{
  background:#ffffff !important;
  border:2px solid rgba(255,255,255,.75) !important;
  border-radius:16px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.16) !important;
  padding:4px !important;
}

body.customer-body .customer-brand-name{
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  text-shadow:0 1px 2px rgba(0,0,0,.18) !important;
}

body.customer-body .customer-top-actions .btn{
  background:rgba(255,255,255,.14) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  backdrop-filter:blur(8px);
}

body.customer-body .customer-top-actions .btn:hover,
body.customer-body .customer-top-actions .btn:focus{
  background:#ffffff !important;
  color:#102f5f !important;
  border-color:#ffffff !important;
  transform:translateY(-1px);
}

body.customer-body .customer-action-scroll-wrap{
  background:#ffffff !important;
  border-bottom:1px solid #dbe7f6 !important;
  box-shadow:0 8px 20px rgba(15,23,42,.04) !important;
}

@media(max-width:575.98px){
  body.customer-body .customer-topbar .container{
    min-height:56px !important;
  }
  body.customer-body .customer-brand-name{
    font-size:1rem !important;
  }
  body.customer-body .customer-brand .thumb{
    width:44px !important;
    height:44px !important;
  }
}


/* =========================================================
   easy-online Phase 5F: Wider Standard Forms + Registration Header Shadow
   ========================================================= */

/* Customer header: stronger registration-form style, with shadow depth */
body.customer-body .customer-topbar{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.20), transparent 30%),
    linear-gradient(135deg,#0f172a 0%,#102f5f 45%,#0d6efd 100%) !important;
  color:#ffffff !important;
  border-bottom:0 !important;
  box-shadow:0 18px 42px rgba(15,23,42,.24), inset 0 -1px 0 rgba(255,255,255,.12) !important;
  position:sticky !important;
}
body.customer-body .customer-topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-14px;
  height:14px;
  background:linear-gradient(180deg,rgba(15,23,42,.16),rgba(15,23,42,0));
  pointer-events:none;
}
body.customer-body .customer-brand{
  padding:6px 0 !important;
}
body.customer-body .customer-brand .thumb{
  width:48px !important;
  height:48px !important;
  background:#ffffff !important;
  border:2px solid rgba(255,255,255,.72) !important;
  border-radius:18px !important;
  box-shadow:0 14px 28px rgba(0,0,0,.20) !important;
}
body.customer-body .customer-brand-name{
  color:#ffffff !important;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
  text-shadow:0 2px 4px rgba(0,0,0,.24) !important;
}
body.customer-body .customer-top-actions .btn{
  background:rgba(255,255,255,.14) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.26) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.12) !important;
}
body.customer-body .customer-top-actions .btn:hover{
  background:#ffffff !important;
  color:#102f5f !important;
}

/* Standard wider modal form for Delivery Person, Customer, Category, Supplier */
.eo-standard-form-modal,
#deliveryPersonModal .modal-dialog,
#customerModal .modal-dialog,
#categoryModal .modal-dialog,
#supplierModal .modal-dialog{
  max-width:820px !important;
  width:calc(100% - 32px) !important;
}
#deliveryPersonModal .modal-content,
#customerModal .modal-content,
#categoryModal .modal-content,
#supplierModal .modal-content{
  border:0 !important;
  border-radius:26px !important;
  box-shadow:0 26px 76px rgba(15,23,42,.24) !important;
  overflow:hidden !important;
}
#deliveryPersonModal .modal-header,
#customerModal .modal-header,
#categoryModal .modal-header,
#supplierModal .modal-header{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg,#0f172a 0%,#102f5f 52%,#0d6efd 100%) !important;
  color:#ffffff !important;
  border-bottom:0 !important;
  padding:18px 22px !important;
}
#deliveryPersonModal .modal-title,
#customerModal .modal-title,
#categoryModal .modal-title,
#supplierModal .modal-title{
  color:#ffffff !important;
  font-size:1.15rem !important;
  font-weight:900 !important;
}
#deliveryPersonModal .btn-close,
#customerModal .btn-close,
#categoryModal .btn-close,
#supplierModal .btn-close{
  filter:invert(1) grayscale(100%) brightness(200%) !important;
  opacity:.85 !important;
}
#deliveryPersonModal .modal-body,
#customerModal .modal-body,
#categoryModal .modal-body,
#supplierModal .modal-body{
  background:#f8fbff !important;
  padding:22px !important;
}
#deliveryPersonModal .modal-footer,
#customerModal .modal-footer,
#categoryModal .modal-footer,
#supplierModal .modal-footer{
  background:#ffffff !important;
  border-top:1px solid #dbe7f6 !important;
  padding:16px 22px !important;
}
#deliveryPersonModal label,
#customerModal label,
#categoryModal label,
#supplierModal label,
#deliveryPersonModal .form-label,
#customerModal .form-label,
#categoryModal .form-label,
#supplierModal .form-label{
  color:#334155 !important;
  font-weight:800 !important;
  margin-bottom:6px !important;
}
#deliveryPersonModal .form-control,
#deliveryPersonModal .form-select,
#customerModal .form-control,
#customerModal .form-select,
#categoryModal .form-control,
#categoryModal .form-select,
#supplierModal .form-control,
#supplierModal .form-select{
  min-height:46px !important;
  background:#ffffff !important;
  border:1px solid #cfe0f5 !important;
  border-radius:14px !important;
  box-shadow:0 8px 18px rgba(15,23,42,.04) !important;
}
#deliveryPersonModal textarea.form-control,
#customerModal textarea.form-control,
#supplierModal textarea.form-control{
  min-height:108px !important;
}
#deliveryPersonModal .form-control:focus,
#deliveryPersonModal .form-select:focus,
#customerModal .form-control:focus,
#customerModal .form-select:focus,
#categoryModal .form-control:focus,
#categoryModal .form-select:focus,
#supplierModal .form-control:focus,
#supplierModal .form-select:focus{
  border-color:#0d6efd !important;
  box-shadow:0 0 0 .20rem rgba(13,110,253,.14) !important;
}

/* Standard module buttons and hover effect */
body.admin-body .btn,
body.customer-body .btn,
.customer-action-chip{
  border-radius:14px !important;
  font-weight:800 !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease !important;
}
body.admin-body .btn:hover,
body.customer-body .btn:hover,
.customer-action-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(15,23,42,.11) !important;
}
body.admin-body .btn-primary,
body.customer-body .btn-primary{
  background:linear-gradient(135deg,#0d6efd,#66a3ff) !important;
  border-color:#0d6efd !important;
  color:#ffffff !important;
}
body.admin-body .btn-primary:hover,
body.customer-body .btn-primary:hover{
  background:linear-gradient(135deg,#102f5f,#0d6efd) !important;
  border-color:#102f5f !important;
}
body.admin-body .btn-outline-primary,
body.admin-body .btn-outline-secondary,
body.admin-body .btn-outline-success,
body.customer-body .btn-outline-primary,
body.customer-body .btn-outline-secondary,
body.customer-body .btn-outline-success{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cfe0f5 !important;
}
body.admin-body .btn-outline-primary:hover,
body.admin-body .btn-outline-secondary:hover,
body.admin-body .btn-outline-success:hover,
body.customer-body .btn-outline-primary:hover,
body.customer-body .btn-outline-secondary:hover,
body.customer-body .btn-outline-success:hover{
  background:#e9f2ff !important;
  color:#0d47a1 !important;
  border-color:#9fc3ff !important;
}

/* Remove leftover button/menu icon containers */
.menu-icon,
.customer-profile-svg-icon,
.pwa-floating-install-icon,
.floating-chat-icon,
.action-icon{
  display:none !important;
}

/* Admin list/module cards follow same theme */
body.admin-body .app-card{
  border:1px solid #dbe7f6 !important;
  box-shadow:0 14px 34px rgba(15,23,42,.07) !important;
}
body.admin-body .app-card:hover{
  border-color:#b9d5ff !important;
}
body.admin-body h3,
body.admin-body h4,
body.admin-body h5{
  letter-spacing:-.02em;
}

@media(max-width:575.98px){
  .eo-standard-form-modal,
  #deliveryPersonModal .modal-dialog,
  #customerModal .modal-dialog,
  #categoryModal .modal-dialog,
  #supplierModal .modal-dialog{
    max-width:none !important;
    width:calc(100% - 16px) !important;
    margin:8px auto !important;
  }
  #deliveryPersonModal .modal-body,
  #customerModal .modal-body,
  #categoryModal .modal-body,
  #supplierModal .modal-body{
    padding:16px !important;
  }
}


/* Phase 69: customer company-name header blue gradient only. Layout unchanged. */
.customer-topbar.customer-company-gradient{
  background:linear-gradient(135deg,#0f172a 0%,#102f5f 48%,#0d6efd 100%) !important;
  color:#fff !important;
}
.customer-topbar.customer-company-gradient .customer-brand,
.customer-topbar.customer-company-gradient .customer-brand-name{
  color:#fff !important;
}
.customer-topbar.customer-company-gradient .btn{
  border-color:rgba(255,255,255,.65) !important;
  color:#fff !important;
}
.customer-topbar.customer-company-gradient .btn:hover{
  background:rgba(255,255,255,.16) !important;
}


/* =========================================================
   PHASE 72: SAAS-WIDE BOOTSTRAP MESSAGE SYSTEM
   Applies to admin, merchant, public SaaS pages and customer view.
   ========================================================= */
.tw-standard-alert{
  position:relative;
  width:100%;
  border:0 !important;
  border-left:5px solid currentColor !important;
  border-radius:16px !important;
  padding:14px 46px 14px 14px !important;
  box-shadow:0 14px 34px rgba(15,23,42,.08) !important;
  line-height:1.35;
}
.tw-standard-alert .tw-alert-icon{
  width:28px;
  height:28px;
  min-width:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);
  font-size:15px;
  margin-top:-2px;
}
.tw-standard-alert .tw-alert-text,
.tw-standard-alert > div:not(.btn-close){
  min-width:0;
}
.tw-standard-alert .btn-close{
  top:50% !important;
  transform:translateY(-50%);
  right:12px !important;
  padding:10px !important;
  opacity:.65;
}
.tw-standard-alert .btn-close:hover{opacity:1;}
.alert-success.tw-standard-alert{color:#0f5132;background:linear-gradient(135deg,#d1e7dd,#f2fbf6) !important;}
.alert-danger.tw-standard-alert{color:#842029;background:linear-gradient(135deg,#f8d7da,#fff4f5) !important;}
.alert-warning.tw-standard-alert{color:#664d03;background:linear-gradient(135deg,#fff3cd,#fffaf0) !important;}
.alert-info.tw-standard-alert,.alert-primary.tw-standard-alert{color:#055160;background:linear-gradient(135deg,#cff4fc,#f1fbff) !important;}
.alert-secondary.tw-standard-alert{color:#41464b;background:linear-gradient(135deg,#e2e3e5,#f8f9fa) !important;}
body.customer-body .tw-standard-alert{border-radius:14px !important;font-size:.94rem;}
body.admin-body .tw-standard-alert{margin-bottom:14px;}
.tw-bootstrap-alert-modal .alert{box-shadow:none !important;border-radius:14px !important;}
@media(max-width:576px){
  .tw-standard-alert{padding:12px 42px 12px 12px !important;font-size:.92rem;}
  .tw-standard-alert .tw-alert-icon{width:25px;height:25px;min-width:25px;font-size:13px;}
}


/* =========================================================
   PHASE 73: IMAGE THUMBNAIL REGULATION + SUCCESS AUTO CLOSE
   - Loaded/upload-selected images fit inside thumbnail/window.
   - Only success messages auto-dismiss after 3 seconds; warnings/errors/info stay until clicked.
   ========================================================= */
.tw-image-upload-preview{
  width:100%;
  max-width:min(260px,100%);
  border:1px solid #dbe7f6;
  border-radius:16px;
  background:#fff;
  padding:10px;
  box-shadow:0 10px 24px rgba(15,23,42,.07);
}
.tw-image-upload-preview img{
  display:block;
  width:100%;
  height:150px;
  max-height:28vh;
  object-fit:contain;
  object-position:center;
  background:#f8fafc;
  border-radius:12px;
}
.thumb,
img.thumb,
.product-table-scroll img.thumb,
.admin-content table img.thumb{
  width:72px !important;
  height:72px !important;
  max-width:72px !important;
  max-height:72px !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#fff !important;
  border:1px solid #dbe7f6 !important;
  border-radius:12px !important;
  padding:4px !important;
}
.modal-body img.thumb,
.app-card img.thumb{
  width:96px !important;
  height:96px !important;
  max-width:100% !important;
  object-fit:contain !important;
}
.admin-content img:not(.no-thumb):not(.product-img):not(.product-detail-big-img):not(.pwa-install-logo),
.customer-body img:not(.no-thumb):not(.product-img):not(.product-detail-big-img):not(.customer-banner-img){
  max-width:100%;
}
.admin-content .modal-body img:not(.no-thumb):not(.product-img):not(.product-detail-big-img),
.customer-body .modal-body img:not(.no-thumb):not(.product-img):not(.product-detail-big-img){
  max-height: min(320px, 55vh);
  object-fit: contain;
}
.tw-success-auto-dismiss{
  animation:twSuccessFadeOut .28s ease 2.72s forwards;
}
@keyframes twSuccessFadeOut{
  to{opacity:0;transform:translateY(-6px);}
}
@media(max-width:576px){
  .tw-image-upload-preview{max-width:180px;padding:8px;border-radius:14px;}
  .tw-image-upload-preview img{height:112px;max-height:24vh;}
  .thumb,img.thumb,.product-table-scroll img.thumb,.admin-content table img.thumb{
    width:62px !important;
    height:62px !important;
    max-width:62px !important;
    max-height:62px !important;
  }
  .modal-body img.thumb,.app-card img.thumb{width:82px !important;height:82px !important;}
}

/* Phase76: universal standard table select + single Export/Print dropdown */
.tw-table-select-export-wrap { width: 100%; }
.tw-table-toolbar { box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.tw-table-toolbar .tw-table-search-box { max-width: 360px; min-width: 230px; }
.tw-select-col { width: 42px !important; min-width: 42px !important; white-space: nowrap; vertical-align: middle !important; }
.tw-select-export-table thead th.tw-select-col { text-align: center; }
.tw-select-export-table tbody tr:has(.tw-row-select:checked) { background: rgba(13, 110, 253, .08); }
.tw-table-search-hidden { display: none !important; }
@media (max-width: 576px) {
  .tw-table-toolbar { gap: .35rem !important; }
  .tw-table-toolbar .tw-table-search-box { max-width: 100%; min-width: 100%; }
  .tw-table-toolbar .btn { flex: 1 1 calc(50% - .35rem); }
  .tw-table-toolbar .tw-clear-select { flex: 0 0 auto; }
  .tw-table-toolbar .tw-table-count { width: 100%; margin-left: 0 !important; text-align: left; }
}

/* Phase75: clean single table export dropdown */
.tw-native-export-hidden{display:none !important;}
.tw-export-dropdown{display:inline-block;}
.tw-export-menu{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:170px;
  z-index:1050;
  padding:6px;
}
.tw-export-menu.show{display:block;}
.tw-export-menu .dropdown-item{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:.45rem .65rem;
  border-radius:.45rem;
  font-size:.875rem;
}
.tw-export-menu .dropdown-item:hover{background:#eef6ff;}
.tw-table-toolbar .tw-export-toggle{white-space:nowrap;}
@media(max-width:576px){
  .tw-table-toolbar .tw-export-dropdown{flex:1 1 calc(50% - .35rem);}
  .tw-table-toolbar .tw-export-toggle{width:100%;}
  .tw-export-menu{left:0;right:auto;width:100%;}
}


/* Phase 77: bulk action dropdown beside the standard table export tool */
.tw-table-toolbar .tw-bulk-toggle{white-space:nowrap;}
.tw-bulk-menu{display:none;position:absolute;right:0;top:calc(100% + .25rem);min-width:220px;z-index:1070;padding:.35rem 0;}
.tw-bulk-menu.show{display:block;}
.tw-bulk-menu .dropdown-item{font-size:.875rem;padding:.45rem .85rem;}
@media(max-width:575.98px){
  .tw-table-toolbar .tw-bulk-dropdown{flex:1 1 calc(50% - .35rem);}
  .tw-table-toolbar .tw-bulk-toggle{width:100%;}
}

/* Phase 85 subscription/trial status polish */
.tw-subscription-alert{border:0;border-radius:18px;box-shadow:0 10px 24px rgba(15,23,42,.08)}
.tw-subscription-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);flex:0 0 auto}
.page-subscription_status .admin-content .card{overflow:hidden}
@media(max-width:768px){.tw-subscription-alert{font-size:.92rem}.tw-subscription-alert .btn{width:100%}}