/**
 * DTD Product Builder — front-end wizard
 *
 * Every colour and size here comes from a --dtdpb-* variable set on the root
 * element from the plugin settings. Nothing is hardcoded: the values in
 * .dtdpb below are fallbacks for the case where the element loses its inline
 * style, not the source of truth.
 *
 * PALETTE  #000000 structure · #123293 action · #a9221b attention · #ffffff
 * Greys and the blue tint are derived from those, not added to them.
 *
 * ZERO RADIUS. DTD is a square brand — every corner in here is 0, driven by
 * --dtdpb-radius / --dtdpb-card-radius so it stays a setting, not a decision
 * baked into the stylesheet.
 *
 * Layout: step rail left, question canvas centre, running summary right.
 * Below the tablet breakpoint the rail becomes a horizontal progress strip
 * and the summary drops under the canvas.
 *
 * No drop shadows anywhere. Depth is done with borders, rings and tone.
 */

.dtdpb {
    --dtdpb-navy: #000000;
    --dtdpb-blue: #123293;
    --dtdpb-accent: #a9221b;
    --dtdpb-sky: #dee2f0;
    --dtdpb-ink: #000000;
    --dtdpb-muted: #5c5c5c;
    --dtdpb-surface: #f4f4f4;
    --dtdpb-panel: #ffffff;
    --dtdpb-line: #e2e2e2;
    --dtdpb-head-font: 'Work Sans', Helvetica, Arial, sans-serif;
    --dtdpb-body-font: 'Lato', Helvetica, Arial, sans-serif;
    --dtdpb-maxw: 1280px;
    --dtdpb-rail-w: 280px;
    --dtdpb-radius: 0;
    --dtdpb-card-radius: 0;
    --dtdpb-gap: 24px;
    --dtdpb-card-minh: 230px;
    --dtdpb-card-ratio: 4 / 3;

    /* Type scale — every one of these is an Appearance field. */
    --dtdpb-fs-step-title: 26px;   --dtdpb-fw-step-title: 700;
    --dtdpb-fs-step-eyebrow: 11.5px; --dtdpb-fw-step-eyebrow: 700;
    --dtdpb-fs-step-blurb: 15px;   --dtdpb-fw-step-blurb: 400;
    --dtdpb-fs-question: 16.5px;   --dtdpb-fw-question: 700;
    --dtdpb-fs-help: 14px;         --dtdpb-fw-help: 400;
    --dtdpb-fs-card-label: 15px;   --dtdpb-fw-card-label: 600;
    --dtdpb-fs-card-desc: 13px;    --dtdpb-fw-card-desc: 400;
    --dtdpb-fs-card-note: 12.5px;  --dtdpb-fw-card-note: 400;
    --dtdpb-fs-badge: 9.5px;       --dtdpb-fw-badge: 700;
    --dtdpb-fs-rail-label: 14.5px; --dtdpb-fw-rail-label: 600;
    --dtdpb-fs-rail-sum: 12.5px;   --dtdpb-fw-rail-sum: 400;
    --dtdpb-fs-summary-k: 11px;    --dtdpb-fw-summary-k: 400;
    --dtdpb-fs-summary-v: 14px;    --dtdpb-fw-summary-v: 600;
    --dtdpb-fs-price: 28px;        --dtdpb-fw-price: 700;
    --dtdpb-fs-quote-total: 32px;  --dtdpb-fw-quote-total: 700;
    --dtdpb-fs-button: 15px;       --dtdpb-fw-button: 600;
    --dtdpb-fs-body: 15px;         --dtdpb-fw-body: 400;

    font-family: var(--dtdpb-body-font);
    font-size: calc(var(--dtdpb-fs-body) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-body);
    color: var(--dtdpb-ink);
    -webkit-font-smoothing: antialiased;
}

.dtdpb *,
.dtdpb *::before,
.dtdpb *::after { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════
   THEME HARDENING  (Divi)
   Divi styles lists, buttons and form controls site-wide with very
   specific selectors, so these have to shout to be heard. Everything
   here is a reset back to the plugin's own look — it adds nothing.
   ══════════════════════════════════════════════════════════════ */

/* The rail and the summary contain NO list elements — see renderRail() in
   builder.js. Divi scopes its content styles under #et-boc, so `ul li` there
   wins on ID specificity against anything a plugin can write, and the bullets
   came back however loudly the reset shouted. The markup avoids the fight
   instead of losing it.

   This blanket stays as a backstop for any list that ends up inside the
   builder later — it is not what fixes the rail. */
.dtdpb ul,
.dtdpb ol,
.dtdpb li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    background-image: none !important;
    text-indent: 0 !important;
}
.dtdpb li::marker { content: "" !important; font-size: 0 !important; }
.dtdpb li::before { content: none !important; display: none !important; }
/* …except the no-JS outline, which is genuinely prose and wants its numbers. */
.dtdpb__noscript ol,
.dtdpb__noscript ul { list-style: revert !important; padding-left: 22px; }
.dtdpb__noscript li { list-style: revert !important; }
.dtdpb__noscript li::marker { content: normal !important; font-size: inherit !important; }

/* Divi pads every paragraph and then takes it back off the last one:
       p               { padding-bottom: 1em }
       p:last-of-type  { padding-bottom: 0 }
   Both halves are wrong inside a component that sets its own rhythm. The
   first opens a gap under the step eyebrow and the question label; the
   second eats the bottom padding of the advisory note, which is why that
   box had space above its text and none below it.

   Zeroed here, so every paragraph starts from nothing and the rules below
   set the spacing. The one paragraph that is a box rather than prose has to
   re-assert its padding from inside this block — `.dtdpb p` outranks a bare
   `.dtdpb__card-note`, so the exception needs the element in the selector
   and the same !important to get past Divi. */
.dtdpb p { padding: 0 !important; }
.dtdpb p.dtdpb__card-note { padding: 11px 13px !important; }

/* Divi rounds and shadows buttons and inputs globally. Point them back at
   the setting rather than at a literal, so the radius stays editable. */
.dtdpb button,
.dtdpb input,
.dtdpb textarea,
.dtdpb select,
.dtdpb a.dtdpb__btn {
    border-radius: var(--dtdpb-radius, 0) !important;
    box-shadow: none !important;
    text-transform: none;
    letter-spacing: normal;
}
.dtdpb img { border-radius: var(--dtdpb-card-radius, 0); }

/* Everything that used to be a pill or a circle, stated explicitly rather
   than left to the absence of a declaration. Driven by the setting, so the
   whole thing still rounds from one field if that is ever wanted. */
.dtdpb__card-badge,
.dtdpb__rail-num,
.dtdpb__rail-mark,
.dtdpb__rail-bar,
.dtdpb__rail-fill,
.dtdpb__card-dot,
.dtdpb__success-seal,
.dtdpb__q-optional,
.dtdpb__field-range,
.dtdpb__price-flag,
.dtdq__status { border-radius: var(--dtdpb-radius, 0); }

/* Divi's global button rule adds a padded arrow on hover via ::after. */
.dtdpb button::after,
.dtdpb a.dtdpb__btn::after { content: none !important; }

.dtdpb__shell {
    max-width: var(--dtdpb-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--dtdpb-rail-w) minmax(0, 1fr);
    gap: var(--dtdpb-gap);
    align-items: start;
}
.dtdpb__shell.has-summary {
    grid-template-columns: var(--dtdpb-rail-w) minmax(0, 1fr) minmax(250px, 310px);
}

/* ══════════════════════════════════════════════════════════════
   STEP RAIL
   ══════════════════════════════════════════════════════════════ */
.dtdpb__rail {
    background: var(--dtdpb-panel);
    border: 1px solid var(--dtdpb-line);
    border-radius: var(--dtdpb-radius);
    overflow: hidden;
    position: sticky;
    top: 24px;
}

/* Progress header */
.dtdpb__rail-head {
    padding: 15px 16px 14px;
    border-bottom: 1px solid var(--dtdpb-line);
    background: var(--dtdpb-surface);
}
.dtdpb__rail-count {
    display: block;
    font-family: var(--dtdpb-head-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dtdpb-muted);
    margin-bottom: 9px;
}
.dtdpb__rail-bar {
    display: block;
    height: 5px;
    background: color-mix(in srgb, var(--dtdpb-muted) 22%, transparent);
    overflow: hidden;
}
.dtdpb__rail-fill {
    display: block;
    height: 100%;
    background: var(--dtdpb-blue);
    transition: width .3s ease;
}

.dtdpb__rail-list { display: block; margin: 0; padding: 0; }

.dtdpb__rail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 13px 16px 13px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--dtdpb-line);
    border-left: 3px solid transparent;
    text-align: left;
    font-family: var(--dtdpb-head-font);
    font-size: calc(var(--dtdpb-fs-rail-label) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-rail-label);
    line-height: 1.25;
    color: var(--dtdpb-ink);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.dtdpb__rail-item:last-child { border-bottom: 0; }
/* The current step must be excluded from the hover background explicitly.
   `:hover:not(:disabled)` scores three classes and `.is-current` only two, so
   hover wins the background while the white text from .is-current stays —
   white on pale grey, and the step you are actually on becomes unreadable. */
.dtdpb__rail-item:hover:not(:disabled):not(.is-current) { background: var(--dtdpb-surface); }
.dtdpb__rail-item:focus-visible { outline: 2px solid var(--dtdpb-blue); outline-offset: -3px; }

.dtdpb__rail-item.is-visited { border-left-color: var(--dtdpb-sky); }
.dtdpb__rail-item.is-current {
    background: var(--dtdpb-navy);
    border-left-color: var(--dtdpb-blue);
    color: #fff;
}
/* Hovering the current step lifts it slightly instead of clearing it. */
.dtdpb__rail-item.is-current:hover:not(:disabled) {
    background: color-mix(in srgb, var(--dtdpb-navy) 85%, var(--dtdpb-blue));
}
.dtdpb__rail-item.is-current .dtdpb__rail-sum { color: rgba(255, 255, 255, .78); }

.dtdpb__rail-item.is-locked { cursor: not-allowed; opacity: .42; }
.dtdpb__rail-item.is-locked:hover,
.dtdpb__rail-item:disabled:hover { background: transparent; }

.dtdpb__rail-body { flex: 1 1 auto; min-width: 0; }
.dtdpb__rail-label { display: block; }
.dtdpb__rail-sum {
    display: block;
    font-family: var(--dtdpb-body-font);
    font-size: calc(var(--dtdpb-fs-rail-sum) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-rail-sum);
    line-height: 1.35;
    color: var(--dtdpb-muted);
    margin-top: 3px;
    overflow-wrap: anywhere;
}

/* Numbered marker → tick once the step is satisfied */
/* 18px rather than 26px: the number is a marker, not a control, and at the
   old size it crowded the step name it belongs to. The tick and the icon
   come down with it so the glyph keeps the same proportion inside the box. */
.dtdpb__rail-num {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.5px solid color-mix(in srgb, var(--dtdpb-muted) 45%, transparent);
    color: var(--dtdpb-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dtdpb-head-font);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.dtdpb__rail-num .dtdpb__tick { width: 9px; height: 9px; }
.dtdpb__rail-num .dtdpb__rail-icon { width: 11px; height: 11px; }
.dtdpb__rail-num.is-done {
    background: var(--dtdpb-blue);
    border-color: var(--dtdpb-blue);
    color: #fff;
}
.dtdpb__rail-item.is-current .dtdpb__rail-num { border-color: #fff; color: #fff; }
.dtdpb__rail-item.is-current .dtdpb__rail-num.is-done {
    background: #fff;
    border-color: #fff;
    color: var(--dtdpb-navy);
}

/* Count badge, only when a step holds more than one answer */
.dtdpb__rail-mark {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: color-mix(in srgb, var(--dtdpb-blue) 12%, transparent);
    color: var(--dtdpb-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.dtdpb__rail-item.is-current .dtdpb__rail-mark {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.dtdpb__rail-icon { flex: 0 0 auto; width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════════════
   QUESTION CANVAS
   ══════════════════════════════════════════════════════════════ */
.dtdpb__main {
    background: var(--dtdpb-panel);
    border: 1px solid var(--dtdpb-line);
    border-radius: var(--dtdpb-radius);
    /* Less air at the top than the sides: the step counter is the first thing
       in the panel and a deep inset pushed the questions below the fold on a
       laptop for no benefit. */
    padding: 18px 30px 28px;
    min-height: 420px;
}
/* Stacked: counter, then title, then the step's sentence beneath it.
   Setting the sentence beside the title was tried and looked wrong — next to
   a 26px title a 15px line has nothing to sit against, and it read as a stray
   caption rather than part of the heading.

   The height came out of the padding instead. Every gap here is deliberately
   tight so the first question is close to the top of the panel, which is what
   the customer is actually there to answer. */
.dtdpb__step-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dtdpb-line);
}
.dtdpb__step-eyebrow {
    margin: 0 0 4px;
    font-family: var(--dtdpb-head-font);
    font-size: calc(var(--dtdpb-fs-step-eyebrow) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-step-eyebrow);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dtdpb-blue);
}
.dtdpb__step-title {
    font-family: var(--dtdpb-head-font);
    font-size: calc(var(--dtdpb-fs-step-title) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-step-title);
    line-height: 1.18;
    letter-spacing: -.018em;
    color: var(--dtdpb-ink);
    margin: 0;
}
.dtdpb__step-blurb {
    margin: 5px 0 0;
    max-width: 68ch;
    font-size: calc(var(--dtdpb-fs-step-blurb) * var(--dtdpb-type-scale, 1));
    line-height: 1.5;
    color: var(--dtdpb-muted);
    font-weight: var(--dtdpb-fw-step-blurb);
}

.dtdpb__question { margin-bottom: 34px; }
.dtdpb__question:last-child { margin-bottom: 0; }
.dtdpb__q-label {
    font-family: var(--dtdpb-head-font);
    font-size: calc(var(--dtdpb-fs-question) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-question);
    color: var(--dtdpb-ink);
    margin: 0 0 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.dtdpb__q-optional {
    font-family: var(--dtdpb-body-font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dtdpb-muted);
    background: var(--dtdpb-surface);
    padding: 2px 9px;
}
.dtdpb__q-help { margin: 0 0 14px; font-size: calc(var(--dtdpb-fs-help) * var(--dtdpb-type-scale, 1)); line-height: 1.55; color: var(--dtdpb-muted); max-width: 70ch; font-weight: var(--dtdpb-fw-help); }
.dtdpb__q-label + .dtdpb__cards { margin-top: 16px; }

/* ── Option cards ──────────────────────────────────────────── */
.dtdpb__cards {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
}
.dtdpb__cards legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dtdpb__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--dtdpb-panel);
    border: 1px solid var(--dtdpb-line);
    border-radius: var(--dtdpb-card-radius);
    padding: 18px;
    cursor: pointer;
    min-height: var(--dtdpb-card-minh);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.dtdpb__card:hover {
    border-color: var(--dtdpb-blue);
    transform: translateY(-2px);
}
.dtdpb__card.is-selected {
    border-color: var(--dtdpb-blue);
    background: color-mix(in srgb, var(--dtdpb-sky) 40%, var(--dtdpb-panel));
    box-shadow: inset 0 0 0 1px var(--dtdpb-blue);
}
.dtdpb__card:focus-within { outline: 2px solid var(--dtdpb-blue); outline-offset: 2px; }
.dtdpb__card input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

/* Fixed aspect ratio, NOT flex-grow.
   Growing to fill meant a card whose description ran to two lines got a
   shorter image box than its neighbours, so nothing across a row lined up.
   A ratio makes every media box in a row identical — the columns are equal
   width, so they are equal height — and the labels below them align. */
.dtdpb__card-media {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: var(--dtdpb-card-ratio, 4 / 3);
    min-height: 90px;
    background: var(--dtdpb-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dtdpb__card-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* A stand-in is dimmed so it never reads as this option's actual render. */
.dtdpb__card-media.is-fallback img { opacity: .5; }
.dtdpb__card-ph {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dtdpb-muted);
    opacity: .6;
    text-align: center;
    padding: 8px;
}

.dtdpb__card-foot { display: flex; align-items: flex-start; gap: 10px; }
.dtdpb__card-dot {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border: 1.5px solid color-mix(in srgb, var(--dtdpb-muted) 55%, transparent);
    background: var(--dtdpb-panel);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.dtdpb__card-dot .dtdpb__tick { width: 9px; height: 9px; }
.dtdpb__card.is-selected .dtdpb__card-dot {
    border-color: var(--dtdpb-blue);
    background: var(--dtdpb-blue);
    color: #fff;
}

.dtdpb__card-text { min-width: 0; }
.dtdpb__card-label {
    font-family: var(--dtdpb-head-font);
    font-size: calc(var(--dtdpb-fs-card-label) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-card-label);
    line-height: 1.3;
    color: var(--dtdpb-ink);
    display: block;
}
.dtdpb__card-desc { margin: 6px 0 0; font-size: calc(var(--dtdpb-fs-card-desc) * var(--dtdpb-type-scale, 1)); line-height: 1.5; color: var(--dtdpb-muted); font-weight: var(--dtdpb-fw-card-desc); }
/* Advisory notes are a caution, not a nicety — they carry the accent.
   Full card width with symmetric padding, sat at the bottom of the card. */
.dtdpb__card-note {
    margin: auto 0 0;
    /* Padding lives in the Divi hardening block near the top of this file —
       Divi zeroes it here and only an !important with the element in the
       selector wins it back. */
    font-size: calc(var(--dtdpb-fs-card-note) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-card-note);
    line-height: 1.55;
    color: var(--dtdpb-muted);
    background: color-mix(in srgb, var(--dtdpb-accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--dtdpb-accent) 28%, var(--dtdpb-line));
}
.dtdpb__card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    background: var(--dtdpb-accent);
    color: #fff;
    font-family: var(--dtdpb-head-font);
    font-size: calc(var(--dtdpb-fs-badge) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-badge);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 10px;
}

/* ── Measured inputs ───────────────────────────────────────── */
.dtdpb__field { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.dtdpb__field input {
    width: 160px;
    padding: 11px 13px;
    border: 1px solid var(--dtdpb-line);
    font-family: var(--dtdpb-body-font);
    font-size: 15px;
    color: var(--dtdpb-ink);
    background: var(--dtdpb-panel);
}
.dtdpb__field input:focus { outline: 2px solid var(--dtdpb-blue); outline-offset: -1px; border-color: var(--dtdpb-blue); }
.dtdpb__field-unit { font-size: 14px; font-weight: 600; color: var(--dtdpb-ink); }
.dtdpb__field-range {
    font-size: 12px;
    color: var(--dtdpb-muted);
    background: var(--dtdpb-surface);
    padding: 4px 10px;
}
.dtdpb__field-warn {
    flex-basis: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--dtdpb-accent);
}
.dtdpb__field-warn:empty { display: none; }

/* ══════════════════════════════════════════════════════════════
   SUMMARY PANEL
   ══════════════════════════════════════════════════════════════ */
.dtdpb__summary {
    background: var(--dtdpb-panel);
    border: 1px solid var(--dtdpb-line);
    border-radius: var(--dtdpb-radius);
    padding: 20px;
    position: sticky;
    top: 24px;
}

/* Live preview of the configuration */
.dtdpb__preview {
    position: relative;
    background: var(--dtdpb-surface);
    border: 1px solid var(--dtdpb-line);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 18px;
}
.dtdpb__preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dtdpb__preview-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--dtdpb-navy) 88%, transparent);
    color: #fff;
    font-family: var(--dtdpb-head-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
.dtdpb__preview-ph {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dtdpb-muted);
    opacity: .6;
    text-align: center;
    padding: 12px;
}

.dtdpb__summary-title {
    font-family: var(--dtdpb-head-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dtdpb-muted);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dtdpb-line);
}
.dtdpb__summary-empty { font-size: 14px; line-height: 1.55; color: var(--dtdpb-muted); margin: 0; }
.dtdpb__summary-list { display: block; margin: 0; padding: 0; }
.dtdpb__summary-row {
    display: grid;
    gap: 2px;
    padding: 9px 0;
    border-bottom: 1px solid var(--dtdpb-line);
}
.dtdpb__summary-row:last-child { border-bottom: 0; }
.dtdpb__summary-k { font-size: calc(var(--dtdpb-fs-summary-k) * var(--dtdpb-type-scale, 1)); letter-spacing: .06em; text-transform: uppercase; color: var(--dtdpb-muted); font-weight: var(--dtdpb-fw-summary-k); }
.dtdpb__summary-v { font-family: var(--dtdpb-head-font); font-size: calc(var(--dtdpb-fs-summary-v) * var(--dtdpb-type-scale, 1)); font-weight: var(--dtdpb-fw-summary-v); color: var(--dtdpb-ink); line-height: 1.35; }

.dtdpb__summary-price {
    display: grid;
    gap: 4px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--dtdpb-line);
}
.dtdpb__price-label {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dtdpb-muted);
}
.dtdpb__price-value {
    font-family: var(--dtdpb-head-font);
    font-size: calc(var(--dtdpb-fs-price) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-price);
    line-height: 1.1;
    color: var(--dtdpb-navy);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.dtdpb__price-value.is-loading { opacity: .4; }
.dtdpb__price-flag {
    display: inline-block;
    align-self: start;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--dtdpb-accent);
    padding: 4px 10px;
    margin-top: 4px;
}
.dtdpb__price-hint { font-size: 12.5px; line-height: 1.5; color: var(--dtdpb-muted); }

/* ══════════════════════════════════════════════════════════════
   REVIEW + QUOTE PANEL
   ══════════════════════════════════════════════════════════════ */
.dtdpb__review { display: grid; gap: 0; border: 1px solid var(--dtdpb-line); border-radius: var(--dtdpb-radius); overflow: hidden; }
.dtdpb__review-row {
    display: grid;
    grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: baseline;
    padding: 13px 16px;
    border-bottom: 1px solid var(--dtdpb-line);
}
.dtdpb__review-row:last-child { border-bottom: 0; }
.dtdpb__review-row:nth-child(odd) { background: var(--dtdpb-surface); }
.dtdpb__review-k { font-size: 13.5px; color: var(--dtdpb-muted); }
.dtdpb__review-v { font-family: var(--dtdpb-head-font); font-size: 15px; font-weight: 600; color: var(--dtdpb-ink); }
.dtdpb__review-edit {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--dtdpb-body-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--dtdpb-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.dtdpb__review-edit:hover { color: var(--dtdpb-accent); }

/* ── Opening name + quantity, at the top of the review ─────── */
.dtdpb__openbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px 28px;
    margin-bottom: 24px;
}
.dtdpb__openbar-name { flex: 1 1 300px; display: flex; flex-direction: column; gap: 7px; }
.dtdpb__openbar-qty { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; }
.dtdpb__openbar-label {
    font-family: var(--dtdpb-head-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dtdpb-ink);
}
.dtdpb__openbar-name input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--dtdpb-line);
    font-family: var(--dtdpb-body-font);
    font-size: 15.5px;
    color: var(--dtdpb-ink);
    background: var(--dtdpb-panel);
}
.dtdpb__openbar-name input:focus {
    outline: 2px solid var(--dtdpb-blue);
    outline-offset: -1px;
    border-color: var(--dtdpb-blue);
}
.dtdpb__openbar-lead {
    flex: 1 1 100%;
    margin: 0;
    font-size: 13px;
    color: var(--dtdpb-muted);
}

.dtdpb__stepper { display: flex; align-items: stretch; }
.dtdpb__stepper-btn {
    width: 46px;
    border: 1px solid var(--dtdpb-line);
    background: var(--dtdpb-surface);
    color: var(--dtdpb-ink);
    font-family: var(--dtdpb-head-font);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.dtdpb__stepper-btn:hover:not(:disabled) { background: var(--dtdpb-blue); border-color: var(--dtdpb-blue); color: #fff; }
.dtdpb__stepper-btn:disabled { opacity: .4; cursor: not-allowed; }
.dtdpb__stepper-btn:focus-visible { outline: 2px solid var(--dtdpb-blue); outline-offset: -2px; }
.dtdpb__stepper input {
    width: 74px;
    text-align: center;
    border: 1px solid var(--dtdpb-line);
    border-left: 0;
    border-right: 0;
    padding: 11px 4px;
    font-family: var(--dtdpb-head-font);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--dtdpb-ink);
    background: var(--dtdpb-panel);
    -moz-appearance: textfield;
}
.dtdpb__stepper input::-webkit-outer-spin-button,
.dtdpb__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dtdpb__stepper input:focus { outline: 2px solid var(--dtdpb-blue); outline-offset: -2px; }

/* ── Spec sheet: the configuration, grouped by step ────────── */
.dtdpb__spec { border: 1px solid var(--dtdpb-line); }
.dtdpb__spec-group { padding: 0 20px; }
.dtdpb__spec-group + .dtdpb__spec-group { border-top: 1px solid var(--dtdpb-line); }

.dtdpb__spec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}
.dtdpb__spec-title {
    margin: 0;
    font-family: var(--dtdpb-head-font);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--dtdpb-ink);
}
.dtdpb__spec-edit {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 9px 16px;
    background: transparent;
    border: 1px solid var(--dtdpb-blue);
    color: var(--dtdpb-blue);
    font-family: var(--dtdpb-head-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.dtdpb__spec-edit:hover { background: var(--dtdpb-blue); color: #fff; }
.dtdpb__spec-edit:focus-visible { outline: 2px solid var(--dtdpb-navy); outline-offset: 2px; }
.dtdpb__pencil { width: 15px; height: 15px; flex: 0 0 auto; }

.dtdpb__spec-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--dtdpb-line);
}
.dtdpb__spec-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    background: var(--dtdpb-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dtdpb__spec-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dtdpb__spec-thumb.is-empty { background: var(--dtdpb-surface); }
.dtdpb__spec-label {
    font-family: var(--dtdpb-head-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--dtdpb-ink);
    line-height: 1.35;
}

/* Hint shown on a step reached via Edit */
.dtdpb__edithint {
    margin: 0 0 22px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--dtdpb-sky) 45%, transparent);
    border: 1px solid color-mix(in srgb, var(--dtdpb-blue) 28%, var(--dtdpb-line));
    font-size: 14px;
    line-height: 1.5;
    color: var(--dtdpb-ink);
}

/* Price + cart block. Repainted on its own; the contact form below is not. */
.dtdpb__quotepanel { display: block; }

.dtdpb__quotebox {
    margin-top: 24px;
    border: 1px solid var(--dtdpb-line);
    border-radius: var(--dtdpb-radius);
    overflow: hidden;
}
.dtdpb__quotebox-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    background: var(--dtdpb-navy);
    color: #fff;
}
.dtdpb__quotebox-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; opacity: .85; }
.dtdpb__quotebox-total {
    font-family: var(--dtdpb-head-font);
    font-size: calc(var(--dtdpb-fs-quote-total) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-quote-total);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.dtdpb__breakdown { width: 100%; border-collapse: collapse; }
.dtdpb__breakdown th,
.dtdpb__breakdown td { padding: 10px 20px; border-bottom: 1px solid var(--dtdpb-line); font-size: 14px; }
.dtdpb__breakdown th { text-align: left; font-weight: 500; color: var(--dtdpb-ink); }
.dtdpb__breakdown th span { display: block; font-size: 12px; color: var(--dtdpb-muted); margin-top: 2px; }
.dtdpb__breakdown td {
    text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums; color: var(--dtdpb-ink);
}
.dtdpb__breakdown .dtdpb__breakdown-sum th,
.dtdpb__breakdown .dtdpb__breakdown-sum td {
    font-weight: 700;
    color: var(--dtdpb-navy);
    background: var(--dtdpb-surface);
}
.dtdpb__breakdown tr:last-child th,
.dtdpb__breakdown tr:last-child td { border-bottom: 0; }

/* Over-threshold notice: a tint of the accent with a hard accent edge, so it
   reads as important without shouting a full red block at the customer. */
.dtdpb__flag {
    margin: 0;
    padding: 14px 20px;
    background: color-mix(in srgb, var(--dtdpb-accent) 8%, var(--dtdpb-panel));
    border-top: 1px solid color-mix(in srgb, var(--dtdpb-accent) 28%, var(--dtdpb-line));
    color: var(--dtdpb-ink);
    font-size: 13.5px;
    line-height: 1.55;
}
.dtdpb__note-soft {
    margin: 0;
    padding: 12px 20px;
    background: var(--dtdpb-surface);
    color: var(--dtdpb-muted);
    font-size: 13px;
    line-height: 1.55;
}

/* Openings already on the quote */
.dtdpb__cart { margin-top: 22px; border: 1px solid var(--dtdpb-line); overflow: hidden; }
.dtdpb__cart-title {
    font-family: var(--dtdpb-head-font); font-size: 12px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--dtdpb-muted);
    margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--dtdpb-line);
    background: var(--dtdpb-surface);
}
.dtdpb__cart-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 18px; border-bottom: 1px solid var(--dtdpb-line);
}
.dtdpb__cart-row:last-child { border-bottom: 0; }
.dtdpb__cart-row.is-current { background: color-mix(in srgb, var(--dtdpb-sky) 45%, transparent); }
.dtdpb__cart-row.is-total {
    background: var(--dtdpb-surface);
    align-items: baseline;
    justify-content: space-between;
}
.dtdpb__cart-row.is-total .dtdpb__cart-name {
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dtdpb-muted);
}
.dtdpb__cart-row.is-total .dtdpb__cart-price {
    font-family: var(--dtdpb-head-font); font-size: 20px; color: var(--dtdpb-navy);
}
.dtdpb__cart-text { flex: 1 1 auto; min-width: 0; }
.dtdpb__cart-name { display: block; font-family: var(--dtdpb-head-font); font-weight: 600; font-size: 14.5px; color: var(--dtdpb-ink); }
.dtdpb__cart-sum { display: block; font-size: 12.5px; line-height: 1.5; color: var(--dtdpb-muted); margin-top: 3px; }
.dtdpb__cart-price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dtdpb-ink); white-space: nowrap; }
.dtdpb__cart-remove {
    background: none; border: 0; cursor: pointer; padding: 0;
    font-family: var(--dtdpb-body-font); font-size: 12.5px; font-weight: 700;
    color: var(--dtdpb-muted); text-decoration: underline; text-underline-offset: 3px;
}
.dtdpb__cart-remove:hover { color: var(--dtdpb-accent); }

.dtdpb__addwrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.dtdpb__addhint { font-size: 12.5px; color: var(--dtdpb-muted); flex: 1 1 220px; }
.dtdpb__btn--ghost {
    background: transparent;
    color: var(--dtdpb-navy);
    border-color: var(--dtdpb-navy);
}
.dtdpb__btn--ghost:hover:not(:disabled) { background: var(--dtdpb-navy); color: #fff; }

/* ── Contact ───────────────────────────────────────────────── */
.dtdpb__contact {
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid var(--dtdpb-line);
}
.dtdpb__contact-title {
    font-family: var(--dtdpb-head-font); font-size: 20px; font-weight: 700;
    color: var(--dtdpb-ink); margin: 0 0 6px;
}
.dtdpb__contact-blurb { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--dtdpb-muted); max-width: 62ch; }
.dtdpb__contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.dtdpb__contact-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--dtdpb-ink); }
.dtdpb__contact-field > span { letter-spacing: .03em; }
.dtdpb__req { color: var(--dtdpb-accent); font-style: normal; margin-left: 3px; }
.dtdpb__contact-field input,
.dtdpb__contact-field textarea {
    padding: 11px 13px;
    border: 1px solid var(--dtdpb-line);
    font-family: var(--dtdpb-body-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--dtdpb-ink);
    background: var(--dtdpb-panel);
}
.dtdpb__contact-field input:focus,
.dtdpb__contact-field textarea:focus { outline: 2px solid var(--dtdpb-blue); outline-offset: -1px; border-color: var(--dtdpb-blue); }
.dtdpb__contact-wide { grid-column: 1 / -1; }
.dtdpb__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }
.dtdpb__consent { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--dtdpb-muted); max-width: 66ch; }
.dtdpb__error { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--dtdpb-accent); min-height: 1px; }
.dtdpb__error:not(:empty) {
    padding: 11px 14px;
    background: color-mix(in srgb, var(--dtdpb-accent) 8%, var(--dtdpb-panel));
    border: 1px solid color-mix(in srgb, var(--dtdpb-accent) 30%, var(--dtdpb-line));
}
.dtdpb__submit { margin-top: 18px; }

/* ── Success ───────────────────────────────────────────────── */
.dtdpb__success { margin-top: 8px; text-align: center; padding: 40px 24px; background: var(--dtdpb-surface); }
.dtdpb__success-seal {
    width: 54px; height: 54px; margin: 0 auto 18px;
    background: var(--dtdpb-blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.dtdpb__success-seal .dtdpb__tick { width: 24px; height: 24px; }
.dtdpb__success-ref { margin: 0; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--dtdpb-muted); }
.dtdpb__success-head { font-family: var(--dtdpb-head-font); font-size: 27px; font-weight: 700; color: var(--dtdpb-ink); margin: 8px 0 4px; }
.dtdpb__success-total { font-family: var(--dtdpb-head-font); font-size: 36px; font-weight: 700; color: var(--dtdpb-navy); margin: 0 0 12px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dtdpb__success-note { font-size: 14.5px; color: var(--dtdpb-muted); margin: 0 0 20px; }
.dtdpb__success .dtdpb__flag { text-align: left; margin-bottom: 18px; }

/* ══════════════════════════════════════════════════════════════
   FOOTER NAV
   ══════════════════════════════════════════════════════════════ */
.dtdpb__foot {
    max-width: var(--dtdpb-maxw);
    margin: var(--dtdpb-gap) auto 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0 0;
    border-top: 1px solid var(--dtdpb-line);
}
.dtdpb.has-sticky-footer .dtdpb__foot {
    position: sticky;
    bottom: 0;
    background: var(--dtdpb-section-bg, var(--dtdpb-surface));
    padding: 14px 0;
    z-index: 5;
}
.dtdpb__foot-hint { font-size: 13.5px; color: var(--dtdpb-muted); text-align: right; }
/* Always present, empty or not — it is the spacer that holds Back left and
   Next right, so the bar does not collapse when pricing is switched off. */
.dtdpb__foot-total {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 9px;
}
.dtdpb__foot-total-label {
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
    font-weight: 600; color: var(--dtdpb-muted);
}
.dtdpb__foot-total-value {
    font-family: var(--dtdpb-head-font); font-size: 19px; font-weight: 700;
    color: var(--dtdpb-navy); font-variant-numeric: tabular-nums;
}
.dtdpb__foot .dtdpb__btn--back,
.dtdpb__foot .dtdpb__btn--next { flex: 0 0 auto; }

.dtdpb__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--dtdpb-head-font);
    font-size: calc(var(--dtdpb-fs-button) * var(--dtdpb-type-scale, 1));
    font-weight: var(--dtdpb-fw-button);
    line-height: 1;
    padding: 14px 24px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, transform .15s ease;
}
.dtdpb__btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.dtdpb__btn--back { background: transparent; color: var(--dtdpb-navy); padding-left: 8px; padding-right: 14px; }
.dtdpb__btn--back:hover:not(:disabled) { color: var(--dtdpb-blue); }
.dtdpb__btn--next { background: var(--dtdpb-blue); color: #fff; }
.dtdpb__btn--next:hover:not(:disabled) { background: var(--dtdpb-accent); transform: translateY(-1px); }
/* Returning to the review after an edit is the primary action on that step. */
.dtdpb__btn--return .dtdpb__tick { width: 15px; height: 15px; }
.dtdpb__btn--ghost.dtdpb__btn--next { background: transparent; color: var(--dtdpb-navy); border-color: var(--dtdpb-line); }
.dtdpb__btn--ghost.dtdpb__btn--next:hover:not(:disabled) { background: var(--dtdpb-surface); color: var(--dtdpb-navy); }
.dtdpb__btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.dtdpb__btn:focus-visible { outline: 2px solid var(--dtdpb-navy); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════
   SESSION MODAL
   Covers the whole builder rather than the viewport — the page around
   it stays readable, and it is obvious which thing has stopped working.
   ══════════════════════════════════════════════════════════════ */
.dtdpb { position: relative; }

/* The modal's host on <body> — see showModal() for why it lives there.
​
   Doubled class so it outranks the `.dtdpb` rule the shortcode prints inline,
   which would otherwise hand the portal the section's background colour and
   padding. It is a transparent frame and nothing else.

   999999 clears Divi's own furniture: its fixed header sits at 99999 and its
   sections in the tens. A modal that says the session has expired has to be
   the thing you see. */
.dtdpb.dtdpb__portal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: none;
    padding: 0;
    margin: 0;
    max-width: none;
}

.dtdpb__overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, var(--dtdpb-surface) 82%, transparent);
    backdrop-filter: blur(2px);
}
/* Sticks with the viewport on a long flow, so it cannot end up scrolled
   off-screen while the builder underneath stays locked. */
@supports (position: sticky) {
    .dtdpb__overlay { position: fixed; }
}

.dtdpb__modal {
    width: 100%;
    max-width: 560px;
    background: var(--dtdpb-panel);
    border: 1px solid var(--dtdpb-line);
    border-radius: var(--dtdpb-radius);
    padding: 30px 32px 26px;
}
.dtdpb__modal-head {
    margin: 0 0 12px;
    font-family: var(--dtdpb-head-font);
    font-size: calc(22px * var(--dtdpb-type-scale, 1));
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--dtdpb-ink);
}
.dtdpb__modal-body {
    margin: 0 0 24px;
    font-size: calc(15.5px * var(--dtdpb-type-scale, 1));
    line-height: 1.6;
    color: var(--dtdpb-muted);
    max-width: 56ch;
}
.dtdpb__modal-actions { display: flex; justify-content: flex-end; }

/* ── No-JS outline ─────────────────────────────────────────── */
.dtdpb__noscript {
    max-width: var(--dtdpb-maxw);
    margin: 0 auto;
    background: var(--dtdpb-panel);
    border: 1px solid var(--dtdpb-line);
    padding: 24px 28px;
}
.dtdpb__noscript h2 { font-family: var(--dtdpb-head-font); margin-top: 0; }

/* ══════════════════════════════════════════════════════════════
   THE CUSTOMER'S QUOTE PAGE  [dtd_quote]
   ══════════════════════════════════════════════════════════════ */
.dtdq {
    font-family: var(--dtdpb-body-font);
    color: var(--dtdpb-ink);
    background: var(--dtdpb-section-bg, #f4f4f4);
    padding: 40px 24px;
    -webkit-font-smoothing: antialiased;
}
.dtdq *, .dtdq *::before, .dtdq *::after { box-sizing: border-box; }
.dtdq__inner { max-width: 960px; margin: 0 auto; }

.dtdq ul.dtdq__unpriced > li::marker { color: var(--dtdpb-muted); }

.dtdq__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    background: var(--dtdpb-panel);
    border: 1px solid var(--dtdpb-line);
    padding: 28px;
}
.dtdq__eyebrow { margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dtdpb-blue); font-weight: 700; }
.dtdq__title { font-family: var(--dtdpb-head-font); font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--dtdpb-ink); margin: 0; letter-spacing: -.02em; }
.dtdq__lead { margin: 8px 0 0; font-size: 15px; color: var(--dtdpb-muted); }
.dtdq__totalbox { text-align: right; display: grid; gap: 2px; }
.dtdq__total-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--dtdpb-muted); }
.dtdq__total { font-family: var(--dtdpb-head-font); font-size: 32px; font-weight: 700; color: var(--dtdpb-navy); font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.02em; }
.dtdq__status {
    justify-self: end;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: var(--dtdpb-blue); color: #fff;
    padding: 4px 11px; margin-top: 4px;
}

.dtdq__flag {
    background: color-mix(in srgb, var(--dtdpb-accent) 8%, var(--dtdpb-panel));
    border: 1px solid color-mix(in srgb, var(--dtdpb-accent) 30%, var(--dtdpb-line));
    color: var(--dtdpb-ink);
    padding: 16px 20px;
    margin-top: 16px;
    font-size: 14.5px;
    line-height: 1.6;
}

.dtdq__item {
    background: var(--dtdpb-panel);
    border: 1px solid var(--dtdpb-line);
    margin-top: 16px;
    overflow: hidden;
}
.dtdq__item-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 18px 24px; border-bottom: 1px solid var(--dtdpb-line); background: var(--dtdpb-surface);
}
.dtdq__item-head h2 { font-family: var(--dtdpb-head-font); font-size: 17px; font-weight: 700; margin: 0; color: var(--dtdpb-ink); }
.dtdq__item-total { font-family: var(--dtdpb-head-font); font-size: 20px; font-weight: 700; color: var(--dtdpb-navy); font-variant-numeric: tabular-nums; }

.dtdq__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; }
/* One column when the price breakdown is hidden from customers, which is the
   default — otherwise the configuration sits in a half-width column beside
   nothing at all. */
.dtdq__cols.is-single { grid-template-columns: minmax(0, 1fr); }
.dtdq__cols > div { padding: 22px 24px; }
.dtdq__cols > div + div { border-left: 1px solid var(--dtdpb-line); }
.dtdq__sub { font-family: var(--dtdpb-head-font); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dtdpb-muted); margin: 0 0 14px; }

.dtdq__spec { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px 14px; }
.dtdq__spec dt { font-size: 13px; color: var(--dtdpb-muted); }
.dtdq__spec dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--dtdpb-ink); }

.dtdq__breakdown { width: 100%; border-collapse: collapse; }
.dtdq__breakdown th, .dtdq__breakdown td { padding: 8px 0; border-bottom: 1px solid var(--dtdpb-line); font-size: 13.5px; }
.dtdq__breakdown th { text-align: left; font-weight: 500; color: var(--dtdpb-ink); }
.dtdq__breakdown th span { display: block; font-size: 11.5px; color: var(--dtdpb-muted); }
.dtdq__breakdown td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dtdq__breakdown .dtdq__unit th, .dtdq__breakdown .dtdq__unit td { font-weight: 700; color: var(--dtdpb-navy); border-bottom: 0; }

.dtdq__note { font-size: 12.5px; color: var(--dtdpb-muted); margin: 12px 0 4px; line-height: 1.5; }
.dtdq__unpriced { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--dtdpb-muted); }

.dtdq__foot {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
    background: var(--dtdpb-panel); border: 1px solid var(--dtdpb-line);
    padding: 22px 24px; margin-top: 16px;
}
.dtdq__yournotes p { margin: 4px 0 0; font-size: 14px; color: var(--dtdpb-muted); max-width: 60ch; }
.dtdq__fineprint { margin: 16px 0 0; font-size: 12px; color: var(--dtdpb-muted); line-height: 1.6; }

@media print {
    .dtdq { background: #fff; padding: 0; }
    .dtdq__item, .dtdq__head, .dtdq__foot { border-color: var(--dtdpb-muted); break-inside: avoid; }
}

@media (max-width: 700px) {
    .dtdq__cols > div + div { border-left: 0; border-top: 1px solid var(--dtdpb-line); }
    .dtdq__totalbox { text-align: left; }
    .dtdq__status { justify-self: start; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
    .dtdpb__shell.has-summary { grid-template-columns: var(--dtdpb-rail-w) minmax(0, 1fr); }
    .dtdpb__summary { grid-column: 1 / -1; position: static; }
    .dtdpb__preview { max-width: 320px; }
}
@media (max-width: 900px) {
    .dtdpb { --dtdpb-type-scale: var(--dtdpb-scale-tablet, .94); }
    .dtdpb__shell,
    .dtdpb__shell.has-summary { grid-template-columns: minmax(0, 1fr); }

    /* The rail folds into a horizontal progress strip. */
    .dtdpb__rail { position: static; }
    .dtdpb__rail-head { padding: 12px 14px; }
    .dtdpb__rail-list {
        display: flex;
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .dtdpb__rail-item {
        flex: 0 0 auto;
        width: auto;
        border-bottom: 0;
        border-left: 0;
        border-top: 3px solid transparent;
        border-right: 1px solid var(--dtdpb-line);
        white-space: nowrap;
        padding: 11px 14px;
        gap: 9px;
    }
    .dtdpb__rail-item.is-visited { border-top-color: var(--dtdpb-sky); }
    .dtdpb__rail-item.is-current { border-top-color: var(--dtdpb-blue); }
    .dtdpb__rail-sum { display: none; }
    .dtdpb__rail-num { width: 22px; height: 22px; font-size: 11px; }

    .dtdpb__main { padding: 22px 18px 26px; min-height: 0; }
    .dtdpb__cards { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .dtdpb__review-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .dtdpb__preview { max-width: none; }
}
@media (max-width: 520px) {
    .dtdpb { --dtdpb-type-scale: var(--dtdpb-scale-mobile, .88); }
    .dtdpb__cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .dtdpb__btn { padding: 13px 16px; }
    .dtdpb__foot-hint { display: none; }
    .dtdpb__card { min-height: 0; }
    .dtdpb__card-media { min-height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    .dtdpb * { transition: none !important; }
    .dtdpb__card:hover,
    .dtdpb__btn--next:hover:not(:disabled) { transform: none; }
}

/* A message an option shows once chosen ("factory / custom quote required").
   Accent-bordered like a card note, but full width under the question and
   at body size — it changes what happens next, so it must be read. */
.dtdpb__alert {
    margin: 14px 0 0;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--dtdpb-accent) 40%, var(--dtdpb-line));
    border-left-width: 4px;
    background: color-mix(in srgb, var(--dtdpb-accent) 7%, var(--dtdpb-panel, #fff));
    color: var(--dtdpb-ink);
}
.dtdpb .dtdpb__alert p { margin: 0 !important; padding: 0 !important; font-size: calc(var(--dtdpb-fs-card-desc, 15px) * var(--dtdpb-type-scale, 1)); line-height: 1.5; font-weight: 600; }