/* ==========================================================================
   KH NUTRIX — Icon + photo treatment
   Loaded last. Sizes and colours the Bootstrap Icons that replaced the
   emoji set, and handles the real photography in the scene blocks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ICON SIZING
   Icons inherit font-size from their container, so each container gets an
   explicit size rather than relying on the emoji's natural metrics.
   -------------------------------------------------------------------------- */

/* Bento cards */
.bento-icon i {
    font-size: 1.55rem;
    line-height: 1;
    background: var(--grad-green);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bento-purple .bento-icon i { background: var(--grad-purple); -webkit-background-clip: text; background-clip: text; }
.bento-yellow .bento-icon i { background: var(--grad-sun);    -webkit-background-clip: text; background-clip: text; }
.bento-blue   .bento-icon i { background: linear-gradient(135deg, #38BDF8, #6366F1); -webkit-background-clip: text; background-clip: text; }
.bento-pink   .bento-icon i { background: linear-gradient(135deg, #F472B6, #8B5CF6); -webkit-background-clip: text; background-clip: text; }

.bento-grid-5 .bento-icon i { font-size: 1.35rem; }

/* Hero badges */
.hero-badge i { color: var(--kh-green); font-size: .95rem; }

/* Hero nutrient bubbles */
.nutri-bubble em i { font-size: .9rem; color: var(--kh-green-700); }
.nutri-bubble.n2 em { background: #EEF2FF; }
.nutri-bubble.n2 em i { color: #4F46E5; }
.nutri-bubble.n3 em { background: #ECFDF5; }
.nutri-bubble.n3 em i { color: #059669; }
.nutri-bubble.n4 em { background: #FFF7ED; }
.nutri-bubble.n4 em i { color: #EA580C; }
.nutri-bubble.n5 em { background: #EFF6FF; }
.nutri-bubble.n5 em i { color: #2563EB; }
.nutri-bubble.n6 em { background: #FEF2F2; }
.nutri-bubble.n6 em i { color: #E11D48; }

/* Health map */
.health-item em i { font-size: 1.1rem; color: var(--kh-green-700); }

/* Step + story rails */
.rail-circle i {
    font-size: 1.7rem;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.srail-scene i { font-size: 1.9rem; color: var(--kh-green-700); }

/* Category / info cards */
.info-icon i { font-size: 1.5rem; }
.info-card .info-icon[style*="kh-green-soft"] i,
.info-card .info-icon[style*="kh-purple-soft"] i { color: var(--kh-green-700); }

/* Review + team avatars */
.review-avatar i { font-size: 1.35rem; color: var(--kh-green-700); }

/* Story timeline dot */
.story-dot i { font-size: .95rem; color: var(--kh-green-700); }

/* Floating decorations */
.leaf-float i { color: var(--kh-green); font-size: 1.15rem; }
.cta-float i  { color: rgba(255, 255, 255, .8); font-size: 1.3rem; }

/* Footer strip */
.footprint-strip i { color: #fff; font-size: .9rem; }

/* Product detail quick facts */
.stat-card i { color: var(--kh-green-700); }

/* --------------------------------------------------------------------------
   PHOTOGRAPHY
   -------------------------------------------------------------------------- */

/* About scene now holds a real photo */
.about-scene {
    padding: 0;
    min-height: 0;
    aspect-ratio: 4 / 3;
}
.about-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-lg);
    transition: transform .8s var(--ease);
}
.about-panel:hover .about-scene img { transform: scale(1.04); }
.about-scene .scene-ground { display: none; }

/* Health map centre photo */
.health-centre img {
    position: relative;
    z-index: 1;
    width: 80%;
    max-width: 460px;
    aspect-ratio: 1;
    object-fit: cover;
  
}

/* Product + blog media: real photos need a consistent crop */
.product-media img,
.blog-media img,
.bag-visual img,
.detail-media img {
    object-fit: cover;
}

.bag-visual img {
    aspect-ratio: 4 / 3;
    width: 100%;
    max-width: none;
    object-fit: cover;
}

.detail-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
}

/* --------------------------------------------------------------------------
   CARD POLISH — consistent heights and tighter rhythm
   -------------------------------------------------------------------------- */

/* Equal-height product cards regardless of benefit-list length */
.product-card .benefit-list { min-height: 5.4em; }
.product-card .product-body > p:first-of-type { min-height: 3.6em; }
.product-card h3 { min-height: 2.6em; display: flex; align-items: center; }

/* Blog cards */
.blog-body h3 { min-height: 2.7em; }
.blog-body > p { min-height: 4.5em; }

/* Review cards read better with a fixed quote area */
.review-card > p { min-height: 7.5em; }

@media (max-width: 767.98px) {
    .product-card .benefit-list,
    .product-card .product-body > p:first-of-type,
    .product-card h3,
    .blog-body h3,
    .blog-body > p,
    .review-card > p { min-height: 0; }
}

/* --------------------------------------------------------------------------
   PREMIUM PRODUCT CARDS — 3 across, wider
   -------------------------------------------------------------------------- */
.bag-card {
    padding: 26px 24px;
    text-align: left;
}

.bag-card h3 {
    font-size: 1.22rem;
    min-height: 0;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.bag-visual {
    padding: 0;
    margin-bottom: 20px;
    border-radius: var(--r-md);
    overflow: hidden;
}

.bag-visual img {
    max-width: none;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0;
}

.bag-rank {
    width: 32px;
    height: 32px;
    font-size: .84rem;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.bag-tagline {
    font-size: .88rem;
    color: var(--kh-slate-500);
    margin-bottom: 16px;
    min-height: 3.2em;
}

.bag-points li { font-size: .87rem; margin-bottom: 8px; }

.btn-bag {
    padding: 12px 26px;
    font-size: .9rem;
    align-self: flex-start;
}

@media (max-width: 767.98px) {
    .bag-tagline { min-height: 0; }
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY — Montserrat everywhere
   -------------------------------------------------------------------------- */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, td, th, strong, em, small, label, div,
.btn, .form-control, .form-select, input, textarea, select, button {
    font-family: 'Montserrat', sans-serif !important;
}

/* Bootstrap Icons must keep their own font or every glyph breaks */


.eyebrow i { font-size: .85rem; }

.section-head h2 { text-wrap: balance; }
.section-head p  { text-wrap: pretty; }

/* Keep headings from colliding with the sticky navbar on anchor jumps */
section[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }