/* Nutrichè site styles that Tailwind utilities don't cover */

body { background: #F7F7FB; color: #1E1B2E; font-family: "Schibsted Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.lede { line-height: 1.6; max-width: 54ch; }
.prose-site p { line-height: 1.7; margin-top: 1.1em; max-width: 68ch; }
.prose-site h2 { font-family: "Young Serif", Georgia, serif; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; margin-top: 1.6em; }
.prose-site h3 { font-family: "Young Serif", Georgia, serif; font-size: clamp(22px, 2.2vw, 28px); margin-top: 1.4em; }
.prose-site ul { list-style: disc; padding-left: 1.3em; margin-top: 1em; }
.prose-site li { margin-top: .4em; line-height: 1.6; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #E8622C; outline-offset: 3px;
}

/* Skip link */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* Desktop dropdown: opens on hover and keyboard focus */
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }

/* Home: product sheets stack inside the pinned stage on desktop only */
@media (min-width: 1024px) {
  .sheet { position: absolute; inset: 0; }
}

/* Bag stage: colored disc grows on hover via clip-path */
.bag-disc { clip-path: circle(36% at 50% 52%); }

/* Cycle steps: dimmed until the drawn ring reaches them */
.cycle-step { opacity: .35; transition: opacity .3s, transform .3s; }
.cycle-step.is-on { opacity: 1; transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .cycle-step { opacity: 1; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Home Google reviews: a row that scrolls sideways without a visible scrollbar */
.reviews-row { scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 4px; }
.reviews-row::-webkit-scrollbar { display: none; }
.reviews-row .g-review { scroll-snap-align: start; }
/* Cards fit the container exactly: about 1 across on phones, 2 on tablets, 3 on small laptops, 4 on desktop; the rest scroll in */
.reviews-track { grid-auto-columns: 86%; }
@media (min-width: 640px) { .reviews-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (min-width: 1024px) { .reviews-track { grid-auto-columns: calc((100% - 40px) / 3); } }
@media (min-width: 1280px) { .reviews-track { grid-auto-columns: calc((100% - 60px) / 4); } }