/* =============================================================
   Vending on Track — Distributor product selector
   Page-scoped styles for layouts/_default/wizard.html.
   Extends the "Signal" design system in css/style.css — it only
   uses tokens defined there (--ink, --signal, --steel, --paper…).
   ============================================================= */

/* ---------- Page header ---------- */
.dist-head { padding: 3.2rem 0 2rem; }
.dist-head .breadcrumbs { margin-bottom: 1.6rem; }
.dist-lead {
    max-width: 720px;
    margin-top: 1rem;
    font-size: 1.12rem;
    line-height: 1.62;
    color: var(--ink-soft);
}
.dist-head-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.dist-head-actions .btn { padding: .72rem 1.4rem; font-size: 15px; }

.dist-intro { max-width: 760px; margin: 0 0 2.6rem; }
.dist-intro > :first-child { margin-top: 0; }

.dist-callout {
    background: var(--signal-tint);
    border: 1px solid rgba(219, 64, 31, .28);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 2.5rem;
    font-size: 16px;
    color: var(--ink-soft);
}
.dist-callout strong { color: var(--ink); }

/* =============================================================
   WIZARD
   ============================================================= */
.wiz {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 4rem;
}

/* ---------- Stepper rail ---------- */
.wiz-rail {
    position: relative;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--line);
    padding: 1.15rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}
.wiz-rail::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--grid);
    background-size: 26px 26px;
    pointer-events: none;
}
.wiz-steps {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    list-style: none;
    margin: 0; padding: 0;
    flex: 1 1 auto;
}
.wiz-step {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding: .3rem .1rem;
    white-space: nowrap;
}
.wiz-step .dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--card);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--ink-faint);
    flex: 0 0 auto;
}
.wiz-step.is-done { color: var(--steel); }
.wiz-step.is-done .dot { border-color: var(--steel); background: var(--steel); color: #fff; }
.wiz-step.is-current { color: var(--signal-deep); }
.wiz-step.is-current .dot { border-color: var(--signal); background: var(--signal); color: #fff; }
.wiz-step .sep { color: var(--line); margin: 0 .15rem; }
.wiz-count {
    position: relative;
    font-family: var(--font-mono);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint);
}

/* ---------- Panel ---------- */
.wiz-panel { padding: 2.4rem 2rem 2rem; }
.wiz-q {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.6vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin-bottom: .6rem;
}
.wiz-help {
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.6;
    max-width: 68ch;
    margin-bottom: 1.7rem;
}
.wiz-mode {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: .22rem .7rem;
    margin-bottom: 1rem;
}

/* ---------- Option cards ---------- */
.wiz-opts { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.wiz-opts.is-list { grid-template-columns: 1fr; }

.wiz-opt {
    position: relative;
    display: block;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.2rem 1.1rem 3rem;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wiz-opt:hover { border-color: var(--steel); background: var(--card); }
.wiz-opt:focus-within { outline: 2px solid var(--steel); outline-offset: 2px; }
.wiz-opt-main { display: block; cursor: pointer; }
/* Only the choice control is hidden — the quantity and free-text inputs
   in .wiz-sub are real, visible controls. */
.wiz-opt-main > input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.wiz-opt .mark {
    position: absolute;
    left: 1.1rem; top: 1.25rem;
    width: 19px; height: 19px;
    border: 1.5px solid var(--ink-faint);
    background: var(--card);
    transition: all .18s ease;
}
.wiz-opt[data-select="one"] .mark { border-radius: 50%; }
.wiz-opt[data-select="many"] .mark { border-radius: 5px; }
.wiz-opt .mark::after {
    content: "";
    position: absolute;
    opacity: 0;
    transition: opacity .15s ease;
}
.wiz-opt[data-select="one"] .mark::after {
    inset: 3px; border-radius: 50%; background: #fff;
}
.wiz-opt[data-select="many"] .mark::after {
    left: 5px; top: 1px; width: 6px; height: 11px;
    border: solid #fff; border-width: 0 2.2px 2.2px 0;
    transform: rotate(42deg);
}
.wiz-opt.is-on { border-color: var(--signal); background: var(--card); box-shadow: 0 10px 26px -18px rgba(219,64,31,.9); }
.wiz-opt.is-on .mark { border-color: var(--signal); background: var(--signal); }
.wiz-opt.is-on .mark::after { opacity: 1; }

.wiz-opt-code {
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--steel);
    display: block; margin-bottom: .3rem;
}
.wiz-opt h3 {
    font-size: 1.06rem;
    letter-spacing: -.015em;
    margin-bottom: .35rem;
}
.wiz-opt p { font-size: 14.8px; line-height: 1.55; color: var(--ink-soft); }

.wiz-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.pill {
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    padding: .26rem .6rem;
    border-radius: 100px;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    background: var(--card);
    white-space: nowrap;
}
.pill-addon { border-color: rgba(29,78,107,.35); color: var(--steel); background: rgba(29,78,107,.07); }
.pill-req   { border-color: rgba(219,64,31,.38); color: var(--signal-deep); background: var(--signal-tint); }
.pill-note  { border-color: rgba(224,162,58,.5); color: #8a6008; background: rgba(224,162,58,.14); }
.pill-when  { border-color: var(--line); color: var(--ink-faint); }

/* Quantity + free-text sub-controls */
.wiz-sub {
    display: none;
    align-items: center;
    gap: .7rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--line);
    flex-wrap: wrap;
}
.wiz-opt.is-on .wiz-sub { display: flex; }
.wiz-sub label {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint);
}
.wiz-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 100px; background: var(--card); overflow: hidden; }
.wiz-qty button {
    width: 32px; height: 32px;
    border: 0; background: none; cursor: pointer;
    font-size: 17px; line-height: 1; color: var(--ink-soft);
    transition: background .15s ease, color .15s ease;
}
.wiz-qty button:hover { background: var(--signal); color: #fff; }
.wiz-qty input {
    width: 46px; height: 32px;
    border: 0; background: none; text-align: center;
    font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink);
    -moz-appearance: textfield;
}
.wiz-qty input::-webkit-outer-spin-button,
.wiz-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wiz-sub input[type="text"] {
    flex: 1 1 200px;
    min-width: 160px;
    padding: .5rem .8rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
.wiz-sub input[type="text"]:focus { outline: none; border-color: var(--steel); }

/* ---------- Row builder (locker slaves) ---------- */
.wiz-rows { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .9rem; }
.wiz-row {
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-left: 3px solid var(--steel);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem 1.15rem;
}
.wiz-row-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: .85rem;
}
.wiz-row-n {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--steel);
}
.wiz-row-del {
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint);
    text-decoration: underline; text-underline-offset: 3px;
}
.wiz-row-del:hover { color: var(--signal); }

.wiz-row-fields { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.wiz-rf.is-wide { grid-column: span 2; }
.wiz-rf.is-qty  { max-width: 110px; }
.wiz-rf label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: .35rem;
}
.wiz-rf input {
    width: 100%;
    padding: .6rem .8rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    font-family: var(--font-body); font-size: 15.5px; color: var(--ink);
    transition: border-color .18s ease;
}
.wiz-rf input:focus { outline: none; border-color: var(--steel); }
.wiz-rf input[type="number"] { font-family: var(--font-mono); font-weight: 600; }

.wiz-row-add {
    display: inline-flex; align-items: center; gap: .4rem;
    background: none;
    border: 1.5px dashed var(--line);
    border-radius: 100px;
    padding: .6rem 1.3rem;
    cursor: pointer;
    font-family: var(--font-body); font-weight: 600; font-size: 15px;
    color: var(--steel);
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.wiz-row-add:hover { border-color: var(--signal); border-style: solid; background: var(--signal-tint); color: var(--signal-deep); }

.wiz-rows-note {
    margin-top: 1.2rem;
    padding: .8rem 1rem;
    border-left: 3px solid var(--amber);
    background: rgba(224,162,58,.1);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 14.8px;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* ---------- Details form ---------- */
.wiz-fields { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wiz-field.is-wide { grid-column: 1 / -1; }
.wiz-field label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: .45rem;
}
.wiz-field input,
.wiz-field textarea {
    width: 100%;
    padding: .75rem .95rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    font-family: var(--font-body); font-size: 16px; color: var(--ink);
    transition: border-color .18s ease, background .18s ease;
}
.wiz-field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.wiz-field input:focus,
.wiz-field textarea:focus { outline: none; border-color: var(--steel); background: var(--card); }

/* ---------- Footer nav ---------- */
.wiz-nav {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    padding: 1.3rem 2rem;
    border-top: 1px solid var(--line);
    background: var(--paper-deep);
}
.wiz-nav .spacer { flex: 1 1 auto; }
.wiz-nav .btn { padding: .75rem 1.6rem; font-size: 15px; }
.wiz-nav .btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.wiz-reset {
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint);
    text-decoration: underline; text-underline-offset: 3px;
}
.wiz-reset:hover { color: var(--signal); }

.wiz-error {
    display: none;
    font-size: 14.5px;
    color: var(--signal-deep);
    background: var(--signal-tint);
    border: 1px solid rgba(219,64,31,.3);
    border-radius: var(--radius-sm);
    padding: .6rem .9rem;
    margin-top: 1.2rem;
}
.wiz-error.is-on { display: block; }

/* =============================================================
   SPEC SHEET (final step + print target)
   ============================================================= */
.spec {
    padding: 2.4rem 2rem 2.2rem;
}
/* Grid, not flex: the reference column must stay on the right rather than
   wrapping under the title when the reference string gets long. */
.spec-head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
    padding-bottom: 1.4rem;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 1.8rem;
}
.spec-head h2 {
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    letter-spacing: -.03em;
    margin-bottom: .3rem;
}
.spec-org {
    font-family: var(--font-mono);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--signal);
    margin-bottom: .5rem;
}
.spec-ref {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-faint);
    line-height: 1.9;
}
.spec-ref strong {
    display: block;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: .04em;
    word-break: break-all;
}

.spec-block { margin-bottom: 1.9rem; }
.spec-block > h3 {
    font-family: var(--font-mono);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-faint);
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
}

.spec-rows { list-style: none; margin: 0; padding: 0; }
.spec-row {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 1.2rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row dt {
    font-family: var(--font-mono);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-faint);
    line-height: 1.6;
    padding-top: .15rem;
}
.spec-row dd { margin: 0; }
.spec-pick { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.spec-pick .code {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: .1em;
    color: var(--steel);
    background: rgba(29,78,107,.08);
    border-radius: 4px;
    padding: .12rem .42rem;
}
.spec-pick .name { font-weight: 600; font-size: 16.5px; }
.spec-pick .qty {
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 700;
    color: var(--signal-deep);
}
.spec-pick + .spec-pick { margin-top: .7rem; }
.spec-note { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin-top: .18rem; }
/* Text the distributor typed, not catalogue copy */
.spec-note.is-user { color: var(--signal-deep); font-weight: 500; }

/* Build-list table on the sheet (locker slaves) */
.spec-tbl { width: 100%; border-collapse: collapse; margin-top: .2rem; }
.spec-tbl caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint);
    padding-bottom: .55rem;
}
.spec-tbl th, .spec-tbl td { text-align: left; padding: .5rem .8rem .5rem 0; vertical-align: top; }
.spec-tbl thead th {
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom: 1.5px solid var(--line);
    padding-bottom: .45rem;
}
.spec-tbl tbody tr { border-bottom: 1px solid var(--line-soft); }
.spec-tbl tbody tr:last-child { border-bottom: 0; }
.spec-tbl tbody td { font-size: 15px; color: var(--ink-soft); line-height: 1.45; }
.spec-tbl td.is-model { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: .02em; }
.spec-tbl .spec-tbl-n {
    width: 2.6rem;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em;
    color: var(--steel);
}
.spec-tbl-blank { color: var(--ink-faint); }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.spec-check { list-style: none; margin: 0; padding: 0; }
.spec-check li {
    position: relative;
    padding: .5rem 0 .5rem 2rem;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    border-bottom: 1px dashed var(--line-soft);
}
.spec-check li:last-child { border-bottom: 0; }
.spec-check li::before {
    content: "";
    position: absolute;
    left: 0; top: .72rem;
    width: 14px; height: 14px;
    border: 1.5px solid var(--ink-faint);
    border-radius: 3px;
}
.spec-check strong { color: var(--ink); }
.spec-check.is-plain li::before {
    border: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--signal);
    top: 1rem; left: 4px;
}

.spec-empty { font-size: 15.5px; color: var(--ink-faint); font-style: italic; }

.spec-foot {
    margin-top: 2.2rem;
    padding-top: 1.3rem;
    border-top: 2px solid var(--ink);
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .05em;
    color: var(--ink-faint);
}
.spec-foot a { color: var(--steel); text-decoration: none; }

/* =============================================================
   REFERENCE CATALOGUE (server-rendered)
   ============================================================= */
.dist-catalogue { padding: 1rem 0 3rem; scroll-margin-top: 90px; }
.dist-sec-head { max-width: 720px; margin-bottom: 2.4rem; }
.dist-sec-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -.03em; margin: .7rem 0 .6rem; }
.dist-sec-head p { color: var(--ink-soft); font-size: 1.02rem; }

.fam {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.9rem;
    margin-bottom: 1.6rem;
    scroll-margin-top: 90px;
}
.fam-head { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: .9rem; }
.fam-code {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 700; letter-spacing: .1em;
    color: #fff; background: var(--ink);
    border-radius: 7px;
    padding: .45rem .7rem;
    margin-top: .18rem;
}
.fam-head h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.025em; margin-bottom: .35rem; }
.fam-tagline { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.fam-intro { color: var(--ink-soft); font-size: 16px; line-height: 1.65; max-width: 72ch; margin-bottom: 1.6rem; }

.grp { margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.grp-q {
    font-size: 1.08rem;
    letter-spacing: -.015em;
    display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
    margin-bottom: .4rem;
}
.grp-mode {
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: .18rem .55rem;
}
.grp-help { color: var(--ink-soft); font-size: 15px; line-height: 1.55; max-width: 72ch; margin-bottom: 1.1rem; }

.opt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.opt {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--steel);
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
}
.opt-top { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .35rem; }
.opt-code {
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    color: var(--steel);
}
.opt-top h5 { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; }
.opt-desc { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }

.opt-req {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1rem;
    margin-top: .8rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--line);
}
.opt-req dt {
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--signal-deep);
    padding-top: .18rem;
}
.opt-req dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* Build-list group in the reference catalogue (locker slaves) */
.grp-rows {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--steel);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.2rem;
}
.grp-rows-lead {
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: .6rem;
}
.grp-rows-lead:not(:first-child) { margin-top: 1.3rem; }
.grp-fields, .grp-models { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.grp-fields li, .grp-models li {
    display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
    font-size: 14.8px; line-height: 1.5; color: var(--ink-soft);
}
.grp-fields strong { color: var(--ink); font-weight: 600; }
.grp-eg { color: var(--ink-faint); font-size: 14px; }
.grp-model-name {
    font-family: var(--font-mono);
    font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--ink);
    background: rgba(29,78,107,.08);
    border-radius: 4px;
    padding: .1rem .45rem;
}
.grp-rows-foot { font-size: 14px; color: var(--ink-faint); line-height: 1.5; margin-top: .7rem; }
.grp-rows-note {
    margin-top: 1.3rem;
    padding: .7rem .9rem;
    border-left: 3px solid var(--amber);
    background: rgba(224,162,58,.1);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}

/* ---------- Closing CTA ---------- */
.dist-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    background: var(--night);
    color: #d8d0c4;
    border-radius: var(--radius);
    padding: 2.4rem 2.2rem;
    margin-bottom: 4rem;
}
.dist-cta h2 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.75rem); letter-spacing: -.025em; margin-bottom: .5rem; }
.dist-cta p { font-size: 15.5px; line-height: 1.6; max-width: 52ch; }
.dist-cta-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.dist-cta .btn-secondary { color: #fff; border-color: rgba(255,255,255,.4); }
.dist-cta .btn-secondary:hover { background: #fff; color: var(--ink); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
/* Below this width the row grid can only fit one column, so a `span 2`
   field would overflow the card. */
@media (max-width: 620px) {
    .wiz-row-fields { grid-template-columns: 1fr; }
    .wiz-rf.is-wide { grid-column: auto; }
    .wiz-rf.is-qty { max-width: none; }
    .spec-tbl, .spec-tbl caption, .spec-tbl thead, .spec-tbl tbody,
    .spec-tbl tr, .spec-tbl th, .spec-tbl td { display: block; }
    .spec-tbl thead { display: none; }
    .spec-tbl tbody tr { padding: .6rem 0; }
    .spec-tbl tbody td::before {
        content: attr(data-label) ": ";
        font-family: var(--font-mono);
        font-size: 10px; font-weight: 700;
        letter-spacing: .1em; text-transform: uppercase;
        color: var(--ink-faint);
    }
    .spec-tbl tbody td:empty { display: none; }
    .spec-tbl .spec-tbl-n { width: auto; }
}

@media (max-width: 768px) {
    .wiz-panel, .spec { padding: 1.6rem 1.2rem; }
    .wiz-nav { padding: 1.1rem 1.2rem; }
    .wiz-nav .btn { flex: 1 1 100%; justify-content: center; }
    .wiz-nav .spacer { display: none; }
    .wiz-rail { padding: .9rem 1.1rem; }
    .wiz-step .label { display: none; }
    .spec-row { grid-template-columns: 1fr; gap: .35rem; }
    .spec-head { grid-template-columns: 1fr; gap: 1rem; }
    .spec-ref { text-align: left; }
    .fam { padding: 1.4rem 1.1rem; }
    .opt-req { grid-template-columns: 1fr; gap: .15rem; }
    .opt-req dt { margin-top: .5rem; }
}

/* =============================================================
   PRINT — "Save as PDF" from the spec sheet
   ============================================================= */
@media print {
    .navbar, .footer, .skip-link, .no-print,
    .breadcrumbs, .dist-head-actions,
    .wiz-rail, .wiz-nav, .wiz-error { display: none !important; }

    body {
        background: #fff !important;
        font-size: 11pt;
        color: #000;
    }
    .container { max-width: none; padding: 0; }

    /* When the user prints from the spec sheet, print only the spec sheet. */
    .print-spec .dist-catalogue,
    .print-spec .dist-head,
    .print-spec .dist-intro,
    .print-spec .dist-cta { display: none !important; }

    .wiz {
        border: 0;
        box-shadow: none;
        background: #fff;
        margin: 0;
    }
    /* 1mm of gutter stops the first glyph of a letter-spaced mono line
       being clipped by the page margin. */
    .spec { padding: 0 1mm; }
    .spec-head { border-bottom: 1.5pt solid #000; }
    .spec-foot { border-top: 1.5pt solid #000; }

    /* Blocks flow across pages — pinning a whole block strands half-empty
       pages. Individual rows and list items stay atomic instead. */
    .spec-block { break-inside: auto; }
    .spec-block > h3 { break-after: avoid; }
    .spec-row, .spec-check li { break-inside: avoid; page-break-inside: avoid; }
    .fam, .opt { break-inside: avoid; page-break-inside: avoid; }
    p, li { orphans: 2; widows: 2; }

    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    a[href^="/"]::after,
    a[href^="#"]::after,
    a[href^="mailto"]::after,
    a[href^="tel"]::after { content: ""; }
}

@page { size: A4; margin: 16mm 14mm; }