/* Madarek Gulf — the fastener family page (requirement builder + workbench). Uses the shared design tokens. */

.fam { padding-block-end: clamp(60px, 8vh, 110px); }
.fam-crumb { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-3); margin-block-end: 22px; flex-wrap: wrap; }
.fam-crumb a { color: var(--text-2); transition: color .2s ease; }
.fam-crumb a:hover { color: var(--accent); }
.fam-crumb b { color: var(--text); font-weight: 500; }
.fam-crumb span { opacity: 0.5; }

.fam-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: clamp(28px, 4vw, 64px); align-items: start; }

/* ---- heading ---- */
.fam-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.fam-eyebrow > span { color: var(--accent); }
.fam-eyebrow i { font-style: normal; font-size: 0.66rem; letter-spacing: 0.1em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); }
.fam-eyebrow i.tag-core { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.fam-eyebrow i.tag-req { color: var(--text-2); }
.fam-h1 { font-family: var(--sans); font-weight: 700; font-stretch: 108%; letter-spacing: -0.02em; font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.03; margin: 0.35em 0 0.3em; }
.fam-lead { max-width: 54ch; font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.6; color: var(--text-2); }
.fam-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 22px; }
.fam-badge { font-size: 0.84rem; color: var(--text-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; background: rgba(255, 255, 255, 0.015); }
.fam-badge b { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-block-end: 4px; }

/* ============================================================ flagship: constant table + swappable product hero */
.fw { display: block; }
.fw-stage { --hero-h: clamp(560px, 78vh, 760px); position: relative; display: flex; background: #080b0c; }
.fw-bg { position: absolute; top: 0; left: 0; right: 0; height: var(--hero-h); background-size: 82% auto; background-position: center 46%; background-repeat: no-repeat; background-color: #080b0c; transition: background-image .3s ease; }

/* fade the hero VISUAL (bolt scene, callouts, corner drawing) in together with the content — opacity only, no slide */
.rv-f { opacity: 0; transition: opacity 1s var(--ease) var(--d, 0s); }
.rv-f.in { opacity: 1; }
.fw-bg.rv-f { transition: opacity 1s var(--ease) var(--d, 0s), background-image .3s ease; }
@media (prefers-reduced-motion: reduce) { .rv-f { opacity: 1; transition: none; } }
.fw-grad { position: absolute; top: 0; left: 0; right: 0; height: var(--hero-h); pointer-events: none; background:
    linear-gradient(90deg, rgba(6,8,9,0.94) 0%, rgba(6,8,9,0.72) 16%, rgba(6,8,9,0.18) 34%, rgba(6,8,9,0.06) 50%, rgba(6,8,9,0.42) 68%, rgba(6,8,9,0.9) 84%),
    linear-gradient(180deg, rgba(6,8,9,0.5) 0%, transparent 26%, transparent 66%, rgba(8,11,12,0.32) 86%, #080b0c 100%); }

/* three-column working surface: tree | product + callouts | configurator */
.fw-shell { position: relative; z-index: 3; flex: 1; min-height: 0; display: grid;
  grid-template-columns: clamp(196px, 17vw, 244px) minmax(0, 1fr) clamp(344px, 27vw, 396px);
  gap: clamp(18px, 2.4vw, 40px); align-items: start;
  padding: calc(clamp(78px, 8vh, 100px) + 20px) var(--gutter) clamp(40px, 6vh, 84px); }

/* left: fastener tree */
.fw-tree { position: sticky; top: clamp(90px, 8.5vh, 112px); z-index: 4; align-self: start;
  max-height: calc(100vh - clamp(90px, 8.5vh, 112px) - 24px); overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  padding: 16px 14px; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
  background: rgba(11,14,15,0.9); }
.fw-tree::-webkit-scrollbar { width: 7px; }
.fw-tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; }
.fw-tree-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--text-2); transition: color .18s ease; }
.fw-tree-back:hover { color: var(--accent); }
.fw-tree-h { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin: 16px 0 6px; padding-block-end: 8px; border-block-end: 1px solid var(--line); }
.fw-tree-cat { border-block-end: 1px solid rgba(255,255,255,0.05); }
.fw-tree-cat-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: start;
  font-family: var(--sans); font-weight: 500; font-size: 0.9rem; color: var(--text); background: none; border: 0; cursor: pointer; padding: 11px 4px; }
.fw-tree-cat-btn:hover { color: var(--accent); }
.fw-tree-chev { flex: none; color: var(--text-3); transition: transform .2s ease; }
.fw-tree-cat.is-open > .fw-tree-cat-btn .fw-tree-chev { transform: rotate(180deg); }
.fw-tree-fams { display: none; padding: 0 0 8px 6px; }
.fw-tree-cat.is-open > .fw-tree-fams { display: block; }
.fw-tree-fam { display: block; font-size: 0.84rem; color: var(--text-2); padding: 6px 10px; border-radius: 8px; border-inline-start: 2px solid transparent; transition: color .16s ease, background-color .16s ease, border-color .16s ease; }
.fw-tree-fam:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.fw-tree-fam.is-active { color: var(--accent); border-inline-start-color: var(--accent); background: var(--accent-soft); font-weight: 500; }

/* middle: copy + product (in the bg) */
.fw-mid { position: relative; z-index: 3; align-self: start; min-width: 0; }
/* hero copy (title/blurb/variants) sits over the scene and fills the hero zone; specs + cards flow below it */
.fw-hero-copy { max-width: 480px; min-height: calc(var(--hero-h) - clamp(132px, 11vh, 152px)); }
.fw-mid-below { margin-block-start: clamp(6px, 1.5vh, 20px); }
.fw .fam-crumb { margin-block-end: 14px; }
.fw .fam-eyebrow { color: var(--text-2); }
.fw .fam-h1 { font-size: clamp(2rem, 3.6vw, 3rem); margin: 0.28em 0 0.32em; }
.fw .fam-lead { max-width: 42ch; color: var(--text-2); text-shadow: 0 1px 20px rgba(0,0,0,0.7); }

/* corner technical drawing — top-right of the stage, just left of the configurator */
.fw-diagram { position: absolute; z-index: 3; top: clamp(86px, 8.8vh, 114px); right: calc(clamp(344px, 27vw, 396px) + var(--gutter) + 24px);
  width: clamp(300px, 31vw, 452px); height: auto; opacity: 1; pointer-events: none; font-family: var(--mono);
  filter: drop-shadow(0 3px 14px rgba(0,0,0,0.75)); }
/* partial-thread ortho is taller (2.25:1 vs 3.3:1) — narrow it so its rendered height ≈ the full ortho's */
.fw-diagram.is-partial { width: clamp(224px, 22vw, 318px); }
/* J-anchor / foundation bolt ortho is extremely tall & skinny (aspect ~0.51) — render it narrower on
   desktop so its height stays in range; mobile keeps the standard stacked width. */
@media (min-width: 1101px) { .fw-diagram.is-jbolt { width: clamp(180px, 14vw, 205px); } }
/* straight anchor rod: realistic rod image + crisp SVG labels (viewBox 200x460). Small, but labels stay readable. */
@media (min-width: 1101px) { .fw-diagram.is-vrod { width: clamp(145px, 11.5vw, 168px); } }
/* narrow corner drawings sit snug to the config panel — give them a little more breathing room (desktop only) */
@media (min-width: 1101px) { .fw-diagram.is-partial, .fw-diagram.is-jbolt, .fw-diagram.is-vrod { transform: translateX(-22px); } }
/* Heavy hex hero = two big bolts that reach high into the top-right; shrink the product a little and shift it
   left so the corner drawing keeps its readable size without colliding. (heavy hex page only) */
.fw-bg.fw-bg-compact { background-size: 70% auto; background-position: 40% 46%; }
/* carriage hero nudged a little to the left (product only, no resize) */
.fw-bg.fw-bg-carriage { background-position: 44% 46%; }
/* plough hero moved left + down so it clears the corner drawing (product only, no resize) */
.fw-bg.fw-bg-plough { background-position: 26% 44%; }
/* shoulder hero nudged left so it clears the corner drawing (product only, no resize) */
.fw-bg.fw-bg-shoulder { background-position: 30% 46%; }
/* step/elevator hero nudged left so it clears the corner drawing (product only, no resize) */
.fw-bg.fw-bg-step { background-position: 21% 50%; }
/* u-bolt hero — bumped up a little (desktop only; mobile keeps full-bleed cover) at Waqas's request */
@media (min-width: 1101px) { .fw-bg.fw-bg-ubolt { background-size: 90% auto; } }
/* foundation (J-anchor) hero — bumped up a little (desktop only) at Waqas's request */
@media (min-width: 1101px) { .fw-bg.fw-bg-jbolt { background-size: 90% auto; } }

/* isometric 3D bolts — small decorative accent in the gap BETWEEN the fastener tree and the product.
   left = start of the middle column (gutter + tree width + grid gap), so it never overlaps the tree. */
.fw-iso { position: absolute; z-index: 3;
  left: calc(var(--gutter) + clamp(196px, 17vw, 244px) + clamp(18px, 2.4vw, 40px));
  top: calc(var(--hero-h) - clamp(30px, 5vh, 66px) - clamp(150px, 12.5vw, 200px));
  width: clamp(146px, 11.5vw, 198px);
  pointer-events: none; opacity: 0.94; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.6)); }
.fw-iso img { display: block; width: 100%; height: auto; }

/* leader-line callouts: dot ON the part, thin line OUT, label in the clear */
.fw-callouts { position: absolute; top: 0; left: 0; right: 0; height: var(--hero-h); z-index: 2; pointer-events: none; }
.fw-lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fw-lead polyline { fill: none; stroke: color-mix(in srgb, var(--accent) 68%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fw-dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 1.5px solid var(--accent); background: rgba(61,224,122,0.25);
  box-shadow: 0 0 0 4px rgba(61,224,122,0.08), 0 0 10px rgba(61,224,122,0.4); }
.fw-lbl2 { position: absolute; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); text-shadow: 0 1px 12px rgba(0,0,0,0.9); }
.fw-lbl2 b { display: block; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; color: #fff; }
.fw-lbl2 span { display: block; font-size: 0.72rem; color: var(--text-2); margin-block-start: 1px; }
.fw-lbl2.is-up { transform: translate(-50%, -100%); }
.fw-lbl2.is-up b { margin-block-start: 0; }
/* side-anchored labels — sit a short fixed distance from the dot on one side, so the leader line stays short */
.fw-lbl2.sd-d { transform: translate(-50%, 0); text-align: center; }
.fw-lbl2.sd-u { transform: translate(-50%, -100%); text-align: center; }
.fw-lbl2.sd-u b { margin-block-start: 0; }
.fw-lbl2.sd-l { transform: translate(-100%, -50%); text-align: right; }
.fw-lbl2.sd-r { transform: translate(0, -50%); text-align: left; }

/* dimension lines on the photo: a straight green line with perpendicular end ticks + a small label */
.fw-dim { position: absolute; background: color-mix(in srgb, var(--accent) 60%, transparent); }
.fw-dim-v { width: 1.5px; transform: translateX(-50%); }
.fw-dim-v::before, .fw-dim-v::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 11px; height: 1.5px; background: inherit; }
.fw-dim-v::before { top: 0; } .fw-dim-v::after { bottom: 0; }
.fw-dim-h { height: 1.5px; transform: translateY(-50%); }
.fw-dim-h::before, .fw-dim-h::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); height: 11px; width: 1.5px; background: inherit; }
.fw-dim-h::before { left: 0; } .fw-dim-h::after { right: 0; }
.fw-dim-lbl { position: absolute; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--accent); text-shadow: 0 1px 10px rgba(0,0,0,0.9); }

/* product-type toggle — sits in the hero under the copy, in the clear space above the bolt */
.fw-variants { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-start: clamp(18px, 3vh, 26px); }
.fw-variants:empty { display: none; }                     /* no toggle / no note → no empty gap or stray label */
.fw-var-k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-inline-end: 4px; }
.fw-var { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--text-2);
  background: rgba(10,13,14,0.82); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 15px; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
.fw-var:hover { color: var(--text); border-color: var(--text-3); }
.fw-var.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 500; }

/* families without a product photo yet: a quiet "coming" note (the builder still works fully) */
.fw-soon { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--text-3);
  background: rgba(10,13,14,0.78); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; max-width: 100%; }
.fw-soon-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 8px rgba(61,224,122,0.55); }

/* right: configurator, scrolls inside the hero */
.fw-config { position: sticky; top: clamp(90px, 8.5vh, 112px); z-index: 4; align-self: start;
  max-height: calc(100vh - clamp(90px, 8.5vh, 112px) - 24px); display: flex; }
.fw-config .cfg { flex: 1; max-height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; background: rgba(12,15,16,0.94); border-color: rgba(255,255,255,0.12); box-shadow: 0 14px 34px -26px rgba(0,0,0,0.7); }
.fw-config .cfg::-webkit-scrollbar { width: 8px; }
.fw-config .cfg::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; }
.fw-config .cfg::-webkit-scrollbar-track { background: transparent; }

/* below the hero: specs + related on solid ground */
.fw-below { background: var(--bg); padding-block: clamp(40px, 6vh, 84px); }
.fw-below .fam-sec-h:first-child { margin-block-start: 0; }

@media (max-width: 1100px) {
  /* stacked: tree, then scene, then copy, then the configurator — all in normal flow */
  .fw-stage { display: block; height: auto; overflow: visible; }
  .fw-bg { position: relative; inset: auto; width: 100%; height: 64vw; max-height: 460px; background-size: cover; background-position: center 46%; }
  .fw-grad, .fw-callouts { display: none; }
  .fw-diagram { position: static; display: block; width: min(88vw, 360px); margin: 18px auto 0; opacity: 1; }
  .fw-iso { position: static; display: block; width: min(74vw, 300px); margin: 14px auto 0; }
  /* stacked order: tree, title/blurb, configurator, then specs + cards (display:contents lets us reorder across .fw-mid) */
  .fw-shell { display: flex; flex-direction: column; padding: clamp(24px, 5vw, 38px) var(--gutter) 6px; }
  .fw-mid { display: contents; }
  .fw-tree { position: static; order: 1; max-height: none; margin-block-end: 22px; }
  .fw-hero-copy { order: 2; min-height: 0; max-width: none; }
  .fw-config { position: static; order: 3; display: block; align-self: auto; min-height: 0; max-height: none; margin-block-start: 24px; }
  .fw-mid-below { order: 4; margin-block-start: 28px; }
  .fw-config .cfg { max-height: none; overflow: visible; background: rgba(255,255,255,0.02); backdrop-filter: none; box-shadow: none; }
}

/* Short desktop screens (e.g. a 13" MacBook at 1440x900): the hero is sized with
   vh units, so on a short viewport it collapses and the copy, the product render
   and the ortho diagram overlap. Pin the hero to its full sizing on short screens
   so the three-column workbench keeps its spacing instead of cramming. */
@media (min-width: 1101px) and (max-height: 940px) {
  .fw-stage { --hero-h: 760px; }
  .fw-tree, .fw-config { top: 112px; }
  .fw-diagram { top: 114px; }
}

/* ---- workbench: static photoreal render ---- */
.wbimg { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #06080a; }
.wbimg-stage { position: relative; overflow: hidden; }
.wbimg-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 110px 12px rgba(0,0,0,0.5); }
.wbimg-img { display: block; width: 100%; height: auto; }
.wbimg-tag { position: absolute; top: 14px; left: 16px; z-index: 2; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.wbimg-cap { padding: 12px 16px; border-block-start: 1px solid var(--line); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; line-height: 1.55; color: var(--text-3); }

/* ---- workbench ---- */
.fam-work { margin-block-start: clamp(26px, 3.5vh, 44px); }
.wb { position: relative; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(61, 224, 122, 0.06), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(120, 150, 170, 0.10), transparent 55%),
    #07090a; }
.wb-tag { position: absolute; top: 14px; left: 16px; z-index: 3; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.wb-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 320px; }
.wb-stage canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.wb-fallback { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; }
.wb-fk { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; color: var(--text); }
.wb-fs { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-3); }
.wb-hint { padding: 12px 16px; border-block-start: 1px solid var(--line); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--text-3); text-align: center; }
.wb.is-live .wb-hint { color: var(--text-2); }

/* HTML dimension / part callouts projected over the 3D */
.wb-label { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 4;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--text); white-space: nowrap;
  padding: 3px 8px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: rgba(7, 9, 10, 0.72); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
.wb-label b { color: var(--accent); font-weight: 500; }
.wb.is-exploded .wb-label { opacity: 1; }

/* non-flagship families: a clean info panel instead of the 3D */
.wb--flat { display: grid; }
.wb-flat-in { padding: clamp(28px, 5vw, 52px); }
.wb-flat-k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.wb-flat-in h3 { font-family: var(--sans); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.01em; margin: 0.4em 0 0.3em; }
.wb-flat-v { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); letter-spacing: 0.02em; }
.wb-flat-note { margin-block-start: 16px; max-width: 46ch; font-size: 0.92rem; color: var(--text-2); line-height: 1.6; }

/* ---- technical reference ---- */
.fam-sec-h { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin: clamp(34px, 4vh, 52px) 0 16px; padding-block-end: 12px; border-block-end: 1px solid var(--line); }
.fam-ref { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 34px; }
.fam-ref dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-block-end: 6px; }
.fam-ref dd { margin: 0; font-size: 0.96rem; color: var(--text); line-height: 1.5; }
.fam-ref-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(24px, 3vw, 56px); align-items: start; margin-block-start: 22px; }
.fam-ref-note { margin: 0; font-size: 0.85rem; color: var(--text-3); line-height: 1.6; max-width: 56ch; }

/* companion / "Used with" card — the nut + washers a bolt pairs with */
.fam-mates { }
.fam-mates-h { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; }
.fam-mates-h svg { color: var(--accent); }
.fam-mates-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fam-mate { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 11px; padding: 9px 15px 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, 0.015); transition: border-color .2s ease, background .2s ease; }
.fam-mate:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.045); }
.fam-mate-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.fam-mate-ic .dw-mate { width: 34px; height: 34px; overflow: visible; fill: none; stroke: rgba(208,219,213,0.6); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke .25s ease; }
.fam-mate-ic .dw-mate .thin { stroke: rgba(208,219,213,0.3); stroke-width: 1.1; }
.fam-mate:hover .dw-mate { stroke: var(--accent); }
.fam-mate-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fam-mate-n { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--text); letter-spacing: -0.005em; }
.fam-mate-s { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.03em; color: var(--text-3); white-space: nowrap; }
@media (max-width: 760px) { .fam-ref-foot { grid-template-columns: 1fr; gap: 26px; } }

/* ---- the configurator ---- */
.fam-config { position: sticky; top: 92px; }
.cfg { border: 1px solid var(--line); border-radius: 15px; padding: clamp(15px, 1.5vw, 21px); background: rgba(255, 255, 255, 0.018); }
.cfg-head h2 { font-family: var(--sans); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 8px; }
.cfg-head h2::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.cfg-head p { font-size: 0.78rem; color: var(--text-3); margin: 5px 0 0; line-height: 1.45; }
.cfg-field { margin-block-start: 13px; }
.cfg-label { font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin: 0 0 7px; }
.cfg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cfg-chip { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.01em; color: var(--text-2); background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 10px; cursor: pointer; transition: color .16s ease, border-color .16s ease, background-color .16s ease; }
.cfg-chip:hover { color: var(--text); border-color: var(--text-3); }
.cfg-chip.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 500; }
.cfg-other { border-style: dashed; }
.cfg-otherin, .cfg-in { width: 100%; margin-block-start: 7px; font-family: var(--sans); font-size: 0.88rem; color: var(--text); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 11px; transition: border-color .2s ease; }
.cfg-otherin:focus, .cfg-in:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.cfg-otherin { margin-block-start: 7px; }
.cfg-qty-row { display: grid; grid-template-columns: 1fr 92px; gap: 7px; }
.cfg-qty-row .cfg-in { margin-block-start: 0; }
.cfg-unit { appearance: none; -webkit-appearance: none; cursor: pointer; }
.cfg-summary { margin-block-start: 16px; padding: 12px 14px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); background: var(--accent-soft); }
.cfg-sum-k { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 5px; }
.cfg-sum-v { margin: 0; font-size: 0.92rem; color: var(--text); line-height: 1.45; font-weight: 500; }
.cfg-caveat { font-size: 0.72rem; color: var(--text-3); line-height: 1.5; margin-block: 12px; }
.cfg-hint { font-size: 0.76rem; color: var(--text-3); font-style: italic; margin: 13px 0 0; }
.cfg-note { font-family: var(--mono); font-size: 0.68rem; line-height: 1.5; color: var(--accent); margin: 9px 0 0; padding-inline-start: 10px; border-inline-start: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.cfg-add { width: 100%; justify-content: center; }
.cfg-add.is-added { background: color-mix(in srgb, var(--accent) 80%, #fff); }
.cfg-view { display: block; text-align: center; margin-block-start: 12px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--text-2); }
.cfg-view:hover { color: var(--accent); }

/* ---- related families ---- */
/* related families: compact standard-led chips (name + its primary standard) */
.fam-rel-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.fam-chip { display: inline-flex; align-items: center; gap: 11px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.015); transition: border-color .2s ease, background .2s ease, transform .3s var(--ease); }
.fam-chip:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.045); transform: translateY(-2px); }
.fam-chip-n { font-family: var(--sans); font-size: 0.96rem; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.fam-chip-s { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--accent); white-space: nowrap;
  border-inline-start: 1px solid var(--line-strong); padding-inline-start: 11px; }
.fam-chip.is-req .fam-chip-s { color: var(--text-3); }       /* on-request reads quiet, not as an accent */
.fam-rel-all { display: inline-block; margin-block-start: 22px; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.03em; color: var(--text-2); transition: color .2s ease; }
.fam-rel-all:hover { color: var(--accent); }

@media (max-width: 980px) {
  .fam-grid { grid-template-columns: 1fr; }
  .fam-config { position: static; margin-block-start: 8px; }
}