.load-more-sentinel {
  display: grid;
  height: 62px;
  place-items: center;
  color: var(--blue);
}

.load-more-sentinel[hidden] {
  display: none;
}

.load-more-sentinel span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.load-more-sentinel::after {
  width: 25px;
  height: 25px;
  border: 3px solid #dedbef;
  border-top-color: var(--blue);
  border-radius: 50%;
  content: "";
  animation: catalog-spin .7s linear infinite;
}

.catalog-continue {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
}

.catalog-continue[hidden] {
  display: none;
}

.catalog-continue button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label arrow" "title arrow";
  align-items: center;
  gap: 3px 18px;
  width: min(100%, 620px);
  min-height: 88px;
  padding: 17px 22px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, #24169a, #4634d4);
  box-shadow: 0 14px 32px rgba(36, 22, 154, .22);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.catalog-continue button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(36, 22, 154, .3);
}

.catalog-continue button:focus-visible {
  outline: 4px solid rgba(186, 255, 0, .6);
  outline-offset: 3px;
}

.catalog-continue button:disabled {
  cursor: wait;
  opacity: .72;
  transform: none;
}

.catalog-continue span {
  grid-area: label;
  color: #baff00;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.catalog-continue strong {
  grid-area: title;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.18;
}

.catalog-continue b {
  grid-area: arrow;
  color: #baff00;
  font-size: 2rem;
}

@media (max-width: 640px) {
  .catalog-continue { padding-top: 18px; }
  .catalog-continue button { min-height: 78px; padding: 14px 17px; border-radius: 18px; }
  .catalog-continue span { font-size: .65rem; }
  .catalog-continue strong { font-size: 1rem; }
}

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

@media (prefers-reduced-motion: reduce) {
  .load-more-sentinel::after { animation-duration: 1.8s; }
}
