/* =============================================================
   Miah Farms — site stylesheet
   Brand palette
     --mf-terracotta  : earth red, primary
     --mf-cream       : warm cream, backgrounds
     --mf-leaf        : sage green, secondary accent
     --mf-yolk        : egg yolk, highlights
     --mf-charcoal    : warm dark, body text
     --mf-paper       : off-white, surfaces
   ============================================================= */

:root {
  --mf-terracotta: #B8431F;
  --mf-terracotta-dark: #8E3214;
  --mf-cream:      #F7F1E1;
  --mf-leaf:       #5A7548;
  --mf-leaf-dark:  #3F5430;
  --mf-yolk:       #E8A93C;
  --mf-charcoal:   #2A2418;
  --mf-paper:      #FBFAF5;
  --mf-muted:      #6B6357;
  --mf-line:       #E6DFCB;

  --font-serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* Bootstrap overrides */
.bg-cream  { background-color: var(--mf-cream) !important; }
.bg-paper  { background-color: var(--mf-paper) !important; }
.bg-leaf   { background-color: var(--mf-leaf)  !important; color: #fff; }
.bg-terra  { background-color: var(--mf-terracotta) !important; color: #fff; }
.text-terra { color: var(--mf-terracotta) !important; }
.text-leaf  { color: var(--mf-leaf) !important; }
.text-yolk  { color: var(--mf-yolk) !important; }
.text-charcoal { color: var(--mf-charcoal) !important; }
.text-muted-mf { color: var(--mf-muted) !important; }

body {
  font-family: var(--font-sans);
  color: var(--mf-charcoal);
  background-color: var(--mf-paper);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--mf-charcoal);
}
h1, .display-1, .display-2 { font-weight: 400; letter-spacing: -0.02em; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mf-terracotta);
}

a { color: var(--mf-terracotta); text-decoration: none; }
a:hover { color: var(--mf-terracotta-dark); text-decoration: none; }

.btn {
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
}
.btn-terra {
  background-color: var(--mf-terracotta);
  border-color: var(--mf-terracotta);
  color: #fff;
}
.btn-terra:hover {
  background-color: var(--mf-terracotta-dark);
  border-color: var(--mf-terracotta-dark);
  color: #fff;
}
.btn-outline-terra {
  border: 1.5px solid var(--mf-terracotta);
  color: var(--mf-terracotta);
  background: transparent;
}
.btn-outline-terra:hover {
  background-color: var(--mf-terracotta);
  color: #fff;
}
.btn-leaf {
  background-color: var(--mf-leaf);
  border-color: var(--mf-leaf);
  color: #fff;
}
.btn-leaf:hover {
  background-color: var(--mf-leaf-dark);
  border-color: var(--mf-leaf-dark);
  color: #fff;
}

/* =============== Promo banner =============== */
.mf-promo-banner {
  background: var(--mf-terracotta);
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
  position: relative;
  z-index: 1031;
}
.mf-promo-banner-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  flex-wrap: wrap;
}
.mf-promo-icon { font-size: 1rem; line-height: 1; }
.mf-promo-text strong { font-weight: 900; }
.mf-promo-code {
  color: #ffffff;
  background: rgba(255,255,255,0.18);
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: 1em;
  letter-spacing: 0.04em;
}
.mf-promo-dismiss {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color .15s ease;
}
.mf-promo-dismiss:hover { background: rgba(255,255,255,0.25); }
.mf-promo-banner.is-dismissed { display: none; }

/* "+N more promotions" button on the strip */
.mf-promo-more {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background-color .15s ease, transform .12s ease;
}
.mf-promo-more:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }

/* =============== Multi-promotions modal =============== */
.mf-promo-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.mf-promo-modal.is-open { display: flex; }
.mf-promo-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(42, 36, 24, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  animation: mfModalFade .25s ease;
}
@keyframes mfModalFade { from { opacity: 0 } to { opacity: 1 } }

.mf-promo-modal-card {
  position: relative;
  background: var(--mf-paper);
  border-radius: 18px;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.2rem 1.8rem 1.6rem;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4);
  animation: mfModalIn .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes mfModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mf-promo-modal-x {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--mf-cream);
  color: var(--mf-charcoal);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.mf-promo-modal-x:hover { background: var(--mf-terracotta); color: #fff; }

.mf-promo-modal-head { text-align: center; margin-bottom: 1.4rem; padding: 0 1rem; }
.mf-promo-modal-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mf-terracotta);
  margin-bottom: 0.4rem;
}
.mf-promo-modal-head h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--mf-charcoal);
}
.mf-promo-modal-head p {
  color: var(--mf-muted);
  font-size: 0.92rem;
  margin: 0;
}

.mf-promo-list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.mf-promo-card {
  border: 1px solid var(--mf-line);
  border-radius: 12px;
  background: #fff;
  padding: 0.9rem 1.1rem;
  transition: border-color .15s ease, transform .15s ease;
}
.mf-promo-card:hover { border-color: var(--mf-terracotta); transform: translateY(-1px); }
.mf-promo-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; }
.mf-promo-card-label { font-weight: 600; color: var(--mf-charcoal); font-size: 1rem; line-height: 1.25; }
.mf-promo-card-desc { font-size: 0.84rem; color: var(--mf-muted); margin-top: 0.15rem; line-height: 1.4; }
.mf-promo-card-value {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--mf-terracotta);
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}
.mf-promo-card-value strong { font-size: 1.4rem; font-weight: 500; }

.mf-promo-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--mf-line);
  flex-wrap: wrap;
}
.mf-promo-card-code { display: inline-flex; align-items: center; gap: 0.45rem; }
.mf-promo-card-code span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mf-muted); }
.mf-promo-card-code code {
  background: var(--mf-cream);
  color: var(--mf-terracotta);
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.mf-promo-copy {
  background: var(--mf-cream);
  border: 1px solid var(--mf-line);
  color: var(--mf-charcoal);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.mf-promo-copy:hover { background: var(--mf-terracotta); color: #fff; }
.mf-promo-copy.is-copied {
  background: var(--mf-leaf);
  color: #fff;
  transform: scale(1.05);
}
.mf-promo-card-auto {
  font-size: 0.82rem;
  color: var(--mf-leaf);
  font-weight: 600;
  font-style: italic;
}
.mf-promo-card-meta { font-size: 0.78rem; color: var(--mf-muted); text-align: right; flex: 1; }

.mf-promo-modal-cta {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  padding-top: 0.5rem;
}

/* =============== Header / Navigation =============== */
.mf-header {
  background: var(--mf-paper);
  border-bottom: 1px solid var(--mf-line);
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: saturate(140%) blur(8px);
}
.mf-header .navbar {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Brand area */
.mf-header .navbar-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--mf-charcoal);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  letter-spacing: -0.01em;
}
.mf-header .navbar-brand:hover { color: var(--mf-terracotta); }
.mf-header .navbar-brand .mf-logo-default { width: 36px; height: 36px; }
.mf-header .navbar-brand .mf-logo-custom  { height: 52px; width: auto; max-width: 240px; display: block; }
.mf-header .navbar-brand svg { width: 34px; height: 34px; }
@media (max-width: 575px) {
  .mf-header .navbar-brand .mf-logo-custom { height: 42px; max-width: 180px; }
}

/* Nav items — refined, pill hover, no underline ever */
.mf-header .navbar-nav { gap: 0.15rem; }
.mf-header .nav-link {
  color: var(--mf-charcoal);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.45rem 0.85rem !important;
  border-radius: 999px;
  position: relative;
  transition: background-color .18s ease, color .18s ease;
  text-decoration: none !important;
}
.mf-header .nav-link:hover {
  color: var(--mf-terracotta);
  background-color: rgba(184, 67, 31, 0.07);
}
.mf-header .nav-link.active {
  color: var(--mf-terracotta);
  font-weight: 600;
}
.mf-header .nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 18px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--mf-terracotta);
}

/* Right side: language + cart + CTA */
.mf-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Language switch */
.mf-lang {
  display: inline-flex;
  background: var(--mf-cream);
  border-radius: 999px;
  padding: 3px;
  border: 1px solid var(--mf-line);
}
.mf-lang a {
  color: var(--mf-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.mf-lang a:hover { color: var(--mf-charcoal); }
.mf-lang a.active {
  background: var(--mf-paper);
  color: var(--mf-terracotta);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Cart icon */
.mf-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--mf-charcoal);
  transition: background-color .18s ease, color .18s ease;
}
.mf-cart:hover {
  color: var(--mf-terracotta);
  background-color: rgba(184, 67, 31, 0.08);
}
.mf-cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--mf-terracotta);
  color: #fff;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  font-size: 0.66rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--mf-paper);
}

/* CTA button */
.mf-header .mf-cta {
  padding: 0.55rem 1.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 14px -8px rgba(184,67,31,.5);
}
.mf-header .mf-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 20px -8px rgba(184,67,31,.55);
}

/* Mobile tweaks */
@media (max-width: 991px) {
  .mf-header .navbar-collapse {
    padding-top: 1rem;
    margin-top: 0.6rem;
    border-top: 1px solid var(--mf-line);
  }
  .mf-header .navbar-nav { gap: 0; margin-bottom: 1rem; }
  .mf-header .nav-link { padding: 0.65rem 1rem !important; border-radius: 8px; }
  .mf-header .nav-link.active::after { display: none; }
  .mf-header .nav-link.active { background-color: rgba(184, 67, 31, 0.08); }
  .mf-nav-actions { justify-content: space-between; padding-bottom: 0.4rem; }
}

/* Hero */
.mf-hero {
  background: linear-gradient(180deg, var(--mf-cream) 0%, var(--mf-paper) 100%);
  padding: 5rem 0 4rem;
  position: relative;
  /* overflow stays visible so the torn-paper ::after below the hero
     isn't clipped — rounded corners inside (.mf-hero-img) handle their own clipping */
}
.mf-hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  line-height: 1.08;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.mf-hero .lead {
  font-size: 1.15rem;
  color: var(--mf-muted);
  max-width: 55ch;
  margin-left: auto;
  margin-right: auto;
}
/* When the hero has a side-by-side image, undo the centering so text aligns left of the image */
.mf-hero .row.align-items-center > [class^="col-"]:not(:only-child) h1,
.mf-hero .row.align-items-center > [class^="col-"]:not(:only-child) .lead {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.mf-hero-img {
  position: relative;
  border-radius: 22px;
  box-shadow: 0 30px 60px -25px rgba(42,36,24,0.35);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--mf-cream);
}
.mf-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* When the hero is in slider mode (2+ photos), stack them and crossfade */
.mf-hero-img.is-slider img.mf-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.3s ease-in-out, transform 8s ease-out;
  transform: scale(1.02);
}
.mf-hero-img.is-slider img.mf-hero-slide.is-active {
  opacity: 1;
  transform: scale(1.06);   /* slow ken-burns zoom on the visible slide */
}
@media (prefers-reduced-motion: reduce) {
  .mf-hero-img.is-slider img.mf-hero-slide { transition: none; transform: none; }
  .mf-hero-img.is-slider img.mf-hero-slide.is-active { transform: none; }
}

/* Hero pull-quote */
.mf-hero-quote {
  position: relative;
  padding: 0.85rem 1.1rem 0.85rem 2.4rem;
  margin: 0;
  background: rgba(184, 67, 31, 0.06);
  border-left: 3px solid var(--mf-terracotta);
  border-radius: 0 12px 12px 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--mf-charcoal);
  max-width: 52ch;
}
.mf-hero-quote em { font-style: italic; font-weight: 500; }
.mf-quote-mark {
  position: absolute;
  left: 0.55rem; top: -0.1rem;
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--mf-terracotta);
  opacity: 0.45;
}

/* =============== Traceability "See the Farm" section =============== */
.mf-traceability {
  background: var(--mf-charcoal);
  color: #FBFAF5;
  padding: 4.5rem 0 5rem;
  position: relative;
  overflow: visible;
}

/* Ribbon banner that sits across the top edge */
.mf-trace-ribbon {
  position: relative;
  text-align: center;
  margin: -4.5rem auto 2.2rem;
  display: flex;
  justify-content: center;
}
.mf-trace-ribbon span {
  display: inline-block;
  background: var(--mf-terracotta);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  padding: 1.05rem 2.5rem 0.85rem;
  position: relative;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,0.4);
}
/* Hand-torn edges on the ribbon: irregular polygons on the sides */
.mf-trace-ribbon span::before,
.mf-trace-ribbon span::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 16px;
  background: var(--mf-terracotta);
}
.mf-trace-ribbon span::before {
  left: -10px;
  clip-path: polygon(100% 0, 50% 25%, 100% 50%, 40% 75%, 100% 100%, 0 100%, 0 0);
}
.mf-trace-ribbon span::after {
  right: -10px;
  clip-path: polygon(0 0, 50% 25%, 0 50%, 60% 75%, 0 100%, 100% 100%, 100% 0);
}

.mf-trace-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: 0 1rem;
}
.mf-trace-title {
  font-family: var(--font-serif);
  color: #FBFAF5;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 auto 1.2rem;
  max-width: 22ch;
}
.mf-trace-sub {
  color: #d8d1bf;
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 62ch;
  margin: 0 auto 3rem;
}

/* The 3 steps */
.mf-trace-steps {
  list-style: none;
  padding: 0;
  margin: 0 auto 2.6rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 880px;
}
.mf-trace-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.mf-trace-steps p {
  color: #FBFAF5;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.4;
  margin: 0;
  max-width: 26ch;
}
.mf-trace-steps strong { color: var(--mf-yolk); font-weight: 600; }

/* Hand-drawn icon images carry their own ring + illustration — we just float them */
.mf-trace-icon {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mf-trace-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}
.mf-trace-steps li:hover .mf-trace-icon {
  transform: rotate(-2deg) scale(1.04);
}
@media (max-width: 768px) {
  .mf-trace-icon { width: 130px; height: 130px; }
}

/* CTA */
.mf-trace-cta {
  display: inline-block;
  background: var(--mf-terracotta);
  color: #fff !important;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.22em;
  padding: 1rem 2.4rem;
  border-radius: 999px;
  text-decoration: none !important;
  margin-top: 0.5rem;
  box-shadow: 0 12px 22px -10px rgba(184,67,31,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.mf-trace-cta:hover {
  background: var(--mf-terracotta-dark);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -12px rgba(184,67,31,0.7);
}

/* Mobile */
@media (max-width: 768px) {
  .mf-trace-steps { grid-template-columns: 1fr; gap: 2.2rem; }
  .mf-trace-sub { margin-bottom: 2rem; }
  .mf-trace-ribbon { margin-top: -4rem; }
}

/* Pillars / value props */
.mf-pillar {
  background: var(--mf-paper);
  border: 1px solid var(--mf-line);
  border-radius: 16px;
  padding: 1.8rem;
  height: 100%;
}
.mf-pillar .pillar-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mf-cream);
  color: var(--mf-terracotta);
  border-radius: 12px;
  margin-bottom: 1rem;
}
.mf-pillar h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

/* =============== Long-form prose (justified body text) =============== */
.mf-prose p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.mf-prose p.lead,
.mf-prose .text-center p,
.mf-prose .text-center {
  text-align: center;
}
.mf-prose ul, .mf-prose ol {
  text-align: left;
}
.mf-prose ol li, .mf-prose ul li {
  margin-bottom: 0.35rem;
  line-height: 1.65;
}
/* Avoid awkward gaps on narrow viewports */
@media (max-width: 575px) {
  .mf-prose p { text-align: left; hyphens: none; }
}

/* =============== Editorial photo strip (home "Inside our farm") =============== */
.mf-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}
.mf-photo-strip-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--mf-cream);
  box-shadow: 0 12px 30px -22px rgba(42, 36, 24, 0.5);
  aspect-ratio: 4 / 3;   /* uniform default — works well for both 16:9 and 4:3 source photos */
}
.mf-photo-strip-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mf-photo-strip-tile:hover img { transform: scale(1.04); }

/* Modifier tiles for editorial rhythm */
.mf-photo-strip-tile.tall { aspect-ratio: 3 / 4; }   /* portrait — for chicks or vertical compositions */
.mf-photo-strip-tile.wide { grid-column: span 2; aspect-ratio: 8 / 3; }

/* ----- Slider variant (>4 photos) — native scroll-snap ----- */
.mf-photo-slider {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 56px;
}
.mf-photo-slider-window {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  border-radius: 16px;
}
.mf-photo-slider-window::-webkit-scrollbar { display: none; }

.mf-photo-slider-window > .mf-photo-strip-tile {
  flex: 0 0 calc((100% - 14px * 3) / 4);   /* 4 visible per page on desktop */
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .mf-photo-slider-window > .mf-photo-strip-tile { flex: 0 0 calc((100% - 14px) / 2); }
}
@media (max-width: 500px) {
  .mf-photo-slider-window > .mf-photo-strip-tile { flex: 0 0 100%; }
}

.mf-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--mf-paper);
  color: var(--mf-charcoal);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 10px 22px -10px rgba(42,36,24,.4);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.mf-slider-arrow:hover { background: var(--mf-terracotta); color: #fff; transform: translateY(-50%) scale(1.05); }
.mf-slider-arrow:disabled { opacity: .3; cursor: not-allowed; }
.mf-slider-arrow.prev { left: 4px; }
.mf-slider-arrow.next { right: 4px; }

.mf-slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.mf-slider-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mf-line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color .15s ease, transform .15s ease;
}
.mf-slider-dots button.is-active {
  background: var(--mf-terracotta);
  transform: scale(1.4);
}
@media (max-width: 768px) {
  .mf-photo-slider { padding: 0 40px; }
}

.mf-photo-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.2rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(42,36,24,0.78) 100%);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

/* Tablet — 2 columns, tiles stack naturally with their aspect-ratios */
@media (max-width: 900px) {
  .mf-photo-strip { grid-template-columns: repeat(2, 1fr); }
  .mf-photo-strip-tile.wide { grid-column: span 2; aspect-ratio: 16 / 9; }
}
/* Phone — single column */
@media (max-width: 500px) {
  .mf-photo-strip { grid-template-columns: 1fr; }
  .mf-photo-strip-tile,
  .mf-photo-strip-tile.tall,
  .mf-photo-strip-tile.wide { aspect-ratio: 4 / 3; grid-column: auto; }
}

/* Tilt-and-bob for hand-drawn illustration SVGs */
.mf-tilt {
  display: inline-block;
  animation: mfTilt 6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes mfTilt {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .mf-tilt { animation: none; }
}

/* =============== Torn-paper dividers =============== */
/* One SVG mask is shared across every section. The ::after sits below
   the parent and inherits the parent's background colour — so a cream
   section gets a cream torn edge that "rips" down into whatever section
   comes next. Same hand-drawn aesthetic as the brand badge.
   The torn shape is also DRAWN with an irregular jagged top edge so the
   shape itself looks ripped, not stamped. */
:root {
  --mf-torn-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 38' preserveAspectRatio='none'%3e%3cpath d='M0,0 L1200,0 L1200,8 L1175,16 L1148,10 L1118,20 L1086,14 L1052,22 L1018,12 L985,18 L952,9 L920,15 L888,21 L854,13 L820,17 L786,10 L752,20 L718,15 L684,8 L650,18 L618,22 L585,14 L552,11 L520,19 L488,13 L455,21 L422,15 L388,9 L355,17 L322,13 L290,20 L256,14 L222,8 L190,18 L156,15 L122,21 L88,12 L54,17 L20,10 L0,14 Z' fill='black'/%3e%3c/svg%3e");
  --mf-torn-height: 16px;
}

section,
.mf-header,
.mf-hen-hero {
  position: relative;
}

section::after,
.mf-header::after,
.mf-hen-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--mf-torn-height);
  background-color: var(--mf-paper);  /* default — overridden per section bg */
  -webkit-mask: var(--mf-torn-mask) no-repeat top / 100% 100%;
          mask: var(--mf-torn-mask) no-repeat top / 100% 100%;
  pointer-events: none;
  z-index: 4;
}

/* Match the torn shape's colour to each section's background */
section.cream::after,
.mf-hen-hero::after            { background-color: var(--mf-cream); }
section.leaf::after            { background-color: var(--mf-leaf); }
section.bg-terra::after        { background-color: var(--mf-terracotta); }
section.mf-traceability::after { background-color: var(--mf-charcoal); }
section.mf-hero::after,
.mf-header::after              { background-color: var(--mf-paper); }

/* Replace the old hairline border with the torn one */
.mf-header { border-bottom: none; }

/* Footer doesn't need its own — the section above it does the work */

/* Opt-out for any custom section that shouldn't have one */
.mf-no-torn::after { display: none !important; }

/* Section spacing */
section { padding: 4.5rem 0; }
section.compact { padding: 3rem 0; }
section.cream  { background: var(--mf-cream); }
section.leaf   { background: var(--mf-leaf); color: #fff; }
section.leaf h1, section.leaf h2, section.leaf h3, section.leaf h4 { color: #fff; }
section.leaf .eyebrow { color: var(--mf-yolk); }

/* Product card */
.product-card {
  background: var(--mf-paper);
  border: 1px solid var(--mf-line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -25px rgba(42,36,24,0.35);
}
.product-card .product-img {
  aspect-ratio: 4/3;
  background: var(--mf-cream);
  overflow: hidden;
}
.product-card .product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card .product-body { padding: 1.25rem 1.4rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.product-card h5 { margin-bottom: .25rem; font-size: 1.2rem; }
.product-card .price { color: var(--mf-terracotta); font-weight: 600; font-size: 1.1rem; }
.product-card .stock-note { font-size: .8rem; color: var(--mf-leaf); font-weight: 600; }

/* =============== Farmer directory (Our Farmers page) =============== */

/* Filter bar */
.mf-directory-filters {
  background: var(--mf-paper);
  border: 1px solid var(--mf-line);
  border-radius: 14px;
  padding: 1rem 1.2rem .9rem;
  margin: 1.4rem 0 2rem;
  box-shadow: 0 8px 24px -18px rgba(42,36,24,.25);
}
.mf-filter-row {
  display: flex;
  gap: .8rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.mf-filter-field { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 130px; }
.mf-filter-field.grow { flex: 1 1 240px; }
.mf-filter-field label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin-bottom: .3rem;
}
.mf-filter-field select,
.mf-filter-field input {
  padding: .55rem .8rem;
  border: 1px solid var(--mf-line);
  border-radius: 10px;
  font-size: .95rem;
  background: #fff;
  font-family: inherit;
  color: var(--mf-charcoal);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mf-filter-field select:focus,
.mf-filter-field input:focus {
  outline: none;
  border-color: var(--mf-terracotta);
  box-shadow: 0 0 0 3px rgba(184,67,31,.12);
}
.mf-search-wrap {
  position: relative;
}
.mf-search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mf-muted);
  pointer-events: none;
}
.mf-search-wrap input {
  width: 100%;
  padding-left: 34px;
}
.mf-filter-actions { display: flex; gap: .4rem; align-items: stretch; }
.btn-mf-filter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--mf-terracotta);
  color: #fff;
  border: none;
  padding: .6rem 1.1rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .15s ease;
}
.btn-mf-filter:hover { background: var(--mf-terracotta-dark); }
.btn-mf-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--mf-line);
  border-radius: 10px;
  background: #fff;
  color: var(--mf-muted);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.btn-mf-clear:hover { color: var(--mf-terracotta); border-color: var(--mf-terracotta); }

.mf-filter-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--mf-line);
  font-size: .82rem;
  color: var(--mf-muted);
  flex-wrap: wrap;
  gap: .4rem;
}
.mf-filter-summary strong { color: var(--mf-charcoal); font-weight: 600; }
.mf-filter-counts { display: inline-flex; align-items: center; gap: .25rem; }
.mf-dot-y, .mf-dot-w, .mf-dot-e { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .15rem; vertical-align: middle; }
.mf-dot-y { background: #B8431F; }
.mf-dot-w { background: #5A7548; }
.mf-dot-e { background: #E8A93C; }

/* Card grid — 4 columns at xl, 3 at lg, 2 at md, 1 at sm */
.mf-farmer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 1.4rem;
}
@media (max-width: 1199px) { .mf-farmer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .mf-farmer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .mf-farmer-grid { grid-template-columns: 1fr; } }

/* Farmer card */
.mf-farmer-card {
  background: var(--mf-paper);
  border: 1px solid var(--mf-line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
  box-shadow: 0 6px 18px -14px rgba(42,36,24,.25);
}
.mf-farmer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -28px rgba(42,36,24,.45);
  border-color: rgba(184,67,31,.4);
}

/* Header strip (terracotta / leaf / etc. by role) */
.mf-farmer-card-head {
  padding: 1.1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  position: relative;
  color: #fff;
}
.mf-farmer-card-head::after {
  /* subtle decorative torn-paper bottom on the card head */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 8px;
  background-color: inherit;
  -webkit-mask: var(--mf-torn-mask) no-repeat top / 100% 100%;
          mask: var(--mf-torn-mask) no-repeat top / 100% 100%;
}
.mf-farmer-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.mf-farmer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mf-farmer-titlestack { min-width: 0; flex: 1; }
.mf-farmer-titlestack h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 .25rem;
  letter-spacing: -.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mf-farmer-rolebadge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Body */
.mf-farmer-body { padding: 1.1rem 1.2rem .8rem; flex: 1; display: flex; flex-direction: column; }
.mf-farmer-bio {
  font-size: .88rem;
  color: var(--mf-muted);
  line-height: 1.55;
  margin: 0 0 1rem;
  /* Clamp to 3 lines for visual rhythm */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}
.mf-bio-empty { font-style: italic; opacity: .8; }

/* Stats row */
.mf-farmer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding: .8rem 0;
  margin-bottom: .8rem;
  border-top: 1px solid var(--mf-line);
  border-bottom: 1px solid var(--mf-line);
  text-align: center;
}
.mf-farmer-stats > div { display: flex; flex-direction: column; align-items: center; }
.mf-farmer-stats .num {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--mf-terracotta);
  line-height: 1;
}
.mf-farmer-stats .lbl {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin-top: .25rem;
}

/* Meta list (location / phone / farm) */
.mf-farmer-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}
.mf-farmer-meta li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .85rem;
  color: var(--mf-charcoal);
  line-height: 1.4;
}
.mf-farmer-meta li svg {
  color: var(--mf-terracotta);
  flex-shrink: 0;
  margin-top: 2px;
}
.mf-farmer-meta li a { color: var(--mf-charcoal); }
.mf-farmer-meta li a:hover { color: var(--mf-terracotta); }
.mf-meta-sub { font-size: .76rem; color: var(--mf-muted); margin-top: .1rem; }

/* Footer (CTA row) */
.mf-farmer-card-foot {
  padding: .85rem 1.2rem 1.05rem;
  background: var(--mf-cream);
  border-top: 1px solid var(--mf-line);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.mf-farmer-tenure {
  font-size: .72rem;
  color: var(--mf-muted);
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
}
.mf-farmer-tenure .mf-since { font-weight: 600; color: var(--mf-charcoal); }
.mf-farmer-actions { display: flex; gap: .4rem; align-items: stretch; }
.mf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--mf-line);
  color: #25D366; /* WhatsApp green */
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color .15s ease, color .15s ease;
}
.mf-icon-btn:hover { background: #25D366; color: #fff; }
.mf-trace-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--mf-terracotta);
  color: #fff;
  padding: .55rem .8rem;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease;
}
.mf-trace-btn:hover { background: var(--mf-terracotta-dark); color: #fff; }

/* Old .farmer-card kept for backward compatibility (admin areas may use it) */
.farmer-card {
  text-align: center;
}
.farmer-card .photo {
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mf-cream);
  margin: 0 auto 1rem;
  width: 75%;
}
.farmer-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.farmer-card .role {
  font-size: .8rem;
  color: var(--mf-terracotta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Impact stats */
.stat {
  text-align: center;
  padding: 1.2rem;
}
.stat .num {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--mf-terracotta);
  font-weight: 500;
}
.stat .label {
  font-size: .9rem;
  color: var(--mf-muted);
  margin-top: .35rem;
}

/* Footer */
.mf-footer {
  background: var(--mf-charcoal);
  color: #d8d1bf;
  padding: 4rem 0 1.5rem;
}
.mf-footer h6 {
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.mf-footer a { color: #d8d1bf; }
.mf-footer a:hover { color: var(--mf-yolk); text-decoration: none; }
.mf-footer .colophon {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 3rem;
  padding-top: 1.5rem;
  font-size: .85rem;
  color: #8a8270;
}

/* Trace lookup card */
.trace-card {
  background: var(--mf-cream);
  border-radius: 22px;
  padding: 2.5rem;
  border: 1px solid var(--mf-line);
}

/* Trace story page */
.trace-story .story-block {
  background: var(--mf-paper);
  border: 1px solid var(--mf-line);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1rem;
}
.trace-story .story-block h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mf-terracotta);
  margin-bottom: .35rem;
}

/* Form polish */
.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--mf-line);
  padding: 0.65rem 0.9rem;
  font-size: 1rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--mf-terracotta);
  box-shadow: 0 0 0 0.18rem rgba(184,67,31,0.12);
}
.form-label { font-weight: 600; font-size: .9rem; }

/* Alerts */
.alert-success-mf { background: #E8F0DF; color: var(--mf-leaf-dark); border-color: #C9DBB6; }
.alert-error-mf   { background: #F8DED3; color: var(--mf-terracotta-dark); border-color: #EFC4B3; }

/* Pickup point selector (checkout) */
.mf-pickup-list { display: flex; flex-direction: column; gap: .5rem; }
.mf-pickup-opt {
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1rem; border: 1.5px solid var(--mf-line); border-radius: 12px;
  cursor: pointer; background: #fff;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.mf-pickup-opt:hover { border-color: var(--mf-terracotta); }
.mf-pickup-opt.is-selected {
  border-color: var(--mf-terracotta);
  background: rgba(184, 67, 31, 0.05);
  box-shadow: 0 6px 16px -10px rgba(184, 67, 31, .35);
}
.mf-pickup-opt input[type="radio"] { accent-color: var(--mf-terracotta); flex-shrink: 0; }
.mf-pickup-main { flex: 1; }
.mf-pickup-name { font-weight: 600; font-size: .98rem; color: var(--mf-charcoal); }
.mf-pickup-meta { font-size: .78rem; color: var(--mf-muted); margin-top: .15rem; }
.mf-pickup-note { font-size: .78rem; color: var(--mf-leaf); font-style: italic; margin-top: .2rem; }
.mf-pickup-fee {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mf-terracotta);
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}
.mf-pickup-free {
  display: inline-block;
  background: var(--mf-leaf);
  color: #fff;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .05em;
}

/* Cart */
.cart-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--mf-line);
}
.cart-row .thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--mf-cream); flex: 0 0 64px; }
.cart-row .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Responsive tweaks */
@media (max-width: 768px) {
  .mf-hero { padding: 3rem 0 2.5rem; }
  section { padding: 3rem 0; }
}

/* ---------------------------------------------------------------------------
   Brand patterns — seamless SVG tiles built from the brand sheet motifs
   (hen, egg, leaf, sprout, wheat, sunrise, seeds).
   Use as a section backdrop, modal background, badge band, or any surface
   that wants to feel branded without competing with content.
   --------------------------------------------------------------------------- */
.mf-brand-bg {
  background-repeat: repeat;
  background-size: 380px 380px;
}
.mf-brand-bg-cream { background-color: var(--mf-cream);     background-image: url('../img/brand/pattern-cream.svg'); }
.mf-brand-bg-leaf  { background-color: var(--mf-leaf);      background-image: url('../img/brand/pattern-leaf.svg');  color: var(--mf-cream); }
.mf-brand-bg-terra { background-color: var(--mf-terracotta);background-image: url('../img/brand/pattern-terra.svg'); color: var(--mf-cream); }
.mf-brand-bg-leaf, .mf-brand-bg-terra { background-repeat: repeat; background-size: 380px 380px; }

/* Pattern-strip — a thin decorative band, e.g. above the footer */
.mf-brand-strip {
  height: 14px;
  background-repeat: repeat-x;
  background-size: auto 14px;
}
.mf-brand-strip.cream { background-color: var(--mf-cream);     background-image: url('../img/brand/pattern-cream.svg'); }
.mf-brand-strip.leaf  { background-color: var(--mf-leaf);      background-image: url('../img/brand/pattern-leaf.svg');  }
.mf-brand-strip.terra { background-color: var(--mf-terracotta);background-image: url('../img/brand/pattern-terra.svg'); }

/* ---------------------------------------------------------------------------
   Public surface cards & form polish — the public layout never loaded the
   admin's .card-mf rules, so cart/checkout/contact cards had a background
   but no padding. This brings them in line.
   --------------------------------------------------------------------------- */
.card-mf {
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: 16px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 1px 0 rgba(42,36,24,0.04);
}
.card-mf h3, .card-mf h4 { font-family: var(--font-serif); }
.card-mf > h4:first-child, .card-mf > h3:first-child { margin-top: 0; }

/* Form polish — applies to native Bootstrap-style fields and to .form-mf */
.form-control, .form-select,
.form-mf input, .form-mf select, .form-mf textarea {
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--mf-line);
  font-size: 1rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.form-control:focus, .form-select:focus,
.form-mf input:focus, .form-mf select:focus, .form-mf textarea:focus {
  border-color: var(--mf-terracotta);
  box-shadow: 0 0 0 3px rgba(184, 67, 31, .12);
  outline: none;
}
.form-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--mf-charcoal);
  margin-bottom: .4rem;
  letter-spacing: .01em;
}

/* Brand-aware page backdrop — sits behind the cart, checkout, and contact
   forms. The richer cream-1 tile is a stamp-collage; a soft cream wash sits
   over it so cards floating on top still feel calm. */
.mf-page-bg {
  position: relative;
  padding: 3.5rem 0;
  background-color: var(--mf-cream);
  background-image:
    linear-gradient(180deg, rgba(247,241,225,0.55), rgba(247,241,225,0.70)),
    url('../img/brand/pattern-cream 1.webp');
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 380px 380px;
}
@media (max-width: 768px) { .mf-page-bg { padding: 2.5rem 0; } }

/* Payment / radio-option cards — bigger touch targets, consistent with
   .mf-pickup-opt for the checkout flow. */
.mf-payment-list {
  display: grid; gap: .65rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mf-payment-opt {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--mf-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.mf-payment-opt:hover { border-color: var(--mf-terracotta); }
.mf-payment-opt input[type="radio"] { accent-color: var(--mf-terracotta); flex-shrink: 0; }
.mf-payment-opt:has(input[type="radio"]:checked) {
  border-color: var(--mf-terracotta);
  background: rgba(184, 67, 31, 0.05);
  box-shadow: 0 6px 16px -10px rgba(184, 67, 31, .35);
}

/* Order-summary card sits on the cream backdrop with extra warmth */
.mf-summary-card {
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: 0 10px 30px -18px rgba(42, 36, 24, .25);
}
.mf-summary-card hr { border-top: 1px dashed var(--mf-line); margin: 1rem 0; opacity: 1; }

/* Direct-lines list on /contact — turns the bare <ul> into a tidy card */
.mf-contact-lines { list-style: none; padding: 0; margin: 0; }
.mf-contact-lines li {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--mf-line);
  font-size: .95rem;
}
.mf-contact-lines li:last-child { border-bottom: none; }
.mf-contact-lines .ico {
  flex: 0 0 36px; height: 36px; border-radius: 10px;
  background: var(--mf-cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.mf-contact-lines a { color: var(--mf-charcoal); text-decoration: none; font-weight: 500; }
.mf-contact-lines a:hover { color: var(--mf-terracotta); }

/* ---------------------------------------------------------------------------
   Trace page — freshness badge + immersive farmer cards.
   --------------------------------------------------------------------------- */
.mf-freshness {
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(135deg, #FAF6E9, #fff);
  border-left: 4px solid var(--mf-leaf);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 14px -10px rgba(42, 36, 24, .18);
}
.mf-freshness-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.1));
}
.mf-freshness-headline {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--mf-charcoal);
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.mf-freshness-tag {
  background: var(--mf-leaf);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .18rem .55rem;
  border-radius: 999px;
}
.mf-freshness-sub { font-size: .85rem; color: var(--mf-muted, #6B6357); margin-top: .15rem; }

.mf-farmer-cards { display: flex; flex-direction: column; gap: 1.5rem; }
.mf-trace-farmer {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 8px 20px -15px rgba(42, 36, 24, .15);
  min-width: 0; /* let inner content shrink properly inside grid */
}
.mf-trace-farmer > * { min-width: 0; }
.mf-trace-farmer-portrait {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--mf-cream);
  width: 100%;
  max-width: 100%;
}
.mf-trace-farmer-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%; /* favour faces over feet */
  display: block;
}
.mf-trace-farmer-role {
  position: absolute;
  top: .6rem; left: .6rem;
  background: rgba(255,255,255,.94);
  color: var(--mf-charcoal);
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mf-role-youth { background: rgba(184, 67, 31, .92); color: #fff; }
.mf-role-woman { background: rgba(90, 117, 72, .92);  color: #fff; }
.mf-role-elder { background: rgba(142, 50, 20, .92);  color: #fff; }

.mf-trace-farmer-body h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin: 0 0 .25rem;
  color: var(--mf-charcoal);
}
.mf-trace-farmer-loc {
  font-size: .85rem;
  color: var(--mf-muted, #6B6357);
  margin-bottom: .75rem;
}
.mf-trace-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--mf-terracotta);
  border-left: 3px solid var(--mf-terracotta);
  padding: .25rem 0 .25rem .85rem;
  margin: .5rem 0 1rem;
}
.mf-trace-bio {
  font-size: .95rem;
  color: var(--mf-charcoal);
  line-height: 1.5;
  margin: .5rem 0 1rem;
}
.mf-trace-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .4rem;
  padding: .85rem 0;
  border-top: 1px dashed var(--mf-line);
  border-bottom: 1px dashed var(--mf-line);
  margin-bottom: 1rem;
}
.mf-trace-stats > div { font-size: .82rem; color: var(--mf-muted, #6B6357); }
.mf-trace-stats strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--mf-terracotta);
  line-height: 1.1;
}

/* Horizontal scroll strip of farmer photos */
.mf-trace-strip {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.mf-trace-strip figure {
  flex: 0 0 160px;
  margin: 0;
  scroll-snap-align: start;
}
.mf-trace-strip img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--mf-cream);
  display: block;
}
.mf-trace-strip figcaption {
  font-size: .72rem;
  color: var(--mf-muted, #6B6357);
  margin-top: .3rem;
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.3;
}

/* Tablet — stack the portrait above the body */
@media (max-width: 820px) {
  .mf-trace-farmer {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.1rem;
  }
  .mf-trace-farmer-portrait {
    aspect-ratio: 16/10;
    max-height: 280px;
  }
}

/* Phone — larger swipeable photos in the strip + tighter typography */
@media (max-width: 600px) {
  .mf-trace-farmer-portrait { aspect-ratio: 16/9; max-height: 240px; }
  .mf-trace-farmer-body h3 { font-size: 1.3rem; }
  .mf-trace-quote { font-size: 1rem; padding-left: .65rem; }
  .mf-trace-stats { gap: .25rem; }
  .mf-trace-stats > div { font-size: .78rem; }
  .mf-trace-stats strong { font-size: 1.15rem; }
  .mf-trace-strip figure { flex: 0 0 65vw; max-width: 260px; }
  .mf-freshness { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* Tiny screens — keep things readable, photos take ~80% of viewport */
@media (max-width: 420px) {
  .mf-trace-farmer { padding: .85rem; gap: .85rem; }
  .mf-trace-farmer-portrait { max-height: 200px; }
  .mf-trace-stats { grid-template-columns: 1fr 1fr; }
  .mf-trace-strip figure { flex: 0 0 78vw; max-width: 320px; }
}

/* Farmer media — video + voice greeting inside the farmer card */
.mf-trace-media {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin: .75rem 0 1rem;
}
.mf-trace-video, .mf-trace-audio {
  flex: 1 1 280px;
  min-width: 0;
  background: var(--mf-cream);
  border-radius: 12px;
  padding: .65rem;
}
.mf-trace-video video {
  width: 100%; max-height: 240px;
  border-radius: 8px;
  display: block;
  background: #000;
}
.mf-trace-audio audio {
  width: 100%;
  margin-top: .4rem;
}
.mf-trace-media-cap {
  font-size: .78rem;
  font-weight: 600;
  color: var(--mf-terracotta);
  margin-bottom: .35rem;
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------------------
   Star rating widget (CSS-only) + reviews list.
   --------------------------------------------------------------------------- */
.mf-rate {
  background: linear-gradient(135deg, #FFF8EE, #fff);
  border: 1px solid var(--mf-line);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.25rem;
  margin-top: 1.5rem;
}
.mf-rate-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1rem;
}
.mf-rate-head h6 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--mf-charcoal);
}
.mf-rate-avg { display: flex; align-items: center; gap: .45rem; font-size: .92rem; }
.mf-rate-avg strong { font-family: var(--font-serif); font-size: 1.15rem; color: var(--mf-charcoal); }

/* Display stars (read-only) */
.mf-rate-stars-display { color: var(--mf-line); font-size: 1.1rem; letter-spacing: .05em; }
.mf-rate-stars-display .on { color: #E8A93C; }

.mf-rate-thanks {
  padding: 1rem 1.25rem;
  background: #E8F0DF;
  border-left: 4px solid var(--mf-leaf);
  border-radius: 10px;
  color: #3F5430;
  font-size: .92rem;
}

/* Interactive star input — uses reverse flex + sibling selectors so hovering
   any star highlights it AND all stars to its left, golden-syrup style. */
.mf-rate-stars {
  display: flex; flex-direction: row-reverse; justify-content: flex-end;
  gap: .15rem;
  margin-bottom: .85rem;
}
.mf-rate-stars input { display: none; }
.mf-rate-stars label {
  font-size: 2.2rem;
  color: #E0D8C0;
  cursor: pointer;
  transition: color .12s ease, transform .12s ease;
  line-height: 1;
}
.mf-rate-stars label:hover,
.mf-rate-stars label:hover ~ label,
.mf-rate-stars input:checked ~ label {
  color: #E8A93C;
}
.mf-rate-stars label:hover { transform: scale(1.12); }

.mf-rate-form textarea, .mf-rate-form input[type="text"], .mf-rate-form input[type="email"] {
  width: 100%;
  border: 1px solid var(--mf-line);
  border-radius: 10px;
  padding: .7rem .9rem;
  font-size: .95rem;
  background: #fff;
  margin-bottom: .75rem;
  box-sizing: border-box;
  font-family: inherit;
}
.mf-rate-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
@media (max-width: 520px) { .mf-rate-row { grid-template-columns: 1fr; } }
.mf-rate-note {
  font-size: .78rem;
  color: var(--mf-muted, #6B6357);
  margin: .7rem 0 0;
}

/* Reviews list */
.mf-rate-list {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--mf-line);
}
.mf-rate-item {
  padding: .65rem 0;
  border-bottom: 1px dashed var(--mf-line);
}
.mf-rate-item:last-child { border-bottom: none; }
.mf-rate-item-head { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.mf-rate-item-body {
  margin: .35rem 0 0;
  color: var(--mf-charcoal);
  font-size: .92rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   Order status timeline — shown on /order/{code} and after Track Order lookup
   --------------------------------------------------------------------------- */
.mf-track-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .25rem;
  position: relative;
}
.mf-track-step {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .55rem 0;
  position: relative;
}
.mf-track-step + .mf-track-step .mf-track-bullet::before {
  /* connector line from the previous bullet */
  content: ''; position: absolute;
  left: 50%; top: -1rem;
  width: 2px; height: 1rem;
  background: var(--mf-line);
  transform: translateX(-50%);
}
.mf-track-step.is-done + .mf-track-step .mf-track-bullet::before,
.mf-track-step.is-done.is-done .mf-track-bullet::before {
  background: var(--mf-leaf);
}
.mf-track-bullet {
  flex: 0 0 38px; height: 38px;
  border-radius: 50%;
  background: var(--mf-cream);
  border: 2px solid var(--mf-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  position: relative;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.mf-track-body { padding-top: .3rem; }
.mf-track-label {
  font-weight: 600;
  color: var(--mf-charcoal);
  font-size: .98rem;
}
.mf-track-when {
  font-size: .8rem;
  color: var(--mf-muted, #6B6357);
  margin-top: .15rem;
}
/* Completed steps — leaf green */
.mf-track-step.is-done .mf-track-bullet {
  background: var(--mf-leaf);
  border-color: var(--mf-leaf);
  color: #fff;
}
.mf-track-step.is-done .mf-track-label { color: var(--mf-leaf); }
/* Current step — terracotta highlight */
.mf-track-step.is-current .mf-track-bullet {
  background: var(--mf-terracotta);
  border-color: var(--mf-terracotta);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(184, 67, 31, .15);
}
.mf-track-step.is-current .mf-track-label { color: var(--mf-terracotta); }