/* Biosecurity, Sustainability & Green Environment catalog pages (hub, branches, sections) */
:root {
  --eco-blue: #3a5a82;
  --eco-teal: #546c90;
  --eco-navy: #101b2c;
  --eco-ink: #0f172a;
  --eco-muted: #5b6b7f;
  --eco-line: #e6edf3;
  --eco-soft: #f4f7fb;
  --eco-green: #2f4a6c;
  --bs-primary: #3a5a82;
  --bs-primary-rgb: 11, 114, 185;
}
body { background: #f7fafc; }
.eco-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .eco-wrap { padding: 0 24px; } }

/* ---------- hero ---------- */
.eco-hero { position: relative; overflow: hidden; color: #fff; padding: 2.25rem 0 3rem;
  background: radial-gradient(1100px 500px at 85% -10%, rgba(84,108,144,.35), transparent 60%),
              linear-gradient(120deg, #101b2c 0%, #18243a 55%, #243048 100%); }
.eco-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60px;
  background: linear-gradient(180deg, transparent, rgba(247,250,252,.06)); pointer-events: none; }
.eco-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: .85rem; }
.eco-crumbs li { display: flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.75); }
.eco-crumbs li + li::before { content: "/"; opacity: .5; }
.eco-crumbs a { color: #fff; text-decoration: none; opacity: .85; }
.eco-crumbs a:hover { opacity: 1; text-decoration: underline; }
.eco-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .8rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); font-size: .8rem; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; margin: 0 0 1rem; }
[dir="rtl"] .eco-eyebrow { text-transform: none; letter-spacing: 0; }
.eco-h1 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.15; margin: 0 0 1rem; }
.eco-lead { color: rgba(255,255,255,.86); font-size: 1.1rem; line-height: 1.75; max-width: 760px; }
.eco-lead p { margin: 0 0 .5rem; }
.eco-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.eco-btn { display: inline-flex; align-items: center; gap: .45rem; border-radius: 8px; padding: .75rem 1.35rem;
  font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: .2s ease; }
.eco-btn--primary { background: var(--eco-blue); color: #fff; }
.eco-btn--primary:hover { background: #2f4a6c; color: #fff; }
.eco-btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.eco-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.eco-hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .eco-hero-grid { grid-template-columns: 1.05fr .95fr; } }
.eco-hero-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15); }

/* branch cards inside the hero (hub + branch pages) */
.eco-branches { display: grid; gap: 1rem; margin-top: 2.25rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.eco-branch { display: flex; flex-direction: column; background: #fff; color: var(--eco-ink); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.18); transition: transform .2s ease, box-shadow .2s ease; }
.eco-branch:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0,0,0,.25); }
.eco-branch-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--eco-soft); }
.eco-branch-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.eco-branch:hover .eco-branch-media img { transform: scale(1.05); }
.eco-branch-body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.eco-branch-title { font-size: 1.05rem; margin: 0; line-height: 1.35; }
.eco-branch-title a { color: var(--eco-ink); text-decoration: none; }
.eco-branch-title a:hover { color: var(--eco-blue); }
.eco-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.eco-badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px;
  background: var(--eco-soft); color: var(--eco-blue); }
.eco-badge--green { background: #e8eef6; color: var(--eco-green); }
.eco-branch-text { color: var(--eco-muted); font-size: .9rem; line-height: 1.6; margin: 0; }
.eco-more { margin-top: auto; padding-top: .4rem; font-weight: 600; font-size: .9rem; color: var(--eco-blue); text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem; }
.eco-more:hover { text-decoration: underline; }
[dir="rtl"] .eco-more .eco-arrow, [dir="rtl"] .eco-btn .eco-arrow { transform: scaleX(-1); }

/* ---------- category tabs ---------- */
.eco-cat { padding: 3.5rem 0 1rem; }
.eco-cat-box { display: grid; gap: 1.5rem; background: #fff; border: 1px solid var(--eco-line); border-radius: 14px; padding: 1.25rem;
  box-shadow: 0 18px 50px rgba(16,24,40,.06); }
@media (min-width: 992px) { .eco-cat-box { grid-template-columns: 290px 1fr; padding: 1.75rem; } }
.eco-cat-head h2 { font-size: 1.35rem; margin: 0 0 .25rem; }
.eco-cat-head p { color: var(--eco-muted); font-size: .88rem; margin: 0 0 1rem; }
.eco-cat-tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
@media (max-width: 991.98px) { .eco-cat-tabs { flex-direction: row; overflow-x: auto; padding-bottom: .35rem; } }
.eco-cat-tab { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .75rem; text-align: start;
  border: 1px solid var(--eco-line); background: #fff; border-radius: 10px; padding: .7rem .85rem; font-weight: 600; font-size: .92rem;
  color: var(--eco-ink); cursor: pointer; white-space: nowrap; transition: .15s ease; }
@media (min-width: 992px) { .eco-cat-tab { white-space: normal; } }
.eco-cat-tab:hover { border-color: var(--eco-blue); }
.eco-cat-tab.is-active { background: var(--eco-blue); border-color: var(--eco-blue); color: #fff; }
.eco-cat-tab-n { font-size: .78rem; min-width: 1.8rem; text-align: center; padding: .1rem .45rem; border-radius: 999px; background: var(--eco-soft); color: var(--eco-blue); }
.eco-cat-tab.is-active .eco-cat-tab-n { background: rgba(255,255,255,.2); color: #fff; }
.eco-cat-panel { display: none; }
.eco-cat-panel.is-active { display: block; }
.no-js .eco-cat-panel { display: block; margin-bottom: 2rem; }
.eco-cat-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.eco-cat-panel-head h3 { font-size: 1.15rem; margin: 0; }
.eco-cat-panel-head h3 span { color: var(--eco-muted); font-weight: 500; font-size: .9rem; margin-inline-start: .4rem; }
.eco-cat-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.eco-cat-card { display: flex; flex-direction: column; border: 1px solid var(--eco-line); border-radius: 10px; overflow: hidden; background: #fff;
  color: var(--eco-ink); text-decoration: none; transition: .2s ease; }
.eco-cat-card:hover { border-color: var(--eco-blue); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16,24,40,.1); color: var(--eco-ink); }
.eco-cat-card.is-hidden { display: none; }
.eco-cat-img { aspect-ratio: 4 / 3; background: var(--eco-soft); overflow: hidden; }
.eco-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.eco-cat-body { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .85rem .85rem; }
.eco-cat-title { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.eco-cat-more { font-size: .82rem; color: var(--eco-blue); font-weight: 600; }
.eco-cat-foot { text-align: center; margin-top: 1rem; }
.eco-cat-load { border: 1px solid var(--eco-blue); background: #fff; color: var(--eco-blue); border-radius: 8px; padding: .55rem 1.2rem; font-weight: 600; cursor: pointer; }
.eco-cat-load:hover { background: var(--eco-blue); color: #fff; }

/* ---------- content sections ---------- */
.eco-sec { padding: 3.5rem 0; }
.eco-sec + .eco-sec { padding-top: 0; }
.eco-sec--soft { background: linear-gradient(180deg, #f7fafc 0%, var(--eco-soft) 100%); padding: 3.5rem 0 !important; }
.eco-h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); margin: 0 0 1rem; color: var(--eco-ink); }
.eco-center { text-align: center; max-width: 900px; margin: 0 auto; }
.eco-prose p { color: #334155; font-size: 1.05rem; line-height: 1.85; }
.eco-prose h3 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.eco-prose h4 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.eco-prose ul { padding-inline-start: 1.2rem; }
.eco-prose li { margin-bottom: .35rem; line-height: 1.7; }
.eco-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 1rem 0; }
.eco-prose table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; background: #fff; border-radius: 10px; overflow: hidden; }
.eco-prose th, .eco-prose td { border: 1px solid var(--eco-line); padding: .6rem .75rem; text-align: start; font-size: .93rem; }
.eco-prose th { background: var(--eco-soft); }
.eco-features { display: grid; gap: 1rem; }
@media (min-width: 768px) { .eco-features { grid-template-columns: repeat(2, 1fr); } }
.eco-feature { background: #fff; border: 1px solid var(--eco-line); border-radius: 12px; padding: 1.4rem; box-shadow: 0 12px 34px rgba(16,24,40,.05); height: 100%; }
.eco-feature i { font-size: 1.4rem; color: var(--eco-blue); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: linear-gradient(135deg, rgba(58,90,130,.12), rgba(84,108,144,.13)); margin-bottom: .8rem; }
.eco-feature h2, .eco-feature h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.eco-feature p { color: #475569; line-height: 1.75; margin: 0 0 .4rem; }
.eco-feature ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; color: #475569; }
.eco-steps { display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 768px) { .eco-steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.eco-step { position: relative; background: #fff; border: 1px solid var(--eco-line); border-radius: 12px; padding: 1.3rem 1.3rem 1.2rem; }
.eco-step::before { counter-increment: step; content: counter(step); display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--eco-blue); color: #fff; font-weight: 700; margin-bottom: .7rem; }
.eco-step h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.eco-step p { color: #475569; margin: 0; line-height: 1.7; }

/* products */
.eco-products { display: grid; gap: 1.1rem; }
@media (min-width: 576px) { .eco-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .eco-products { grid-template-columns: repeat(3, 1fr); } }
.eco-product { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--eco-line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(16,24,40,.05); scroll-margin-top: 110px; }
.eco-product-img { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; border-bottom: 1px solid var(--eco-line); }
.eco-product-img img { position: absolute; inset: .75rem; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); object-fit: contain; }
.eco-product-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.15rem 1.2rem; flex: 1; }
.eco-product-body h3 { font-size: 1.05rem; margin: 0; line-height: 1.4; }
.eco-product-body > p { color: #475569; font-size: .92rem; line-height: 1.65; margin: 0; }
.eco-specs { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--eco-line); }
.eco-specs li { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px dashed var(--eco-line); font-size: .84rem; }
.eco-specs span { color: var(--eco-muted); }
.eco-specs strong { text-align: end; color: var(--eco-ink); font-weight: 600; }
.eco-specs strong, .eco-more-specs td, .eco-more-specs li { unicode-bidi: plaintext; }
[dir="rtl"] .eco-specs strong { text-align: left; }
.eco-more-specs { border: 1px solid var(--eco-line); border-radius: 8px; background: #f9fbfd; }
.eco-more-specs summary { cursor: pointer; padding: .55rem .8rem; font-weight: 600; font-size: .88rem; color: var(--eco-blue); list-style: none; }
.eco-more-specs summary::-webkit-details-marker { display: none; }
.eco-more-specs summary::after { content: "+"; float: inline-end; font-weight: 700; }
.eco-more-specs[open] summary::after { content: "−"; }
.eco-more-specs > div { padding: 0 .8rem .8rem; }
.eco-more-specs h4 { font-size: .88rem; margin: .7rem 0 .35rem; }
.eco-more-specs ul { margin: 0; padding-inline-start: 1.05rem; font-size: .85rem; color: #475569; }
.eco-more-specs li { margin-bottom: .2rem; }
.eco-more-specs table { width: 100%; font-size: .82rem; border-collapse: collapse; }
.eco-more-specs th, .eco-more-specs td { border-bottom: 1px solid var(--eco-line); padding: .35rem .3rem; vertical-align: top; text-align: start; }
.eco-more-specs th { color: var(--eco-muted); font-weight: 500; width: 45%; }
.eco-product .eco-quote { margin-top: auto; align-self: flex-start; font-size: .88rem; padding: .5rem 1rem; border: 1px solid var(--eco-blue); color: var(--eco-blue);
  border-radius: 8px; text-decoration: none; font-weight: 600; }
.eco-product .eco-quote:hover { background: var(--eco-blue); color: #fff; }
.eco-jump { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 0 0 1.5rem; }
.eco-jump a { font-size: .8rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--eco-line); background: #fff; color: var(--eco-ink); text-decoration: none; }
.eco-jump a:hover { border-color: var(--eco-blue); color: var(--eco-blue); }

/* faq */
.eco-faq { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: .65rem; }
.eco-faq details { background: #fff; border: 1px solid var(--eco-line); border-radius: 10px; }
.eco-faq summary { cursor: pointer; padding: 1rem 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.eco-faq summary::-webkit-details-marker { display: none; }
.eco-faq summary::after { content: "+"; font-size: 1.3rem; color: var(--eco-blue); font-weight: 700; }
.eco-faq details[open] summary::after { content: "−"; }
.eco-faq h3 { font-size: 1rem; margin: 0; }
.eco-faq .eco-faq-a { padding: 0 1.15rem 1.1rem; color: #475569; line-height: 1.75; }

/* why / related / catalog / cta / tracks */
.eco-why { background: var(--eco-soft); border-radius: 14px; padding: 2rem; display: grid; gap: 1rem; align-items: center; }
@media (min-width: 768px) { .eco-why { grid-template-columns: auto 1fr; } }
.eco-why i { font-size: 2.3rem; color: var(--eco-blue); }
.eco-why h2 { font-size: 1.4rem; margin: 0 0 .4rem; }
.eco-why p { margin: 0; color: #334155; line-height: 1.8; }
.eco-related { background: #fff; border: 1px solid var(--eco-line); border-radius: 14px; padding: 1.5rem; }
.eco-related h2 { font-size: 1.2rem; margin: 0 0 1rem; }
.eco-related-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.eco-related-links a { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--eco-line); background: #f9fbfd; color: var(--eco-ink); text-decoration: none; font-size: .88rem; font-weight: 500; }
.eco-related-links a:hover { border-color: var(--eco-blue); color: var(--eco-blue); }
.eco-related-links a.is-parent { background: var(--eco-soft); color: var(--eco-blue); font-weight: 600; }
.eco-catalog { display: grid; border-radius: 14px; overflow: hidden; border: 1px solid var(--eco-line); background: #fff; }
@media (min-width: 992px) { .eco-catalog { grid-template-columns: 2fr 1fr; } }
.eco-catalog > div { padding: 2rem; }
.eco-catalog > div + div { background: var(--eco-soft); }
.eco-catalog .eco-badge { margin-bottom: .8rem; }
.eco-catalog ul { margin: 0; padding-inline-start: 1.1rem; }
.eco-catalog li { margin-bottom: .45rem; }
.eco-cta { background: var(--eco-navy); border-radius: 14px; padding: 3rem 1.5rem; text-align: center; position: relative; overflow: hidden; }
.eco-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(58,90,130,.38), rgba(125,151,185,.2)); }
.eco-cta > * { position: relative; }
.eco-cta h2 { color: #fff; font-size: clamp(1.45rem, 2.6vw, 2.1rem); margin: 0 0 .75rem; }
.eco-cta p { color: rgba(255,255,255,.8); max-width: 760px; margin: 0 auto 1.5rem; font-size: 1.05rem; }
.eco-tracks { display: grid; gap: 1rem; }
@media (min-width: 768px) { .eco-tracks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .eco-tracks { grid-template-columns: repeat(3, 1fr); } }
.eco-track { background: #fff; border: 1px solid var(--eco-line); border-radius: 12px; padding: 1.2rem 1.3rem; }
.eco-track h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
.eco-track h3 a { color: var(--eco-ink); text-decoration: none; }
.eco-track h3 a:hover { color: var(--eco-blue); }
.eco-track ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.eco-track li { padding: .22rem 0; font-size: .9rem; }
.eco-track li a { color: #475569; text-decoration: none; }
.eco-track li a:hover { color: var(--eco-blue); text-decoration: underline; }
.eco-track li::before { content: "›"; color: var(--eco-blue); margin-inline-end: .4rem; font-weight: 700; }
[dir="rtl"] .eco-track li::before { content: "‹"; }
.dropdown-menu .dropdown-item.bio-long { white-space: normal; max-width: 360px; line-height: 1.35; }