/* assets/css/style.css
   Small hand-written additions the Tailwind Play CDN can't generate on its
   own (keyframes, ::-webkit- pseudo-elements). Everything else uses plain
   Tailwind utility classes directly in the markup. */

html {
  scroll-behavior: smooth;
}

/* Hero slider crossfade */
.slide {
  opacity: 0;
  transition: opacity 700ms ease-in-out;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* Product gallery thumbnail active ring */
.thumb-active {
  outline: 2px solid #0AB89D;
  outline-offset: 2px;
}

/* Slim custom scrollbar for horizontal scrollers (category chips, etc.) */
.scrollbar-thin::-webkit-scrollbar { height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #E4E4E6; border-radius: 9999px; }

/* Skeleton loading shimmer for AJAX variant swaps */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0efe9 25%, #e8e6de 37%, #f0efe9 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* Fallback multi-line clamp for older browsers (Tailwind's line-clamp-* covers modern ones) */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Product description rendering (admin-authored via the rich-text editor).
   Tailwind's preflight reset strips default paragraph/list spacing and
   bullets, so this restores just enough to read as normal formatted text. */
.rich-content p { margin-bottom: 1em; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }
.rich-content ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1em; }
.rich-content li { margin-bottom: 0.25em; }
.rich-content strong, .rich-content b { font-weight: 600; color: inherit; }
.rich-content .ql-align-center { text-align: center; }
.rich-content .ql-align-right { text-align: right; }
.rich-content .ql-align-justify { text-align: justify; }