.focusable:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;

}

.peer:focus ~ .peer-focusable {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;

}

/* Accordion component */

.accordion-input,
.accordion-none-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.accordion-input:checked + label .accordion-chevron {
  transform: rotate(180deg);
}

.accordion-content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden;
}

.accordion-input:checked ~ .accordion-content-wrapper {
  grid-template-rows: 1fr;
  border-top: 1px solid #e5e7eb;
}

/* Editorjs */
.editor .codex-editor .ce-toolbar {
  right: auto !important;
  z-index: 60;
}

.editor .codex-editor .ce-settings.ce-settings--opened {
  right: auto !important;
  transform: none !important;
  z-index: 70;
}

.editor .codex-editor .ce-popover.ce-popover--opened {
  right: auto !important;
  z-index: 70;
  max-width: calc(100vw - 2rem);
}

/* Sortable directive */

.product-row {
  position: relative;
}

.product-row::after {
  content: '';
  position: absolute;
  inset: -1.5px; /* small gap from edges */
  border-radius: 0.375rem; /* match rounded-md */
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); /* transparent initially */
  transition: box-shadow 120ms ease-in-out;
}

.product-row:hover::after {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 1);
}


.product-row.sortable-chosen::after,
.product-row.sortable-drag::after,
.product-row.sortable-ghost::after {
  box-shadow: none !important;
}


body.is-sorting .product-row::after {
  box-shadow: none !important;
}

body.is-sorting .product-row * {
  pointer-events: none !important;
}

.product-row * {
  pointer-events: none;
}