/* 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. */

/* ---- Site background palette (mild, warm off-white) ---- */
:root {
  --color-paper: #FAF8F4;      /* main page background */
  --color-paper-alt: #F3F1EA;  /* alternate section background, slightly deeper */
  --color-line: #E4E4E6;       /* neutral border/divider tone, matches scrollbar below */
}

body {
  background-color: var(--color-paper);
}

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; }