/* V138 MOBILE HEADER BADGES (2026-07-15)
   The cart and notification counters must remain inside their own action
   buttons. Do not move these counters outside a 42px touch target: on iOS
   the neighbouring create button can otherwise cover the number. */
.topbar,
.topbar .top-actions,
.topbar .notify-bell {
  overflow: visible !important;
}

.topbar .notify-bell {
  position: relative !important;
  isolation: isolate;
  z-index: 1;
}

.topbar .notify-bell .notify-count {
  top: 3px !important;
  right: 3px !important;
  transform: none !important;
  z-index: 4 !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 3px !important;
  box-sizing: border-box !important;
  border: 1.5px solid #fff !important;
  line-height: 1 !important;
  pointer-events: none;
}

@media (max-width: 760px) {
  .topbar .top-actions {
    gap: 7px !important;
    padding: 2px 2px 2px 0 !important;
  }

  .topbar .top-actions #cartBtn,
  .topbar .top-actions #notifyBell {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .topbar .notify-bell .notify-count {
    top: 4px !important;
    right: 4px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 390px) {
  .topbar {
    padding-right: 8px !important;
  }

  .topbar .top-actions {
    gap: 5px !important;
  }
}