/* Formatted "About this product" text (public/js/rich-text.js). Shared by product pages and the admin preview. */
.rt { --rt-ink: var(--ink, #2a2723); --rt-yellow: var(--yellow, #f6c344); --rt-pink: var(--pink, #f2918a); color: var(--rt-ink); }
.rt > * + * { margin-top: 14px; }
.rt p { line-height: 1.65; }

.rt-title { font-family: var(--display, Georgia, serif); font-weight: 900; font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.15; letter-spacing: -.01em; margin-top: 6px; }
.rt-title + p { font-size: 1.08rem; }
.rt-h { font-family: var(--display, Georgia, serif); font-size: 1.35rem; line-height: 1.25; margin-top: 30px !important; }
.rt-sub { font-family: var(--display, Georgia, serif); font-size: 1.08rem; margin-top: 22px !important; }

/* yellow highlighter behind headings and bold words; it sweeps in when the text scrolls into view */
.rt-h span, .rt-hl {
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--rt-yellow) 75%, transparent) 58%) no-repeat 0 0 / 0% 100%;
  transition: background-size .9s cubic-bezier(.3,.8,.3,1) .15s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px;
}
.rt-hl { font-weight: 700; }
.lit .rt-h span, .rt-h.lit span, .lit .rt-hl { background-size: 100% 100%; }

/* pencil-style pink underline */
.rt-u { text-decoration: underline wavy var(--rt-pink); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.rt-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.rt-list li { position: relative; padding-left: 30px; line-height: 1.55; }
.rt-list li::before { content: "🐾"; position: absolute; left: 0; top: 0; font-size: .95rem; }

.rt-quote {
  font-family: var(--hand, "Caveat", cursive); font-size: 1.65rem; line-height: 1.25; color: var(--rt-ink);
  border-left: 4px solid var(--rt-yellow); padding: 4px 0 4px 16px; margin-left: 0;
}

/* feature cards: a bold line followed by a short paragraph, 2+ in a row */
.rt-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 18px !important; }
.rt-feature {
  background: #fff; border: 2px solid var(--rt-ink); border-radius: 14px; padding: 14px 16px;
  box-shadow: 4px 4px 0 var(--rt-ink); opacity: 0; transform: translateY(14px);
  transition: opacity .5s, transform .6s cubic-bezier(.3,1.4,.5,1);
}
.rt-features.lit .rt-feature { opacity: 1; transform: none; }
.rt-features.lit .rt-feature:nth-child(2) { transition-delay: .08s; }
.rt-features.lit .rt-feature:nth-child(3) { transition-delay: .16s; }
.rt-features.lit .rt-feature:nth-child(4) { transition-delay: .24s; }
.rt-features.lit .rt-feature:nth-child(n+5) { transition-delay: .3s; }
.rt-feature h4 { font-family: var(--display, Georgia, serif); font-size: 1.02rem; line-height: 1.25; margin-bottom: 6px; }
.rt-feature h4::before { content: "✓ "; color: #3f9a73; }
.rt-feature p { font-size: .95rem; color: var(--graphite, #5b5650); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .rt-feature { opacity: 1; transform: none; }
  .rt-h span, .rt-hl { background-size: 100% 100%; transition: none; }
}