.page-products {}

.product-bulk-choice {
  flex: 0 0 44px;
  min-width: 44px;
  transition: flex-basis 0.16s ease, min-width 0.16s ease;
}

.product-bulk-choice.open,
.product-bulk-choice.selection-active {
  flex-basis: 230px;
  min-width: 132px;
}

html body #app .app-shell:has(.page-products) .topbar [data-product-bulk-choice].filter-choice.open {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
}

.product-bulk-choice .product-bulk-trigger {
  width: 100%;
  min-height: 36px;
  gap: 8px;
}

.product-bulk-main-icon,
.product-bulk-chevron {
  display: inline-flex;
  align-items: center;
}

.product-bulk-main-icon svg {
  transform: none !important;
}

.product-bulk-choice.open .product-bulk-chevron svg {
  transform: rotate(180deg);
}

.product-bulk-choice:not(.open):not(.selection-active) .product-bulk-trigger {
  width: 44px;
  padding-inline: 0;
  justify-content: center;
}

.product-bulk-choice:not(.open):not(.selection-active) .filter-choice-label,
.product-bulk-choice:not(.open):not(.selection-active) .product-bulk-chevron {
  display: none;
}

.product-bulk-menu {
  width: var(--filter-menu-width, max-content);
  min-width: 220px;
  max-width: min(240px, calc(100vw - 24px));
}

.app-shell:has(.page-products) .topbar [data-product-bulk-choice] .product-bulk-menu {
  position: fixed !important;
  top: var(--filter-menu-top, 68px) !important;
  left: var(--filter-menu-left, 12px) !important;
  right: auto !important;
  width: var(--filter-menu-width, min(240px, calc(100vw - 24px))) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  max-height: var(--filter-menu-max-height, 55vh) !important;
  z-index: 24000 !important;
}

.product-bulk-menu .filter-choice-option {
  justify-content: flex-start;
  text-align: left;
  min-height: 38px;
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.18;
}

.product-bulk-menu .filter-choice-option.danger {
  color: #b91c1c;
}

.product-bulk-menu .filter-choice-option:disabled {
  color: #94a3b8;
  background: transparent;
}

.app-shell:has(.page-products) .topbar-actions [data-action="open-product-form"] {
  min-height: 40px;
}

.app-shell:has(.page-products) .topbar-actions [data-action="open-product-form"] {
  height: 40px;
}

.icon-button.is-disabled,
.icon-button[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.product-image-drop-zone {
  position: relative;
  border: 1px dashed color-mix(in srgb, var(--primary), transparent 55%);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.78), rgb(244 249 255 / 0.84));
}

.product-image-drop-zone.drag-over {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary), transparent 70%);
}

.image-drop-hint {
  position: absolute;
  inset: auto 14px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #52637a;
  background: rgb(255 255 255 / 0.84);
  border: 1px solid rgb(218 228 241 / 0.9);
  font-weight: 760;
  font-size: 0.82rem;
  pointer-events: none;
}

.product-image-drop-zone.drag-over .image-drop-hint {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary), white 50%);
}

.product-table .col-product-select {
  width: 54px;
}

.product-select-head,
.product-select-cell {
  text-align: center;
  width: 54px;
}

.product-select-cell input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary);
}

@media (max-width: 700px) {
  .product-bulk-choice.open,
  .product-bulk-choice.selection-active {
    flex-basis: 190px;
    min-width: 118px;
  }

  .product-bulk-menu {
    min-width: 220px;
  }

  .product-select-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 36px;
  }
}

:root[data-mode="night"] .product-bulk-menu .filter-choice-option.danger {
  color: #fecaca;
}

:root[data-mode="night"] .product-image-drop-zone {
  background: linear-gradient(135deg, rgb(20 20 20 / 0.94), rgb(28 25 23 / 0.92));
  border-color: rgb(255 138 61 / 0.38);
}

:root[data-mode="night"] .image-drop-hint {
  color: #f1d3bf;
  background: rgb(19 19 19 / 0.88);
  border-color: rgb(255 138 61 / 0.28);
}