/* Khuya Health brand layer on top of Bootstrap 5 - overrides Bootstrap's
   own CSS variables so every component (buttons, badges, alerts, forms)
   automatically picks up the brand palette without needing bespoke rules. */
:root {
  --bs-primary: #2f6f4f;
  --bs-primary-rgb: 47, 111, 79;
  --bs-primary-text-emphasis: #1f4d36;
  --bs-link-color: #2f6f4f;
  --bs-link-hover-color: #1f4d36;
  --bs-body-font-family: 'Inter', system-ui, sans-serif;
  --bs-border-radius: 0.6rem;
  --bs-border-radius-lg: 0.85rem;
  --khuya-forest: #1f4d36;
  --khuya-sage-tint: #e5f3ea;
  --khuya-amber: #c98a1f;
}

body { background: #fafaf7; }
h1, h2, h3, h4, .navbar-brand { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }

.bg-forest { background-color: var(--khuya-forest) !important; }
.bg-sage-tint { background-color: var(--khuya-sage-tint) !important; }
.text-forest { color: var(--khuya-forest) !important; }
.text-forest-muted { color: #3a5c4a !important; }
.btn-primary { --bs-btn-bg: #2f6f4f; --bs-btn-border-color: #2f6f4f; --bs-btn-hover-bg: #24593e; --bs-btn-hover-border-color: #24593e; }
.btn-amber { --bs-btn-color: #2a1c05; --bs-btn-bg: #c98a1f; --bs-btn-border-color: #c98a1f; --bs-btn-hover-color: #2a1c05; --bs-btn-hover-bg: #b57c1a; }

/* Card images - fixed height + object-fit-cover (a Bootstrap 5.3 utility)
   handles cropping correctly regardless of the source photo's dimensions,
   which is exactly the class of bug that broke a live category tile
   before this rebuild. */
.card-img-top.ratio-cover { height: 170px; object-fit: cover; }
.thumb-sm { width: 72px; height: 72px; object-fit: cover; border-radius: var(--bs-border-radius); }
.thumb-placeholder { background: var(--khuya-sage-tint); }

/* --- Hero --- */
.hero-section { background: var(--khuya-forest); }
.hero-botanical { width: 260px; height: auto; color: #fff; opacity: 0.9; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: #9fcab0; }

/* --- Product rows (horizontal scroll, no JS needed) --- */
.product-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.product-row .product-card-col { flex: 0 0 200px; scroll-snap-align: start; }

/* --- Product detail gallery --- */
#pdp-main-image { height: 360px; object-fit: cover; }
.pdp-thumb { width: 64px; height: 64px; object-fit: cover; cursor: pointer; }
.pdp-thumb:hover { opacity: 0.8; }

@media (max-width: 767px) {
  .hero-botanical { width: 160px; }
}