/* Additions for the PHP build: replaces what the static prototype did with inline style="" and inline scripts. */

.skip-link{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:#fff;padding:.7rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
body.nav-locked{overflow:hidden}
main:focus{outline:none}

/* footer */
.footer-brand{color:var(--on-dark)}
.footer-blurb{margin-top:var(--s-4);max-width:30ch;font-size:.9rem;color:var(--on-dark-soft)}
.footer-links{display:grid;gap:var(--s-3)}

/* copy blocks that used inline max-width */
.cta-copy{max-width:46ch;margin-inline:auto;margin-top:var(--s-4)}
.cta-copy.w-44{max-width:44ch}
.pd-text{max-width:68ch;font-size:.98rem;color:var(--ink-soft)}
.pd-text + .pd-text{margin-top:var(--s-4)}
.pd-body-text > *+*{margin-top:var(--s-4)}
.pd-body-text .pd-sub{margin-top:var(--s-8);font-size:1.15rem}
.pd-body-text h4.pd-sub{font-size:1rem;margin-top:var(--s-6)}
.pd-list{max-width:68ch;padding-left:1.3em;font-size:.98rem;color:var(--ink-soft)}
ul.pd-list{list-style:disc}
ol.pd-list{list-style:decimal}
.pd-list li+li{margin-top:var(--s-2)}
.pd-table-wrap{overflow-x:auto;max-width:78ch}
.pd-table{border-collapse:collapse;width:100%;font-size:.94rem;color:var(--ink-soft)}
.pd-table th,.pd-table td{padding:var(--s-3) var(--s-4);border:1px solid var(--line);text-align:left;vertical-align:top}
.pd-table th{font-weight:600;color:var(--ink);background:var(--surface-2,transparent)}
.section-alt{background:var(--bg-alt)}
.head-gap{margin-top:var(--s-4);max-width:18ch}
.lede-gap{margin-top:var(--s-6);max-width:58ch}

/* hero photographs (self-hosted) */
.products-intro.has-image.bg-streak,.page-intro.has-image.bg-streak{background-image:url("../img/micro/hero-streak.jpg")}
.products-intro.has-image.bg-trichoderma,.page-intro.has-image.bg-trichoderma{background-image:url("../img/micro/hero-trichoderma.jpg")}
.products-intro.has-image.bg-colonies,.page-intro.has-image.bg-colonies{background-image:url("../img/micro/hero-colonies.jpg")}
.products-intro.has-image.bg-rods,.page-intro.has-image.bg-rods{background-image:url("../img/micro/hero-rods.jpg")}

/* product pictures */
.pd-photo img{width:100%;height:100%;object-fit:contain}

/* search box on the catalogue */
.cat-search{display:flex;gap:var(--s-3);margin-top:var(--s-8);max-width:34rem}
.cat-search input{flex:1;min-width:0;padding:.85rem 1rem;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);font:inherit;background:#fff;color:var(--ink)}
.cat-search input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cat-search .btn{padding:.85rem 1.3rem}
.on-dark .cat-search input,.has-image .cat-search input{border-color:transparent}
.result-count{margin-bottom:var(--s-6);color:var(--ink-soft)}

/* related products */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-5);margin-top:var(--s-6)}
.rel-card{display:grid;grid-template-columns:64px 1fr;gap:var(--s-4);align-items:center;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.rel-card:hover{border-color:var(--green)}
.rel-card strong{display:block;line-height:1.25}
.rel-card small{color:var(--ink-faint)}
.rel-thumb{width:64px;height:64px;background:var(--sage);border-radius:8px;display:grid;place-items:center;overflow:hidden;font-weight:800;color:var(--green-dark)}
.rel-thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.rel-thumb.is-fallback::after{content:attr(data-mono)}
.rel-thumb.is-fallback img{display:none}

/* placeholder pages */
.pending-box{max-width:56ch}
.pending-box .btn{margin-top:var(--s-6)}

/* ---- home page (Phase 3): classes that replace the prototype's inline styles ---- */
.bg-alt{background:var(--bg-alt)}
.sec-title{margin-top:var(--s-4);max-width:20ch}
.sec-title.sec-14{max-width:14ch}
.sec-title.sec-16{max-width:16ch}
.sec-title.sec-18{max-width:18ch}
.mt-5{margin-top:var(--s-5)}
.mt-8{margin-top:var(--s-8)}
.eyebrow-dark{color:var(--on-dark-soft)}
.hero-photo{width:100%;height:100%;background-size:cover;background-position:center}
.visual-photo img{width:100%;height:100%;object-fit:cover;display:block}
.platform{background-size:cover;background-position:center}
@media (min-width:901px){
  .credibility-row.cols-2{grid-template-columns:repeat(2,1fr)}
  .credibility-row.cols-3{grid-template-columns:repeat(3,1fr)}
  .credibility-row.cols-5{grid-template-columns:repeat(5,1fr)}
  .credibility-row.cols-6{grid-template-columns:repeat(6,1fr)}
}

/* ---- Contact form (Phase 4) ---- */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-form .opt{font-weight:500;color:var(--ink-faint)}
.contact-form .about-product{margin:0;padding:var(--s-3) var(--s-4);background:var(--bg-sage);border-radius:var(--radius-sm);font-size:.92rem}
.field-error{margin:0;font-size:.82rem;font-weight:600;color:#B3261E}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#B3261E}
.form-alert{padding:var(--s-4) var(--s-5);border:1.5px solid #B3261E;border-radius:var(--radius-sm);background:#FDF1F0;color:#7A1812;font-size:.95rem;font-weight:600}
.contact-submit{justify-self:start}
.form-success{padding:var(--s-8);background:var(--bg-sage);border-radius:var(--radius);border-left:4px solid var(--green)}
.form-success h2{margin:0 0 var(--s-3);font-size:1.5rem}
.form-success p{margin:0 0 var(--s-3);color:var(--ink-soft)}
.form-success .ref{color:var(--ink)}
.contact-info .block-link{display:block}
.contact-info .block-link + .block-link{margin-top:var(--s-2)}
.contact-info .social-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}

.route.route-flush{margin-top:0}
.export-head .range-lede{margin-top:var(--s-6);max-width:58ch}

/* ---- Content pages (About, Why Bio, Manufacturing, Blog, legal): prototype inline styles as classes ---- */
.h2-story{margin-top:var(--s-4);font-size:clamp(1.8rem,3vw,2.6rem)}
.h2-cert{margin-top:var(--s-4);max-width:16ch}
.h2-bio{margin-top:var(--s-4);max-width:20ch}
.fac-more{margin-top:var(--s-10)}
.pd-note.sector-note{margin-top:var(--s-8);max-width:78ch}
.pd-note.expect-note{margin-top:var(--s-8)}
.faq-aside .faq-note{margin-top:var(--s-5);max-width:36ch}
.sector-note .link-arrow,.faq-note .link-arrow,.reason p .link-arrow,.expect-note .link-arrow,.legal-content p .link-arrow{display:inline-flex}
.page-intro.is-plain .lede{max-width:62ch}
.legal-content .note-box{margin-top:var(--s-10)}
.site-footer .brand.footer-brand{color:var(--on-dark)}

/* ---- Product photos: let the picture's own white/off-white backdrop melt into the page ----
   Pack shots on the shop are photographed on white. multiply keeps the product and drops the
   box, so no pale patch shows on tinted rows, hovered rows or the detail page. Pictures that
   have a real coloured background are unaffected (multiply by a light page tone barely shifts them). */
.p-thumb, .er-thumb.has-img, .pd-photo, .rel-thumb { background: transparent; }
.p-thumb, .er-thumb.has-img { border-color: transparent; }
.pd-photo { border-color: transparent; }
.p-thumb img, .er-thumb.has-img img, .pd-photo img, .rel-thumb img { mix-blend-mode: multiply; background: transparent; filter: brightness(1.06) contrast(1.08); }


/* Certification logos */
.cert-strip { background: #fff; border-top: 1px solid var(--line); padding: var(--s-8) 0; }
.cert-strip-title { margin: 0 0 var(--s-5); text-align: center; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.cert-strip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.cert-strip-list li { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .4rem; }
.cert-strip-list img { display: block; width: 100%; max-width: 160px; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.cert-logo { display: block; width: 100%; max-width: 150px; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 4px; margin-bottom: var(--s-2); }
@media (max-width: 900px) { .cert-strip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cert-strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } }


/* Product details: two-column editorial layout, tighter hero spacing */
section.pd-hero{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.pd-hero .pd-layout{align-items:center}
.pd-body{margin-top:0}
.pd-section.pd-details{display:grid;grid-template-columns:minmax(11rem,15rem) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem);align-items:start;padding:clamp(2.25rem,4vw,3.5rem) 0;border-top:1px solid var(--line,#dfe3dc)}
.pd-section.pd-details>h2{grid-column:1;margin:0;position:sticky;top:6.5rem;font-size:clamp(1.5rem,2.2vw,1.9rem)}
.pd-section.pd-details>.pd-body-text,.pd-section.pd-details>.pd-note{grid-column:2}
.pd-section.pd-details .pd-body-text{max-width:46rem}
.pd-section.pd-details .pd-body-text>*:first-child{margin-top:0}
.pd-section.pd-details .pd-body-text .pd-sub{max-width:none;margin-top:2.25rem;font-size:1.15rem}
.pd-section.pd-details .pd-body-text .pd-text,.pd-section.pd-details .pd-body-text .pd-list{max-width:none;line-height:1.7}
.pd-section.pd-details .pd-body-text .pd-table-wrap{max-width:none}
.pd-section.pd-details>.pd-note{max-width:46rem;margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid var(--line,#dfe3dc);font-size:.9rem}
@media (max-width:860px){
  .pd-section.pd-details{display:block;padding:2rem 0 2.25rem}
  .pd-section.pd-details>h2{position:static;margin-bottom:1.25rem}
  .pd-hero .pd-layout{align-items:start}
}

/* Product tables: header row, numeric column, striping */
.pd-table thead th{background:var(--green-dark,#234E2E);color:#fff;border-color:var(--green-dark,#234E2E);font-size:.8rem;letter-spacing:.04em}
.pd-table tbody tr:nth-child(even){background:rgba(35,78,46,.04)}
.pd-table tbody th[scope=row]{width:3.25rem;color:var(--ink-soft);font-weight:500;text-align:center}
.pd-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);white-space:nowrap}
.pd-table thead th:nth-child(1){text-align:center;width:3.25rem}
.pd-table thead th:nth-child(3){text-align:right}
@media (max-width:600px){.pd-table th,.pd-table td{padding:.55rem .65rem;font-size:.88rem}}

/* Facility addresses (About, Manufacturing) */
.fac .fac-address{font-style:normal;font-size:.95rem;line-height:1.6;color:var(--ink);padding-left:.85rem;border-left:2px solid var(--line-strong,var(--line))}
.fac .fac-address+p{margin-top:0}

/* About: team on a single row (desktop), stacked cards on smaller screens */
.roster{max-width:none;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s-6)}
.roster .person{grid-template-columns:1fr;justify-items:center;text-align:center;padding:var(--s-8) var(--s-6)}
.roster .person-photo{grid-row:auto;width:9.5rem;height:9.5rem;margin:0 0 var(--s-2)}
.roster .person h3,.roster .person .role,.roster .person p{grid-column:1}
.roster .person p{max-width:34ch}
@media (max-width:900px){
  .roster{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);max-width:42rem}
  .roster .person{grid-template-columns:9.5rem minmax(0,1fr);justify-items:stretch;text-align:left;padding:var(--s-6)}
  .roster .person-photo{grid-row:1 / span 3}
  .roster .person h3,.roster .person .role,.roster .person p{grid-column:2}
}
@media (max-width:560px){
  .roster .person{grid-template-columns:1fr;justify-items:center;text-align:center}
  .roster .person-photo{grid-row:auto}
  .roster .person h3,.roster .person .role,.roster .person p{grid-column:1}
}

/* Farmer stories */
.story-tag{margin:0 0 var(--s-2);font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--accent-ink)}
.story-card .post-body h2{margin-top:0}
.story-by{margin-top:var(--s-4)!important;font-size:.88rem;color:var(--ink-faint)!important}
.story-by time{white-space:nowrap}
.story-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--s-4) var(--s-6);margin:0 0 var(--s-8);padding:var(--s-5) var(--s-6);background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius)}
.story-facts dt{font-size:.78rem;font-weight:700;color:var(--ink-faint);letter-spacing:.04em}
.story-facts dd{margin:.15rem 0 0;font-weight:600;color:var(--ink)}

/* ---- Product pictures: portrait pack shots, always shown whole (never cropped) on every screen ---- */
.pd-photo { aspect-ratio: 4 / 5; width: 100%; max-width: 440px; margin-inline: auto; max-height: 82vh; max-height: 82svh; }
.pd-photo img { object-fit: contain; object-position: center; padding: var(--s-3); }
.p-thumb, .er-thumb { width: 104px; height: auto; aspect-ratio: 3 / 4; }
.p-thumb img, .er-thumb img { padding: 3px; object-fit: contain; object-position: center; }
.product-row { grid-template-columns: 104px 1.5fr 1fr; }
.export-row { grid-template-columns: 2.5rem 104px 1.1fr 1.4fr auto; }
.rel-thumb { width: 60px; height: 80px; }
@media (max-width: 980px) {
  .export-row { grid-template-columns: 2rem 80px 1fr; }
  .er-thumb { width: 80px; height: auto; }
}
@media (max-width: 900px) { .pd-photo { max-width: 380px; } }
@media (max-width: 700px) {
  .product-row { grid-template-columns: 80px 1fr; }
  .p-thumb { width: 80px; height: auto; }
}
@media (max-width: 480px) { .pd-photo { max-width: 100%; } .pd-photo img { padding: var(--s-2); } }

/* Tables of labels (e.g. a composition list): wide left-aligned first column instead of the narrow number column */
.pd-table-labelled thead th:nth-child(1), .pd-table-labelled tbody th[scope=row] { width: 42%; text-align: left; }
.pd-table-labelled tbody th[scope=row] { font-weight: 600; color: var(--ink); }
.pd-table-labelled thead th:nth-child(3) { text-align: left; }

/* Export range on phones: no running number, larger pack picture so the product is easy to see */
@media (max-width: 560px) {
  .export-row { grid-template-columns: 96px 1fr; grid-template-areas: "thumb main" "spec spec" "links links"; }
  .er-num { display: none; }
  .er-thumb { width: 96px; }
}