/* Agrowtek website concept – shared styles.
   No external fonts, scripts, or requests. System font stacks only. */

:root {
  --glass: #efefef;
  --paper: #ffffff;
  --ink: #1d1d1d;
  --dark: #303030;
  --dark-2: #3a3a3a;
  --leaf: #66bb6a;
  --leaf-text: #2e7d32;
  --accent: #66bb6a;
  --accent-hi: #7ccb80;
  --steel: #5c5c5c;
  --line: #d6d6d6;
  --alert: #e0603f;

  --font-head: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --wrap: 1200px;
  --gap: clamp(16px, 2.4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--leaf-text); text-underline-offset: 3px; }
a:hover { color: var(--dark); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; box-shadow: 0 0 0 2px var(--dark); }

.wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--ink); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; letter-spacing: -0.012em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 68ch; }
.lede { font-size: 1.2rem; color: var(--steel); max-width: 52ch; }
.muted { color: var(--steel); }
.num { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 1rem/1 var(--font-head); letter-spacing: .01em;
  padding: 14px 22px; border-radius: 6px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; min-height: 46px;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: var(--accent-hi); color: var(--ink); }
.btn-outline { border-color: var(--dark); color: var(--dark); background: transparent; }
.btn-outline:hover { background: var(--dark); color: #fff; }
.btn-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-light:hover { background: #fff; color: var(--dark); }
.btn-sm { padding: 9px 14px; min-height: 38px; font-size: .95rem; }

/* Header */
.utility { background: var(--dark); color: #d4d4d4; font-size: .875rem; }
.utility .wrap { display: flex; gap: 24px; justify-content: flex-end; align-items: center; padding-block: 7px; }
.utility a { color: #fff; text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility .grow { margin-right: auto; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-top { background: var(--dark); }
.bar .wrap { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dark); }
.brand svg { width: 34px; height: 34px; }
.brand b { font: 800 1.45rem/1 var(--font-head); letter-spacing: .06em; }
.brand small { display: block; font: 500 .72rem/1.2 var(--font-body); color: var(--steel); letter-spacing: 0; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav > a, .nav > .dd > button {
  font: 600 1.02rem/1 var(--font-head); color: var(--ink); text-decoration: none; background: none; border: 0;
  padding: 12px 14px; border-radius: 6px; cursor: pointer;
}
.nav > a:hover, .nav > .dd > button:hover, .nav a[aria-current="page"] { background: var(--glass); color: var(--dark); }
.dd { position: relative; }
.dd-panel {
  position: absolute; left: 0; top: calc(100% + 8px); width: min(760px, 92vw);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.16);
  padding: 22px; display: none; grid-template-columns: 1fr 1fr; gap: 6px 28px;
}
.dd.open .dd-panel { display: grid; }
.dd-panel h4 { grid-column: 1 / -1; font-size: .95rem; color: var(--steel); margin: 0 0 4px; font-weight: 600; letter-spacing: 0; }
.dd-panel a { display: block; padding: 9px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.dd-panel a:hover { background: var(--glass); }
.dd-panel a span { display: block; font-size: .875rem; color: var(--steel); }
.dd-panel a strong { font-family: var(--font-head); font-size: 1.05rem; }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.search { display: flex; align-items: center; background: var(--glass); border-radius: 6px; padding: 0 4px 0 12px; border: 2px solid transparent; }
.search:focus-within { border-color: var(--leaf); background: #fff; }
.search input { border: 0; background: transparent; font: inherit; padding: 10px 6px; width: 190px; color: var(--ink); outline: none; }
.search button { border: 0; background: none; padding: 8px; cursor: pointer; color: var(--dark); display: grid; place-items: center; }
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 6px; text-decoration: none; color: var(--ink); font: 600 1rem/1 var(--font-head); }
.cart-link:hover { background: var(--glass); }
.cart-count { background: var(--dark); color: #fff; font: 700 .8rem/1 var(--font-body); min-width: 22px; height: 22px; border-radius: 11px; display: inline-grid; place-items: center; padding: 0 6px; }
.cart-count[data-n="0"] { background: var(--line); color: var(--steel); }
.menu-btn { display: none; }

@media (max-width: 980px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px var(--gap) 18px; margin: 0; }
  .nav.open { display: flex; }
  .nav > a, .nav > .dd > button { width: 100%; text-align: left; padding: 14px 10px; }
  .dd-panel { position: static; width: 100%; box-shadow: none; border: 0; padding: 6px 0 6px 10px; grid-template-columns: 1fr; }
  .menu-btn { display: inline-flex; margin-left: 0; }
  .search { display: none; }
  .utility .hide-sm { display: none; }
  .bar .wrap { gap: 12px; }
}

/* Hero */
.hero { background: var(--glass); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 6vw, 84px); }
.hero h1 { color: var(--dark); margin-bottom: .45em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-facts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.hero-facts div { font-size: .95rem; color: var(--steel); }
.hero-facts strong { display: block; font: 700 1.5rem/1.1 var(--font-head); color: var(--dark); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Instrument readout */
.unit { background: linear-gradient(160deg, #1b4a42, var(--dark) 55%); border-radius: 22px; padding: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); }
.screen { background: #08201c; border-radius: 12px; padding: 18px; color: #e0e0e0; border: 1px solid #1f4a42; }
.screen-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .9rem; }
.screen-head b { font: 700 1.05rem/1 var(--font-head); color: #fff; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; padding: 4px 10px; border-radius: 99px; background: rgba(102,187,106,.18); color: #a5d6a7; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: #66bb6a; box-shadow: 0 0 0 3px rgba(102,187,106,.25); }
.reads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.read { background: #2a2a2a; border: 1px solid #444444; border-radius: 8px; padding: 11px 12px 10px; }
.read span { display: block; font-size: .78rem; color: #999999; }
.read output { display: block; font: 600 1.55rem/1.15 var(--font-mono); color: #fff; margin-top: 4px; font-variant-numeric: tabular-nums; }
.read output small { font: 500 .78rem var(--font-body); color: #999999; margin-left: 3px; }
.read.focus { border-color: var(--accent); }
.read.focus output { color: var(--accent-hi); }
.trend { margin-top: 12px; background: #2a2a2a; border: 1px solid #444444; border-radius: 8px; padding: 10px 12px 8px; }
.trend-head { display: flex; justify-content: space-between; font-size: .78rem; color: #999999; }
.trend svg { width: 100%; height: 74px; display: block; }
.unit-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 6px 0; font-size: .78rem; color: #b8b8b8; }
.unit-foot b { font: 800 .85rem/1 var(--font-head); letter-spacing: .08em; color: #fff; }
@media (max-width: 520px) { .reads { grid-template-columns: repeat(2, 1fr); } }

/* Sections */
.section { padding-block: clamp(44px, 6vw, 88px); }
.section.tint { background: var(--glass); }
.section.dark { background: var(--dark); color: #e0e0e0; }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark a { color: var(--accent-hi); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: 6px 0 0; color: var(--steel); }
.section.dark .section-head p { color: #b8b8b8; }

/* Job index */
.jobs { border-top: 2px solid var(--dark); }
.job { display: grid; grid-template-columns: 1.1fr 1.2fr auto; gap: 24px; align-items: center; padding: 24px 12px; border-bottom: 1px solid var(--line); }
.job:hover { background: var(--glass); }
.job h3 { margin: 0 0 4px; font-size: 1.5rem; }
.job p { margin: 0; color: var(--steel); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 700 .9rem/1 var(--font-head); letter-spacing: .02em; padding: 8px 11px; border-radius: 5px; background: var(--glass); color: var(--dark); text-decoration: none; border: 1px solid transparent; }
.job:hover .chip { background: #fff; }
.chip:hover { border-color: var(--leaf); color: var(--dark); }
.job .go { font: 700 1rem var(--font-head); white-space: nowrap; }
@media (max-width: 860px) { .job { grid-template-columns: 1fr; gap: 12px; } }

/* Plates (featured products) */
.plates { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--gap); }
.plate { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); position: relative; transition: border-color .15s, box-shadow .15s; }
.plate:hover { border-color: var(--leaf); box-shadow: 0 10px 28px rgba(0,0,0,.1); color: var(--ink); }
.plate .shot { display: grid; place-items: center; min-height: 170px; margin-bottom: 14px; }
.plate img { mix-blend-mode: multiply; max-height: 190px; width: auto; }
.plate .code { font: 800 1.9rem/1 var(--font-head); color: var(--dark); }
.plate .name { color: var(--steel); margin: 4px 0 10px; }
.plate .spec { font-size: .95rem; margin: 0 0 14px; color: var(--ink); }
.plate .price { margin-top: auto; font: 700 1.1rem var(--font-head); }
.plate .price small { font: 500 .85rem var(--font-body); color: var(--steel); }
.plate.big { grid-row: span 2; background: var(--dark); border-color: var(--dark); color: #e8e8e8; }
.plate.big:hover { border-color: var(--accent); }
.plate.big .code { color: #fff; font-size: 2.6rem; }
.plate.big .name, .plate.big .price small { color: #b8b8b8; }
.plate.big .spec { color: #e8e8e8; }
.plate.big .price { color: #fff; }
.plate.big .shot { background: #fff; border-radius: 8px; min-height: 320px; padding: 14px; }
.plate.big img { max-height: 300px; }
.stats { display: flex; gap: 26px; margin: 0 0 18px; }
.stats div { font-size: .85rem; color: #b8b8b8; }
.stats strong { display: block; font: 700 1.6rem/1.1 var(--font-head); color: var(--accent-hi); }
@media (max-width: 960px) { .plates { grid-template-columns: 1fr 1fr; } .plate.big { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 560px) { .plates { grid-template-columns: 1fr; } }

/* Network */
.net { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.net svg { width: 100%; height: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.sizes { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sizes th, .sizes td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sizes thead th { background: var(--dark); color: #fff; font-family: var(--font-head); font-size: 1.15rem; }
.sizes tbody th { font-weight: 600; color: var(--steel); width: 34%; background: #f7f7f7; }
.sizes td { font-variant-numeric: tabular-nums; }
.sizes tr:last-child th, .sizes tr:last-child td { border-bottom: 0; }
.sizes img { mix-blend-mode: multiply; height: 74px; width: auto; margin: 0; }
@media (max-width: 900px) { .net { grid-template-columns: 1fr; } }

/* Made in */
.made { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.made figure { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid #4a4a4a; }
.made img { width: 100%; height: 100%; object-fit: cover; max-height: 380px; }
.made ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.made li { padding-left: 30px; position: relative; }
.made li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 4px; background: var(--leaf); box-shadow: inset 0 0 0 4px var(--dark), 0 0 0 2px var(--leaf); }
@media (max-width: 860px) { .made { grid-template-columns: 1fr; } }

/* Resources */
.res { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.res a { display: block; padding: 22px; border-radius: 10px; background: var(--glass); text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.res a:hover { border-color: var(--leaf); background: #fff; }
.res strong { display: block; font: 700 1.2rem var(--font-head); color: var(--dark); margin-bottom: 4px; }
.res span { color: var(--steel); font-size: .95rem; }
@media (max-width: 900px) { .res { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .res { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--dark); color: #c4c4c4; padding-block: 48px 28px; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gap); }
.foot h4 { font-size: 1rem; color: #fff; margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot .brand { color: #fff; }
.foot .brand small { color: #b8b8b8; }
.legal { border-top: 1px solid #444444; margin-top: 32px; padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
@media (max-width: 800px) { .foot { grid-template-columns: 1fr 1fr; } }

/* Page header (inner pages) */
.crumbs { font-size: .9rem; color: var(--steel); padding-block: 18px 0; }
.crumbs a { color: var(--steel); }
.page-title { padding-block: 14px 26px; }
.page-title h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .2em; color: var(--dark); }

/* Catalog listing */
.shop { display: grid; grid-template-columns: 250px 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; padding-bottom: 80px; }
.filters { position: sticky; top: 96px; }
.filters h2 { font-size: 1rem; color: var(--steel); font-weight: 600; margin-bottom: 8px; letter-spacing: 0; }
.filters ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 2px; }
.filters button { width: 100%; text-align: left; font: 600 1rem var(--font-body); background: none; border: 0; padding: 9px 12px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; color: var(--ink); }
.filters button:hover { background: var(--glass); }
.filters button[aria-pressed="true"] { background: var(--dark); color: #fff; }
.filters button em { font-style: normal; color: var(--steel); font-weight: 500; font-variant-numeric: tabular-nums; }
.filters button[aria-pressed="true"] em { color: #c4c4c4; }
.tools { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.tools .search { flex: 1 1 260px; max-width: 420px; background: var(--glass); }
.tools .search input { width: 100%; }
.tools label { font-size: .9rem; color: var(--steel); display: flex; gap: 8px; align-items: center; }
.tools select { font: inherit; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.count { color: var(--steel); font-size: .95rem; margin: 0 0 8px; }
.rows { border-top: 2px solid var(--dark); }
.rowp { display: grid; grid-template-columns: 96px 1fr auto auto; gap: 18px; align-items: center; padding: 14px 8px; border-bottom: 1px solid var(--line); }
.rowp:hover { background: #f5f5f5; }
.rowp .thumb { background: #fff; border-radius: 6px; width: 96px; height: 80px; display: grid; place-items: center; border: 1px solid #e6e6e6; }
.rowp .thumb img { max-height: 70px; width: auto; mix-blend-mode: multiply; }
.rowp .thumb.none { background: var(--glass); color: var(--steel); font: 700 .8rem var(--font-head); text-align: center; line-height: 1.2; }
.rowp h3 { margin: 0; font-size: 1.15rem; }
.rowp h3 a { color: var(--ink); text-decoration: none; }
.rowp h3 a:hover { color: var(--leaf-text); text-decoration: underline; }
.rowp h3 .code { color: var(--dark); margin-right: 8px; }
.rowp p { margin: 2px 0 0; color: var(--steel); font-size: .95rem; }
.rowp .price { font: 700 1.15rem var(--font-head); text-align: right; min-width: 110px; font-variant-numeric: tabular-nums; }
.rowp .price small { display: block; font: 500 .8rem var(--font-body); color: var(--steel); }
.empty { padding: 40px 12px; color: var(--steel); }
@media (max-width: 860px) {
  .shop { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filters ul { grid-template-columns: 1fr 1fr; }
  .rowp { grid-template-columns: 72px 1fr; }
  .rowp .thumb { width: 72px; height: 64px; }
  .rowp .price { text-align: left; grid-column: 2; }
  .rowp .buy { grid-column: 2; }
}

/* Product page */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: 40px; }
.gallery { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; place-items: center; min-height: 380px; position: sticky; top: 100px; }
.gallery img { mix-blend-mode: multiply; max-height: 420px; width: auto; }
.buybox h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--dark); margin-bottom: .15em; }
.buybox .sub { color: var(--steel); font-size: 1.1rem; margin-bottom: 18px; }
.price-big { font: 800 2.3rem/1 var(--font-head); color: var(--dark); font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.price-note { color: var(--steel); font-size: .9rem; margin-bottom: 20px; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; min-inline-size: 0; }
legend { font: 700 1rem var(--font-head); padding: 0; margin-bottom: 8px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.opt label { display: block; padding: 11px 13px; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; line-height: 1.25; }
.opt label b { display: block; font-family: var(--font-head); font-size: 1.05rem; }
.opt label span { font-size: .875rem; color: var(--steel); font-variant-numeric: tabular-nums; }
.opt input:checked + label { border-color: var(--leaf); background: #f1f9f0; box-shadow: inset 0 0 0 1px var(--leaf); }
.opt input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.opt input:hover + label { border-color: var(--leaf); }
.buyrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.qty { display: inline-flex; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; }
.qty button { width: 40px; border: 0; background: var(--glass); cursor: pointer; font: 700 1.2rem var(--font-body); color: var(--dark); }
.qty input { width: 52px; text-align: center; border: 0; font: 600 1rem var(--font-body); }
.summary { background: var(--glass); border-radius: 10px; padding: 16px 18px; margin-top: 8px; }
.summary h2 { font-size: 1rem; margin-bottom: 8px; }
.summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .95rem; }
.summary li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.included { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.included li { padding-left: 26px; position: relative; }
.included li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 7px; height: 12px; border: solid var(--leaf); border-width: 0 3px 3px 0; transform: rotate(40deg); }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } .gallery { position: static; min-height: 260px; } }

.tabs { border-bottom: 2px solid var(--line); display: flex; gap: 4px; margin-top: 30px; overflow-x: auto; }
.tabs a { padding: 12px 18px; text-decoration: none; font: 600 1.05rem var(--font-head); color: var(--steel); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs a:hover { color: var(--dark); }
.tabs a.on { color: var(--dark); border-bottom-color: var(--leaf); }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); padding-block: 36px; border-bottom: 1px solid var(--line); align-items: start; }
.doc-grid h2 { font-size: 1.6rem; }
.twocol { columns: 2; column-gap: 32px; padding-left: 20px; margin: 0; }
.twocol li { break-inside: avoid; margin-bottom: 6px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 38%; color: var(--steel); font-weight: 600; background: #f7f7f7; }
.sensor-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 8px; }
.sensor-row div { background: var(--glass); border-radius: 8px; padding: 14px; }
.sensor-row strong { display: block; font: 700 1.1rem var(--font-head); color: var(--dark); }
.sensor-row span { font-size: .9rem; color: var(--steel); }
.docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.docs a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; }
.docs a:hover { border-color: var(--leaf); background: #f4faf3; }
.docs em { font: 700 .75rem var(--font-head); background: var(--dark); color: #fff; padding: 4px 7px; border-radius: 4px; font-style: normal; }
@media (max-width: 800px) { .doc-grid { grid-template-columns: 1fr; } .twocol { columns: 1; } .sensor-row { grid-template-columns: 1fr 1fr; } }

/* Cart / forms */
.cart-grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(20px, 3vw, 48px); align-items: start; padding-bottom: 80px; }
.line-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line-item .thumb { background: #fff; border: 1px solid #e6e6e6; border-radius: 6px; height: 76px; display: grid; place-items: center; }
.line-item img { max-height: 66px; width: auto; mix-blend-mode: multiply; }
.line-item h3 { margin: 0; font-size: 1.1rem; }
.line-item p { margin: 2px 0 0; color: var(--steel); font-size: .9rem; }
.line-item .right { text-align: right; font: 700 1.1rem var(--font-head); font-variant-numeric: tabular-nums; }
.link-btn { background: none; border: 0; color: var(--leaf-text); cursor: pointer; font: inherit; font-size: .9rem; padding: 4px 0; text-decoration: underline; }
.totals { background: var(--glass); border-radius: 12px; padding: 22px; position: sticky; top: 100px; }
.totals dl { margin: 0 0 16px; display: grid; gap: 8px; }
.totals div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.totals .grand { font: 800 1.4rem var(--font-head); border-top: 1px solid var(--line); padding-top: 12px; }
.totals .btn { width: 100%; }
@media (max-width: 860px) { .cart-grid { grid-template-columns: 1fr; } .totals { position: static; } }

.form { display: grid; gap: 18px; max-width: 760px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label.field { display: grid; gap: 6px; font-weight: 600; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea { font: 400 1rem var(--font-body); padding: 12px; border: 2px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); width: 100%; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--leaf); outline: none; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.note { background: #fff6e0; border: 1px solid #f0d58f; border-radius: 8px; padding: 12px 14px; font-size: .95rem; }
@media (max-width: 640px) { .form .two { grid-template-columns: 1fr; } }

/* Resources */
.res-list { display: grid; gap: 8px; }
.res-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; }
.res-item:hover { border-color: var(--leaf); background: #f6fbf5; }
.res-item .ty { font: 800 .85rem var(--font-head); background: var(--dark); color: #fff; border-radius: 6px; height: 40px; display: grid; place-items: center; }
.res-item .ty.vid { background: var(--leaf-text); }
.res-item .ty.app { background: #7a5a0d; }
.res-item h3 { margin: 0; font-size: 1.05rem; }
.res-item p { margin: 0; color: var(--steel); font-size: .9rem; }

/* Small additions */
button.chip { cursor: pointer; font-family: var(--font-head); }
.chip[aria-pressed="true"] { background: var(--dark); color: #fff; }
.res-item[hidden] { display: none; }
.checks .opt { min-width: 0; }
.checks .opt label { padding: 10px 14px; }
.form fieldset { margin: 0; }

.rowp .thumb img, .line-item .thumb img { width: 100%; height: 100%; max-height: none; object-fit: contain; padding: 5px; }
.search input[type=search]::-webkit-search-cancel-button { display: none; }
.hero-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 30px; }
.hero-facts strong { font-size: 1.3rem; }
.hero h1 { font-size: clamp(2.2rem, 4.3vw, 3.5rem); }
@media (max-width: 600px) {
  .sizes th, .sizes td { padding: 10px 7px; font-size: .9rem; }
  .sizes thead th { font-size: 1rem; }
  .sizes tbody th { width: 27%; }
  .sizes img { height: 46px; }
  .hero-facts { grid-template-columns: 1fr 1fr; }
}

/* ===== GCX device simulation (theme taken from the real GCX interface) ===== */
.hero .wrap { grid-template-columns: .92fr 1.08fr; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
.device { position: relative; margin: 0; }
.device > img { width: 100%; mix-blend-mode: multiply; display: block; }
.device-cap { font-size: .8rem; color: var(--steel); text-align: center; margin-top: 4px; }
.sim {
  position: absolute; left: 15.17%; top: 22.73%; width: 69.61%; height: 53.96%;
  container-type: inline-size; overflow: hidden; background: #4a4d4a; color: #fff;
  font-family: "DejaVu Sans", Verdana, "Segoe UI", system-ui, sans-serif;
}
.sim * { box-sizing: border-box; }
.sim-bar { display: flex; align-items: center; justify-content: space-between; height: 11.5cqw; padding: 0 1.6cqw; background: #4f504f; border-bottom: .35cqw solid #73ae7b; }
.sim-logo { font: 800 3.2cqw/1 var(--font-head); letter-spacing: .12em; color: #7fc58a; }
.sim-logo small { display: block; font: 500 1.05cqw/1.2 var(--font-body); letter-spacing: .02em; color: #9aa59c; margin-top: .3cqw; }
.sim-clock { display: flex; gap: 1cqw; }
.sim-clock span { background: #3d3e3d; border: .2cqw solid #666; border-radius: .6cqw; padding: .9cqw 2cqw; font: 700 2.5cqw/1 var(--font-body); font-variant-numeric: tabular-nums; }
.sim-tabs { display: flex; gap: 1cqw; padding: 1.3cqw 1.6cqw .9cqw; font-size: 1.7cqw; }
.sim-tabs span { background: #3d3e3d; border-radius: .6cqw; padding: .8cqw 1.8cqw; color: #d7dcd8; }
.sim-tabs span.on { background: #4d9a5b; color: #fff; font-weight: 700; }
.sim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1cqw; padding: 0 1.6cqw; }
.sim-card { background: #424442; border: .2cqw solid #565956; }
.sim-card > header { display: flex; align-items: center; gap: 1.2cqw; padding: .9cqw 1.2cqw; background: #5f7d60; border-bottom: .2cqw solid #7fa081; font-size: 2cqw; }
.sim-card > header i { width: 0; height: 0; border-left: 1.7cqw solid #fff; border-top: 1.05cqw solid transparent; border-bottom: 1.05cqw solid transparent; margin-right: .4cqw; }
.sim-card > header em { font-style: normal; font-size: 1.3cqw; color: #e7f0e7; }
.sim-card > header b { font-weight: 500; font-size: 2.05cqw; margin-left: auto; margin-right: auto; white-space: nowrap; }
.sim-card.paused > header { background: #94494a; border-color: #b36566; }
.sim-card.paused > header i { width: 1.4cqw; height: 1.8cqw; border: 0; border-left: .5cqw solid #fff; border-right: .5cqw solid #fff; }
.sim-info { display: grid; grid-template-columns: 1fr 1fr; gap: .5cqw; padding: .7cqw .7cqw 0; }
.sim-info span { background: #383a38; padding: .7cqw .8cqw; font-size: 1.35cqw; color: #e8ece9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-info span.dim { color: #8c938d; }
.sim-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5cqw; padding: .7cqw; }
.sim-tile { background: #383a38; padding: .6cqw .7cqw .5cqw; min-width: 0; }
.sim-tile span { display: block; font-size: 1.15cqw; color: #c9d0ca; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-tile output { display: block; font: 700 3.3cqw/1.1 var(--font-body); font-variant-numeric: tabular-nums; margin-top: .2cqw; }
.sim-tile small { font-size: 1cqw; color: #aab3ac; display: block; margin-bottom: .4cqw; }
.sim-tile svg { width: 100%; height: 6.6cqw; display: block; background: #2b2d2b; background-image: linear-gradient(#3d403d 1px, transparent 1px), linear-gradient(90deg, #3d403d 1px, transparent 1px); background-size: 25% 33.3%; }
.sim-badge { background: #d9473f; border-radius: 1.4cqw; padding: .2cqw .9cqw; font-size: 1.5cqw; font-weight: 700; }

/* ===== Sense / control / act band ===== */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.trio article { border-top: 4px solid var(--leaf); padding-top: 18px; }
.trio h3 { font-size: 1.7rem; margin-bottom: 6px; }
.trio .imgs { display: flex; gap: 10px; align-items: center; height: 120px; margin: 14px 0; }
.trio .imgs img { max-height: 118px; width: auto; max-width: 31%; object-fit: contain; mix-blend-mode: multiply; }
.trio p { color: var(--steel); }
.trio .chips { margin-top: 10px; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }

/* ===== Interface showcase ===== */
.ui-show { display: grid; grid-template-columns: .8fr 1.4fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.ui-show figure { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid #4a4a4a; box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); background: #4a4d4a; }
.ui-show img { width: 100%; display: block; }
.ui-show ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.ui-show li { padding-left: 28px; position: relative; }
.ui-show li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 4px; border-radius: 2px; background: var(--accent); }
@media (max-width: 900px) { .ui-show { grid-template-columns: 1fr; } }

/* ===== CTA band ===== */
.cta { background: var(--accent); }
.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: clamp(32px, 4vw, 52px); }
.cta h2 { margin: 0; color: var(--ink); font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 22ch; }
.cta .btn { background: var(--dark); color: #fff; }
.cta .btn:hover { background: var(--ink); color: #fff; }

/* ===== Dark, full-height hero (home) ===== */
:root { --hdr: 109px; }
.home .utility { background: #1c1c1c; }
.home .site-header { background: #262626; border-bottom-color: #3d3d3d; }
.home .brand { color: #fff; }
.home .brand small { color: #aaaaaa; }
.home .nav > a, .home .nav > .dd > button { color: #ececec; }
.home .nav > a:hover, .home .nav > .dd > button:hover, .home .nav a[aria-current="page"] { background: rgba(255,255,255,.09); color: #fff; }
.home .search { background: rgba(255,255,255,.1); }
.home .search:focus-within { background: rgba(255,255,255,.16); border-color: var(--accent); }
.home .search input { color: #fff; }
.home .search input::placeholder { color: #b0b0b0; }
.home .search button, .home .cart-link { color: #fff; }
.home .cart-link:hover { background: rgba(255,255,255,.09); }
.home .cart-count { background: var(--accent); color: var(--ink); }
.home .cart-count[data-n="0"] { background: rgba(255,255,255,.2); color: #dcdcdc; }
.home .menu-btn { border-color: rgba(255,255,255,.5); color: #fff; }

.hero { background: radial-gradient(900px 620px at 74% 50%, #454e46 0%, #303030 52%, #242424 100%); color: #e8e8e8; min-height: calc(100vh - var(--hdr)); min-height: calc(100svh - var(--hdr)); display: grid; align-items: center; }
.hero .wrap { grid-template-columns: .92fr 1.08fr; padding-block: clamp(20px, 4vh, 56px); width: min(100% - 2 * var(--gap), var(--wrap)); }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.1vw, 3.7rem); }
.hero .lede { color: #c0c0c0; }
.hero .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.hero .btn-outline:hover { background: #fff; color: var(--dark); }
.hero-facts { border-top: 1px solid rgba(255,255,255,.2); }
.hero-facts strong { color: #fff; font-size: 1.9rem; }
.hero-facts div { color: #b8b8b8; }
.device-frame { position: relative; }
.device-frame > img { width: 100%; display: block; mix-blend-mode: normal; filter: drop-shadow(0 30px 38px rgba(0,0,0,.55)); }
.hero .device-cap { color: #8c8c8c; margin-top: 10px; }
@media (max-width: 900px) { .hero { min-height: 0; } }
@media (max-width: 980px) {
  .home .nav { background: #262626; border-bottom-color: #3d3d3d; }
  .home .dd-panel a { color: #ececec; } .home .dd-panel a span, .home .dd-panel h4 { color: #aaaaaa; }
  .home .dd-panel a:hover { background: rgba(255,255,255,.08); }
}

/* ===== Interface showcase (tabs) ===== */
.center-head { text-align: center; margin-bottom: 26px; }
.center-head p { margin: 0 auto; color: var(--steel); }
.center-head h2 { margin-bottom: .3em; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 24px; padding: 0; }
.pill-tab { font: 600 1.02rem/1 var(--font-head); padding: 13px 22px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.pill-tab:hover { border-color: var(--leaf); }
.pill-tab[aria-selected="true"] { background: var(--dark); border-color: var(--dark); color: #fff; }
.show-frame { max-width: 1020px; margin: 0 auto; background: #303030; border: 2px solid #66bb6a; border-radius: 16px; padding: 10px; box-shadow: 0 34px 60px -28px rgba(0,0,0,.6); }
.show-frame img { width: 100%; display: block; border-radius: 8px; }
.show-panel[hidden] { display: none; }
.show-cap { max-width: 1020px; margin: 18px auto 0; text-align: center; color: var(--steel); }
.show-cap strong { color: var(--dark); font-family: var(--font-head); font-size: 1.15rem; display: block; margin-bottom: 2px; }
.hero .wrap { grid-template-columns: .8fr 1.2fr; }
.hero h1 { font-size: clamp(2.1rem, 3.8vw, 3.4rem); }
.hero-facts { gap: 18px 34px; }

/* ===== Real logo ===== */
.brand img { height: 40px; width: auto; display: block; }
.foot .brand img { height: 44px; }
.sim-logo { height: 6.6cqw; width: auto; display: block; }
@media (max-width: 520px) { .brand img { height: 30px; } }

/* CTA band on the accent color */
.cta .btn { background: var(--dark); color: #fff; }
.cta .btn:hover { background: #1d1d1d; color: #fff; }

/* Content kit helpers */
.plates.three { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; }
@media (max-width: 960px) { .plates.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plates.three { grid-template-columns: 1fr; } }
.plate .shot { min-height: 150px; }
.video { max-width: 640px; }

/* Embedded videos inside product descriptions and pages keep their place but stay responsive */
iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"] { width: 100%; max-width: 720px; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }

/* Resources page (0.3.10): whole-row links without underlines, room between families */
a.res-item { text-decoration: none; color: inherit; }
a.res-item h3 { color: var(--dark); }
a.res-item:hover h3 { text-decoration: underline; }
.res-item > span:last-child { color: var(--leaf-text); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.res-list + h2, .res-list ~ h2 { margin-top: 44px; }
.res-list { margin-bottom: 8px; }
.checks .chip { text-decoration: none; }
@media (max-width: 520px) { .res-item { grid-template-columns: 44px 1fr; } .res-item > span:last-child { display: none; } }

/* Footer (0.3.11, option A chosen 9 Nov). Content comes from four Custom modules in positions footer-1..4 (designs/2026-11-footer/source). */
.site-footer h4 { font: 700 1rem var(--font-head); letter-spacing: .02em; color: #fff; margin: 0 0 12px; }
.site-footer address { font-style: normal; line-height: 1.6; margin-bottom: 10px; }
.foot-contact { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 4px; }
.foot-contact span { display: inline-block; min-width: 52px; color: #9e9e9e; }
.foot-social { margin: 14px 0 0; }
.foot-social a { display: inline-flex; align-items: center; gap: 8px; }
.foot-catalog { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; text-decoration: none; }
.foot-catalog img { width: 58px; height: auto; border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.site-footer small { color: #9e9e9e; font-size: .8em; }
.legal .usa { display: inline-flex; align-items: center; gap: 8px; }
.legal .usa svg { border-radius: 2px; }
@media (max-width: 480px) { .foot { grid-template-columns: 1fr 1fr; gap: 28px 16px; } .site-footer { font-size: .92rem; } }

/* Error page (0.3.12) */
.error-page .site-header { position: static; }
.err { max-width: 720px; padding-block: 40px 90px; }
.err-code { font: 800 clamp(4rem, 12vw, 7rem) var(--font-head); line-height: 1; color: var(--leaf); margin: 0 0 8px; }
.err .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 30px; }
.err-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--steel); }
.err-debug { margin-top: 30px; padding: 14px; background: var(--glass); border-radius: 8px; white-space: pre-wrap; font: .85rem var(--font-mono); }

/* 0.3.14: screen-reader-only text (search label) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header cart (0.3.15): J2Commerce cart module, turned into a link by agrowtek.js (initMiniCart) */
.header-tools .j2commerce-cart-module, .header-tools .j2commerce-minicart { display: contents; }
.header-tools .cart-link .cart-count { position: static; transform: none; margin: 0; }
.header-tools .cart-link .cart-count .visually-hidden, .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.header-tools .j2commerce-minicart-link .fa-shopping-cart { display: none; }
.home .header-tools .cart-link { color: #ececec; }
.home .header-tools .cart-link:hover { background: rgba(255,255,255,.09); }

/* 0.3.17: a Custom module in the top strip is wrapped in its own div; let its links and text sit in the strip's flex row */
.utility .wrap > div { display: contents; }

/* 0.3.18 shop and component pages: line up with the header's left and right edges, less space under the breadcrumb.
   J2Commerce wraps its pages in Bootstrap containers with their own width and side padding; inside the template's .wrap
   those only push the content inwards. */
.page-body { margin-top: 22px; }
.page-body .j2commerce .container, .page-body .j2commerce .container-fluid, .page-body .j2commerce .container-sm,
.page-body .j2commerce .container-md, .page-body .j2commerce .container-lg, .page-body .j2commerce .container-xl,
.page-body .j2commerce .container-xxl, .page-body > .container, .page-body > .container-fluid {
  max-width: none; width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0;
}
.page-body > :first-child, .page-body > :first-child > :first-child,
.page-body > .j2commerce > .container:first-child, .page-body > .j2commerce > .container-fluid:first-child { margin-top: 0; padding-top: 0; }
.page-body h1:first-of-type, .page-body .page-header:first-child { margin-top: 0; }
.page-body .page-header h1, .page-body h1 { margin-bottom: 18px; }
/* j2commerce-shop.css gives .j2commerce its own width and top padding (written before the template wrapped pages); inside
   .page-body the template's .wrap already sets the width */
.page-body .j2commerce { width: auto; margin-inline: 0; padding-top: 0; }
.page-body > .j2commerce > :first-child, .page-body > .j2commerce > :first-child > :first-child { padding-top: 0 !important; margin-top: 0 !important; }

/* 0.3.19 Bootstrap pop-up windows (J2Commerce "Print Order" and similar). The template had no modal styles, so the pop-up's
   contents showed at the bottom of the page. Hidden until opened; opened by Joomla's local Bootstrap script. */
.modal { position: fixed; inset: 0; z-index: 1055; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; }
.modal-dialog { position: relative; width: auto; max-width: 820px; margin: 1.75rem auto; padding-inline: 16px; pointer-events: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
.modal-sm .modal-dialog, .modal-dialog.modal-sm { max-width: 420px; }
.modal-lg .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: 1100px; }
.modal.fade .modal-dialog { transform: translateY(-30px); transition: transform .25s ease-out; }
.modal.show .modal-dialog { transform: none; }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.25); outline: 0; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #e6e8e6; }
.modal-header :is(h1, h2, h3, h4, h5, .modal-title) { margin: 0; font-size: 1.25rem; }
.modal-body { position: relative; flex: 1 1 auto; padding: 22px; }
.modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid #e6e8e6; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1050; width: 100vw; height: 100vh; background: #000; }
.modal-backdrop.fade { opacity: 0; transition: opacity .15s linear; }
.modal-backdrop.show { opacity: .5; }
body.modal-open { overflow: hidden; }
.btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: .4em; border: 0; border-radius: 8px; opacity: .6; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.29.29a1 1 0 0 1 1.42 0L8 6.59 14.29.29a1 1 0 1 1 1.42 1.42L9.41 8l6.3 6.29a1 1 0 0 1-1.42 1.42L8 9.41l-6.29 6.3a1 1 0 0 1-1.42-1.42L6.59 8 .29 1.71a1 1 0 0 1 0-1.42z'/%3e%3c/svg%3e") center / 1em auto no-repeat; }
.btn-close:hover { opacity: 1; background-color: #f0f0f0; }

/* 0.3.19 Sign-in, password reset and username reminder (Joomla's own com_users pages): one centred card. */
.option-com_users.view-login .page-body, .option-com_users.view-reset .page-body, .option-com_users.view-remind .page-body {
  max-width: 440px; margin: 28px auto 72px; padding: 30px 32px 26px; background: #fff; border: 1px solid #e3e6e3;
  border-top: 6px solid var(--leaf); border-radius: 18px; box-shadow: 0 18px 50px rgba(30,40,30,.10);
}
.option-com_users.view-registration .page-body, .option-com_users.view-profile .page-body { max-width: 640px; margin: 28px auto 72px; }
.option-com_users .page-body .page-header h1, .option-com_users .page-body h1 { font-size: 1.75rem; margin: 0 0 18px; text-align: center; }
.option-com_users .page-body fieldset { border: 0; padding: 0; margin: 0; }
.option-com_users .page-body .control-group { margin-bottom: 16px; }
.option-com_users .page-body .control-label label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.option-com_users .page-body .star { color: var(--leaf-text); }
.option-com_users .page-body :is(input[type=text], input[type=email], input[type=password]) {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #cfd4cf; border-radius: 10px; background: #fff; font: inherit; }
.option-com_users .page-body :is(input[type=text], input[type=email], input[type=password]):focus { outline: 0; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(97,186,104,.25); }
.option-com_users .page-body .input-group { display: flex; }
.option-com_users .page-body .input-group input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.option-com_users .page-body .input-password-toggle { min-width: 48px; border: 1px solid #cfd4cf; border-left: 0; border-radius: 0 10px 10px 0; background: #f4f6f4; color: #444; cursor: pointer; }
.option-com_users .page-body .form-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; }
.option-com_users .page-body .controls .btn, .option-com_users .page-body button[type=submit] { width: 100%; min-height: 48px; border-radius: 10px; font-weight: 700; }
.option-com_users .page-body button[type=submit], .option-com_users .page-body .btn-primary { background: var(--leaf); color: var(--ink, #1f1f1f); border: 0; }
.option-com_users .page-body button[type=submit]:hover { background: var(--accent-hi, #4fa657); }
.option-com_users .page-body .plg_system_webauthn_login_button { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; border: 1px solid #cfd4cf; color: #333; margin-bottom: 10px; }
.option-com_users .page-body .plg_system_webauthn_login_button :is(img, svg) { width: 22px; height: 22px; }
.option-com_users .page-body .com-users-login__options { display: grid; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6e8e6; text-align: center; font-size: .92rem; }
.option-com_users .page-body .com-users-login__options a { display: block; }
.option-com_users .page-body .input-group input { flex: 1 1 auto; min-width: 0; }
.option-com_users .page-body .controls .input-password-toggle { flex: 0 0 52px; width: 52px; min-height: 46px; border-radius: 0 10px 10px 0; }

/* 0.3.19 checkout: buttons (Place Order, Continue) keep a gap from the box above them */
body[class*="view-checkout"] .page-body .j2commerce .btn:not(.btn-link):not(.btn-sm) { margin-top: 16px; margin-bottom: 6px; }

/* 0.3.20 checkout: PayPal's buttons (drawn by PayPal's script into its own container) keep a gap from the payment box above */
body[class*="view-checkout"] .page-body :is(.paypal-buttons, [id*="paypal"][id*="container"], [class*="paypal"][class*="container"]) { margin-top: 16px; }
body[class*="view-checkout"] .page-body :is([id*="paypal"][id*="container"], [class*="paypal"][class*="container"]) .paypal-buttons { margin-top: 0; }

/* 0.3.20 My Account when signed out (sign-in and guest boxes side by side): line both boxes up at the top */
body[class*="view-myprofile"] .page-body .j2commerce :is(.row, .d-flex) { align-items: flex-start !important; }
body[class*="view-myprofile"] .page-body .j2commerce .row > [class*="col"] > :first-child { margin-top: 0 !important; }
body[class*="view-myprofile"] .page-body .j2commerce .row > [class*="col"] { align-self: flex-start !important; }

/* 0.3.22 cart page: messages in Agrowtek green instead of Bootstrap blue; sign-in button under "basket is empty" */
.agk-cart-login { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 8px; }
.page-body .j2commerce .alert { padding: 14px 18px !important; }
.page-body .j2commerce .agk-cart-login .btn-outline { border: 2px solid var(--dark); color: var(--dark); background: transparent; }
.page-body .j2commerce .agk-cart-login .btn-outline:hover { background: var(--dark); color: #fff; }

/* 0.3.23 information messages everywhere (Joomla and J2Commerce): Agrowtek green instead of Bootstrap blue */
.page-body .alert-info, .page-body .alert-primary, #system-message-container .alert-info,
#system-message-container joomla-alert[type="info"], joomla-alert[type="info"] {
  background: #edf6ee !important; border: 1px solid #b7dcb9 !important; color: #2f5f31 !important; border-radius: 12px; }
.page-body .alert-info a, .page-body .alert-primary a { color: #2f5f31; font-weight: 600; }

/* 0.3.26 Resources page, layout B (owner, 13 Nov): one card per product, product image left, documents right */
.agk-resources .res-fam { margin: 0 0 34px; }
.agk-resources .res-fam:first-of-type h2 { margin-top: 4px; }
.agk-resources .res-fam h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin: 30px 0 14px; padding-bottom: 8px; border-bottom: 3px solid var(--leaf); }
.agk-resources .res-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 16px; margin-bottom: 12px; border: 1px solid #e3e6e3; border-radius: 14px; background: #fff; }
.agk-resources .res-img { box-sizing: border-box; width: 120px; height: 120px; display: flex !important; align-items: center; justify-content: center;
  background: #eef1ee; border: 1px solid #e1e5e1; border-radius: 12px; padding: 8px; }   /* 0.3.28: shaded box as in 0.3.26, image centred at its own size */
.agk-resources .res-img img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; display: block; margin: auto; }   /* natural size: the icons are ~60 px, never scaled up (0.3.27) */
.agk-resources .res-back { margin: 0 0 6px; }
.agk-resources .res-back a { color: var(--leaf-text); font-weight: 600; text-decoration: none; }
.agk-resources .res-docs h3 { font-size: 1.05rem; margin: 2px 0 6px; }
.agk-resources .res-doc { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 2px; border-bottom: 1px solid #eef0ee; color: var(--ink, #1d1d1d); text-decoration: none; font-size: .97rem; }
.agk-resources .res-doc:last-child { border-bottom: 0; }
.agk-resources a.res-doc:hover .t { color: var(--leaf-text); text-decoration: underline; }
.agk-resources .res-doc .ty { display: inline-flex; align-items: center; justify-content: center; height: 26px; border-radius: 6px;
  background: var(--dark); color: #fff; font: 800 .72rem var(--font-head, inherit); letter-spacing: .03em; }
.agk-resources .res-doc .ty.vid { background: var(--leaf-text); }
.agk-resources .res-doc .ty.app { background: #7a5a0d; }
.agk-resources .res-doc .x { color: var(--leaf-text); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.agk-resources .res-doc small { color: #6a706c; }
@media (max-width: 600px) {
  .agk-resources .res-card { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .agk-resources .res-card { grid-template-columns: 84px minmax(0, 1fr); }
  .agk-resources .res-img { width: 84px; height: 84px; padding: 6px; }
  .agk-resources .res-doc { grid-template-columns: 40px minmax(0, 1fr); }
  .agk-resources .res-doc .x { display: none; }
}
/* 0.3.29 Resources: product names link to their product pages */
.agk-resources .res-docs h3 a { color: var(--ink, #1d1d1d); text-decoration: none; }
.agk-resources .res-docs h3 a span { color: var(--leaf-text); margin-left: .15em; }
.agk-resources .res-docs h3 a:hover { color: var(--leaf-text); text-decoration: underline; }
/* 0.3.30 Software page (same cards as Resources): tool description and notes */
.agk-resources .res-desc { margin: 0 0 8px; color: #4f5551; font-size: .95rem; line-height: 1.55; }
.agk-resources .res-note { margin: 8px 0 0; color: #6a706c; font-size: .88rem; }
.agk-resources .res-desc a, .agk-resources .res-note a { color: var(--leaf-text); }

/* 0.3.31 Company page, layout A (owner, 13 Nov) */
.agk-co h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 34px 0 14px; }
.agk-co-hero { position: relative; min-height: clamp(260px, 36vw, 440px); border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; background: #2a2a2a center / cover no-repeat; margin-top: 4px; }
.agk-co-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72)); }
.agk-co-hero-in { position: relative; padding: clamp(20px, 3.5vw, 38px); color: #fff; max-width: 780px; }
.agk-co-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.08; margin: 0 0 10px; }
.agk-co-hero p { color: #eef2ee; margin: 0; font-size: 1.05rem; }
.agk-co-badge { position: absolute; top: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 26px); width: clamp(84px, 11vw, 150px); height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.agk-co-intro { font-size: 1.12rem; line-height: 1.65; color: #333; margin: 22px 0 0; max-width: none; }   /* full width: no empty space beside it */
.agk-co-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; }
.agk-co-facts div { background: #f2f5f2; border-radius: 14px; padding: 16px 18px; }
.agk-co-facts b { display: block; font: 800 1.45rem var(--font-head, inherit); color: var(--leaf-text); }
.agk-co-facts span { font-size: .92rem; color: #444; }
.agk-co-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.agk-co-card { border: 1px solid #e3e6e3; border-radius: 16px; overflow: hidden; background: #fff; }
.agk-co-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.agk-co-card div { padding: 14px 16px 16px; } .agk-co-card h3 { margin: 0 0 6px; font-size: 1.12rem; } .agk-co-card p { margin: 0; color: #555; font-size: .95rem; }
.agk-co-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.agk-co-chips span { background: #eef6ee; color: #2e5e30; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: .92rem; }
.agk-co-usa { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: center; background: var(--dark, #303030); color: #e8e8e8; border-radius: 18px; padding: clamp(20px, 3vw, 30px); margin-top: 34px; }
.agk-co-usa h2 { color: #fff; margin: 0 0 10px; } .agk-co-usa p { color: #ddd; margin: 0 0 8px; }
.agk-co-usa .agk-co-cage { color: #9fd39f; }
.agk-co-usa img { width: 100%; height: auto; border-radius: 12px; display: block; }
@media (max-width: 900px) { .agk-co-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agk-co-cards, .agk-co-usa { grid-template-columns: 1fr; } }
/* 0.3.32 Company page: documents, video and logo, layout 4 (owner, 13 Nov): document tiles, then a light band with video and logo */
.agk-co-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.agk-co-tile { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid #e3e6e3; border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; }
.agk-co-tile:hover { border-color: var(--leaf); color: var(--ink); }
.agk-co-tile .t { align-self: flex-start; background: var(--dark); color: #fff; border-radius: 6px; padding: 4px 8px; font-size: .72rem; font-weight: 800; letter-spacing: .03em; }
.agk-co-tile b { font-size: 1.08rem; }
.agk-co-tile small { flex: 1; color: #666; font-size: .92rem; line-height: 1.5; }
.agk-co-tile .go { color: var(--leaf-text); font-weight: 700; font-size: .92rem; }
.agk-co-band { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center; background: #eef4ee; border-radius: 18px; padding: clamp(18px, 3vw, 30px); margin: 34px 0 clamp(28px, 4vw, 48px); }
.agk-co-band h2 { margin: 0 0 12px; }
.agk-co-vid { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #111; }
.agk-co-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.agk-co-logo { text-align: center; }
.agk-co-logo img { display: block; width: 150px; height: auto; margin: 0 auto 14px; }
.agk-co-logo h2 { font-size: 1.25rem; }
.agk-co-logo p { margin: 0 auto; max-width: 340px; color: #444; line-height: 1.6; }
@media (max-width: 900px) { .agk-co-tiles, .agk-co-band { grid-template-columns: 1fr; } .agk-co-logo img { width: 110px; } }
/* 0.3.32 Planning band: Joomla wraps a Custom module's text in its own div, which made that div the only flex item
   (heading and button stacked on the left). display: contents lets the heading and button lay out in the band itself. */
.cta .wrap > div { display: contents; }

/* 0.3.34 Contact page, layout C (owner, 13 Nov): split card from html/com_contact/contact/default.php.
   Dark panel (heading, intro from the contact's Miscellaneous Information, details); Joomla's form on white. */
.agk-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); border: 1px solid #e3e6e3; border-radius: 20px; overflow: hidden; margin: 6px 0 48px; }
.agk-contact.no-form { grid-template-columns: 1fr; }
.page-body .agk-contact > .dark, .agk-contact > .dark { background: var(--dark); color: #e8e8e8; padding: clamp(22px, 3vw, 36px); }
.agk-contact > .dark h1 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 0 0 10px; }
.agk-contact .intro p { color: #cfcfcf; line-height: 1.65; margin: 0 0 10px; }
.agk-contact .intro .lede { color: #cfd6cf; font-size: 1.2rem; line-height: 1.5; }
.agk-contact .intro a { color: var(--accent-hi); }
.agk-ct-list { list-style: none; margin: 22px 0 0; padding: 0; }
.agk-ct-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid #474747; }
.agk-ct-list li:first-child { border-top: 0; }
.agk-ct-list .ic { width: 40px; height: 40px; border-radius: 10px; background: #3d4a3d; color: #9fd39f; display: grid; place-items: center; }
.agk-ct-list small { display: block; color: #9da59d; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.agk-ct-list a, .agk-ct-list .v { color: #fff; font-weight: 600; text-decoration: none; line-height: 1.45; }
.agk-ct-list a:hover { color: var(--accent-hi); }
.agk-contact > .form { background: #fff; padding: clamp(18px, 2.6vw, 30px); }
.agk-contact > .form h2 { font-size: 1.3rem; margin: 0 0 6px; }
/* Joomla's form markup (com_contact default_form.php) */
.agk-contact form { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.agk-contact fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
.agk-contact fieldset > * { grid-column: 1 / -1; }
.agk-contact fieldset > .control-group:has(#jform_contact_name), .agk-contact fieldset > .control-group:has(#jform_contact_email) { grid-column: auto; }
.agk-contact legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* "Send an Email": the h2 above says it */
.agk-contact .control-group { margin: 0 0 14px; }
.agk-contact .control-label label, .agk-contact .control-label { display: block; font-weight: 600; font-size: .95rem; margin: 0 0 6px; color: var(--ink); }
.agk-contact .spacer label, .agk-contact .spacer { font-weight: 400; color: #777; font-size: .88rem; }
.agk-contact .star, .agk-contact .red { color: var(--leaf-text); }
.agk-contact input[type=text], .agk-contact input[type=email], .agk-contact textarea { width: 100%; max-width: none; font: inherit; padding: 11px 13px; border: 1px solid #cfd4cf; border-radius: 10px; background: #fafbfa; box-sizing: border-box; }
.agk-contact input:focus, .agk-contact textarea:focus { outline: 2px solid var(--leaf); outline-offset: 1px; border-color: var(--leaf); background: #fff; }
.agk-contact textarea { min-height: 170px; resize: vertical; }
.agk-contact .invalid { border-color: var(--alert) !important; }
.agk-contact button[type=submit], .agk-contact .btn-primary { background: var(--leaf); color: var(--ink); border: 0; border-radius: 6px; padding: 14px 24px; font: 600 1rem/1 var(--font-head); cursor: pointer; min-height: 46px; }
.agk-contact button[type=submit]:hover { background: var(--accent-hi); }
@media (max-width: 900px) { .agk-contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .agk-contact fieldset { grid-template-columns: 1fr; } }

/* 0.3.34 Careers: text across the full content width (the site caps paragraphs at 68ch and the lede at 52ch) */
.agk-careers p, .agk-careers .lede { max-width: none; }
.agk-careers img { display: block; }

/* 0.3.35 Home (owner, 13 Nov): "Built in Brookfield" list markers white instead of green */
.made li::before { background: #fff; box-shadow: inset 0 0 0 4px var(--dark), 0 0 0 2px #fff; }
/* Control column: the GCXmini / GCX / GCX+ group photo fills the column instead of one controller at a third of it */
.trio .imgs img.series { max-width: 100%; max-height: 118px; }

/* 0.3.36 Home, layout 2 (owner, 13 Nov 2026): order set in index.php; new positions home-strip, home-devices, home-fertigation */
/* White sections that follow each other share one gap (same module, or two modules side by side) */
.home main .section:not(.tint):not(.dark) + .section:not(.tint):not(.dark),
.home main > div:has(> .section:last-child:not(.tint):not(.dark)) + div > .section:first-child:not(.tint):not(.dark) { padding-top: 0; }
/* No-subscriptions strip under the hero (home-strip) */
.agk-values { background: #262626; color: #e8e8e8; border-top: 1px solid #3a3a3a; }
.agk-values .wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 18px; padding-block: 20px; }
.agk-values div { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.agk-values svg { flex: none; color: var(--accent); }
@media (max-width: 900px) { .agk-values .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* BDX fertigation section, design B with the dark top (home-fertigation) */

.bdx-eyebrow { display: inline-block; font: 700 .8rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--leaf-text); margin: 0 0 10px; }
.bdx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bdx-step { border-radius: 14px; padding: 16px 18px; position: relative; }
.bdx-step .n { display: flex; align-items: center; gap: 10px; font: 700 1.15rem var(--font-head); margin-bottom: 6px; }
.bdx-step .n i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .95rem; background: var(--leaf); color: #10240f; flex: none; }
.bdx-step p { margin: 0; font-size: .95rem; line-height: 1.55; max-width: none; }
.bdx-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bdx-spec b { display: block; font: 800 1.35rem var(--font-head); }
.bdx-spec span { display: block; font-size: .9rem; }
.bdx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.bdx-price { font-size: .95rem; }

/* B: light, process-led: Fill > Mix > Feed diagram, then photo beside the capabilities */
.bdx-b .head { text-align: center; max-width: 780px; margin: 0 auto 28px; }
.bdx-b .head .lede { margin: 0 auto; }
.bdx-b .flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 10px; }
.bdx-b .bdx-step { background: #f2f5f2; text-align: center; padding: 20px 18px; }
.bdx-b .bdx-step svg { display: block; margin: 0 auto 10px; }
.bdx-b .bdx-step .n { justify-content: center; }
.bdx-b .arrow { display: grid; place-items: center; color: var(--leaf); font-size: 2rem; font-weight: 700; }
.bdx-b .lower { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: 34px; }
.bdx-b .photo img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid #e3e6e3; }
.bdx-b .feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.bdx-b .feat li { padding-left: 26px; position: relative; line-height: 1.45; }
.bdx-b .feat li::before { content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 4px; background: var(--leaf); }
.bdx-b .feat b { display: block; }
.bdx-b .feat span { color: var(--steel); font-size: .92rem; }
.bdx-b .bdx-price { color: var(--steel); }

/* B, top part on the dark background (owner, 13 Nov): heading and Fill > Mix > Feed; photo and capabilities stay white below */
.bdx-step svg { color: #2e7d32; }
.bdx-b-top .bdx-eyebrow { color: #9fd39f; }
.bdx-b-top .head h2 { color: #fff; }
.bdx-b-top .head .lede { color: #c9c9c9; }
.bdx-b-top .bdx-step { background: #3a3a3a; }
.bdx-b-top .bdx-step svg { color: #9fd39f; }
.bdx-b-top .bdx-step .n { color: #fff; }
.bdx-b-top .bdx-step p { color: #cfcfcf; }
.bdx-b-lower { padding-top: clamp(32px, 4vw, 56px); }
.bdx-b-lower .lower { margin-top: 0; }

@media (max-width: 900px) {
  .bdx-b .lower { grid-template-columns: 1fr; }
  .bdx-steps { grid-template-columns: 1fr; }
  .bdx-b .flow { grid-template-columns: 1fr; } .bdx-b .arrow { transform: rotate(90deg); }
}
@media (max-width: 560px) { .bdx-specs { grid-template-columns: 1fr; } .bdx-b .feat { grid-template-columns: 1fr; } }

/* 0.3.37 Home: the hero and the no-subscriptions strip fill the first screen together (the hero shrinks by the strip's
   height), so the strip shows without scrolling. If the content is taller than the window, both simply grow. */
.hero-fold { display: flex; flex-direction: column; min-height: calc(100vh - var(--hdr)); min-height: calc(100svh - var(--hdr)); }
.hero-fold > .hero { flex: 1 0 auto; min-height: 0; }
/* "One network" on the light grey of the GCX screens section, even before the module content is re-pasted */
.home section[aria-labelledby="net-h"] { background: var(--glass); }
/* Short windows (laptops): heading, spacing and controller picture follow the window height so hero and strip still fit */
@media (min-width: 901px) and (max-height: 860px) {
  .hero-fold .hero .wrap { padding-block: 8px; }
  .hero-fold .hero h1 { font-size: clamp(1.9rem, 5.4vh, 3.3rem); margin-bottom: .35em; }
  .hero-fold .hero .lede { font-size: clamp(1rem, 2.3vh, 1.2rem); margin-bottom: 0; }
  .hero-fold .hero .actions { margin-top: clamp(12px, 2.4vh, 28px); }
  .hero-fold .hero-facts { margin-top: clamp(12px, 2.6vh, 34px); padding-top: clamp(10px, 1.8vh, 22px); }
  .hero-fold .hero-facts strong { font-size: clamp(1.3rem, 3.2vh, 1.9rem); }
  .hero-fold .hero .device { width: 100%; max-width: calc((100vh - var(--hdr) - 120px) * 1.25); margin-inline: auto; }
}

/* 0.3.38 Home (owner, 13 Nov): section intro text runs to the right margin instead of wrapping at 68 characters */
.home .section-head > div { flex: 1 1 auto; }
.home .section-head p { max-width: none; }
/* BDX top: "Fertigation Systems" and the intro left-aligned across the full width; the tagline centred under the steps */
.bdx-b-top .head { text-align: left; max-width: none; margin: 0 0 24px; }
.bdx-b-top .head h2 { margin: 0 0 10px; }
.bdx-b-top .head .lede { margin: 0; max-width: none; }
.bdx-tagline { margin: 30px 0 0; max-width: none; text-align: center; font: 700 clamp(1.5rem, 2.8vw, 2.2rem)/1.2 var(--font-head); color: #fff; }

/* 0.3.39 Home (owner, 13 Nov): "One network, three controller sizes" heading and intro right-aligned */
.home section[aria-labelledby="net-h"] .section-head { justify-content: flex-end; text-align: right; }

/* 0.3.40 Home on phones and small tablets (owner, 13 Nov) */
@media (max-width: 900px) {
  /* hero: one column (a later desktop rule had kept two), text first, controller below */
  .hero-fold { min-height: 0; }
  .hero .wrap, .hero-fold .hero .wrap { grid-template-columns: 1fr; gap: 26px; padding-block: 28px 24px; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); line-height: 1.08; margin-bottom: .4em; }
  .hero .lede { font-size: 1.06rem; line-height: 1.55; max-width: none; }
  .hero .actions { margin-top: 20px; gap: 10px; }
  .hero .actions .btn { flex: 1 1 0; padding-inline: 12px; }
  .hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; padding-top: 16px; }
  .hero-facts strong { font-size: 1.35rem; }
  .hero-facts div { font-size: .82rem; line-height: 1.35; }
  .hero .device { max-width: 520px; width: 100%; margin-inline: auto; }
  .hero .device-cap { font-size: .72rem; }
  /* strip: compact two columns */
  .agk-values .wrap { gap: 10px 14px; padding-block: 16px; }
  .agk-values div { font-size: .86rem; gap: 8px; }
  .agk-values svg { width: 18px; height: 18px; }
  /* "One network" heading back to the left on narrow screens */
  .home section[aria-labelledby="net-h"] .section-head { justify-content: flex-start; text-align: left; }
}
/* "Talk to our team" (Built in Brookfield): white text */
#made .btn-light { color: #fff; }
#made .btn-light:hover { color: var(--dark); }

/* 0.3.41 Company hero: wide factory photo (owner, 13 Nov). The Agrowtek sign sits right of the headline on wide screens
   and in view on phones. */
.agk-co-hero { background-position: 36% 50%; }
@media (max-width: 900px) { .agk-co-hero { background-position: 58% 50%; } }

/* 0.3.42 Company hero (owner, 13 Nov): 20-years badge in the top-left corner instead of the top-right */
.agk-co-badge { right: auto; left: clamp(12px, 2vw, 26px); }

/* 0.3.43 My Account signed out (owner, 13 Nov): "View Order as Guest" box level with "Log in". The 0.3.20 rule depended on
   a J2Commerce view name that this page does not use; this one finds the row holding the sign-in form (password field),
   whatever the view, and removes top margins on both columns and the first boxes nested inside them. */
.page-body :is(.row, .d-flex, .d-grid):has(> * input[type="password"]) { align-items: flex-start !important; }
.page-body :is(.row, .d-flex, .d-grid):has(> * input[type="password"]) > *,
.page-body :is(.row, .d-flex, .d-grid):has(> * input[type="password"]) > * > :first-child,
.page-body :is(.row, .d-flex, .d-grid):has(> * input[type="password"]) > * > :first-child > :first-child,
.page-body :is(.row, .d-flex, .d-grid):has(> * input[type="password"]) > * > :first-child > :first-child > :first-child { margin-top: 0 !important; }

/* 0.3.44 Information notices still blue on some J2Commerce pages (owner, 13 Nov: "No downloads available." on My Account >
   Downloads). The 0.3.23 rule only matched .alert-info / .alert-primary; J2Commerce also draws notices with Bootstrap's
   colour helpers. Any notice box that is not an error, warning or success message, and any blue helper box, is green. */
.page-body :is(.alert:not(.alert-danger):not(.alert-warning):not(.alert-success),
  [class*="bg-info"], [class*="bg-primary-subtle"], .text-bg-info, .text-bg-primary, [role="status"].alert) {
  --bs-alert-bg: #edf6ee; --bs-alert-color: #2f5f31; --bs-alert-border-color: #b7dcb9; --bs-alert-link-color: #2f5f31;
  background: #edf6ee !important; border: 1px solid #b7dcb9 !important; color: #2f5f31 !important; border-radius: 12px; }
.page-body :is(.alert:not(.alert-danger):not(.alert-warning):not(.alert-success), [class*="bg-info"], [class*="bg-primary-subtle"])
  :is([class*="text-info"], [class*="text-primary"], p, span, strong) { color: inherit !important; }

/* 0.3.45 Product pages, approved layout (owner, 13 Nov 2026; GCX page option A expanded). Descriptions from
   tools/make_product_pages.py (content/products/*.html). Full-width bands inside the Description tab, like the home page. */
.page-body :is(.tab-content, .tab-pane, .j2commerce, .j2commerce-product, .product-description):has(.agk-pdx) { overflow: visible !important; }
body:has(.agk-pdx) { overflow-x: clip; }
.agk-pdx { color: #2b2b2b; margin-top: 28px; }
/* the site removes top spacing from the first element of an article; sections keep theirs */
.page-body .agk-pdx > .sec:not(.strip) { padding-top: clamp(40px, 5.5vw, 72px); padding-bottom: clamp(40px, 5.5vw, 72px); }
.agk-pdx p { max-width: none; line-height: 1.65; }
.agk-pdx .sec { position: relative; left: 50%; width: 100vw; margin-left: -50vw; padding: clamp(40px, 5.5vw, 72px) 0; }
.agk-pdx .sec > .in { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; }
.agk-pdx .sec.dark { background: var(--dark); color: #e6e6e6; }
.agk-pdx .sec.grey { background: var(--glass); }
.agk-pdx .sec.dark h2, .agk-pdx .sec.dark h3 { color: #fff; }
.agk-pdx .sec.dark p { color: #cfcfcf; }
.agk-pdx h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 12px; }
.agk-pdx h3 { font-size: 1.12rem; margin: 0 0 6px; }
.agk-pdx .head p { font-size: 1.08rem; color: var(--steel); margin: 0 0 26px; }
.agk-pdx .sec.dark .head p { color: #c9c9c9; }
.agk-pdx .eyebrow { display: inline-block; font: 700 .8rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--leaf-text); margin: 0 0 10px; }
.agk-pdx .sec.dark .eyebrow { color: #9fd39f; }
.agk-pdx a.more { color: var(--leaf-text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.agk-pdx .sec.dark a.more { color: var(--accent-hi); }
.agk-pdx a.more:hover { text-decoration: underline; }

/* 1. Overview (dark): text and facts left, controller family right */
.agk-pdx .ov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
.agk-pdx .ov .lede { color: #d6d6d6; max-width: none; font-size: 1.15rem; }
.agk-pdx .ov img { width: 100%; height: auto; display: block; background: #fff; border-radius: 16px; padding: 16px; }
.agk-pdx .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #4a4a4a; }
.agk-pdx .facts b { display: block; font: 800 clamp(1.15rem, 1.7vw, 1.45rem) var(--font-head); color: #fff; white-space: nowrap; }
.agk-pdx .facts span { font-size: .86rem; color: #bdbdbd; line-height: 1.35; display: block; }
.agk-pdx .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.agk-pdx .sec.dark .btn-outline { border-color: #fff; color: #fff; } .agk-pdx .sec.dark .btn-outline:hover { background: #fff; color: var(--dark); }

/* 2. No-fees strip */
.agk-pdx .strip { background: #262626; color: #e8e8e8; padding: 18px 0; border-top: 1px solid #3a3a3a; }
.agk-pdx .strip .in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 18px; }
.agk-pdx .strip div div { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.agk-pdx .strip svg { flex: none; color: var(--accent); }

/* 3. Models (grey): comparison table */
.agk-pdx .models { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 #e3e6e3; }
.agk-pdx .models th, .agk-pdx .models td { padding: 14px 18px; text-align: left; border-bottom: 1px solid #eceeec; vertical-align: middle; }
.agk-pdx .models thead th { background: var(--dark); color: #fff; font: 700 1.1rem var(--font-head); }
.agk-pdx .models thead th.this { background: #2e7d32; }
.agk-pdx .models tbody th { color: var(--steel); font-weight: 600; width: 22%; }
.agk-pdx .models td.this { background: #f2f8f2; font-weight: 600; }
.agk-pdx .models img { height: 70px; width: auto; display: block; }
.agk-pdx .models .tag { display: inline-block; margin-left: 8px; font: 700 .7rem var(--font-body); background: #fff; color: #2e7d32; border-radius: 999px; padding: 3px 8px; vertical-align: middle; }
.agk-pdx .tbl-wrap { overflow-x: auto; border-radius: 16px; }

/* 4. GrowNET devices (white) */
.agk-pdx .net { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 28px; }
.agk-pdx .net img { width: 100%; height: auto; display: block; }
.agk-pdx .net .rule { background: #f2f5f2; border-radius: 14px; padding: 16px 18px; margin-top: 14px; }
.agk-pdx .net .rule b { color: var(--leaf-text); }
.agk-pdx .dev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.agk-pdx .dev { border: 1px solid #e3e6e3; border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.agk-pdx .dev .pic { height: 150px; display: grid; place-items: center; padding: 12px; border-bottom: 1px solid #eef0ee; }
.agk-pdx .dev .pic img { max-height: 126px; max-width: 100%; object-fit: contain; }
.agk-pdx .dev .txt { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.agk-pdx .dev .txt p { margin: 0; font-size: .95rem; color: #4a4f4b; flex: 1; }

/* 5. Remote & data (grey) */
.agk-pdx .rd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.agk-pdx .rd .card { background: #fff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.agk-pdx .rd .ic { width: 44px; height: 44px; border-radius: 12px; background: #eef6ee; color: var(--leaf-text); display: grid; place-items: center; }
.agk-pdx .rd .card p { margin: 0; color: #4a4f4b; flex: 1; }

/* 6. Control functions (white) */
.agk-pdx .fn-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 34px; align-items: start; }
.agk-pdx .fn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 22px; }
.agk-pdx .fn li { padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid #eef0ee; }
.agk-pdx .fn li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; height: 14px; border-radius: 4px; background: var(--leaf); }
.agk-pdx .callout { background: #f2f5f2; border-radius: 14px; padding: 16px 18px; margin-top: 16px; }
.agk-pdx .callout b { display: block; font: 800 1.8rem var(--font-head); color: var(--leaf-text); }

/* 7. Built in Brookfield (dark): quality text + factory photos */
.agk-pdx .q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.agk-pdx .q ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.agk-pdx .q li { padding-left: 28px; position: relative; color: #e6e6e6; }
.agk-pdx .q li::before { content: ""; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 4px var(--dark), 0 0 0 2px #fff; }
.agk-pdx .photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.agk-pdx .photos img { width: 100%; height: 170px; object-fit: cover; border-radius: 12px; display: block; }
.agk-pdx .photos img:first-child { grid-column: 1 / -1; height: 210px; }

/* 8. Documents and help (white) */
.agk-pdx .dh { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.agk-pdx .docs a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid #e3e6e3; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; background: #fff; }
.agk-pdx .docs a + a { margin-top: 10px; }
.agk-pdx .docs a:hover { border-color: var(--leaf); }
.agk-pdx .docs .t { background: var(--dark); color: #fff; border-radius: 6px; padding: 4px 8px; font-size: .72rem; font-weight: 800; }
.agk-pdx .docs .go { color: var(--leaf-text); font-size: .9rem; }
.agk-pdx .help { background: #eef4ee; border-radius: 18px; padding: 26px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.agk-pdx .help h3 { font-size: 1.4rem; margin: 0; } .agk-pdx .help p { margin: 0; }
.agk-pdx .help .btns { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .agk-pdx .ov, .agk-pdx .net, .agk-pdx .fn-wrap, .agk-pdx .q, .agk-pdx .dh { grid-template-columns: 1fr; }
  .agk-pdx .dev-grid, .agk-pdx .rd { grid-template-columns: 1fr 1fr; }
  .agk-pdx .strip .in { grid-template-columns: 1fr 1fr; }
  .agk-pdx .fn { grid-template-columns: 1fr 1fr; }
  .agk-pdx .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .agk-pdx .dev-grid, .agk-pdx .rd, .agk-pdx .fn { grid-template-columns: 1fr; }
  .agk-pdx .strip div div { font-size: .86rem; }
  .agk-pdx .models { font-size: .86rem; }
  .agk-pdx .models th, .agk-pdx .models td { padding: 9px 8px; }
  .agk-pdx .models thead th { font-size: .95rem; }
  .agk-pdx .models tbody th { width: auto; }
  .agk-pdx .models img { height: 40px; }
  .agk-pdx .models .tag { display: none; }
  .agk-pdx .photos img, .agk-pdx .photos img:first-child { height: 140px; }
}

/* 0.3.46 Product pages (owner's screenshots, 13 Nov): the sections had been pasted above the Read More break, so J2Commerce
   showed them in the summary column beside the gallery, where the full-width bands overlapped the gallery and made the
   page scroll sideways. The descriptions now have a short summary, then Read More, then the sections (Description tab).
   Guard: a wide band can never make the page scroll sideways (some browsers ignore overflow on body alone). */
html:has(.agk-pdx), body:has(.agk-pdx) { overflow-x: clip; }

/* 0.3.47 Product pages (owner, 13 Nov) */
/* Single "Description" tab hidden when it holds the product layout (other tabs, if a product has them, stay) */
.page-body :is(ul, ol, nav, div):is(.nav, .nav-tabs, [role="tablist"]):not(:has(li + li)):not(:has([role="tab"] ~ [role="tab"])):has(~ * .agk-pdx),
.page-body :is(ul, ol, nav, div):is(.nav, .nav-tabs, [role="tablist"]):not(:has(li + li)):not(:has([role="tab"] ~ [role="tab"])):has(~ .agk-pdx) { display: none !important; }
.page-body :is(.tab-content, .tab-pane):has(.agk-pdx) { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.agk-pdx { margin-top: clamp(32px, 4vw, 48px); }
/* Even top and bottom spacing in every section: headings start flush with the section padding */
.agk-pdx .sec h2, .agk-pdx .sec .in > :first-child, .agk-pdx .sec .in > div > :first-child { margin-top: 0 !important; }
.agk-pdx .head p { margin-bottom: 26px; }
.page-body .agk-pdx > .sec:not(.strip) { padding-top: clamp(44px, 5.5vw, 72px); padding-bottom: clamp(44px, 5.5vw, 72px); }
/* "Build the logic" text level with the first row of functions */
.agk-pdx .fn-wrap { align-items: start; }
.agk-pdx .fn li:nth-child(-n+3) { padding-top: 2px; }
/* Model photos stay thumbnails whatever the shop's own image rules say */
.agk-pdx .models img { height: 70px !important; width: auto !important; max-width: 110px !important; object-fit: contain; }
@media (max-width: 560px) { .agk-pdx .models img { height: 40px !important; max-width: 64px !important; } }
.agk-pdx .q { align-items: start; }

/* 0.3.48 Product pages, device version (THC first; owner 13 Nov): feature tiles, output cards, check list, picture right,
   applications, compatibility card. Same look as the controller pages. */
.agk-pdx .feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.agk-pdx .feat-grid div { display: flex; align-items: center; gap: 14px; background: #3a3a3a; border-radius: 14px; padding: 16px 18px; color: #fff; font-weight: 700; }
.agk-pdx .feat-grid .fi { width: 48px; height: 48px; flex: none; border-radius: 12px; background: #3d4a3d; color: #9fd39f; display: grid; place-items: center; }
.agk-pdx .outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.agk-pdx .outs .card { background: #fff; border-radius: 16px; padding: 22px; }
.agk-pdx .outs .card b { display: block; font: 800 2.2rem/1 var(--font-head); color: var(--leaf-text); margin-bottom: 10px; }
.agk-pdx .outs .card p { margin: 0; color: #4a4f4b; }
.agk-pdx .checks { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; gap: 10px; }
.agk-pdx .checks li { padding-left: 28px; position: relative; }
.agk-pdx .checks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 50%; background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.3 2.6 2.5L12 5.5' fill='none' stroke='%2310240f' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat; }
.agk-pdx .net.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.agk-pdx .net .pic { background: #fff; border-radius: 16px; padding: 18px; display: grid; place-items: center; min-height: 220px; }
.agk-pdx .net .pic img { max-height: 240px; width: auto; max-width: 100%; }
.agk-pdx .apps { display: flex; flex-wrap: wrap; gap: 10px; }
.agk-pdx .apps span { background: #eef4ee; color: #2f5f31; border-radius: 999px; padding: 10px 16px; font-weight: 700; }
.agk-pdx .compat { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; padding: 12px 16px; border: 1px solid #e3e6e3; border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; font-weight: 700; }
.agk-pdx .compat:hover { border-color: var(--leaf); }
.agk-pdx .compat img { width: 96px !important; height: auto !important; }
.agk-pdx .compat small { display: block; color: var(--steel); font-weight: 600; font-size: .8rem; }
@media (max-width: 900px) { .agk-pdx .outs { grid-template-columns: 1fr 1fr; } .agk-pdx .net.rev { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .agk-pdx .outs, .agk-pdx .feat-grid { grid-template-columns: 1fr; } }

/* 0.3.49 Product pages, BDX (owner 13 Nov): five-across cards, spec tiles, two-column check list, two picture cards,
   video pair (approved youtube-nocookie player), small note text. */
.agk-pdx .outs.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.agk-pdx .outs .card.spec b { font-size: 1.25rem; margin: 6px 0 0; }
.agk-pdx .checks.cols { grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.agk-pdx .note { background: #f2f5f2; border-radius: 12px; padding: 12px 14px; font-size: .95rem; }
.agk-pdx .sec.grey .note { background: #fff; }
.agk-pdx .two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.agk-pdx .two-cards .card { background: #fff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.agk-pdx .two-cards .pic { display: grid; place-items: center; min-height: 200px; margin-bottom: 6px; }
.agk-pdx .two-cards .pic img { max-height: 220px; width: auto !important; max-width: 100%; }
.agk-pdx .two-cards p { margin: 0; color: #4a4f4b; flex: 1; }
.agk-pdx .vids { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.agk-pdx .vid { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #111; }
.agk-pdx .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 1100px) { .agk-pdx .outs.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .agk-pdx .two-cards, .agk-pdx .vids, .agk-pdx .checks.cols { grid-template-columns: 1fr; } .agk-pdx .outs.five { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .agk-pdx .outs.five { grid-template-columns: 1fr; } }
.agk-pdx .net { align-items: start; }
.agk-pdx .sec:not(.grey):not(.dark) .outs .card { background: #f2f5f2; }

/* 0.3.50 BDX page (owner 13 Nov): text under the included-items tiles (no box); "Fill, mix and feed" picture capped so
   the section is no taller than its text needs. */
.agk-pdx .after { margin: 20px 0 0; color: #4a4f4b; }
.agk-pdx .net.compact { align-items: start; }
.agk-pdx .net.compact img { max-height: 340px; width: auto !important; max-width: 100%; justify-self: center; object-fit: contain; }

/* 0.3.51 Product strip with four items (BDX, owner 13 Nov): four equal columns instead of five with a gap */
.agk-pdx .strip .in:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .agk-pdx .strip .in:has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr; } }

/* 0.3.52 Mini dosers (MDX, MDXP, MPX, MPXP; owner 13 Nov): two-column paragraphs under a heading */
.agk-pdx .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 34px; }
.agk-pdx .cols2 p { margin: 0 0 10px; }
@media (max-width: 900px) { .agk-pdx .cols2 { grid-template-columns: 1fr; } }

/* 0.3.53 BDX "Why batch dosing?" (owner 13 Nov): text left, safety list right, system picture below at full width */
.agk-pdx .batch-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 34px; align-items: start; }
.agk-pdx .batch-top .checks { margin-top: 58px; }
.agk-pdx .wide-pic { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 30px auto 0; }
@media (max-width: 900px) { .agk-pdx .batch-top { grid-template-columns: 1fr; gap: 0; } .agk-pdx .batch-top .checks { margin-top: 14px; } }

/* 0.3.54 Climate sensor pages (owner 13 Nov): a row of exactly three cards spreads across the width */
.agk-pdx .outs:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .agk-pdx .outs:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; } }

/* 0.3.55 SXC "Improved Enclosure" (owner 13 Nov): picture without its box and capped lower, so the section is no
   taller than the text needs; headings stay at the usual top spacing. */
.agk-pdx .net.tight { align-items: start; }
.agk-pdx .net.tight .pic { min-height: 0; padding: 0; background: none; }
.agk-pdx .net.tight .pic img { max-height: 220px; }

/* 0.3.56 Accessory pages (SX-CO2, SXR; owner 13 Nov): two short topics side by side, each with its own heading */
.agk-pdx .cols2.secs { gap: 6px 48px; }
.agk-pdx .cols2.secs h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.agk-pdx .cols2.secs > div > p { margin: 0; }

/* 0.3.57 Water and substrate sensor pages (owner 13 Nov): a row of exactly two cards splits the width */
.agk-pdx .outs:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .agk-pdx .outs:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; } }

/* 0.3.59 Product overviews aligned to the top, so the heading keeps the usual top spacing however short the text is
   beside the feature tiles or picture (LX1; owner's even-margins rule). */
.agk-pdx .ov { align-items: start; }

/* 0.3.60 Product picture cards marked as the current page (BV ball valve sizes; owner 13 Nov) */
.agk-pdx .dev.is-this { border-color: var(--leaf); box-shadow: 0 0 0 2px rgba(102, 187, 106, .35); }
.agk-pdx .dev .this-page { font-weight: 700; color: var(--steel); }

/* 0.3.61 A row with a single card spans half the width instead of a quarter (fittings, LCA; owner 13 Nov) */
.agk-pdx .outs:has(> :only-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 560px) { .agk-pdx .outs:has(> :only-child) { grid-template-columns: 1fr; } }

/* 0.3.62 Help card on its own (product pages without documents; owner 13 Nov) */
.agk-pdx .help.solo { max-width: 720px; }