:root{
  --bg:#f7fbf5; --card:#fff; --text:#143016; --muted:#5a7a5d; --track:#e7efe4;
  --accent1:#7ac46b; --accent2:#d7b15e; --shadow:0 10px 30px rgba(20,48,22,.08);
  --radius:18px; --rail-x: 22px; --stage-gap: 14px; --dot-size: 16px; --timeline-max: 980px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0e140f; --card:#101710; --text:#e9f5eb; --muted:#b5c7b8; --track:#1e2a1f; --shadow:0 10px 30px rgba(0,0,0,.35); }
}

/* ---------- Scoped container so WP themes can't leak styles in ---------- */
#farm-to-pack{ padding: clamp(28px,6vw,72px) clamp(16px,5vw,48px);
  background: radial-gradient(1100px 740px at -10% 0%, #eaf5e7 0%, transparent 60%),
              radial-gradient(1000px 680px at 120% 10%, #fff6df 0%, transparent 60%), var(--bg);
  color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
#farm-to-pack .j-wrap{ max-width: min(92vw, 1600px); margin:0 auto; display:grid; gap:24px }
#farm-to-pack .j-head{ text-align:center }
#farm-to-pack .j-head h2{ margin:0 0 8px; font-size: clamp(24px,4.6vw,44px) }
#farm-to-pack .j-head p{ margin:0; color:var(--muted) }

/* Quick stage nav (mobile first) */
#farm-to-pack .quick-nav{ display:flex; gap:10px; overflow:auto; padding: 6px 2px 2px; scroll-snap-type: inline proximity; -webkit-overflow-scrolling: touch; }
#farm-to-pack .quick-nav a{ scroll-snap-align:start; white-space:nowrap; text-decoration:none; color:#204926; background:#eef6ea; border:1px solid #dfe7dc; border-radius:999px; padding:8px 12px; font-weight:700; flex:0 0 auto }
@media (prefers-color-scheme: dark){ #farm-to-pack .quick-nav a{ background:#152116; border-color:#203220; }}

/* Layout: sticky left hero, timeline right */
#farm-to-pack .journey{ display:grid !important; grid-template-columns: 1fr !important; gap: clamp(18px, 2.5vw, 40px); align-items:start; }
#farm-to-pack .journey > .hero{ grid-column:1 !important; margin:0 !important; }
#farm-to-pack .journey > .timeline{ grid-column:1 !important; margin:0 !important; }

/* >=980: two columns */
@media (min-width: 980px){
  #farm-to-pack .journey{ grid-template-columns: clamp(320px, 30vw, 520px) minmax(0,1fr) !important; }
  #farm-to-pack .journey > .hero{ grid-column:1 !important; }
  #farm-to-pack .journey > .timeline{ grid-column:2 !important; }
}

/* WordPress theme conflict fixes */
#farm-to-pack .journey > *{ min-width:0 }
#farm-to-pack .h-next p{ display:contents !important; }
#farm-to-pack .stage{ display:block }

/* Sticky hero (becomes normal block on mobile) */
#farm-to-pack .hero{ position:relative; top:auto; background: linear-gradient(180deg,var(--card),#fbfef9);
  border:1px solid #eef2ea; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(16px,2.2vw,28px); overflow:visible; isolation:isolate; min-height: auto; }
@media (min-width:980px){
  #farm-to-pack .hero{ position: -webkit-sticky; position: sticky; top: clamp(12px, 6vh, 36px); min-height: min(72vh, 860px); }
}
#farm-to-pack .hero::after{ content:""; position:absolute; inset:auto -30% -30% auto; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(215,177,94,.16), transparent 60%); filter: blur(10px); z-index:0; animation: drift 10s ease-in-out infinite alternate; }
@keyframes drift{ from{transform:translateY(-6px)} to{transform:translateY(6px)} }

#farm-to-pack .h-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px }
#farm-to-pack .h-title{ font-weight:800; letter-spacing:.2px }
#farm-to-pack .h-step{ font-weight:800; background:#f1f7ef; border:1px solid #dfe7dc; border-radius:999px; padding:6px 10px; color:#2a4c2f; }
@media (prefers-color-scheme: dark){
  #farm-to-pack .hero{ background: linear-gradient(180deg, var(--card), #0f1a10); border-color:#1d2a1e; }
  #farm-to-pack .h-step{ background:#142114; border-color:#223522; color:#d7f1db }
}
#farm-to-pack .h-graphic{ margin-top:10px; display:grid; place-items:center; }
#farm-to-pack .plant{ width: 100%; max-width: clamp(240px, 60vw, 360px); aspect-ratio: 1/1; border-radius: 22px;
  background: conic-gradient(from 90deg at 50% 50%, rgba(122,196,107,.15), rgba(215,177,94,.15)),
              radial-gradient(120px 80px at 50% 20%, rgba(122,196,107,.14), transparent 60%), var(--card);
  border:1px solid #eef2ea; box-shadow: var(--shadow); position:relative; overflow:hidden; }
@media (prefers-color-scheme: dark){ #farm-to-pack .plant{ border-color:#1e2a1f; }}
#farm-to-pack .plant svg{ width:76%; height:76%; display:block; margin:auto; }
#farm-to-pack .h-next{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap }
#farm-to-pack .btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; border-radius:12px; padding:0 14px; border:0; cursor:pointer; font-weight:800;
  background: linear-gradient(90deg, var(--accent1), var(--accent2)); color:#fff; box-shadow:0 8px 20px rgba(122,196,107,.28) }
#farm-to-pack .btn.ghost{ background:#eef6ea; color:#173a1d; box-shadow:none }
#farm-to-pack .btn[disabled]{opacity:.6; cursor:not-allowed}
#farm-to-pack .btn, #farm-to-pack .btn.ghost{ flex:1 1 auto }

/* Timeline column */
#farm-to-pack .timeline{ position:relative; width:100%; max-width: var(--timeline-max); }

/* Mobile: top progress bar */
#farm-to-pack .t-line{ display:none }
#farm-to-pack .t-progress{ display:block; position:sticky; top:0; height:6px; width:100%; border-radius:6px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); box-shadow: 0 4px 14px rgba(122,196,107,.35); margin-bottom:8px }

/* Desktop rail */
@media (min-width:980px){
  #farm-to-pack .t-line{ display:block; position:absolute; left: var(--rail-x); top:0; bottom:0; width:4px; background: var(--track); border-radius:2px; }
  #farm-to-pack .t-progress{ position:absolute; left: var(--rail-x); top:0; width:4px; height:0; border-radius:2px; background: linear-gradient(180deg,var(--accent1),var(--accent2)); box-shadow: 0 4px 14px rgba(122,196,107,.35); }
}

/* Cards */
#farm-to-pack .stage{ position:relative; margin: var(--stage-gap) 0; background: linear-gradient(180deg,var(--card),#fbfef9);
  border:1px solid #eef2ea; border-radius:16px; box-shadow: var(--shadow);
  padding: clamp(14px,1.8vw,22px); transform: translateY(8px); opacity:0; will-change: transform, opacity; transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease; scroll-margin-top: 18vh; }
@media (prefers-color-scheme: dark){ #farm-to-pack .stage{ background: linear-gradient(180deg, var(--card), #0f1a10); border-color:#1e2a1f; }}
#farm-to-pack .stage.is-visible{ transform: translateY(0); opacity:1 }
@media (min-width:980px){
  #farm-to-pack .stage{ margin: var(--stage-gap) 0 var(--stage-gap) calc(var(--rail-x) + 36px); }
  #farm-to-pack .stage::before{ content:""; position:absolute; top:20px; width: var(--dot-size); height: var(--dot-size); border-radius:50%; left: calc(-1 * (36px)); background:#cfe1ca; border:3px solid var(--card); box-shadow:0 0 0 2px #e3ecdf; }
  #farm-to-pack .stage.is-visible::before{ background: linear-gradient(135deg, var(--accent1), var(--accent2)); box-shadow:0 0 0 2px rgba(122,196,107,.25) }
}

#farm-to-pack .s-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px }
#farm-to-pack .s-icon{ flex:0 0 40px; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#eef6ea; color:#1f4224; border:1px solid #dfe7dc; }
#farm-to-pack .s-title{ font-weight:800; letter-spacing:.1px }
#farm-to-pack .s-body{ color:#2a472e; font-size: clamp(15px, 1.1vw, 17px) }
#farm-to-pack .chips{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap }
#farm-to-pack .chip{ background:#f1f7ef; border:1px solid #dfe7dc; border-radius:999px; padding:6px 10px; font-size:12px; color:#35553b; font-weight:700 }

/* Expand/collapse affordance for mobile */
#farm-to-pack .stage[aria-expanded="false"] .s-body{ display:none }
#farm-to-pack .stage[aria-expanded="false"] .chips{ display:none }
#farm-to-pack .stage .toggle{ margin-left:auto; border:0; background:transparent; font-weight:800; color:#1f4224; cursor:pointer }

/* Very wide */
@media (min-width: 1400px){
  :root{ --rail-x: 26px; --timeline-max: 1040px; }
  #farm-to-pack .s-icon{ width:44px; height:44px }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #farm-to-pack .stage{ transition:none }
  #farm-to-pack .t-progress{ transition:none }
  #farm-to-pack .hero::after{ animation:none }
  html{ scroll-behavior:auto }
}