/* Ordinary dialogs < authentication < floating notices. Keep these priorities
   together: older page styles use independent, very large z-index values. */
:root {
  --abgul-layer-gallery: 2147483644;
  --abgul-layer-auth: 2147483646;
  --abgul-layer-notice: 2147483647;
}
html body #customer-auth-modal.modal:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  z-index: var(--abgul-layer-auth) !important;
}
html body .cat-tour { z-index: 2147483642 !important; }
html body :is(.product-lightbox, .community-lightbox):not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  z-index: var(--abgul-layer-gallery) !important;
  box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
html body .product-lightbox__panel {
  width: min(1180px, 100%);
  height: min(820px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  max-height: 100%;
  box-sizing: border-box;
}
html body .product-lightbox__close { top: 12px; right: 12px; }
/* The gallery owns the screen until closed; navigation returns afterwards. */
html[data-abgul-gallery-open] body > :is(.topbar, .admin-toolbar) {
  visibility: hidden !important;
  pointer-events: none !important;
}
html body .product-lightbox__panel {
  background: var(--au-space-2, #101827) !important;
}
html body .product-lightbox__panel img {
  width: 100%;
  height: 100%;
  padding: 58px 70px !important;
  object-fit: contain;
  background: transparent;
}
@media (max-width: 600px) {
  html body .product-lightbox__panel img { padding: 58px 48px !important; }
  html body .product-lightbox__nav { width: 40px; height: 48px; margin-top: -24px; font-size: 32px; }
}
html body .community-lightbox__surface {
  width: min(1600px, 100%);
  height: min(960px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}
html body [data-abgul-notice] {
  position: fixed !important;
  z-index: var(--abgul-layer-notice) !important;
  box-sizing: border-box;
  max-width: calc(100vw - 32px) !important;
  overflow-wrap: anywhere;
}
html body .toast-host[data-abgul-notice] .toast {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
html body .flash-stack[data-abgul-notice] {
  display: grid !important;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: min(520px, calc(100vw - 32px));
  pointer-events: none;
}
html body .flash-stack[data-abgul-notice] :is(a, button) { pointer-events: auto; }
/* Errors stay inside the visible area above the mobile keyboard as well. */
html[data-abgul-auth-open] body [data-abgul-notice] {
  top: max(12px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content;
  pointer-events: none;
}