/* ============================================================================
   SEED CHEMICALS — components.css
   Page-specific components (catalogue, product detail, brands, RFQ, documents).
   Loaded after styles.css. Tokens come from styles.css :root.
   ============================================================================ */

/* product-card branded media (no photo yet) */
.pcard__svgmedia { position:absolute; inset:0; background: linear-gradient(135deg, #fff, var(--base-2)); display:flex; align-items:center; justify-content:center; }
.pcard__svgmedia svg { position:absolute; inset:0; width:100%; height:100%; }
.pcard__code { position:relative; font-family: var(--font-mono); font-weight:600; font-size:1.05rem; color: var(--ink-700); background:#fff; padding:.4rem .8rem; border-radius: var(--r-sm); box-shadow: var(--sh-1); border:1px solid var(--line); letter-spacing:.02em; }
.pcard__svgmedia--lg { position:relative; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.pcard__svgmedia--lg .pcard__code { font-size:1.4rem; padding:.6rem 1.1rem; }

/* product-detail hero photo (real pack render on clean light) */
.pdetail__photo { aspect-ratio: 4/3; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background: radial-gradient(120% 120% at 50% 20%, #fff, var(--base-2)); display:flex; align-items:center; justify-content:center; }
.pdetail__photo img { width:100%; height:100%; object-fit:contain; padding:5%; }

/* tick lists */
.ticklist { list-style:none; padding:0; display:grid; gap:.6rem; }
.ticklist li { display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; color: var(--ink-700); }
.ticklist li svg { width:20px; height:20px; color: var(--sky-600); flex:none; margin-top:.1rem; }
.ticklist--plain { columns:2; column-gap:2rem; }
.ticklist--plain li { break-inside:avoid; margin-bottom:.6rem; padding-left:1.1rem; position:relative; }
.ticklist--plain li::before { content:""; position:absolute; left:0; top:.55rem; width:6px; height:6px; border-radius:2px; background: var(--sky-500); }
.ticklist--compact li { font-size:.88rem; }
@media (max-width:560px){ .ticklist--plain{ columns:1; } }

/* TENSYL wordmark (typographic brand mark) + partner logos */
.brandmark { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:800; font-size:1.7rem; letter-spacing:.02em; color: var(--tensyl-deep); line-height:1; }
.brandmark__emblem { width:1.15em; height:1.15em; display:inline-flex; }
.brandmark__emblem svg { width:100%; height:100%; }
.brandmark--lg { font-size:2.6rem; }
.brandmark--rev { color:#fff; }
.brand-logo-wrap { display:inline-flex; align-items:center; height:42px; }
.brand-logo { max-height:42px; width:auto; max-width:190px; object-fit:contain; }
.brand-logo--lg { max-height:60px; max-width:240px; }
.hero-logo-chip { display:inline-flex; align-items:center; background:#fff; border-radius:var(--r-md); padding:.6rem 1.1rem; box-shadow:var(--sh-2); margin-bottom:1.3rem; }
.hero-logo-chip img { height:40px; width:auto; max-width:200px; object-fit:contain; }

/* origin pill (Imported / Indigenous) */
.brandcard__origin { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  padding:.3rem .55rem; border-radius: var(--r-xs); background: var(--ink-100); color: var(--ink-500); white-space:nowrap; }
.brandcard__origin.is-local { background: var(--tensyl-050); color: var(--tensyl-deep); }
.brandcard__origin.is-licensed { background: #e7f1fb; color: #0d4f7c; }

/* brand cards (home) */
.brandcard { padding: var(--sp-5); display:flex; flex-direction:column; gap:.6rem; border-top:3px solid var(--b,var(--navy-800)); }
.brandcard__top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brandcard__name { font-family: var(--font-display); font-weight:800; font-size:1.45rem; color: var(--ink-900); letter-spacing:-.02em; }
.brandcard__kind { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-400); }
.brandcard p { font-size:.92rem; }
.brandcard .arrow-link { margin-top:auto; }

/* brands overview (full cards) */
.brandfull { padding: clamp(1.4rem,3vw,2.2rem); display:flex; flex-direction:column; gap:1rem; border-left:4px solid var(--b,var(--navy-800)); }
.brandfull__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.brandfull__id { display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; }
.brandfull__name { font-family: var(--font-display); font-weight:800; font-size:1.8rem; color: var(--ink-900); letter-spacing:-.02em; display:block; }
.brandfull__kind { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-400); margin-top:.2rem; }
.brandfull__sum { color: var(--ink-600); }
.brandfull__foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:auto; padding-top:.8rem; border-top:1px solid var(--line); }

/* application chips (home) */
.appchip { display:inline-flex; align-items:center; gap:.55rem; padding:.6rem 1rem; border-radius: var(--r-pill); background:#fff; border:1.5px solid var(--line); font-family:var(--font-display); font-weight:600; font-size:.9rem; color: var(--ink-700); transition: all .15s; }
.appchip:hover { border-color: var(--sky-500); color: var(--sky-700); transform: translateY(-2px); box-shadow: var(--sh-2); }
.appchip__i { width:18px; height:18px; color: var(--sky-600); display:flex; }
.appchip__i svg{ width:18px; height:18px; }

/* catalogue layout */
.catalogue-toolbar { background: var(--base); padding-block: 1rem 1.25rem; border-bottom:1px solid var(--line); margin-bottom: var(--sp-6); }
.catalogue-toolbar .chips { margin-top:.6rem; }
.filter-label { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); margin:.8rem 0 .2rem; display:block; }
.cat-context { font-size:.9rem; color: var(--ink-500); margin-bottom:1rem; }

/* product detail */
.pdetail { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem,4vw,3.5rem); padding-block: var(--sp-5) var(--sp-6); align-items:start; }
.pdetail__media { position:sticky; top: calc(var(--nav-h) + 1rem); }
.pdetail__head h1 { margin:.5rem 0 .8rem; }
.pdetail__cta { display:flex; gap:.7rem; flex-wrap:wrap; margin: var(--sp-5) 0; }
.pdetail__quick { display:flex; flex-wrap:wrap; gap: 1.5rem; padding: 1rem 1.2rem; background: var(--ink-50); border-radius: var(--r-md); border:1px solid var(--line); }
.pdetail__quick div { display:flex; flex-direction:column; gap:.15rem; }
.pdetail__quick span { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-400); }
.pdetail__quick b { color: var(--ink-800); font-size:.95rem; }
.pdetail__body { display:grid; grid-template-columns: 1.5fr .85fr; gap: clamp(1.5rem,4vw,3rem); padding-bottom: var(--sp-7); align-items:start; }
.pdetail__main .block { margin-bottom: var(--sp-6); }
.pdetail__main .block h2 { font-size: var(--step-1); margin-bottom: var(--sp-4); padding-bottom:.5rem; border-bottom:2px solid var(--line); }
.pdetail__side { position:sticky; top: calc(var(--nav-h) + 1rem); display:flex; flex-direction:column; gap:1rem; }
.side-card { padding: 1.3rem; }
.side-card h3 { font-size:1.05rem; margin-bottom:1rem; }
.side-card--cta { background: var(--navy-800); color:#fff; }
.side-card--cta h3{ color:#fff; } .side-card--cta p{ color: var(--ink-200); font-size:.9rem; margin-bottom:1rem; }
@media (max-width:920px){ .pdetail{ grid-template-columns:1fr; } .pdetail__media{ position:static; max-width:320px; } .pdetail__body{ grid-template-columns:1fr; } .pdetail__side{ position:static; } }

/* doc rows (product downloads) */
.doc-list { display:flex; flex-direction:column; gap:.5rem; }
.doc-row { display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border:1px solid var(--line); border-radius: var(--r-sm); background:#fff; transition: border-color .15s, background .15s; }
.doc-row:hover { border-color: var(--sky-500); background: var(--sky-050); }
.doc-row svg:first-child { width:22px; height:22px; color: var(--ink-400); flex:none; }
.doc-row span { flex:1; display:flex; flex-direction:column; line-height:1.25; }
.doc-row b { font-size:.9rem; color: var(--ink-800); } .doc-row em { font-style:normal; font-family:var(--font-mono); font-size:.7rem; color: var(--ink-400); text-transform:uppercase; letter-spacing:.04em; }
.doc-row > svg:last-child { width:18px; height:18px; color: var(--sky-600); }

/* documents library table */
.docs-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; }
.docs-table th { text-align:left; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-400); padding:.85rem 1rem; background: var(--ink-50); border-bottom:1px solid var(--line); }
.docs-table td { padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.docs-table tr:last-child td{ border-bottom:0; }
.docs-table tr:hover td{ background: var(--sky-050); }
.docs-table .right{ text-align:right; }
.doc-cell { display:flex; align-items:center; gap:.7rem; }
.doc-cell svg{ width:22px; height:22px; color: var(--sky-600); flex:none; }
.doc-cell b{ font-size:.92rem; color: var(--ink-800); display:block; } .doc-cell em{ font-style:normal; font-size:.78rem; color: var(--ink-400); display:block; margin-top:.1rem; }
@media (max-width:680px){ .docs-table thead{ display:none; } .docs-table, .docs-table tbody, .docs-table tr, .docs-table td{ display:block; width:100%; } .docs-table tr{ border-bottom:1px solid var(--line); padding:.5rem 0; } .docs-table td{ border:0; padding:.4rem 1rem; } .docs-table .right{ text-align:left; } }

/* RFQ */
.rfq-layout { display:grid; grid-template-columns: 1.3fr .9fr; gap: clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width:900px){ .rfq-layout{ grid-template-columns:1fr; } }
.rfq-item { display:flex; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius: var(--r-md); background:#fff; margin-bottom:.7rem; }
.rfq-item__info { display:flex; align-items:center; gap:.8rem; flex:1; }
.rfq-item__info b { font-size:.98rem; color: var(--ink-900); display:block; } .rfq-item__info em{ font-style:normal; font-family:var(--font-mono); font-size:.74rem; color: var(--ink-400); }
.rfq-item__qty { display:flex; align-items:center; border:1.5px solid var(--ink-150); border-radius: var(--r-sm); overflow:hidden; }
.rfq-item__qty button { width:34px; height:38px; border:0; background: var(--ink-50); font-size:1.1rem; color: var(--ink-700); }
.rfq-item__qty button:hover { background: var(--sky-050); color: var(--sky-700); }
.rfq-item__qty input { width:46px; height:38px; border:0; border-inline:1.5px solid var(--ink-150); text-align:center; font-family:var(--font-mono); font-size:.92rem; -moz-appearance:textfield; }
.rfq-item__qty input::-webkit-outer-spin-button,.rfq-item__qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.rfq-item__rm { width:38px; height:38px; border:1.5px solid var(--ink-150); border-radius: var(--r-sm); background:#fff; color: var(--ink-400); display:flex; align-items:center; justify-content:center; }
.rfq-item__rm:hover { border-color: var(--danger); color: var(--danger); }
.rfq-item__rm svg{ width:18px; height:18px; }
.rfq-panel { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.3rem,3vw,2rem); position:sticky; top: calc(var(--nav-h) + 1rem); }

/* CTA band */
.cta-band { background: var(--navy-800); color:#fff; border-radius: var(--r-xl); padding: clamp(2rem,5vw,3.5rem); position:relative; overflow:hidden; text-align:center; }
.cta-band::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(80% 100% at 50% 0,#000,transparent 75%); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2{ color:#fff; } .cta-band p{ color: var(--ink-200); max-width:60ch; margin:1rem auto 1.6rem; }
.cta-band .btn-row{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* phase roadmap (store page) */
.phase-row { display:flex; gap:1.2rem; align-items:flex-start; padding:1.2rem; border:1px solid var(--line); border-radius: var(--r-md); background:#fff; margin-bottom:.8rem; transition: border-color .2s; }
.phase-row.active { border-color: var(--sky-500); box-shadow: var(--sh-2); }
.phase-row__badge { flex:none; font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.35rem .6rem; border-radius: var(--r-xs); background: var(--ink-100); color: var(--ink-500); }
.phase-row.active .phase-row__badge { background: var(--sky-600); color:#fff; }
.phase-row h4{ font-size:1.05rem; margin-bottom:.2rem; }

/* contact */
.contact-line { display:flex; align-items:flex-start; gap:.8rem; margin-bottom:1.1rem; }
.contact-line svg{ width:22px; height:22px; color: var(--sky-600); flex:none; margin-top:.15rem; }
.contact-line b{ display:block; color: var(--ink-900); font-family:var(--font-display); }
.contact-line a,.contact-line span{ color: var(--ink-600); font-size:.95rem; }

/* stat band */
.statband { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:760px){ .statband{ grid-template-columns:repeat(2,1fr); } }
.statband .s { padding:1.2rem; border-left:2px solid var(--sky-500); }
.statband .s .n { font-family:var(--font-display); font-weight:800; font-size: var(--step-2); color: var(--ink-900); letter-spacing:-.02em; }
.statband .s .l { font-size:.85rem; color: var(--ink-500); }

/* generic prose */
.prose p{ margin-bottom:1rem; max-width:70ch; } .prose h2{ margin: var(--sp-6) 0 var(--sp-3); }
.prose ul{ margin-bottom:1rem; } .prose li{ margin-bottom:.4rem; }

/* split feature (about / brand intro) */
.split { display:grid; grid-template-columns:1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.tech-figure { background: var(--navy-900); border-radius: var(--r-lg); padding: clamp(1.5rem,4vw,2.5rem); color:#fff; position:relative; overflow:hidden; }
.tech-figure::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:32px 32px; mask-image:radial-gradient(90% 90% at 70% 10%,#000,transparent 80%); }
.tech-figure > *{ position:relative; z-index:1; }
.mu-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mu-row:last-child{ border-bottom:0; }
.mu-row .lbl{ color: var(--ink-300); font-size:.9rem; }
.mu-row .val{ font-family:var(--font-mono); font-weight:600; }
.mu-row .val.good{ color: var(--sky-400); }
.mu-row .val.bad{ color: #ff9a9a; }