/* First product-page system: quiet packaging, editorial nutrient type, useful detail. */
.product-story { --story-wash:#f5f7f1; color:var(--forest); }
.product-story [hidden] { display:none!important; }
.product-story .eyebrow { font-size:.875rem; }
.product-story h1 { font-size:clamp(3rem,5.2vw,5.8rem); line-height:1.08; }
.product-story h2 { font-size:clamp(2.4rem,4vw,4.4rem); line-height:1.12; }
.product-story p { text-wrap:pretty; }
.story-intro { padding:2rem 0 4rem; }
.story-crumbs { display:flex; flex-wrap:wrap; gap:.65rem; font-size:.9375rem; color:var(--muted); margin-bottom:1.5rem; }
.story-crumbs a:hover { text-decoration:underline; }
.story-hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6%; }
.story-visual { margin:0; min-width:0; }
.story-pack-stage { position:relative; width:100%; max-width:640px; aspect-ratio:1.05; margin:auto; }
.story-pack-stage .story-bag { position:absolute; width:66%; height:92%; object-fit:contain; bottom:5%; left:14%; transform:none!important; animation:none!important; }
.story-pack-stage .story-material { position:absolute; width:36%; height:24%; object-fit:contain; object-position:bottom; right:5%; bottom:4%; z-index:2; }
.story-visual figcaption { text-align:center; font-size:.875rem; color:var(--muted); margin-top:.5rem; }
.story-hero-copy { min-width:0; padding-block:1rem; }
.story-hero-copy .eyebrow { margin-bottom:1rem; }
.story-grade { font-family:'Outfit',sans-serif; font-size:clamp(2.25rem,4vw,4.4rem); color:var(--green); line-height:1.2; margin:.65rem 0 1.5rem; letter-spacing:-.035em; }
.story-hero-copy .lead { font-size:1.2rem; max-width:38ch; }
.story-facts { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 2rem; margin:2rem 0; }
.story-facts dt { font-size:.875rem; color:var(--muted); }
.story-facts dd { margin:.25rem 0 0; font-size:1.0625rem; }
.story-note { font-size:.875rem; color:var(--muted); margin-top:1.25rem; }
.story-links { display:flex; flex-wrap:wrap; gap:.4rem 2rem; padding:1.25rem 0; }
.story-links a { padding:.6rem 0; font-size:.9375rem; color:var(--muted); }
.story-links a:hover { color:var(--green); text-decoration:underline; }
.story-section { padding-block:clamp(3.5rem,7vw,7rem); }
.story-section .eyebrow { margin-bottom:1rem; }
.story-heading { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:2rem; margin-bottom:3rem; }
.story-heading>p { color:var(--muted); max-width:43ch; }
.story-analysis { background:var(--story-wash); }
.nutrient-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.nutrient-tab { text-align:left; padding:1rem 0 1.5rem; border-bottom:2px solid #d8e0d3; opacity:.65; }
.nutrient-tab[aria-selected=true] { opacity:1; border-color:var(--green); }
.nutrient-tab:hover { opacity:1; }
.nutrient-tab .nutrient-value { display:block; font-family:'Outfit',sans-serif; font-size:clamp(3.7rem,8vw,8rem); font-weight:500; line-height:1.1; letter-spacing:-.05em; }
.nutrient-value small { font-size:.3em; margin-left:.15em; letter-spacing:0; }
.nutrient-label { display:block; font-size:1rem; margin-top:.5rem; }
.nutrient-panel { display:grid; grid-template-columns:.7fr 1.5fr; gap:2rem; padding-top:2.5rem; min-height:175px; }
.nutrient-panel h3 { font-size:1.65rem; line-height:1.25; }
.nutrient-panel p { font-size:1.1rem; color:var(--muted); max-width:55ch; }
.nutrient-support { display:flex; flex-wrap:wrap; gap:.75rem 2rem; margin-top:2rem; font-size:1rem; }
.nutrient-support strong { font-weight:500; }
.story-source { font-size:.875rem; color:var(--muted); margin-top:1.5rem; }
.story-source a { text-decoration:underline; text-underline-offset:3px; }
.story-analysis details { margin-top:2rem; }
.product-story summary { min-height:48px; cursor:pointer; padding:.75rem 0; }
.story-analysis .spec-list { max-width:800px; margin-top:1rem; }
.story-programme-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:7%; align-items:start; }
.story-programme-intro>p:not(.eyebrow) { color:var(--muted); margin:1.5rem 0; font-size:1.1rem; }
.story-crops { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; color:var(--green); font-size:.9375rem; }
.stage-list { display:grid; gap:.5rem; }
.stage-list details { padding:.4rem 1.3rem; background:var(--story-wash); border-radius:4px; }
.stage-list summary { display:flex; align-items:center; gap:1rem; list-style:none; font-size:1.15rem; }
.stage-list summary::-webkit-details-marker { display:none; }
.stage-list summary:after { content:'+'; margin-left:auto; font-size:1.5rem; }
.stage-list details[open] summary:after { content:'−'; }
.stage-number { color:var(--green); font-size:.875rem; font-variant-numeric:tabular-nums; }
.stage-list details>p { color:var(--muted); padding:.5rem 0 1rem 2.3rem; }
.story-practical-grid { display:grid; grid-template-columns:1fr 1fr; gap:7%; }
.story-practical h2 { margin-bottom:2rem; }
.story-practical .spec-list { margin-top:0; }
.story-documents { display:grid; gap:.6rem; }
.story-document { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:96px; padding:1.3rem; background:var(--story-wash); border-radius:4px; }
.story-document:hover { background:#eaf0e3; }
.story-document strong { display:block; font-size:1.1rem; font-weight:500; }
.story-document small { display:block; margin-top:.3rem; font-size:.9375rem; color:var(--muted); }
.story-document>span:last-child { font-size:1.4rem; }
.story-field-note { display:grid; grid-template-columns:.8fr 1.2fr; gap:7%; align-items:center; margin-top:4rem; }
.story-field-note img { width:100%; aspect-ratio:1.6; object-fit:cover; border-radius:4px; }
.story-field-note h3 { font-size:clamp(1.7rem,2.7vw,2.7rem); line-height:1.18; }
.story-field-note p { margin:1rem 0; color:var(--muted); }
.story-supply { background:var(--forest); color:white; }
.story-supply-grid { display:grid; grid-template-columns:1fr 1fr; gap:7%; align-items:start; }
.story-supply h2 em { color:var(--lime); }
.story-supply-intro>p:last-child { margin-top:1.5rem; color:#d7e3d8; max-width:36ch; }
.story-country { display:block; width:100%; max-width:100%; min-height:54px; margin: .7rem 0 1.5rem; padding:.8rem 1rem; background:white; color:var(--forest); border:0; border-radius:3px; }
.supply-result { padding-block:.3rem; }
.supply-result p { color:#d7e3d8; margin-bottom:1.25rem; }
.supply-result h3 { font-size:1.5rem; margin-bottom:.8rem; }
.supply-result article+article { margin-top:1.5rem; }
.supply-result .text-link { margin-right:1rem; }
.story-supply .story-note { color:#d7e3d8; }
.story-supply .text-link { margin-top:1.5rem; }
.product-story .story-related { padding-block:4rem; }
.story-related .section-heading { display:block; }
.product-story .story-related h2 { font-size:clamp(2rem,3vw,3.2rem); }
@media(min-width:1000px) { .story-visual { position:sticky; top:120px; } }
@media(max-width:900px) {
 .story-hero-grid { gap:4%; }
 .story-facts { gap:1rem; }
 .story-heading,.story-programme-grid,.story-practical-grid,.story-supply-grid { grid-template-columns:1fr; gap:2.5rem; }
 .story-heading { margin-bottom:2rem; }
 .story-heading>p { max-width:60ch; }
}
@media(max-width:650px) {
 .story-intro { padding-top:1.5rem; }
 .story-hero-grid { grid-template-columns:1fr; gap:1.75rem; }
 .story-hero-copy { grid-row:1; }
 .story-hero-copy h1 { font-size:clamp(2.7rem,11vw,4rem); }
 .story-grade { font-size:2.7rem; }
 .story-pack-stage { max-width:420px; }
 .story-facts { margin:1.5rem 0; }
 .story-hero-copy .actions { align-items:flex-start; }
 .nutrient-tabs { gap:.75rem; }
 .nutrient-tab .nutrient-value { font-size:clamp(2.6rem,13vw,4.8rem); }
 .nutrient-label { font-size:.875rem; }
 .nutrient-panel { grid-template-columns:1fr; gap:1rem; min-height:0; }
 .story-field-note { grid-template-columns:1fr; gap:1.5rem; }
 .stage-list details { padding-inline:1rem; }
 .story-links { gap:.25rem 1.25rem; }
}
@media print {
 .story-links,.story-supply,.story-related { display:none!important; }
 .story-hero-grid,.story-practical-grid { grid-template-columns:1fr 1fr; }
 .nutrient-panel[hidden] { display:grid!important; }
 .story-section { padding-block:2rem; }
 .story-visual { position:static; }
}
/* Crop specimens are content, with their own space beside the context. */
.crop-choices { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.crop-choice { min-height:48px; padding:.8rem 1.3rem; border:1px solid #cdd8c9; border-radius:30px; font-size:1rem; }
.crop-choice[aria-selected=true] { background:var(--forest); border-color:var(--forest); color:white; }
.crop-choice:hover:not([aria-selected=true]) { background:var(--story-wash); }
.crop-scene { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center; min-height:450px; }
.crop-scene-copy { min-width:0; }
.crop-scene h3 { font-family:'Outfit',sans-serif; font-size:clamp(2rem,3.2vw,3.4rem); line-height:1.15; max-width:17ch; }
.crop-scene-copy>p:not(.eyebrow) { color:var(--muted); font-size:1.0625rem; margin-top:1.3rem; }
.crop-scene-copy .crop-discuss-label { color:var(--forest)!important; font-size:.875rem!important; font-weight:500; }
.crop-scene ul { margin:.65rem 0 1rem; padding-left:1.2rem; color:var(--muted); }
.crop-scene li+li { margin-top:.35rem; }
.crop-scene-image { margin:0; min-width:0; }
.crop-scene-image img { width:100%; height:420px; object-fit:contain; animation:crop-arrival .45s ease-out both; }
.crop-scene-image figcaption { text-align:center; color:var(--muted); font-size:.875rem; margin-top:.75rem; }
.crop-explorer>.wrap>.story-note { max-width:72ch; margin-top:2rem; }
.story-stages { padding-top:1rem; }
.stage-intro { color:var(--muted); margin-top:1.5rem; max-width:36ch; }
@keyframes crop-arrival { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.motion-paused .crop-scene-image img { animation:none; }
.passport-heading { display:flex; gap:2rem; justify-content:space-between; align-items:flex-end; margin-bottom:2rem; }
.passport-heading .btn { gap:1rem; flex-wrap:wrap; flex-shrink:0; }
.passport-format { font-weight:400; font-size:.875rem; opacity:.85; }
.passport-sheet { background:var(--story-wash); border-radius:6px; padding:clamp(1.4rem,3.5vw,3.5rem); }
.passport-identity { display:grid; grid-template-columns:.65fr 1.4fr .8fr; gap:2rem; align-items:center; margin-bottom:3rem; }
.passport-identity>img { width:150px; height:auto; }
.passport-identity h3 { font-size:clamp(1.8rem,2.8vw,3rem); }
.passport-identity .eyebrow { margin-bottom:.6rem; }
.passport-grade { font-size:1.5rem; color:var(--green); margin-top:.5rem; }
.passport-code { font-size:.875rem; color:var(--muted); text-align:right; overflow-wrap:anywhere; }
.passport-code strong { display:block; color:var(--forest); font-weight:500; margin-top:.3rem; }
.passport-columns { display:grid; grid-template-columns:1fr 1fr; gap:7%; }
.passport-sheet h4 { font-size:1.25rem; letter-spacing:0; margin-bottom:1.25rem; }
.passport-facts { margin:0; }
.passport-facts>div { display:flex; gap:1.5rem; justify-content:space-between; padding:.7rem 0; font-size:1rem; }
.passport-facts dt { color:var(--muted); }
.passport-facts dd { margin:0; text-align:right; }
.passport-crops { margin-top:2rem; }
.passport-crops>div { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; }
.passport-crops a { text-decoration:underline; text-underline-offset:4px; padding-block:.4rem; }
.passport-status { margin-top:2rem; font-size:.875rem; color:var(--muted); max-width:80ch; }
.passport-documents { margin-top:2rem; }
.passport-documents h3 { font-size:1.5rem; margin-bottom:1.25rem; }
.passport-documents>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.passport-documents .story-document { background:white; padding:1rem 0; }
.passport-documents .story-document:hover strong { text-decoration:underline; }
.passport-hero-link { margin-top:.8rem; font-size:.9375rem; }
@media(max-width:900px) {
 .passport-heading { align-items:flex-start; flex-direction:column; }
 .passport-identity { grid-template-columns:1fr 1fr; }
 .passport-identity>img { grid-column:1/-1; }
 .passport-documents>div { grid-template-columns:1fr; gap:0; }
}
@media(max-width:650px) {
 .crop-choices { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
 .crop-choice { padding:.75rem .6rem; border-radius:8px; font-size:.9375rem; }
 .crop-scene { grid-template-columns:1fr; gap:1.5rem; min-height:0; }
 .crop-scene-image { grid-row:1; }
 .crop-scene-image img { height:260px; }
 .crop-scene-copy h3 { max-width:24ch; }
 .passport-columns { grid-template-columns:1fr; gap:2rem; }
 .passport-identity { grid-template-columns:1fr; gap:1.5rem; margin-bottom:2rem; }
 .passport-code { text-align:left; }
 .passport-facts>div { gap:1rem; }
}
@media(prefers-reduced-motion:reduce) { .crop-scene-image img { animation:none; } }
@media print { .passport-heading .btn { display:none; }.crop-scene-image img { height:220px; }.passport-sheet { break-inside:avoid; } }
/* Focused product slice: overview, crop selection, passport, supply. */
.product-story .story-section { padding-block:clamp(2.75rem,4.5vw,4.5rem); }
.product-story h2 { font-size:clamp(2rem,3.2vw,3.5rem); }
.product-story .story-intro { padding-bottom:2.5rem; }
.product-story .story-pack-stage { max-width:450px; }
.story-pack-options { margin:1.1rem 0 1.6rem; font-size:1rem; color:var(--muted); }
.product-story .story-heading { margin-bottom:1.5rem; align-items:center; }
.product-story .crop-choices { margin-bottom:1rem; }
.product-story .crop-scene { min-height:290px; gap:7%; }
.product-story .crop-scene-image img { height:280px; }
.product-story .crop-scene h3 { font-size:clamp(1.6rem,2.2vw,2.3rem); }
.product-story .crop-scene-copy>p { max-width:35ch; margin:1rem 0; }
.product-story .passport-heading { margin-bottom:1.5rem; align-items:center; }
.product-story .passport-heading h2 { margin:0; }
.product-story .passport-sheet { padding:clamp(1.25rem,2.6vw,2.5rem); }
.product-story .passport-identity { grid-template-columns:150px 1fr; gap:2rem; margin-bottom:1.75rem; }
.product-story .passport-identity>img { grid-column:auto; }
.product-story .passport-identity h3 { font-size:1.6rem; }
.product-story .passport-grade { font-size:1.2rem; margin-top:.3rem; }
.product-story .passport-sheet h4 { font-size:1.125rem; margin-bottom:.75rem; }
.product-story .passport-facts>div { padding:.5rem 0; }
.product-story .passport-crops { margin-top:1.5rem; }
.product-story .passport-crops h4 { margin-bottom:.3rem; }
.product-story .passport-status { margin-top:1.25rem; }
.passport-document-drawer { margin-top:1.25rem; }
.passport-document-drawer summary { font-weight:500; }
.passport-document-drawer>div { display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; padding-bottom:.5rem; }
.passport-document-drawer .text-link { font-size:.9375rem; }
.product-story .story-supply-intro>p:last-child { margin-top:1rem; }
.pack-concept-note { display:block; margin-top:.5rem; }
.crop-scene-placeholder { display:grid; place-items:center; min-height:240px; color:var(--green); background:var(--wash); border-radius:50%; width:240px; justify-self:center; opacity:.5; }
.crop-scene-placeholder svg { width:130px; height:160px; }
@media print {
 .header, .footer, .skip, .story-intro, .crop-explorer, .story-supply, .passport-document-drawer, [data-passport-print] { display:none!important; }
 .product-story .story-practical { padding:0; }
 .product-story .passport-columns { grid-template-columns:1fr 1fr; }
 .product-story .passport-sheet { border:0; padding:1rem; }
 .product-story .passport-heading h2 { font-size:2rem; }
 .product-story .passport-identity { grid-template-columns:150px 1fr; }
}
@media(max-width:650px) {
 .product-story .story-hero-grid { gap:1rem; }
 .product-story .story-pack-stage { max-width:310px; }
 .product-story .story-hero-copy h1 { font-size:clamp(2.6rem,10vw,3.6rem); }
 .product-story .story-grade { margin-bottom:1rem; }
 .product-story .crop-scene { min-height:0; gap:1rem; }
 .product-story .crop-scene-image img { height:220px; }
 .product-story .crop-scene-copy>p { max-width:100%; }
 .product-story .passport-heading { align-items:flex-start; gap:1rem; }
 .product-story .passport-identity { grid-template-columns:1fr; gap:1.25rem; }
 .product-story .passport-identity>img { width:120px; }
 .passport-document-drawer>div { align-items:flex-start; flex-direction:column; }
}