html {
  background-color: var(--bg, #f4f1ea) !important;
}

body:not(.admin-ui) {
  background-color: transparent !important;
}

body:not(.admin-ui),
body:not(.admin-ui).cart-open {
  min-height: 100dvh !important;
  padding-bottom: 0 !important;
}

body:not(.admin-ui) .page-content {
  padding-bottom: 120px !important;
}

@supports (-webkit-touch-callout: none) {
  body:not(.admin-ui) {
    overscroll-behavior-y: none;
  }
}

body:not(.admin-ui) .modal,
body:not(.admin-ui) .popup,
body:not(.admin-ui) .product-popup,
body:not(.admin-ui) .bottom-sheet,
body:not(.admin-ui) [role="dialog"] {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  max-height: 100dvh !important;
  height: 100dvh !important;
}

body:not(.admin-ui) .cart-panel {
  position: fixed !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: min(78vw, 540px) !important;
  max-width: 540px !important;
  height: auto !important;
  max-height: min(86dvh, 820px) !important;
  margin: 0 !important;
  border-radius: 18px !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 760px) {
  body.admin-ui {
    min-height: 100dvh;
    padding: 18px 12px 24px !important;
  }

  body.admin-ui .page {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.admin-ui .topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body.admin-ui .topbar > div,
  body.admin-ui .topbar .actions {
    width: 100%;
  }

  body.admin-ui .topbar .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.admin-ui .topbar .actions .btn,
  body.admin-ui .topbar > div .btn {
    width: 100%;
    justify-content: center;
  }

  body.admin-ui .card {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  body.admin-ui .btn {
    min-height: 40px;
  }

  body.admin-ui .modal {
    padding: 12px !important;
  }

  body.admin-ui .modal .modal-card {
    width: min(100%, 720px) !important;
    max-width: min(100%, 720px) !important;
    max-height: 88dvh !important;
    overflow: auto !important;
  }
}

@media (max-width: 520px) {
  body.admin-ui .topbar .actions {
    grid-template-columns: 1fr;
  }
}