/*
Theme Name: Nattoflux Child
Theme URI: https://navicare.my
Description: Nattoflux homepage redesign child theme. Holds design tokens and section styles. Loads on top of Blocksy (the currently-active parent on navicare.my).
Author: THREE LUPINES Sdn Bhd
Version: 1.0.56
Template: blocksy
Text Domain: nattoflux-child
*/

/* ============================================================
   DESIGN TOKENS — locked in 2026-05-17 design spec §6
   Verify hex values against the actual Nattoflux SVG before
   production. Values below are visual estimates from the logo.
   ============================================================ */

:root {
  /* Backgrounds */
  --nf-cream:    #FAF4EC;   /* primary section bg */
  --nf-cream-2:  #F3EAD7;   /* alternating section bg */
  --nf-cream-3:  #EEE0C6;   /* deeper cream — accents */
  --nf-red-soft: #FBEFEA;   /* problem-icon backplate */

  /* Structure */
  --nf-brown:       #5C3A1E;  /* icons, secondary text, dividers */
  --nf-brown-light: #8B6B45;  /* hover, muted accents */

  /* Accent */
  --nf-red: #C9285D;          /* CTAs, key emphasis, accent words */

  /* Type */
  --nf-ink:   #2A1810;        /* body text — warm near-black */
  --nf-sans:  'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  --nf-serif: 'Source Serif Pro', 'EB Garamond', Georgia, serif;
}

/* ============================================================
   BASE TYPOGRAPHY — apply Nattoflux fonts sitewide.
   Astra's defaults get overridden here.
   ============================================================ */

body,
body.wp-singular {
  font-family: var(--nf-sans);
  color: var(--nf-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.ast-archive-title, .entry-title {
  font-family: var(--nf-sans);
  color: var(--nf-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Utility: italic-serif accent word inside a headline.
   Use as: <h1>Plain text <span class="nf-accent">Accent.</span></h1> */
.nf-accent {
  font-family: var(--nf-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--nf-red);
}

/* ============================================================
   §1 HERO + §1.5 AS SEEN ON + §1.75 STAT ROW
   Reset the home page wrapper (Blocksy adds padding by default).
   ============================================================ */

body.home .entry-content,
body.home .ct-container { max-width: none !important; padding: 0 !important; }

/* Hide Blocksy's default page-title block on the home page —
   our hero IS the title. */
body.home .page-title,
body.home .entry-title,
body.home .ct-page-title,
body.home .page-header { display: none !important; }

.nf-hero {
  position: relative;
  overflow: hidden;
  background: var(--nf-cream);
  min-height: 480px;
}
.nf-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 75% 35%, rgba(255,220,180,0.7) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(201,40,93,0.18) 0%, transparent 55%),
    linear-gradient(120deg, #D4B888 0%, #B89968 40%, #8B6B45 100%);
}
/* When real photo gets added: <div class="nf-hero__bg" style="--photo:url(...)"></div> */
.nf-hero__bg[style*="--photo"] {
  background: var(--photo) center/cover no-repeat !important;
}
.nf-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(95deg,
    rgba(250,244,236,0.98) 0%,
    rgba(250,244,236,0.96) 35%,
    rgba(250,244,236,0.78) 55%,
    rgba(250,244,236,0.3) 75%,
    rgba(250,244,236,0) 95%);
}
.nf-hero__content {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  padding: 60px 32px;
  align-items: center;
  min-height: 480px;
  max-width: 1280px;
  margin: 0 auto;
}
.nf-hero__text { max-width: 560px; }

.nf-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  background: var(--nf-brown);
  color: var(--nf-cream);
  margin-bottom: 16px;
}
.nf-pill__dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--nf-red);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 2px;
}

.nf-hero h1 {
  font-family: var(--nf-sans) !important;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--nf-ink);
  margin: 0 0 16px;
}

.nf-hero__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--nf-brown);
  margin: 0 0 28px;
  max-width: 440px;
}

.nf-ctas {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.nf-cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 8px;
  background: var(--nf-red);
  color: white !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(201,40,93,0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nf-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(201,40,93,0.35);
}
.nf-cta-secondary {
  font-size: 13px;
  font-weight: 600;
  color: var(--nf-ink) !important;
  border-bottom: 1.5px solid var(--nf-ink);
  padding-bottom: 2px;
  text-decoration: none !important;
}

.nf-product-float {
  position: relative;
  background: var(--nf-cream);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 60px rgba(42,24,16,0.16), 0 4px 16px rgba(42,24,16,0.06);
  max-width: 320px;
  margin-left: auto;
  text-decoration: none !important;
  display: block;
}
.nf-product-float__img {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 10px;
  background:
    linear-gradient(135deg, #F3EAD7, #E8D9BC) center/cover no-repeat;
  margin-bottom: 14px;
  overflow: hidden;
}
.nf-product-float__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.nf-product-float__name {
  font-size: 14px; font-weight: 700;
  color: var(--nf-ink);
  margin: 0 0 4px;
}
.nf-product-float__tag {
  font-size: 11px;
  color: var(--nf-brown);
  margin: 0 0 10px;
}
.nf-product-float__price {
  font-family: var(--nf-serif);
  font-style: italic;
  color: var(--nf-red);
  font-size: 18px;
  font-weight: 600;
}
.nf-product-float__price-old {
  color: rgba(92,58,30,0.45);
  text-decoration: line-through;
  font-size: 12px;
  margin-left: 6px;
  font-family: var(--nf-sans);
  font-style: normal;
  font-weight: 400;
}

/* §1.5 AS SEEN ON */
.nf-seen-on {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  background: var(--nf-cream-2);
  flex-wrap: wrap;
}
.nf-seen-on__lbl {
  font-size: 10px;
  color: var(--nf-brown);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 700;
}
.nf-seen-on__logos {
  display: flex;
  gap: 22px;
  flex: 1;
  flex-wrap: wrap;
}
.nf-seen-on__logo {
  padding: 5px 12px;
  background: rgba(92,58,30,0.1);
  border-radius: 4px;
  font-size: 11px;
  font-style: italic;
  color: var(--nf-brown);
}

/* §1.75 STAT ROW */
.nf-stats {
  display: flex;
  gap: 0;
  padding: 22px 32px;
  background: var(--nf-cream);
  border-top: 1px solid rgba(92,58,30,0.1);
}
.nf-stat {
  flex: 1;
  padding: 0 12px;
  border-right: 1px solid rgba(92,58,30,0.08);
  text-align: center;
}
.nf-stat:last-child { border-right: none; }
.nf-stat__num {
  font-family: var(--nf-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--nf-red);
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1;
  margin-bottom: 6px;
}
.nf-stat__lbl {
  font-size: 11px;
  color: var(--nf-brown);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

/* Mobile: stack the hero, allow the seen-on / stat to wrap */
@media (max-width: 880px) {
  .nf-hero__content {
    grid-template-columns: 1fr;
    padding: 40px 22px;
    gap: 28px;
  }
  .nf-product-float {
    max-width: 100%;
    margin-left: 0;
  }
  .nf-hero__overlay {
    background: linear-gradient(180deg,
      rgba(250,244,236,0.95) 0%,
      rgba(250,244,236,0.85) 60%,
      rgba(250,244,236,0.5) 100%);
  }
  .nf-stats { flex-wrap: wrap; padding: 16px 22px; }
  .nf-stat { flex: 1 1 calc(50% - 24px); border-right: none; padding: 12px; }
}

/* ============================================================
   §2 PROBLEM (cream-2 alternating background)
   ============================================================ */

.nf-problem {
  background: var(--nf-cream-2);
  padding: 80px 32px;
  position: relative;
}
.nf-problem__intro {
  text-align: center;
  margin-bottom: 50px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.nf-eyebrow {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nf-red);
  margin-bottom: 12px;
}
.nf-problem h2,
.nf-science h2 {
  font-family: var(--nf-sans) !important;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 14px;
}
.nf-problem h2 { color: var(--nf-ink); }
.nf-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--nf-brown);
  max-width: 620px;
  margin: 0 auto 40px;
}
.nf-problem__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
.nf-problem__card {
  background: var(--nf-cream);
  border: 1px solid rgba(92,58,30,0.1);
  border-radius: 12px;
  padding: 24px;
}
/* Symptom diagram photos replace emoji icons (1.0.20)
   Source photos are 887x1774 (1:2 portrait — full-body shots).
   Use 3/4 portrait ratio with object-position: center 25% so the
   head + glowing stomach stays in frame on every breakpoint. */
.nf-problem__icon {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: var(--nf-red-soft);
  overflow: hidden;
  margin-bottom: 18px;
  position: relative;
}
.nf-problem__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.6s ease-out;
}
.nf-problem__card:hover .nf-problem__icon img { transform: scale(1.04); }
.nf-problem__card h4 {
  font-family: var(--nf-sans) !important;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--nf-ink);
  letter-spacing: -0.01em;
}
.nf-problem__card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--nf-brown);
  margin: 0;
}

/* Anatomical symptom diagram */
.nf-anatomy {
  margin: 60px auto 0;
  max-width: 760px;
  padding: 0 16px;
}
.nf-anatomy__head {
  text-align: center;
  margin-bottom: 28px;
}
.nf-anatomy__title {
  font-family: var(--nf-sans) !important;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--nf-ink);
}
.nf-anatomy__diagram {
  position: relative;
  background: var(--nf-cream);
  border-radius: 14px;
  border: 1px solid rgba(92,58,30,0.1);
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
.nf-anatomy__callouts-left,
.nf-anatomy__callouts-right {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.nf-anatomy__callouts-left { text-align: right; }
.nf-anatomy__callouts-left .nf-callout { align-items: flex-end; }
.nf-anatomy__callouts-right .nf-callout { align-items: flex-start; }
.nf-callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nf-callout__title {
  font-family: var(--nf-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--nf-red);
  line-height: 1.1;
}
.nf-callout__sub {
  font-size: 11px;
  color: var(--nf-brown);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nf-callout__line {
  display: inline-block;
  width: 56px;
  height: 1px;
  background: var(--nf-brown);
  opacity: 0.4;
  margin-top: 6px;
}
.nf-anatomy__svg {
  width: 160px;
  height: 280px;
  color: var(--nf-brown);
}
.nf-problem__cta {
  text-align: center;
  margin-top: 50px;
}
.nf-problem__cta a {
  font-size: 13px;
  font-weight: 600;
  color: var(--nf-ink) !important;
  border-bottom: 1.5px solid var(--nf-ink);
  padding-bottom: 2px;
  text-decoration: none !important;
}

/* ============================================================
   §3 SCIENCE (dark ink background, light type)
   ============================================================ */

.nf-science {
  background: var(--nf-ink);
  color: var(--nf-cream);
  padding: 80px 32px;
}
.nf-science h2 { color: var(--nf-cream); }
.nf-science .nf-lede { color: rgba(250,244,236,0.7); }

.nf-science__container {
  max-width: 1180px;
  margin: 0 auto;
}
.nf-science__head {
  margin-bottom: 40px;
}
.nf-science__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.nf-science__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.nf-science__stat-num {
  font-family: var(--nf-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--nf-red);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  margin-bottom: 8px;
}
.nf-science__stat-lbl {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(250,244,236,0.75);
}
.nf-science__text h3 {
  font-family: var(--nf-sans) !important;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--nf-cream);
  letter-spacing: -0.01em;
}
.nf-science__text p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(250,244,236,0.75);
  margin: 0 0 18px;
}
.nf-science__study {
  background: rgba(250,244,236,0.05);
  border: 1px solid rgba(250,244,236,0.12);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 24px;
}
.nf-science__study-label {
  font-size: 10px;
  color: var(--nf-red);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.nf-science__study-quote {
  font-family: var(--nf-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nf-cream);
  margin: 0 0 8px;
}
.nf-science__study-cite {
  font-size: 11px;
  color: rgba(250,244,236,0.55);
  font-style: normal;
  font-family: var(--nf-sans);
}
.nf-science__read {
  margin-top: 24px;
}
.nf-science__read a {
  font-size: 13px;
  font-weight: 600;
  color: var(--nf-cream) !important;
  border-bottom: 1.5px solid var(--nf-cream);
  padding-bottom: 2px;
  text-decoration: none !important;
}

/* Ingredients sub-block (inside .nf-science) */
.nf-ingredients {
  margin-top: 64px;
  padding-top: 50px;
  border-top: 1px solid rgba(250,244,236,0.15);
}
.nf-ingredients__head {
  text-align: center;
  margin-bottom: 40px;
}
.nf-ingredients__title {
  font-family: var(--nf-sans) !important;
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 700;
  margin: 0;
  color: var(--nf-cream);
  letter-spacing: -0.01em;
}
.nf-ingredients__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  max-width: 940px;
  margin: 0 auto;
}
.nf-ingredient { text-align: center; }
.nf-ingredient__icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--nf-cream);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 18px rgba(201,40,93,0.18);
}
.nf-ingredient__name {
  font-family: var(--nf-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--nf-cream);
  margin: 0 0 4px;
}
.nf-ingredient__kind {
  font-size: 11px;
  color: rgba(250,244,236,0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
}
.nf-ingredient__benefit {
  font-size: 12px;
  color: rgba(250,244,236,0.8);
  line-height: 1.4;
  margin: 0;
}
.nf-ingredients__note {
  text-align: center;
  margin-top: 30px;
  font-size: 11px;
  color: rgba(250,244,236,0.45);
  font-style: italic;
}

/* Mobile responsiveness for §2 + §3 */
@media (max-width: 880px) {
  .nf-problem { padding: 60px 22px; }
  .nf-problem__grid { grid-template-columns: 1fr 1fr; }
  .nf-anatomy__diagram {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .nf-anatomy__callouts-left,
  .nf-anatomy__callouts-right { align-items: center; text-align: center; }
  .nf-anatomy__callouts-left .nf-callout,
  .nf-anatomy__callouts-right .nf-callout { align-items: center; }
  .nf-anatomy__svg { margin: 12px auto; }
  .nf-science { padding: 60px 22px; }
  .nf-science__grid { grid-template-columns: 1fr; gap: 36px; }
  .nf-ingredients__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 520px) {
  .nf-problem__grid { grid-template-columns: 1fr; }
  .nf-ingredients__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   §4 PRODUCTS (cream bg)
   ============================================================ */

.nf-products {
  background: var(--nf-cream);
  padding: 80px 32px;
}
.nf-products__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
}
.nf-products__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.nf-product-card {
  background: var(--nf-cream);
  border: 1px solid rgba(92,58,30,0.12);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--nf-ink) !important;
  transition: transform 0.15s, box-shadow 0.15s;
  display: block;
}
.nf-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(42,24,16,0.1);
}
.nf-product-card__image {
  aspect-ratio: 5/4;
  background: linear-gradient(135deg, #F3EAD7, #E8D9BC);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nf-product-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.nf-product-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
}
.nf-product-card__body {
  padding: 24px;
}
.nf-product-card__body h4 {
  font-family: var(--nf-sans) !important;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--nf-ink);
  letter-spacing: -0.01em;
}
.nf-product-card__tagline {
  font-family: var(--nf-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--nf-brown);
  margin: 0 0 18px;
}
.nf-product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.nf-product-card__tag {
  padding: 4px 10px;
  background: var(--nf-red-soft);
  color: var(--nf-red);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
}
.nf-product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.nf-product-card__price {
  font-family: var(--nf-serif);
  font-style: italic;
  color: var(--nf-red);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}
.nf-product-card__price-old {
  color: rgba(92,58,30,0.4);
  text-decoration: line-through;
  font-size: 14px;
}
.nf-product-card__save {
  background: var(--nf-red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 4px;
  letter-spacing: 0.4px;
}
.nf-product-card__cta {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 8px;
  background: var(--nf-red);
  color: white !important;
  box-shadow: 0 6px 18px rgba(201,40,93,0.28);
  box-sizing: border-box;
}

/* ============================================================
   §5 CONSULTATION (cream-2 bg)
   ============================================================ */

.nf-consult {
  background: var(--nf-cream-2);
  padding: 80px 32px;
}
.nf-consult__intro {
  text-align: center;
  margin: 0 auto 50px;
  max-width: 720px;
}
.nf-consult__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 920px;
  margin: 0 auto;
  align-items: center;
}
.nf-consult__team {
  text-align: center;
}
.nf-consult__team-eyebrow {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nf-red);
  margin-bottom: 14px;
}
.nf-consult__avatars {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
}
.nf-consult__avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 3px solid var(--nf-cream-2);
  box-shadow: 0 6px 18px rgba(42,24,16,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(250,244,236,0.6);
  font-size: 11px;
  font-style: italic;
  margin-right: -14px;
  position: relative;
}
.nf-consult__avatar:nth-child(1) { background: linear-gradient(135deg, #D4B888, #8B6B45); z-index: 4; }
.nf-consult__avatar:nth-child(2) { background: linear-gradient(135deg, #C9A878, #7A5638); z-index: 3; }
.nf-consult__avatar:nth-child(3) { background: linear-gradient(135deg, #B89968, #5C3A1E); z-index: 2; }
.nf-consult__avatar:nth-child(4) { background: linear-gradient(135deg, #8B6B45, #3E2410); z-index: 1; margin-right: 0; }
.nf-consult__roster {
  font-size: 12px;
  color: var(--nf-brown);
  line-height: 1.6;
  margin-bottom: 24px;
}
.nf-consult__roster strong { color: var(--nf-ink); }
.nf-consult__benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
  text-align: left;
}
.nf-consult__benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--nf-ink);
}
.nf-consult__benefit::before {
  content: "✓";
  color: var(--nf-red);
  font-weight: 800;
}
.nf-consult__form {
  background: var(--nf-cream);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(42,24,16,0.08);
  border: 1px solid rgba(92,58,30,0.1);
}
.nf-consult__form-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nf-consult__field label {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nf-brown);
  display: block;
  margin-bottom: 5px;
}
.nf-consult__field input,
.nf-consult__field select,
.nf-consult__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(92,58,30,0.18);
  border-radius: 7px;
  background: var(--nf-cream-2);
  font-family: var(--nf-sans) !important;
  font-size: 14px;
  color: var(--nf-ink);
  box-sizing: border-box;
}
.nf-consult__field textarea {
  min-height: 80px;
  resize: vertical;
}
.nf-consult__field input:focus,
.nf-consult__field select:focus,
.nf-consult__field textarea:focus {
  outline: 2px solid rgba(201,40,93,0.3);
  outline-offset: 0;
  border-color: var(--nf-red);
}
.nf-consult__submit {
  margin-top: 6px;
  padding: 14px 26px;
  font-family: var(--nf-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 8px;
  background: var(--nf-red);
  color: white;
  border: none;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 6px 18px rgba(201,40,93,0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nf-consult__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(201,40,93,0.35);
}
.nf-consult__privacy {
  font-size: 11px;
  color: var(--nf-brown);
  text-align: center;
  margin: 4px 0 0;
  opacity: 0.75;
}

/* ============================================================
   §6 TESTIMONIALS (cream bg)
   ============================================================ */

.nf-testimonials {
  background: var(--nf-cream);
  padding: 80px 32px;
}
.nf-testimonials__intro {
  text-align: center;
  margin: 0 auto 50px;
  max-width: 720px;
}
.nf-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.nf-testimonial {
  background: var(--nf-cream);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(92,58,30,0.12);
}
.nf-testimonial__stars {
  color: var(--nf-red);
  font-size: 14px;
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.nf-testimonial blockquote {
  font-family: var(--nf-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--nf-ink);
  margin: 0 0 18px;
}
.nf-testimonial__author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nf-testimonial__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D4B888, #8B6B45);
  flex-shrink: 0;
}
.nf-testimonial__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--nf-ink);
  margin: 0;
}
.nf-testimonial__role {
  font-size: 11px;
  color: var(--nf-brown);
  margin: 0;
}

/* ============================================================
   §7 TRUST (cream-2 bg) — Media bar + Ecommerce platforms
   ============================================================ */

.nf-trust {
  background: var(--nf-cream-2);
  padding: 80px 32px;
}
.nf-trust__intro,
.nf-trust__intro-2 {
  text-align: center;
  margin-bottom: 30px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.nf-trust__media-bar {
  display: flex;
  gap: 32px;
  padding: 28px 32px;
  background: var(--nf-cream);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
}
.nf-trust__media-logo {
  padding: 10px 20px;
  background: rgba(92,58,30,0.08);
  border-radius: 6px;
  font-size: 14px;
  font-style: italic;
  color: var(--nf-brown);
  font-weight: 600;
}
.nf-trust__platforms-head {
  text-align: center;
  margin-top: 70px;
  margin-bottom: 36px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.nf-trust__platforms-head h3 {
  font-family: var(--nf-sans) !important;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--nf-ink);
  letter-spacing: -0.01em;
}
.nf-trust__platforms-head .nf-trust__bignum {
  font-family: var(--nf-serif);
  font-style: italic;
  color: var(--nf-red);
  font-weight: 500;
  font-size: 32px;
}
.nf-trust__platforms-head p {
  font-size: 14px;
  color: var(--nf-brown);
  margin: 0;
}
.nf-trust__platforms {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.nf-trust__platform {
  padding: 12px 22px;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.nf-trust__platform--shopee   { background: #EE4D2D; box-shadow: 0 6px 18px rgba(238,77,45,0.18); }
.nf-trust__platform--lazada   { background: #0F1B6C; box-shadow: 0 6px 18px rgba(15,27,108,0.18); }
.nf-trust__platform--tiktok   { background: #000;    box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.nf-trust__platform--carousell{ background: #0FA791; box-shadow: 0 6px 18px rgba(15,167,145,0.18); }
.nf-trust__platform--atome    { background: #00CCBC; box-shadow: 0 6px 18px rgba(0,204,188,0.18); }
.nf-trust__note {
  text-align: center;
  margin-top: 22px;
  font-size: 11px;
  color: var(--nf-brown);
  opacity: 0.6;
  font-style: italic;
}

/* ============================================================
   §8 AWARDS (cream bg)
   ============================================================ */

.nf-awards {
  background: var(--nf-cream);
  padding: 80px 32px;
}
.nf-awards__intro {
  text-align: center;
  margin: 0 auto 50px;
  max-width: 720px;
}
.nf-awards__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.nf-award {
  background: var(--nf-cream);
  border: 1.5px solid var(--nf-red);
  border-radius: 12px;
  padding: 22px 14px;
  text-align: center;
}
.nf-award__icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.nf-award h5 {
  font-family: var(--nf-serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
  color: var(--nf-red);
  margin: 0 0 4px;
  line-height: 1.2;
}
.nf-award p {
  font-size: 10px;
  color: var(--nf-brown);
  margin: 0;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ============================================================
   Mobile responsiveness for §4–§8
   ============================================================ */

@media (max-width: 880px) {
  .nf-products, .nf-consult, .nf-testimonials, .nf-trust, .nf-awards { padding: 60px 22px; }
  .nf-products__grid { grid-template-columns: 1fr; max-width: 480px; }
  .nf-consult__grid { grid-template-columns: 1fr; gap: 36px; max-width: 480px; }
  .nf-testimonials__grid { grid-template-columns: 1fr 1fr; }
  .nf-awards__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 520px) {
  .nf-testimonials__grid { grid-template-columns: 1fr; }
  .nf-awards__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   §9 NEWSLETTER (dark ink bg) + Footer + form polish
   ============================================================ */

/* Hide Blocksy's default footer on the home page only */
body.home .site-footer,
body.home .ct-footer { display: none !important; }

/* Form input fix — Plan 4 had transparent inputs because Blocksy
   overrode our background rule. !important wins the cascade. */
.nf-consult__field input,
.nf-consult__field select,
.nf-consult__field textarea {
  background: var(--nf-cream-2) !important;
}

/* Success/error banner shown after form submission */
.nf-consult__result {
  text-align: center;
  padding: 14px 20px;
  border-radius: 8px;
  margin: 0 auto 24px;
  max-width: 920px;
  font-size: 14px;
  font-weight: 600;
  display: none;
}
.nf-consult__result.is-visible { display: block; }
.nf-consult__result--sent {
  background: var(--nf-cream);
  color: var(--nf-brown);
  border: 1px solid rgba(92,58,30,0.2);
}
.nf-consult__result--err {
  background: var(--nf-red-soft);
  color: var(--nf-red);
  border: 1px solid rgba(201,40,93,0.25);
}

/* §9 NEWSLETTER */
.nf-newsletter {
  background: var(--nf-ink);
  color: var(--nf-cream);
  padding: 70px 32px;
  text-align: center;
}
.nf-newsletter__eyebrow {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nf-red);
  font-weight: 700;
  margin-bottom: 12px;
}
.nf-newsletter h2 {
  font-family: var(--nf-sans) !important;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: var(--nf-cream);
}
.nf-newsletter h2 .nf-accent { color: var(--nf-red); }
.nf-newsletter p {
  font-size: 15px;
  color: rgba(250,244,236,0.7);
  margin: 0 auto 30px;
  max-width: 480px;
}
.nf-newsletter__form {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.nf-newsletter__form input {
  flex: 1;
  min-width: 200px;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid rgba(250,244,236,0.2);
  background: rgba(250,244,236,0.06);
  color: var(--nf-cream);
  font-family: var(--nf-sans) !important;
  font-size: 14px;
}
.nf-newsletter__form input::placeholder { color: rgba(250,244,236,0.4); }
.nf-newsletter__form input:focus {
  outline: 2px solid rgba(201,40,93,0.4);
  border-color: var(--nf-red);
}
.nf-newsletter__form button {
  padding: 14px 24px;
  border-radius: 8px;
  border: none;
  background: var(--nf-red);
  color: white;
  font-family: var(--nf-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(201,40,93,0.28);
}

/* Footer */
.nf-footer {
  background: var(--nf-cream);
  padding: 60px 32px 30px;
  border-top: 1px solid rgba(92,58,30,0.12);
}
.nf-footer__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto 40px;
}
.nf-footer__brand .nf-footer__logo {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--nf-red);
  margin-bottom: 12px;
}
.nf-footer__brand p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--nf-brown);
  max-width: 280px;
  margin: 0 0 18px;
}
.nf-footer__social {
  display: flex;
  gap: 10px;
}
.nf-footer__social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nf-cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--nf-brown) !important;
  text-decoration: none !important;
  font-weight: 700;
}
.nf-footer__col h6 {
  font-family: var(--nf-sans) !important;
  font-size: 11px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--nf-ink);
  font-weight: 800;
  margin: 0 0 16px;
}
.nf-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nf-footer__col li {
  font-size: 13px;
  margin-bottom: 10px;
}
.nf-footer__col a {
  color: var(--nf-brown) !important;
  text-decoration: none !important;
}
.nf-footer__col a:hover { color: var(--nf-red) !important; }
.nf-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(92,58,30,0.1);
  font-size: 11px;
  color: var(--nf-brown);
  max-width: 1180px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 16px;
}
.nf-footer__pay {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.nf-footer__pay-icon {
  padding: 4px 8px;
  background: var(--nf-cream-2);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--nf-brown);
  letter-spacing: 0.4px;
}

/* Mobile responsiveness for §9 + Footer */
@media (max-width: 880px) {
  .nf-newsletter { padding: 50px 22px; }
  .nf-footer { padding: 50px 22px 24px; }
  .nf-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .nf-footer__brand { grid-column: 1 / -1; }
  .nf-footer__bottom { flex-direction: column; gap: 12px; }
}
@media (max-width: 520px) {
  .nf-footer__cols { grid-template-columns: 1fr; }
}


/* ============================================================
   FULL-BLEED CREAM (1.0.7)
   ============================================================ */

html, body, body.home, body.page-id-42 { background: var(--nf-cream) !important; }

header.ct-header div, header#header div,
header.ct-header [class*="ct-container"], #main-container, #main, main.site-main,
.ct-container, .ct-container-full, .ct-container-narrow, article.page,
.entry-content, .entry-content.is-layout-constrained {
  background: transparent !important; background-color: transparent !important;
}

.site-title, .site-title-container,
body.page-id-42 .entry-header, body.page-id-42 .ct-page-title,
body.page-id-42 header.entry-header, body.page-id-42 .post-42 > header { display: none !important; }

body.page-id-42 .ct-container-full { padding-top: 0 !important; padding-bottom: 0 !important; }

.nf-hero, .nf-asseenon, .nf-stats, .nf-problem, .nf-science, .nf-products, .nf-consult,
.nf-testimonials, .nf-trust, .nf-awards, .nf-newsletter, .nf-footer {
  width: 100vw !important; margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important; max-width: 100vw !important;
}


/* Seamless flow: drop the faint brown dividers and unify cream tones */
.nf-stats { border-top: 0 !important; }
.nf-hero { margin-bottom: 0 !important; }


/* ============================================================
   HEADER LOGO (1.0.9) — Nattoflux wordmark
   The square-cropped source has whitespace around the wordmark,
   so we display larger than the typical 40-50px to make the
   wordmark itself read at ~30px tall.
   ============================================================ */

.site-logo-container img,
img.default-logo,
img.custom-logo,
.ct-site-logo img,
header.ct-header img.default-logo,
header.ct-sticky-header img.default-logo,
.ct-sticky-header img {
  width: auto !important;
  height: 130px !important;
  max-height: 130px !important;
  max-width: 320px !important;
  object-fit: contain !important;
}

.site-logo-container,
.ct-site-logo {
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
  max-height: 80px !important;
}

#main-container { overflow: visible !important; }
html { overflow-x: clip !important; overflow-y: visible !important; }
body { overflow-x: clip !important; overflow-y: visible !important; }

header.ct-header,
body.home header.ct-header,
body.page-id-42 header.ct-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #FAF4EC !important;
  background-color: #FAF4EC !important;
  box-shadow: 0 1px 0 rgba(92, 58, 30, 0.06);
}

body.admin-bar header.ct-header { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar header.ct-header { top: 46px !important; }
}

header.ct-header [data-row="middle"],
header.ct-header [data-id="middle"] {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
}


/* ============================================================
   HERO GALLERY (1.0.16) — 3-photo crossfade background
   ============================================================ */

.nf-hero__bg--gallery {
  position: absolute; inset: 0; overflow: hidden;
  --nf-photo-1: url("https://navicare.my/wp-content/uploads/2026/05/nattoflux_herosection_1.png");
  --nf-photo-2: url("https://navicare.my/wp-content/uploads/2026/05/nattoflux_herosection_2.png");
}
.nf-hero__bg--gallery .nf-hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.nf-hero__bg--gallery .nf-hero__slide.is-active { opacity: 1; }
.nf-hero__bg--gallery .nf-hero__slide--1 {
  background-image: var(--nf-photo-1,
    radial-gradient(ellipse at 75% 35%, rgba(255,220,180,0.7) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(201,40,93,0.18) 0%, transparent 55%),
    linear-gradient(120deg, #D4B888 0%, #B89968 40%, #8B6B45 100%)
  );
}
.nf-hero__bg--gallery .nf-hero__slide--2 {
  background-image: var(--nf-photo-2,
    radial-gradient(ellipse at 30% 60%, rgba(201,40,93,0.18) 0%, transparent 50%),
    linear-gradient(120deg, #C8A878 0%, #A88858 40%, #785B35 100%)
  );
}
.nf-hero__bg--gallery .nf-hero__slide--3 {
  animation-delay: 16s;
  background-image: var(--nf-photo-3,
    radial-gradient(ellipse at 60% 40%, rgba(250,244,236,0.6) 0%, transparent 50%),
    linear-gradient(120deg, #E0C898 0%, #C8A878 40%, #8B6B45 100%)
  );
}
.nf-hero__bg--gallery .nf-hero__slide--3 { display: none; }
  33%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

.nf-hero__content {
  grid-template-columns: 1.3fr 1fr !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 60px 32px !important;
}
.nf-hero__content .nf-hero__text { max-width: 560px !important; }

/* ============================================================
   STATS ROW (1.0.16) — 5 cards with counter animation
   ============================================================ */

.nf-stats {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  padding: 36px 24px !important;
  background: var(--nf-cream) !important;
}
.nf-stat { text-align: center; padding: 12px 16px; border-right: 1px solid rgba(92, 58, 30, 0.12); }
.nf-stat:last-child { border-right: 0; }
.nf-stat__num {
  font-family: var(--nf-serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  color: var(--nf-red);
  line-height: 1;
  margin-bottom: 8px;
  display: inline-block;
  transition: transform 0.3s;
}
.nf-stat__num[data-nf-counted="yes"] { animation: nfStatPop 0.4s ease-out; }
@keyframes nfStatPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.nf-stat__lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--nf-brown);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .nf-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 0 !important; }
  .nf-stat { border-right: 0; border-bottom: 1px solid rgba(92, 58, 30, 0.12); padding-bottom: 16px; }
  .nf-stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 520px) {
  .nf-stats { grid-template-columns: 1fr !important; }
  .nf-stat { border-right: 0; border-bottom: 1px solid rgba(92, 58, 30, 0.12); }
  .nf-stat:last-child { border-bottom: 0; }
}


/* ============================================================
   SCROLL REVEAL (1.0.19) — cascading fade-up animation
   ============================================================ */

[data-nf-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-nf-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-nf-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ============================================================
   ANATOMY DIAGRAM (1.0.21) — replace inline SVG + callouts
   with a single illustrated infographic that already has
   labels, descriptions, legend and tagline baked in.
   ============================================================ */

.nf-anatomy--image {
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 0 32px;
}
/* No outer frame — infographic already has its own framed bg */
.nf-anatomy__figure {
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.nf-anatomy__img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 720px) {
  .nf-anatomy--image { padding: 0 16px; }
}

/* ============================================================
   §5 SCIENCE (1.0.23) — patented ingredients + lab photo
   ============================================================ */

.nf-science__container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.nf-science__head { text-align: center; margin-bottom: 56px; }
.nf-science__head .nf-eyebrow--red { color: var(--nf-red); margin-bottom: 14px; }
.nf-science__head h2 { font-size: clamp(32px, 4vw, 52px); margin: 0 0 16px; color: var(--nf-cream); }
.nf-science__head .nf-lede { color: rgba(250,244,236,0.7); font-size: 17px; max-width: 640px; margin: 0 auto; }

.nf-science__grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 56px;
}

.nf-stats--dark {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px 20px !important;
  padding: 0 !important;
  background: transparent !important;
}
.nf-stats--dark .nf-stat { text-align: left; border-right: 0; border-bottom: 0; padding: 0; }
.nf-stats--dark .nf-stat__num { font-size: clamp(36px, 4vw, 52px); color: var(--nf-red); margin-bottom: 6px; }
.nf-stats--dark .nf-stat__lbl { color: rgba(250,244,236,0.7); font-size: 12px; letter-spacing: 0.4px; }

.nf-science__body h3 {
  font-family: var(--nf-sans) !important;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  color: var(--nf-cream);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.nf-science__body > p { color: rgba(250,244,236,0.75); font-size: 15px; line-height: 1.7; margin: 0 0 28px; max-width: 540px; }

.nf-ingredient { position: relative; padding: 22px 24px; margin-bottom: 18px; background: rgba(250,244,236,0.04); border: 1px solid rgba(250,244,236,0.1); border-radius: 12px; }
.nf-ingredient__badge { display: inline-block; padding: 4px 10px; background: var(--nf-red); color: white; font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; border-radius: 999px; margin-bottom: 10px; }
.nf-ingredient__name { font-family: var(--nf-sans) !important; font-size: 22px; font-weight: 800; color: var(--nf-cream); margin: 0 0 10px; letter-spacing: -0.01em; }
.nf-ingredient p { color: rgba(250,244,236,0.78); font-size: 14px; line-height: 1.65; margin: 0 0 10px; }
.nf-ingredient p:last-child { margin-bottom: 0; }
.nf-ingredient__cite { font-size: 12px !important; color: rgba(250,244,236,0.5) !important; font-style: italic; }

.nf-cta-secondary--light { color: var(--nf-cream) !important; border-bottom-color: var(--nf-cream) !important; }

.nf-science__lab { margin: 16px 0 0; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.nf-science__lab img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .nf-science__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 520px) {
  .nf-stats--dark { grid-template-columns: 1fr !important; gap: 18px !important; }
}

/* (1.0.24) §5 — vertical 3-stat stack + lab in left column */
.nf-science .nf-stats--vertical, .nf-stats.nf-stats--vertical { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 28px; }
.nf-science__stats-col { display: flex; flex-direction: column; gap: 0; }
.nf-science__stats-col .nf-science__lab {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
}
.nf-science__stats-col .nf-science__lab img { display: block; width: 100%; height: auto; }


/* §5 stats stay inside their column, not full-bleed (1.0.24) */
.nf-science .nf-stats { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }


/* §5 5-ingredient mini cards (1.0.26) — restore original icon+name+kind+benefit
   look. Overrides the patented-card box styling. */
.nf-ingredient--mini {
  position: static !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
}
.nf-ingredient--mini .nf-ingredient__icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--nf-cream);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 6px 18px rgba(201,40,93,0.18);
}
.nf-ingredient--mini .nf-ingredient__name {
  font-family: var(--nf-serif) !important;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--nf-cream);
  margin: 0 0 4px;
  letter-spacing: 0;
}
.nf-ingredient--mini .nf-ingredient__kind {
  font-size: 10px !important;
  color: rgba(250,244,236,0.55) !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 8px;
  font-style: normal;
}
.nf-ingredient--mini .nf-ingredient__benefit {
  font-size: 12px !important;
  color: rgba(250,244,236,0.78) !important;
  line-height: 1.45;
  margin: 0;
  font-style: normal;
}

.nf-ingredients {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(250,244,236,0.12);
}
.nf-ingredients__head { text-align: center; margin-bottom: 36px; }
.nf-ingredients__title {
  font-family: var(--nf-sans) !important;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  color: var(--nf-cream);
  margin: 0;
  letter-spacing: -0.005em;
}
.nf-ingredients__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.nf-ingredients__note {
  text-align: center;
  margin-top: 28px;
  font-size: 11px;
  color: rgba(250,244,236,0.45);
  font-style: italic;
  letter-spacing: 0.3px;
}
@media (max-width: 720px) {
  .nf-ingredients__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
}
@media (max-width: 420px) {
  .nf-ingredients__grid { grid-template-columns: 1fr; }
}

/* (1.0.27) §5 — 2-col × 3-row stats grid + citation link styling */
.nf-science .nf-stats--two-col, .nf-stats.nf-stats--two-col {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px 28px !important;
  margin-bottom: 28px;
}
.nf-ingredient__cite a {
  color: rgba(250,244,236,0.7) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted rgba(250,244,236,0.35);
  transition: color 0.2s, border-color 0.2s;
}
.nf-ingredient__cite a:hover {
  color: var(--nf-cream) !important;
  border-bottom-color: var(--nf-cream);
}


/* (1.0.28) §5 ingredient photos — round-mask the uploaded images */
.nf-ingredient__icon--photo {
  background: transparent !important;
  padding: 0;
  overflow: hidden;
  width: 96px !important;
  height: 96px !important;
}
.nf-ingredient__icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
  transition: transform 0.4s ease-out;
}
.nf-ingredient--mini:hover .nf-ingredient__icon--photo img { transform: scale(1.06); }


/* (1.0.29) §6 PRODUCT CARDS — multi-badge row, 3-slide gallery, dot nav, sold pill */
.nf-product-card__badges { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; z-index: 2; flex-wrap: wrap; max-width: calc(100% - 32px); }
.nf-pill--brown { background: var(--nf-brown) !important; color: var(--nf-cream) !important; }
.nf-pill--red { background: var(--nf-red) !important; color: white !important; }
.nf-pill--sm { padding: 3px 8px !important; font-size: 9px !important; }
.nf-product-card__gallery { position: relative; width: 100%; height: 100%; }
.nf-product-card__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease-in-out; }
.nf-product-card__slide.is-active { opacity: 1; }
.nf-product-card__dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 2; }
.nf-product-card__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(92, 58, 30, 0.25); padding: 0; cursor: pointer; transition: background 0.25s, transform 0.25s; }
.nf-product-card__dot:hover { background: rgba(92, 58, 30, 0.45); }
.nf-product-card__dot.is-active { background: var(--nf-red); transform: scale(1.2); }
.nf-product-card__meta { margin: 12px 0 0; }
.nf-sold-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(201, 40, 93, 0.08); color: var(--nf-red); font-size: 12px; font-weight: 700; letter-spacing: 0.3px; }
.nf-sold-pill__icon { display: inline-flex; font-size: 13px; filter: saturate(1.2); }
.nf-product-card__tags { margin-top: 12px; }
.nf-product-card__cta { display: block; margin-top: 18px; padding: 12px 18px; background: var(--nf-red); color: white; text-align: center; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.nf-product-card:hover .nf-product-card__cta { background: #B22154; transform: translateY(-1px); }

/* (1.0.30) §6 PRODUCT GRID — 3-card layout + price strikethrough + fire-emoji pill */
.nf-products__grid { grid-template-columns: repeat(3, 1fr) !important; max-width: 1280px !important; gap: 24px !important; }
.nf-product-card__price .nf-price-old { color: rgba(92, 58, 30, 0.4); text-decoration: line-through; font-size: 16px; font-family: var(--nf-sans); font-style: normal; font-weight: 400; margin-left: 6px; }
.nf-pill--with-icon { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.nf-pill__emoji { font-size: 12px; line-height: 1; }
@media (max-width: 1100px) { .nf-products__grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 920px !important; } }
@media (max-width: 720px) { .nf-products__grid { grid-template-columns: 1fr !important; max-width: 480px !important; } }

/* (1.0.31) §7 team avatar photos — round-mask the uploaded headshots */
.nf-consult__avatar--photo {
  background: transparent !important;
  color: transparent !important;
  padding: 0 !important;
  overflow: hidden;
}
.nf-consult__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 50%;
  transition: transform 0.35s ease-out;
}
.nf-consult__avatar--photo:hover img { transform: scale(1.08); }


/* (1.0.32) § TRUST CREATORS — 5-up 9:16 video grid + platform logos */
.nf-creators-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; max-width: 1180px; margin: 0 auto 48px; padding: 0 32px; }
.nf-creator-tile { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, var(--nf-cream-2) 0%, var(--nf-cream-3) 100%); box-shadow: 0 14px 32px rgba(92, 58, 30, 0.12); cursor: pointer; transition: transform 0.35s ease-out, box-shadow 0.35s ease-out; }
.nf-creator-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(92, 58, 30, 0.2); }
.nf-creator-tile__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-creator-tile__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--nf-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--nf-brown); opacity: 0.55; pointer-events: none; padding: 16px; }
.nf-creator-tile:has(video[src]) .nf-creator-tile__placeholder { display: none; }
.nf-creator-tile__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(42, 24, 16, 0.55) 100%); opacity: 0; transition: opacity 0.25s; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px; pointer-events: none; }
.nf-creator-tile:hover .nf-creator-tile__overlay { opacity: 1; }
.nf-creator-tile__play { width: 44px; height: 44px; background: rgba(250, 244, 236, 0.95); color: var(--nf-red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; padding-left: 3px; }
.nf-platforms { text-align: center; padding: 28px 32px 0; }
.nf-platforms__label { font-family: var(--nf-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--nf-brown); opacity: 0.65; margin: 0 0 18px; }
.nf-platforms__row { display: flex; justify-content: center; align-items: center; gap: 36px; flex-wrap: wrap; }
.nf-platforms__logo { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 10px; font-family: var(--nf-sans); font-size: 15px; font-weight: 800; letter-spacing: 0.5px; text-decoration: none !important; color: white !important; transition: transform 0.2s, box-shadow 0.2s; min-width: 120px; }
.nf-platforms__logo:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
.nf-platforms__logo--lazada { background: #0F146D; }
.nf-platforms__logo--shopee { background: #EE4D2D; }
.nf-platforms__logo--tiktok { background: #000; }
@media (max-width: 900px) { .nf-creators-grid { grid-template-columns: repeat(3, 1fr); } .nf-creator-tile:nth-child(n+4) { display: none; } }
@media (max-width: 560px) { .nf-creators-grid { grid-template-columns: repeat(2, 1fr); } }

/* (1.0.33) Creator-tile placeholder hides when a <source src> is present */
.nf-creator-tile:has(source[src]) .nf-creator-tile__placeholder { display: none; }
.nf-creator-tile:has(source[src]) .nf-creator-tile__video { z-index: 2; }


/* (1.0.34) Creator tile play-button — visible by default since videos are click-to-play */
.nf-creator-tile__overlay { opacity: 1 !important; background: linear-gradient(180deg, transparent 50%, rgba(42,24,16,0.65) 100%) !important; }
.nf-creator-tile.is-playing .nf-creator-tile__overlay { opacity: 0 !important; }
.nf-creator-tile.is-playing:hover .nf-creator-tile__overlay { opacity: 1 !important; }
.nf-creator-tile__play { box-shadow: 0 6px 18px rgba(0,0,0,0.25); }


/* (1.0.35) "Plus 1,000+ more" creator social-proof line (replaces e-commerce platform pills) */
.nf-creators-more { text-align: center; padding: 28px 32px 0; }
.nf-creators-more__count { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-bottom: 12px; }
.nf-creators-more__num { font-family: var(--nf-serif); font-style: italic; font-size: clamp(42px, 5vw, 64px); font-weight: 600; color: var(--nf-red); line-height: 1; letter-spacing: -0.02em; }
.nf-creators-more__plus { font-family: var(--nf-sans); font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; color: var(--nf-brown); text-transform: uppercase; letter-spacing: 1.5px; }
.nf-creators-more__label { font-family: var(--nf-sans); font-size: 14px; color: var(--nf-brown); opacity: 0.78; max-width: 560px; margin: 0 auto; line-height: 1.55; }

/* (1.0.36) §Certifications — logo cards (renamed from Awards) */
.nf-awards--certs .nf-awards__grid { grid-template-columns: repeat(5, 1fr) !important; max-width: 1180px; gap: 18px; }
.nf-cert {
  background: rgba(250, 244, 236, 0.6);
  border: 1px solid rgba(92, 58, 30, 0.1);
  border-radius: 14px;
  padding: 22px 16px 18px;
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.nf-cert:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(92, 58, 30, 0.12); border-color: rgba(201, 40, 93, 0.25); }
.nf-cert__logo {
  width: 96px; height: 96px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: white;
  border: 1px dashed rgba(92, 58, 30, 0.18);
  overflow: hidden;
}
.nf-cert__logo img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px; }
.nf-cert__placeholder { font-size: 10px; color: rgba(92,58,30,0.45); font-style: italic; letter-spacing: 0.3px; }
.nf-cert h5 {
  font-family: var(--nf-sans) !important;
  font-size: 13px; font-weight: 700;
  color: var(--nf-ink); margin: 0 0 4px; letter-spacing: -0.005em;
}
.nf-cert p { font-size: 11px; color: var(--nf-brown); opacity: 0.7; margin: 0; line-height: 1.4; }
@media (max-width: 900px) { .nf-awards--certs .nf-awards__grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 520px) { .nf-awards--certs .nf-awards__grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* (1.0.37) §Cert grid — 3-up variant for the 3 logos Scott uploaded, bigger logos */
.nf-awards--3up .nf-awards__grid { grid-template-columns: repeat(3, 1fr) !important; max-width: 880px !important; gap: 20px !important; }
.nf-awards--3up .nf-cert__logo { width: 140px; height: 140px; }
.nf-awards--3up .nf-cert h5 { font-size: 15px; margin-top: 4px; }
.nf-awards--3up .nf-cert p { font-size: 12px; }
@media (max-width: 720px) { .nf-awards--3up .nf-awards__grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 520px !important; } }
@media (max-width: 460px) { .nf-awards--3up .nf-awards__grid { grid-template-columns: 1fr !important; max-width: 320px !important; } }

/* (1.0.38) Strip white box + dashed border around cert logos */
.nf-cert__logo {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.nf-cert__logo img { padding: 0 !important; }


/* (1.0.39) Footer polish — SVG social icons + branded payment badges */

/* Social icons with brand-on-hover treatment */
.nf-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(92, 58, 30, 0.08); color: var(--nf-brown) !important; transition: background 0.2s, color 0.2s, transform 0.2s; text-decoration: none !important; }
.nf-social-icon svg { width: 18px; height: 18px; }
.nf-social-icon:hover { transform: translateY(-2px); color: white !important; }
.nf-social-icon--ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.nf-social-icon--fb:hover { background: #1877F2; }
.nf-social-icon--tt:hover { background: #000; }
.nf-social-icon--yt:hover { background: #FF0000; }

/* Payment-method badges — brand colored pills */
.nf-footer__pay { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nf-pay-badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; color: white; font-family: var(--nf-sans); line-height: 1; }
.nf-pay-badge--visa     { background: #1A1F71; }
.nf-pay-badge--mc       { background: #EB001B; }
.nf-pay-badge--fpx      { background: #2E2E2E; }
.nf-pay-badge--grab     { background: #00B14F; }
.nf-pay-badge--tng      { background: #0066CC; }
.nf-pay-badge--boost    { background: #EE2737; }
.nf-pay-badge--duitnow  { background: #ED1C24; }

/* (1.0.40) Payment row v2 — 8 brand wordmark badges (white mini-card aesthetic).
   Brand-name text in signature brand colors; for pixel-perfect official logos
   swap in uploaded merchant-kit images later. */
.nf-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  background: white;
  border: 1px solid rgba(92, 58, 30, 0.14);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  font-family: var(--nf-sans);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
}
.nf-pay[data-pay="visa"]    { color: #1A1F71; font-style: italic; letter-spacing: 0.6px; font-weight: 900; }
.nf-pay[data-pay="mc"]      { color: #EB001B; }
.nf-pay[data-pay="fpx"]     { color: #003D7A; }
.nf-pay[data-pay="duitnow"] { color: #ED1C24; }
.nf-pay[data-pay="grab"]    { color: #00B14F; }
.nf-pay[data-pay="shopee"]  { color: #EE4D2D; }
.nf-pay[data-pay="atome"]   { color: #FF4081; text-transform: lowercase; letter-spacing: 0.5px; }
.nf-pay[data-pay="tng"]     { color: #006FA9; }


/* Mobile sticky-header overlap fix - push anchor scrolls past sticky logo bar */
html { scroll-padding-top: 80px; }
@media (min-width: 900px) { html { scroll-padding-top: 100px; } }


/* ====================================================================
   (1.0.42) SHOP-ARCHIVE-OVERHAUL
   Apply Nattoflux brand UI to /shop/ + product cards
   ==================================================================== */

/* Page bg: cream */
body.woocommerce.archive,
body.woocommerce-page.archive,
body.archive.post-type-archive-product,
body.tax-product_cat {
  background: var(--nf-cream) !important;
}
body.archive.post-type-archive-product .site-main,
body.archive.post-type-archive-product .content-area,
body.archive.post-type-archive-product main {
  background: var(--nf-cream) !important;
}

/* Page header: hide default gray banner, replace with cream brand header */
body.archive.post-type-archive-product .ct-page-title-banner,
body.archive.post-type-archive-product .page-header-banner,
body.archive.post-type-archive-product .entry-header {
  background: var(--nf-cream) !important;
  padding: 60px 20px 20px !important;
  text-align: center;
  border-bottom: 0 !important;
}
body.archive.post-type-archive-product .ct-page-title,
body.archive.post-type-archive-product .entry-title,
body.archive.post-type-archive-product h1 {
  font-family: var(--nf-serif) !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  color: var(--nf-ink) !important;
  font-weight: 800 !important;
  margin: 0 !important;
  letter-spacing: -0.015em !important;
}

/* Result count + sorting */
.woocommerce-result-count {
  font-family: var(--nf-sans) !important;
  color: var(--nf-brown) !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  opacity: 0.7;
}
.woocommerce-ordering select {
  font-family: var(--nf-sans) !important;
  font-size: 13px !important;
  border-radius: 999px !important;
  padding: 8px 30px 8px 14px !important;
  border: 1px solid rgba(92, 58, 30, 0.18) !important;
  background-color: white !important;
  color: var(--nf-brown) !important;
}

/* Product cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: white !important;
  border-radius: 16px !important;
  padding: 16px 16px 20px !important;
  box-shadow: 0 4px 20px rgba(92, 58, 30, 0.06) !important;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid rgba(92, 58, 30, 0.06);
  position: relative;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(92, 58, 30, 0.12) !important;
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  border-radius: 10px !important;
  background: #FAF3EA !important;
  margin-bottom: 12px !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--nf-serif) !important;
  font-size: 22px !important;
  color: var(--nf-ink) !important;
  font-weight: 800 !important;
  padding: 8px 0 4px !important;
  letter-spacing: -0.005em !important;
  line-height: 1.25 !important;
}

/* Category meta (under title) */
.woocommerce ul.products li.product .meta-categories,
.woocommerce-page ul.products li.product .meta-categories,
.woocommerce ul.products li.product [class*='category'] {
  font-family: var(--nf-sans) !important;
  font-size: 10px !important;
  letter-spacing: 0.7px !important;
  color: var(--nf-brown) !important;
  opacity: 0.65 !important;
  text-transform: uppercase !important;
  margin: 0 0 6px !important;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-family: var(--nf-serif) !important;
  color: var(--nf-red) !important;
  font-size: 22px !important;
  font-style: italic;
  font-weight: 800 !important;
  margin: 4px 0 12px !important;
}
.woocommerce ul.products li.product .price .amount,
.woocommerce-page ul.products li.product .price .amount {
  color: var(--nf-red) !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
  color: var(--nf-brown) !important;
  opacity: 0.5 !important;
  font-size: 14px !important;
  margin-left: 8px !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
.woocommerce ul.products li.product .price del .amount,
.woocommerce-page ul.products li.product .price del .amount {
  color: var(--nf-brown) !important;
  font-size: 14px !important;
}
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
  text-decoration: none !important;
  background: transparent !important;
  font-weight: 800 !important;
}

/* SALE badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce-page span.onsale,
.woocommerce-page ul.products li.product .onsale {
  background: var(--nf-red) !important;
  color: white !important;
  font-family: var(--nf-sans) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.6px !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  border: 0 !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  top: 14px !important;
  left: 14px !important;
  position: absolute !important;
  text-transform: uppercase !important;
  z-index: 4 !important;
}

/* Add-to-cart button (loop) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce-page ul.products li.product .button,
.woocommerce-page ul.products li.product .add_to_cart_button {
  background: var(--nf-red) !important;
  color: white !important;
  font-family: var(--nf-sans) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  border: 0 !important;
  display: inline-block !important;
  margin-top: 8px !important;
  transition: background 0.2s, transform 0.2s !important;
  letter-spacing: 0.2px !important;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .add_to_cart_button:hover {
  background: #A21F4D !important;
  transform: translateY(-1px);
}
.woocommerce ul.products li.product .added_to_cart {
  display: none !important;
}

/* Footer credit hide on shop pages (uses Blocksy default) */
body.woocommerce-page .ct-footer .ct-footer-credits,
body.woocommerce-page footer .copyright,
body.woocommerce-page .site-footer [class*='credit'] {
  display: none !important;
}

/* Spacing fixes */
.woocommerce ul.products,
.woocommerce-page ul.products {
  gap: 24px !important;
  padding: 20px 0 60px !important;
}


/* (1.0.43) FOOTER-CREDIT-HIDE — hide Blocksy default "WordPress Theme by THREE LUPINES" line site-wide */
.ct-footer-copyright { display: none !important; }
footer.site-footer .ct-container > .ct-footer-copyright { display: none !important; }


/* (1.0.44) SINGLE-PRODUCT-OVERHAUL - Nattoflux brand UI for individual product pages */
body.single-product, body.single-product .site-main { background: var(--nf-cream) !important; }
.single-product div.product .product_title { font-family: var(--nf-serif) !important; font-size: clamp(28px, 4vw, 42px) !important; color: var(--nf-ink) !important; font-weight: 800 !important; letter-spacing: -0.015em !important; margin: 0 0 16px !important; line-height: 1.15 !important; }
.single-product div.product p.price, .single-product div.product span.price { font-family: var(--nf-serif) !important; color: var(--nf-red) !important; font-size: 32px !important; font-style: italic !important; font-weight: 800 !important; margin: 0 0 18px !important; }
.single-product div.product .price del, .single-product div.product .price del .amount { color: var(--nf-brown) !important; opacity: 0.5 !important; font-size: 18px !important; font-style: normal !important; font-weight: 400 !important; margin-left: 10px !important; }
.single-product div.product .price ins { text-decoration: none !important; background: transparent !important; }
.single-product .woocommerce-product-details__short-description { color: var(--nf-brown) !important; font-family: var(--nf-sans) !important; font-size: 16px !important; line-height: 1.6 !important; }
.single-product .single_add_to_cart_button, .single-product form.cart .button { background: var(--nf-red) !important; color: white !important; font-family: var(--nf-sans) !important; font-weight: 700 !important; font-size: 15px !important; padding: 14px 32px !important; border-radius: 999px !important; border: 0 !important; letter-spacing: 0.3px !important; box-shadow: 0 4px 14px rgba(201, 40, 93, 0.25); transition: background 0.2s, transform 0.2s; }
.single-product .single_add_to_cart_button:hover, .single-product form.cart .button:hover { background: #A21F4D !important; transform: translateY(-1px); }
.single-product .quantity input.qty { font-family: var(--nf-sans) !important; font-size: 16px !important; font-weight: 700 !important; border-radius: 12px !important; border: 1px solid rgba(92, 58, 30, 0.18) !important; padding: 10px !important; color: var(--nf-ink) !important; text-align: center !important; background: white !important; }
.single-product span.onsale { position: absolute !important; top: 18px !important; left: 18px !important; z-index: 5 !important; }
.single-product .woocommerce-product-gallery img { border-radius: 12px !important; }
.woocommerce-breadcrumb { font-family: var(--nf-sans) !important; font-size: 11px !important; letter-spacing: 0.6px !important; color: var(--nf-brown) !important; opacity: 0.7 !important; text-transform: uppercase !important; margin-bottom: 24px !important; }
.woocommerce-breadcrumb a { color: var(--nf-brown) !important; text-decoration: none !important; }


/* (1.0.45) VARIATION-SELECTOR-POLISH - brand styling for bundle dropdown on Rapid Relief + Stomach Food */
.single-product table.variations { border: 0 !important; margin-bottom: 18px !important; }
.single-product table.variations tr { border: 0 !important; }
.single-product table.variations td, .single-product table.variations th { border: 0 !important; padding: 8px 0 !important; background: transparent !important; }
.single-product table.variations label, .single-product table.variations th.label { font-family: var(--nf-sans) !important; font-size: 11px !important; letter-spacing: 0.8px !important; font-weight: 800 !important; text-transform: uppercase !important; color: var(--nf-brown) !important; opacity: 0.85 !important; padding-right: 16px !important; vertical-align: middle !important; }
.single-product table.variations select { font-family: var(--nf-sans) !important; font-size: 15px !important; font-weight: 600 !important; padding: 12px 36px 12px 14px !important; border: 1px solid rgba(92, 58, 30, 0.18) !important; border-radius: 12px !important; background-color: white !important; color: var(--nf-ink) !important; cursor: pointer !important; min-width: 240px !important; transition: border-color 0.2s !important; }
.single-product table.variations select:hover, .single-product table.variations select:focus { border-color: var(--nf-red) !important; outline: 0 !important; }
.single-product .reset_variations { display: inline-block; font-family: var(--nf-sans) !important; font-size: 11px !important; color: var(--nf-brown) !important; opacity: 0.6 !important; text-decoration: none !important; margin-top: 6px !important; letter-spacing: 0.3px !important; }
.single-product .reset_variations:hover { opacity: 1 !important; color: var(--nf-red) !important; }
.single-product .woocommerce-variation-description { font-family: var(--nf-sans) !important; color: var(--nf-brown) !important; font-size: 14px !important; line-height: 1.6 !important; margin: 8px 0 18px !important; padding: 14px 18px !important; background: #FAF3EA !important; border-radius: 12px !important; border-left: 3px solid var(--nf-red) !important; }
.single-product .woocommerce-variation-price { margin-bottom: 14px !important; }
.single-product .woocommerce-variation-price .price { font-size: 36px !important; }
.single-product .stock { font-family: var(--nf-sans) !important; font-size: 13px !important; }


/* (1.0.46) PRODUCT-DESC-POLISH - ingredient grid + how-to-use diagram for single product descriptions */
.nf-prod-section { margin: 36px 0; }
.nf-prod-section h3 { font-family: var(--nf-serif) !important; font-size: 28px !important; color: var(--nf-ink) !important; margin: 36px 0 8px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; }
.nf-prod-section .nf-prod-intro { color: var(--nf-brown) !important; font-family: var(--nf-sans) !important; font-size: 15px !important; margin: 0 0 24px !important; opacity: 0.85 !important; line-height: 1.5 !important; }
.nf-prod-section .nf-prod-ing-foot { color: var(--nf-brown) !important; font-family: var(--nf-sans) !important; font-size: 12px !important; opacity: 0.7 !important; text-align: center !important; margin-top: 16px !important; }
.nf-prod-ing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 24px 0 12px; }
.nf-prod-ing { background: white; border-radius: 14px; padding: 18px 14px; box-shadow: 0 2px 12px rgba(92, 58, 30, 0.06); border: 1px solid rgba(92, 58, 30, 0.06); text-align: center; }
.nf-prod-ing__photo { width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; background: #FAF3EA; border: 2px solid rgba(201, 40, 93, 0.15); }
.nf-prod-ing__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-prod-ing h4 { font-family: var(--nf-serif) !important; font-style: italic; font-size: 15px !important; color: var(--nf-ink) !important; margin: 0 !important; font-weight: 800 !important; line-height: 1.25 !important; }
.nf-prod-ing__dose { font-family: var(--nf-sans) !important; font-size: 10px !important; color: var(--nf-red) !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; font-weight: 800 !important; margin: 6px 0 8px !important; padding: 3px 8px !important; background: rgba(201, 40, 93, 0.08) !important; border-radius: 999px !important; display: inline-block !important; }
.nf-prod-ing p { font-family: var(--nf-sans) !important; font-size: 12px !important; color: var(--nf-brown) !important; line-height: 1.5 !important; margin: 0 !important; opacity: 0.9 !important; }
@media (max-width: 900px) { .nf-prod-ing-grid { grid-template-columns: repeat(2, 1fr); } }

/* How-to-use 3-step diagram */
.nf-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0 18px; }
.nf-howto__step { background: var(--nf-cream); border-radius: 16px; padding: 30px 22px 22px; position: relative; border: 1px dashed rgba(201, 40, 93, 0.25); }
.nf-howto__num { position: absolute; top: -18px; left: 22px; width: 36px; height: 36px; border-radius: 50%; background: var(--nf-red); color: white; font-family: var(--nf-serif); font-size: 18px; font-style: italic; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(201, 40, 93, 0.3); }
.nf-howto__icon { font-size: 36px; margin: 6px 0 14px; line-height: 1; }
.nf-howto__step h4 { font-family: var(--nf-serif) !important; font-style: italic !important; font-size: 18px !important; color: var(--nf-ink) !important; margin: 0 0 8px !important; font-weight: 800 !important; }
.nf-howto__step p { font-family: var(--nf-sans) !important; color: var(--nf-brown) !important; font-size: 13px !important; line-height: 1.5 !important; margin: 0 !important; }
@media (max-width: 720px) { .nf-howto { grid-template-columns: 1fr; gap: 24px; } }

.nf-howto-warn { background: #FFF5F0; border-left: 4px solid #F7A86F; border-radius: 8px; padding: 16px 20px; margin: 24px 0; font-family: var(--nf-sans) !important; color: var(--nf-brown) !important; font-size: 14px !important; line-height: 1.55 !important; }
.nf-howto-warn strong { color: var(--nf-ink) !important; }

/* Tighten Additional Information table */
.woocommerce-Tabs-panel--additional_information table.shop_attributes,
.woocommerce-product-attributes { font-family: var(--nf-sans) !important; border: 0 !important; }
.woocommerce-product-attributes tr { border-bottom: 1px solid rgba(92, 58, 30, 0.08) !important; }
.woocommerce-product-attributes th, .woocommerce-Tabs-panel--additional_information table.shop_attributes th { font-family: var(--nf-sans) !important; font-size: 12px !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: var(--nf-brown) !important; padding: 14px 18px !important; background: transparent !important; font-weight: 800 !important; width: 30% !important; }
.woocommerce-product-attributes td, .woocommerce-Tabs-panel--additional_information table.shop_attributes td { padding: 14px 18px !important; background: transparent !important; font-family: var(--nf-sans) !important; font-size: 14px !important; color: var(--nf-ink) !important; }
.woocommerce-product-attributes td p, .woocommerce-Tabs-panel--additional_information table.shop_attributes td p { margin: 0 !important; }


/* (1.0.47) GREEN-PURGE - kill Gutenberg has-text-color forest green in description tab */
.single-product .woocommerce-Tabs-panel--description .has-text-color,
.single-product .woocommerce-Tabs-panel--description .wp-block-heading,
.single-product .woocommerce-Tabs-panel--description h1,
.single-product .woocommerce-Tabs-panel--description h2,
.single-product .woocommerce-Tabs-panel--description h3,
.single-product .woocommerce-Tabs-panel--description h4 { color: var(--nf-ink) !important; }
.single-product .woocommerce-Tabs-panel--description a { color: var(--nf-red) !important; text-decoration: underline !important; text-decoration-color: rgba(201, 40, 93, 0.35) !important; text-underline-offset: 3px !important; }
.single-product .woocommerce-Tabs-panel--description a:hover { color: #A21F4D !important; text-decoration-color: var(--nf-red) !important; }
.single-product .woocommerce-Tabs-panel--description .wp-block-button .wp-block-button__link { background: var(--nf-red) !important; color: white !important; border-radius: 999px !important; padding: 12px 24px !important; font-family: var(--nf-sans) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0.3px !important; text-decoration: none !important; display: inline-block !important; border: 0 !important; }
.single-product .woocommerce-Tabs-panel--description .wp-block-button .wp-block-button__link:hover { background: #A21F4D !important; transform: translateY(-1px); }
.single-product .woocommerce-Tabs-panel--description h2.wp-block-heading { font-family: var(--nf-serif) !important; font-size: 28px !important; font-weight: 800 !important; margin: 40px 0 16px !important; letter-spacing: -0.01em !important; }
.single-product .woocommerce-Tabs-panel--description h3.wp-block-heading { font-family: var(--nf-serif) !important; font-size: 22px !important; font-weight: 800 !important; margin: 30px 0 12px !important; }
/* WhatsApp callout style fix */
.single-product .woocommerce-Tabs-panel--description .wp-block-group.has-background { border-radius: 12px !important; }

/* === BUNDLE-PICKER visual cards === */
.nf-bundle-picker { margin: 22px 0 24px; }
.nf-bundle-picker__label { font-family: var(--nf-sans) !important; font-size: 11px !important; letter-spacing: 0.8px !important; font-weight: 800 !important; text-transform: uppercase !important; color: var(--nf-brown) !important; opacity: 0.85 !important; margin-bottom: 14px; }
.nf-bundle-picker__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nf-bundle-card { background: white; border: 2px solid rgba(92, 58, 30, 0.12); border-radius: 14px; padding: 18px 12px 16px; text-align: center; cursor: pointer; position: relative; transition: all 0.2s; user-select: none; }
.nf-bundle-card:hover { border-color: rgba(201, 40, 93, 0.4); transform: translateY(-2px); }
.nf-bundle-card.is-active { border-color: var(--nf-red); background: linear-gradient(180deg, white 0%, #FFF5F8 100%); box-shadow: 0 6px 18px rgba(201, 40, 93, 0.15); }
.nf-bundle-card.is-active::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; background: var(--nf-red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.nf-bundle-card__tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--nf-red); color: white; font-family: var(--nf-sans); font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.nf-bundle-card__count { font-family: var(--nf-serif); font-style: italic; font-size: 20px; font-weight: 800; color: var(--nf-ink); margin-bottom: 2px; line-height: 1.1; }
.nf-bundle-card__sub { font-family: var(--nf-sans); font-size: 10px; color: var(--nf-brown); opacity: 0.65; letter-spacing: 0.2px; margin-bottom: 10px; }
.nf-bundle-card__price { font-family: var(--nf-serif); font-style: italic; font-size: 22px; font-weight: 800; color: var(--nf-red); margin: 4px 0 2px; line-height: 1; }
.nf-bundle-card__was { font-family: var(--nf-sans); font-size: 11px; color: var(--nf-brown); opacity: 0.5; text-decoration: line-through; }
.nf-bundle-card__save { display: inline-block; margin-top: 6px; background: rgba(201, 40, 93, 0.1); color: var(--nf-red); font-family: var(--nf-sans); font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.nf-bundle-card__per { font-family: var(--nf-sans); font-size: 10px; color: var(--nf-brown); opacity: 0.6; margin-top: 8px; }
@media (max-width: 720px) { .nf-bundle-picker__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; } }


/* (1.0.48) CART-CHECKOUT-POLISH - Nattoflux brand UI for /cart/ + /checkout/ */
body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-cart .site-main, body.woocommerce-checkout .site-main { background: var(--nf-cream) !important; }
body.woocommerce-cart .entry-title, body.woocommerce-checkout .entry-title, body.woocommerce-cart h1.page-title, body.woocommerce-checkout h1.page-title { font-family: var(--nf-serif) !important; font-style: italic !important; font-size: clamp(36px, 5vw, 56px) !important; font-weight: 800 !important; color: var(--nf-ink) !important; letter-spacing: -0.015em !important; margin: 0 0 32px !important; }
.woocommerce-cart h2, .woocommerce-cart h3, .woocommerce-checkout h2, .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading, .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-additional-fields h3, .woocommerce-checkout #payment .place-order h3 { font-family: var(--nf-serif) !important; font-size: 26px !important; font-weight: 800 !important; color: var(--nf-ink) !important; margin: 0 0 18px !important; letter-spacing: -0.01em !important; }
.woocommerce-cart table.shop_table { border: 0 !important; background: white !important; border-radius: 16px !important; box-shadow: 0 4px 20px rgba(92, 58, 30, 0.06) !important; overflow: hidden; padding: 0 !important; }
.woocommerce-cart table.shop_table th { font-family: var(--nf-sans) !important; font-size: 11px !important; letter-spacing: 0.7px !important; text-transform: uppercase !important; color: var(--nf-brown) !important; font-weight: 800 !important; padding: 16px 18px !important; border-bottom: 1px solid rgba(92, 58, 30, 0.1) !important; background: transparent !important; }
.woocommerce-cart table.shop_table td { padding: 18px !important; border-bottom: 1px solid rgba(92, 58, 30, 0.06) !important; background: transparent !important; font-family: var(--nf-sans) !important; color: var(--nf-ink) !important; }
.woocommerce-cart table.shop_table .product-thumbnail img { border-radius: 12px !important; width: 80px !important; }
.woocommerce-cart table.shop_table .product-name a { color: var(--nf-ink) !important; font-family: var(--nf-serif) !important; font-style: italic !important; font-weight: 800 !important; font-size: 17px !important; text-decoration: none !important; }
.woocommerce-cart table.shop_table .product-price, .woocommerce-cart table.shop_table .product-subtotal { color: var(--nf-red) !important; font-family: var(--nf-serif) !important; font-style: italic !important; font-weight: 800 !important; font-size: 18px !important; }
.woocommerce-cart .quantity input.qty { font-family: var(--nf-sans) !important; font-weight: 700 !important; border-radius: 10px !important; border: 1px solid rgba(92, 58, 30, 0.18) !important; padding: 10px !important; text-align: center !important; }
.woocommerce-cart .product-remove a.remove { color: var(--nf-red) !important; font-size: 18px !important; }
.woocommerce-cart .coupon input[name="coupon_code"] { font-family: var(--nf-sans) !important; padding: 12px 16px !important; border-radius: 999px !important; border: 1px solid rgba(92, 58, 30, 0.18) !important; background: white !important; }
.woocommerce-cart .button, .woocommerce-checkout .button, .woocommerce button[name="apply_coupon"], .woocommerce button[name="update_cart"], .woocommerce a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout .button, .woocommerce-checkout #place_order { background: var(--nf-red) !important; color: white !important; font-family: var(--nf-sans) !important; font-weight: 700 !important; font-size: 14px !important; padding: 14px 28px !important; border-radius: 999px !important; border: 0 !important; text-decoration: none !important; letter-spacing: 0.3px !important; transition: background 0.2s, transform 0.2s !important; box-shadow: 0 4px 14px rgba(201, 40, 93, 0.25); display: inline-block !important; }
.woocommerce-cart .button:hover, .woocommerce-checkout .button:hover, .woocommerce-checkout #place_order:hover { background: #A21F4D !important; transform: translateY(-1px); }
.woocommerce-cart .button:disabled { opacity: 0.4 !important; cursor: not-allowed !important; transform: none !important; }
.woocommerce-cart .wc-proceed-to-checkout .button, .woocommerce-checkout #place_order { width: 100%; text-align: center; font-size: 15px !important; padding: 16px 32px !important; }
.woocommerce-cart .cart_totals { background: white; border-radius: 16px; padding: 26px; box-shadow: 0 4px 20px rgba(92, 58, 30, 0.06); }
.woocommerce-cart .cart_totals h2 { font-family: var(--nf-serif) !important; font-size: 22px !important; font-style: italic !important; margin: 0 0 20px !important; }
.woocommerce-cart .cart_totals table { background: transparent !important; box-shadow: none !important; }
.woocommerce-cart .cart_totals .order-total .amount { color: var(--nf-red) !important; font-family: var(--nf-serif) !important; font-style: italic !important; font-size: 22px !important; font-weight: 800 !important; }
.woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout input[type="number"], .woocommerce-checkout select, .woocommerce-checkout textarea, .select2-container--default .select2-selection--single { font-family: var(--nf-sans) !important; font-size: 14px !important; padding: 12px 14px !important; border-radius: 10px !important; border: 1px solid rgba(92, 58, 30, 0.18) !important; background: white !important; color: var(--nf-ink) !important; height: auto !important; }
.woocommerce-checkout input:focus, .woocommerce-checkout select:focus, .woocommerce-checkout textarea:focus { outline: 0 !important; border-color: var(--nf-red) !important; }
.woocommerce-checkout label { font-family: var(--nf-sans) !important; font-size: 13px !important; font-weight: 700 !important; color: var(--nf-ink) !important; margin-bottom: 6px !important; }
.woocommerce-checkout #order_review { background: white !important; border-radius: 16px; padding: 26px; box-shadow: 0 4px 20px rgba(92, 58, 30, 0.06); }
.woocommerce-checkout #order_review table.shop_table { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.woocommerce-checkout #order_review th, .woocommerce-checkout #order_review td { background: transparent !important; border-bottom: 1px solid rgba(92, 58, 30, 0.08) !important; font-family: var(--nf-sans) !important; }
.woocommerce-checkout #order_review .order-total .amount { color: var(--nf-red) !important; font-family: var(--nf-serif) !important; font-style: italic !important; font-size: 22px !important; font-weight: 800 !important; }
.woocommerce-checkout #payment { background: transparent !important; border-radius: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods { background: #FAF3EA !important; border-radius: 12px; padding: 16px !important; border: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods li { background: transparent !important; padding: 6px 0 !important; }
.woocommerce-checkout #payment ul.payment_methods li label { font-family: var(--nf-sans) !important; font-weight: 700 !important; color: var(--nf-ink) !important; cursor: pointer; }
.woocommerce-checkout #payment div.form-row.place-order { padding: 0 !important; margin-top: 16px !important; }
body.woocommerce-cart .ct-footer-copyright, body.woocommerce-checkout .ct-footer-copyright { display: none !important; }


/* (1.0.49) CART-UPSELL-POLISH - polish cross-sells heading + subtitle on /cart/ */
.woocommerce-cart .cross-sells { margin-top: 60px; }
.woocommerce-cart .cross-sells h2 { font-family: var(--nf-serif) !important; font-style: italic !important; font-size: 32px !important; color: var(--nf-ink) !important; font-weight: 800 !important; margin: 0 0 30px !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; }
.nf-upsell-sub { display: block; font-family: var(--nf-sans) !important; font-style: normal !important; color: var(--nf-brown) !important; font-size: 15px !important; font-weight: 400 !important; margin-top: 10px !important; line-height: 1.5 !important; letter-spacing: 0 !important; }
.nf-upsell-sub strong { color: var(--nf-red) !important; font-weight: 800 !important; }


/* (1.0.50) BUNDLE-SAVINGS-CALLOUT - smart upsell on /cart/ */
.nf-bundle-savings { display: flex; align-items: center; gap: 22px; background: linear-gradient(135deg, #FFF5F8 0%, #FFFAEF 100%); border: 2px solid var(--nf-red); border-radius: 16px; padding: 24px 28px; margin: 30px 0 20px; box-shadow: 0 8px 24px rgba(201, 40, 93, 0.1); }
.nf-bundle-savings__icon { font-size: 48px; flex-shrink: 0; line-height: 1; }
.nf-bundle-savings__body { flex: 1; }
.nf-bundle-savings__body h3 { font-family: var(--nf-serif) !important; font-style: italic !important; font-size: 22px !important; color: var(--nf-ink) !important; margin: 0 0 8px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: -0.005em !important; }
.nf-bundle-savings__amount { color: var(--nf-red); font-size: 28px; font-weight: 900; white-space: nowrap; }
.nf-bundle-savings__body p { font-family: var(--nf-sans) !important; font-size: 14px !important; color: var(--nf-brown) !important; margin: 0 0 14px !important; line-height: 1.55 !important; }
.nf-bundle-savings__body p strong { color: var(--nf-ink); font-weight: 700; }
.nf-bundle-savings__cta { display: inline-block; background: var(--nf-red); color: white !important; font-family: var(--nf-sans); font-weight: 700; font-size: 14px; padding: 12px 24px; border-radius: 999px; text-decoration: none !important; letter-spacing: 0.3px; transition: background 0.2s, transform 0.2s; box-shadow: 0 4px 12px rgba(201, 40, 93, 0.25); }
.nf-bundle-savings__cta:hover { background: #A21F4D !important; transform: translateY(-1px); }
@media (max-width: 720px) { .nf-bundle-savings { flex-direction: column; text-align: center; padding: 22px 18px; gap: 14px; } .nf-bundle-savings__icon { font-size: 40px; } .nf-bundle-savings__amount { font-size: 26px; } }


/* (1.0.51) DESCRIPTION-LAYOUT-FIX - flatten Gutenberg columns + aggressive green kill in product description */
/* Flatten wp-block-columns in description to single-column flow */
.single-product .woocommerce-Tabs-panel--description .wp-block-columns { display: block !important; gap: 0 !important; margin-bottom: 14px !important; }
.single-product .woocommerce-Tabs-panel--description .wp-block-columns > .wp-block-column,
.single-product .woocommerce-Tabs-panel--description .wp-block-column { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; }
/* Constrain description to readable width */
.single-product .woocommerce-Tabs-panel--description { max-width: 880px !important; margin-left: auto !important; margin-right: auto !important; }
/* Aggressive green kill: any element with inline forest-green color */
.single-product .woocommerce-Tabs-panel--description [style*="#264D40"],
.single-product .woocommerce-Tabs-panel--description [style*="#264d40"],
.single-product .woocommerce-Tabs-panel--description [style*="color:#264"],
.single-product .woocommerce-Tabs-panel--description [style*="color: #264"] { color: var(--nf-ink) !important; }
/* Override Gutenberg inline font-size clamp to brand sizes */
.single-product .woocommerce-Tabs-panel--description h2[style*="font-size"] { font-size: 28px !important; }
.single-product .woocommerce-Tabs-panel--description h3[style*="font-size"] { font-size: 22px !important; }


/* (1.0.52) HOW-WE-EAT-POLISH - polish /how-we-eat/ page (page-id-78) with Nattoflux brand UI */
/* Hide Blocksy default page title banner */
body.page-id-78 .ct-page-title-banner, body.page-id-78 .page-header-banner, body.page-id-78 > .entry-header, body.page-id-78 .page-header, body.page-id-78 .ct-page-title { display: none !important; }
/* Page bg cream */
body.page-id-78 { background: var(--nf-cream) !important; }
/* All headings on this page - brand serif italic */
body.page-id-78 .wp-block-heading, body.page-id-78 h1, body.page-id-78 h2, body.page-id-78 h3, body.page-id-78 h4 { font-family: var(--nf-serif) !important; font-style: italic !important; font-weight: 800 !important; letter-spacing: -0.015em !important; }
/* Kill forest green on this page - only override when inline color is the green */
body.page-id-78 [style*="#264D40"], body.page-id-78 [style*="#264d40"], body.page-id-78 [style*="color:#264"] { color: var(--nf-ink) !important; }
/* Hero H1 sizing */
body.page-id-78 .wp-block-cover h1, body.page-id-78 h1.wp-block-heading { font-size: clamp(36px, 5vw, 64px) !important; line-height: 1.05 !important; }
/* H2 section titles */
body.page-id-78 h2.wp-block-heading { font-size: clamp(28px, 3.5vw, 42px) !important; margin: 50px 0 20px !important; line-height: 1.15 !important; }
/* H3 (Mamak at 2am etc.) - keep brand serif italic but smaller */
body.page-id-78 .wp-block-columns h3, body.page-id-78 .wp-block-columns h4 { font-size: 20px !important; margin: 0 0 12px !important; color: var(--nf-ink) !important; font-style: italic !important; }
/* Pain card body copy - italic was already there, just lock to brand brown */
body.page-id-78 .wp-block-columns .wp-block-column p { color: var(--nf-brown) !important; font-family: var(--nf-sans) !important; font-style: italic !important; font-size: 14px !important; line-height: 1.6 !important; }
/* Subtitles under H2s (and other body paragraphs) */
body.page-id-78 .wp-block-group > p, body.page-id-78 > .entry-content > p { color: var(--nf-brown) !important; font-family: var(--nf-sans) !important; font-style: normal !important; }
/* Branded buttons - brand red filled, ink outline */
body.page-id-78 .wp-block-button .wp-block-button__link { background: var(--nf-red) !important; color: white !important; border-radius: 999px !important; padding: 14px 28px !important; font-family: var(--nf-sans) !important; font-weight: 700 !important; font-style: normal !important; font-size: 14px !important; letter-spacing: 0.3px !important; text-decoration: none !important; display: inline-block !important; box-shadow: 0 4px 14px rgba(201, 40, 93, 0.25); border: 0 !important; transition: background 0.2s, transform 0.2s; }
body.page-id-78 .wp-block-button .wp-block-button__link:hover { background: #A21F4D !important; transform: translateY(-1px); }
/* White-on-cover buttons (Shop Stomach Food style) - outline brand-ink */
body.page-id-78 .wp-block-button .wp-block-button__link[style*="background-color:#ffffff"], body.page-id-78 .wp-block-button .wp-block-button__link[style*="background:#fff"], body.page-id-78 .wp-block-button.is-style-outline .wp-block-button__link { background: white !important; color: var(--nf-ink) !important; border: 2px solid var(--nf-ink) !important; box-shadow: none !important; }
/* CTA button row gap */
body.page-id-78 .wp-block-buttons { gap: 14px !important; }
/* Where we are platform list - chip style */
body.page-id-78 .entry-content p:has(strong) strong { font-family: var(--nf-sans) !important; font-style: normal !important; font-weight: 700 !important; color: var(--nf-red) !important; }
/* Hide Blocksy footer credit */
body.page-id-78 .ct-footer-copyright { display: none !important; }
/* Constrain content width for readability */
body.page-id-78 .entry-content > p, body.page-id-78 .entry-content > h2, body.page-id-78 .entry-content > h3 { max-width: 880px; margin-left: auto !important; margin-right: auto !important; }


/* (1.0.53) HOW-WE-EAT-FOLLOWUP - hide default page title; narrow green-kill so it does not catch background colors */
body.page-id-78 article > .hero-section, body.page-id-78 article > header.entry-header, body.page-id-78 .hero-section.is-width-constrained { display: none !important; }
/* Replace over-broad green-kill: only match when the inline declaration is color: (not background-color:) */
body.page-id-78 [style^="color:#264D40"], body.page-id-78 [style^="color: #264D40"], body.page-id-78 [style*=";color:#264D40"], body.page-id-78 [style*="; color:#264D40"], body.page-id-78 [style^="color:#264d40"], body.page-id-78 [style*=";color:#264d40"] { color: var(--nf-ink) !important; }
/* Preserve white text inside dark cover blocks */
body.page-id-78 .wp-block-cover [style*="color:#ffffff" i], body.page-id-78 .wp-block-cover h1.has-text-color, body.page-id-78 .wp-block-cover h2.has-text-color, body.page-id-78 .wp-block-cover h3.has-text-color { color: white !important; }
/* Cover block body copy when on dark bg - keep light */
body.page-id-78 .wp-block-cover p, body.page-id-78 .wp-block-cover .wp-block-paragraph { color: rgba(255,255,255,0.92) !important; }


/* (1.0.54) SITEWIDE-GREEN-PURGE + MALAYSIAN-DAY-DIAGRAM */
/* SITE-WIDE kill of any Gutenberg forest-green inline color (#264D40 / #264d40) */
[style^="color:#264D40"], [style^="color: #264D40"], [style*=";color:#264D40"], [style*="; color:#264D40"], [style^="color:#264d40"], [style^="color: #264d40"], [style*=";color:#264d40"], [style*="; color:#264d40"] { color: var(--nf-ink) !important; }
/* Also kill it as a class-attached has-text-color when applied directly */
.has-text-color[style*="#264D40" i] { color: var(--nf-ink) !important; }
/* But preserve white text inside dark covers (some covers use #264D40 as bg) */
.wp-block-cover [style*="color:#ffffff" i], .wp-block-cover .has-text-color.has-white-color, .wp-block-cover h1.wp-block-heading[style*="color:#fff" i], .wp-block-cover h2.wp-block-heading[style*="color:#fff" i], .wp-block-cover h3.wp-block-heading[style*="color:#fff" i] { color: white !important; }

/* ============ MALAYSIAN-DAY-DIAGRAM ============ */
.nf-mday-section { background: var(--nf-cream-2); padding: 50px 40px 60px; border-radius: 24px; margin: 60px auto; max-width: 1180px; }
.nf-mday-section h3 { font-family: var(--nf-serif) !important; font-style: italic !important; font-weight: 800 !important; font-size: clamp(24px, 3vw, 36px) !important; color: var(--nf-ink) !important; text-align: center; margin: 0 0 8px !important; letter-spacing: -0.01em !important; }
.nf-mday-intro { font-family: var(--nf-sans); font-size: 15px; color: var(--nf-brown); text-align: center; margin: 0 auto 32px !important; max-width: 600px; line-height: 1.5; opacity: 0.85; }
.nf-mday { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; position: relative; }
.nf-mday__step { background: white; border-radius: 16px; padding: 22px 14px 18px; text-align: center; position: relative; box-shadow: 0 2px 12px rgba(92, 58, 30, 0.06); border: 1px solid rgba(92, 58, 30, 0.08); }
.nf-mday__step--alert { background: linear-gradient(180deg, #FFF5F8, #FFE9F0) !important; border: 2px solid var(--nf-red) !important; box-shadow: 0 6px 20px rgba(201, 40, 93, 0.15) !important; }
.nf-mday__time { font-family: var(--nf-sans); font-size: 10px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--nf-brown); font-weight: 800; opacity: 0.7; margin-bottom: 10px; }
.nf-mday__step--alert .nf-mday__time { color: var(--nf-red); opacity: 1; }
.nf-mday__icon { font-size: 36px; margin-bottom: 10px; line-height: 1; }
.nf-mday__title { font-family: var(--nf-serif); font-style: italic; font-size: 15px; font-weight: 800; color: var(--nf-ink); margin-bottom: 6px; line-height: 1.25; }
.nf-mday__note { font-family: var(--nf-sans); font-size: 11px; color: var(--nf-brown); line-height: 1.45; opacity: 0.85; }
.nf-mday__step--alert .nf-mday__title { color: var(--nf-red); }
@media (max-width: 900px) { .nf-mday { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .nf-mday { grid-template-columns: repeat(2, 1fr); gap: 10px; } .nf-mday-section { padding: 36px 18px 40px; } }


/* (1.0.55) GREEN-BG-PURGE - kill ALL #264D40 backgrounds site-wide (the cover-block green that survived) */
/* Wp-block-cover dim layer with forest-green bg - swap to brand brown */
.wp-block-cover__background[style*="#264D40" i], .wp-block-cover__background[style*="#264d40" i] { background-color: var(--nf-brown) !important; }
/* Any element with inline background-color = forest green */
[style*="background-color:#264D40" i], [style*="background-color: #264D40" i], [style*="background:#264D40" i], [style*="background: #264D40" i] { background-color: var(--nf-brown) !important; background: var(--nf-brown) !important; }
/* Consultation form submit (homepage) - force brand red */
.nf-consult__submit, button.nf-consult__submit, form button.nf-consult__submit { background-color: var(--nf-red) !important; background: var(--nf-red) !important; color: white !important; border: 0 !important; }
.nf-consult__submit:hover, button.nf-consult__submit:hover { background-color: #A21F4D !important; background: #A21F4D !important; }
/* Any generic .wp-element-button stuck on green - brand red */
.wp-element-button[style*="#264D40" i], button.wp-element-button { background-color: var(--nf-red) !important; color: white !important; }
/* Final catch-all: any other element with green bg in the public site - swap to brand brown (excludes admin bar via :not selector) */
[style*="background-color:#264D40" i]:not(#wpadminbar *):not(.adminbar-button) { background-color: var(--nf-brown) !important; }


/* (1.0.56) INGREDIENTS-LAB-POLISH - polish /ingredients-lab-tests/ (page-id-87) */
body.page-id-87 article > .hero-section, body.page-id-87 article > header.entry-header, body.page-id-87 .hero-section.is-width-constrained { display: none !important; }
body.page-id-87 { background: var(--nf-cream) !important; }
body.page-id-87 .wp-block-heading, body.page-id-87 h1, body.page-id-87 h2, body.page-id-87 h3, body.page-id-87 h4 { font-family: var(--nf-serif) !important; font-style: italic !important; font-weight: 800 !important; letter-spacing: -0.015em !important; }
body.page-id-87 .wp-block-cover h1, body.page-id-87 h1.wp-block-heading { font-size: clamp(36px, 5vw, 64px) !important; line-height: 1.05 !important; }
body.page-id-87 h2.wp-block-heading { font-size: clamp(26px, 3.5vw, 38px) !important; margin: 50px 0 18px !important; line-height: 1.2 !important; }
body.page-id-87 h3.wp-block-heading { font-size: clamp(18px, 2vw, 22px) !important; margin: 28px 0 10px !important; line-height: 1.3 !important; color: var(--nf-ink) !important; }
/* Force cover bg solid - kill the has-background-dim opacity so text reads cleanly */
body.page-id-87 .wp-block-cover__background.has-background-dim { opacity: 1 !important; }
body.page-id-87 .wp-block-cover.is-dark { background: var(--nf-brown) !important; }
/* Body copy + bullets brand brown */
body.page-id-87 .entry-content > p, body.page-id-87 .wp-block-group p { color: var(--nf-brown) !important; font-family: var(--nf-sans) !important; font-style: normal !important; }
body.page-id-87 .wp-block-list li, body.page-id-87 ul li, body.page-id-87 ol li { color: var(--nf-brown) !important; font-family: var(--nf-sans) !important; }
/* Cover-block body copy stays white-on-brown */
body.page-id-87 .wp-block-cover p, body.page-id-87 .wp-block-cover li { color: rgba(255,255,255,0.92) !important; }
/* Brand-red buttons (Shop Nattoflux + Chat on WhatsApp + Buy now) */
body.page-id-87 .wp-block-button .wp-block-button__link { background: var(--nf-red) !important; color: white !important; border-radius: 999px !important; padding: 14px 28px !important; font-family: var(--nf-sans) !important; font-weight: 700 !important; font-style: normal !important; font-size: 14px !important; letter-spacing: 0.3px !important; text-decoration: none !important; display: inline-block !important; border: 0 !important; box-shadow: 0 4px 14px rgba(201, 40, 93, 0.25); transition: background 0.2s, transform 0.2s; }
body.page-id-87 .wp-block-button .wp-block-button__link:hover { background: #A21F4D !important; transform: translateY(-1px); }
body.page-id-87 .wp-block-button.is-style-outline .wp-block-button__link { background: white !important; color: var(--nf-ink) !important; border: 2px solid var(--nf-ink) !important; box-shadow: none !important; }
body.page-id-87 .wp-block-buttons { gap: 14px !important; }
/* Hide Blocksy footer credit on this page */
body.page-id-87 .ct-footer-copyright { display: none !important; }
/* Constrain content width for readability */
body.page-id-87 .entry-content > p, body.page-id-87 .entry-content > h2, body.page-id-87 .entry-content > h3, body.page-id-87 .entry-content > .wp-block-list { max-width: 880px; margin-left: auto !important; margin-right: auto !important; }