/* ------------------------------------------------------------
 * Bookomers Infinite Scroll — styles
 * Skeleton shimmer + fade-in animation
 * ---------------------------------------------------------- */

/* Sentinel is invisible but must occupy a tiny bit of layout so
   IntersectionObserver can fire. */
.bookomers-infinite-sentinel {
  width: 100%;
  height: 1px;
  margin: 24px 0;
  pointer-events: none;
}

/* ---------- Skeleton card ---------- */
.bookomers-skeleton {
  list-style: none;
  pointer-events: none;
  padding: 0 12px;
}

.bookomers-skel-image,
.bookomers-skel-line {
  background: linear-gradient(
    90deg,
    #eceff3 0%,
    #f6f8fb 50%,
    #eceff3 100%
  );
  background-size: 200% 100%;
  animation: bookomers-shimmer 1.4s linear infinite;
  border-radius: 6px;
  display: block;
}

.bookomers-skel-image {
  width: 100%;
  aspect-ratio: 3 / 4;   /* book-cover proportions */
  margin-bottom: 14px;
}

.bookomers-skel-line {
  height: 12px;
  margin: 8px 0;
  width: 100%;
}

.bookomers-skel-line.short { width: 65%; }
.bookomers-skel-line.price { width: 35%; margin-top: 14px; height: 14px; }

@keyframes bookomers-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Fade-in for freshly appended products ---------- */
.bookomers-new-product {
  opacity: 0;
  animation: bookomers-fade-in .55s cubic-bezier(.2,.7,.3,1) forwards;
  will-change: opacity, transform;
}

@keyframes bookomers-fade-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- End + error messages ---------- */
.bookomers-end-message,
.bookomers-error-message {
  width: 100%;
  text-align: center;
  padding: 28px 16px;
  color: #6b7280;
  font-size: 14px;
  letter-spacing: .02em;
}

.bookomers-end-message::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 0 auto 14px;
  background: currentColor;
  opacity: .35;
}

.bookomers-error-message button {
  margin-left: 6px;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
}
.bookomers-error-message button:hover { opacity: .75; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bookomers-skel-image,
  .bookomers-skel-line { animation: none; }
  .bookomers-new-product {
    animation: none;
    opacity: 1;
    transform: none;
  }
}