[data-pym] {
  display: block;
  width: min(100%, 560px);
  margin-inline: auto;
}

[data-pym]:not([data-pym-ready="true"]) {
  min-height: 560px;
}

[data-pym="live"]:not([data-pym-ready="true"]) {
  min-height: 630px;
}

[data-pym="products"]:not([data-pym-ready="true"]) {
  min-height: 530px;
}

[data-pym="palette"]:not([data-pym-ready="true"]) {
  min-height: 600px;
}

.pym-loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-height: inherit;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  color: #64748b;
  background:
    linear-gradient(110deg, transparent 22%, rgb(255 255 255 / 68%) 40%, transparent 58%) -160% 0 / 45% 100% no-repeat,
    linear-gradient(#145dee 0 76px, #fff 76px);
  box-shadow: 0 20px 42px -22px rgb(15 23 42 / 24%);
  font-family: var(--e-global-typography-primary-font-family, sans-serif);
  font-size: 11px;
  line-height: 1.8;
  animation: pym-loader-shimmer 1.8s ease-in-out infinite;
}

.pym-loader::before,
.pym-loader::after {
  content: "";
  position: absolute;
  right: 20px;
  left: 20px;
  height: 44px;
  border-radius: 16px;
  background: #f1f5f9;
}

.pym-loader::before {
  top: 112px;
  width: 58%;
  left: auto;
}

.pym-loader::after {
  top: 174px;
  width: 72%;
  right: auto;
}

.pym-loader-spinner {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  margin-top: 72px;
  border: 3px solid #dbe5f4;
  border-top-color: var(--e-global-color-primary, #145dee);
  border-radius: 50%;
  animation: pym-loader-spin .8s linear infinite;
}

.pym-loader > span:last-child {
  position: relative;
  z-index: 1;
}

@keyframes pym-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes pym-loader-shimmer {
  50% { background-position: 260% 0, 0 0; }
}

@media (max-width: 480px) {
  [data-pym]:not([data-pym-ready="true"]) { min-height: 540px; }
  [data-pym="live"]:not([data-pym-ready="true"]) { min-height: 610px; }
  [data-pym="products"]:not([data-pym-ready="true"]) { min-height: 510px; }
  [data-pym="palette"]:not([data-pym-ready="true"]) { min-height: 580px; }
  .pym-loader { border-radius: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .pym-loader,
  .pym-loader-spinner { animation: none; }
}