/* V2 desktop builder. Three consistent image sizes, all labels below images. */
#fdb-v2-builder {
    --fdb-accent: #ac1f2d;
    --fdb-ink: #24282b;
    --fdb-line: #dedfe1;
    --fdb-large: 170px;
    --fdb-medium: 100px;
    --fdb-small: 48px;
    color: var(--fdb-ink);
}
#fdb-v2-builder > h2 { margin: 0 0 24px; font-size: 26px; }
#fdb-v2-builder .fdb-v2-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 1000px) {
    #fdb-v2-builder .fdb-v2-layout { grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr); gap: 40px; }
    #fdb-v2-builder .fdb-v2-preview-section { position: sticky; top: 140px; }
}
#fdb-v2-builder .fdb-v2-preview-section { padding: 24px; background: #f3f4f4; min-width: 0; }
#fdb-v2-builder .fdb-v2-preview-section h3 { margin: 0 0 24px; font-size: 16px; font-weight: 600; }
#fdb-v2-builder .fdb-v2-preview { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
#fdb-v2-builder .fdb-v2-preview-layer { display: block; width: 100%; height: auto; }
#fdb-v2-preview-door { position: relative; z-index: 1; }
#fdb-v2-preview-frame, #fdb-v2-preview-backing, #fdb-v2-preview-glass { position: absolute; top: 0; left: 0; pointer-events: none; }
#fdb-v2-preview-frame { z-index: 2; }
#fdb-v2-preview-backing { z-index: 3; }
#fdb-v2-preview-glass { z-index: 4; }
#fdb-v2-builder .fdb-v2-preview-placeholder { display: grid; place-items: center; min-height: 340px; padding: 30px; text-align: center; color: #60666b; }
#fdb-v2-builder [hidden] { display: none !important; }
#fdb-v2-builder .fdb-v2-controls { min-width: 0; }
#fdb-v2-builder .fdb-v2-section { margin: 0; padding: 0; border-bottom: 1px solid var(--fdb-line); }
#fdb-v2-builder .fdb-v2-section > h3 { margin: 0; padding: 0; }
#fdb-v2-builder button { border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: normal; font-family: inherit; }
#fdb-v2-builder .fdb-v2-step-heading {
    display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 20px 0;
    border: 0; background: transparent; color: var(--fdb-ink); text-align: left;
    font-size: 16px; line-height: 1.4; white-space: normal; cursor: pointer;
}
#fdb-v2-builder .fdb-v2-step-heading:disabled { opacity: 1; color: #81868b; cursor: not-allowed; }
#fdb-v2-builder .fdb-v2-step-number { font-size: 12px; color: #777; min-width: 24px; }
#fdb-v2-builder .fdb-v2-step-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; font-weight: 600; }
#fdb-v2-builder .fdb-v2-step-summary { color: #697077; font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
#fdb-v2-builder .fdb-v2-step-indicator { font-size: 20px; width: 24px; flex-shrink: 0; text-align: center; }
#fdb-v2-builder .is-complete .fdb-v2-step-number,
#fdb-v2-builder .is-complete .fdb-v2-step-indicator { color: var(--fdb-accent); }
#fdb-v2-builder .fdb-v2-step-panel { padding: 4px 0 24px; }
#fdb-v2-builder .fdb-v2-status,
#fdb-v2-builder [role="status"] { margin-bottom: 16px; font-size: 14px; color: #697077; }
#fdb-v2-builder .fdb-v2-options {
    --fdb-image-height: var(--fdb-medium);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 18px 12px; align-items: start;
}
#fdb-v2-builder .fdb-v2-frame-types,
#fdb-v2-builder .fdb-v2-door-styles {
    --fdb-image-height: var(--fdb-large);
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
#fdb-v2-builder .fdb-v2-door-colours,
#fdb-v2-builder .fdb-v2-frame-colours {
    --fdb-image-height: var(--fdb-small);
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 18px 10px;
}
#fdb-v2-builder .fdb-v2-option {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 9px; min-width: 0; width: 100%; height: auto; margin: 0; padding: 8px 5px;
    border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--fdb-ink);
    font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; text-align: center; cursor: pointer;
}
#fdb-v2-builder .fdb-v2-option img {
    display: block; flex-shrink: 0; width: 100%; max-width: 100%; height: var(--fdb-image-height);
    margin: 0; padding: 0; border-radius: 0; object-fit: contain;
}
#fdb-v2-builder .fdb-v2-door-colour img,
#fdb-v2-builder .fdb-v2-frame-colour img { width: var(--fdb-small); }
#fdb-v2-builder .fdb-v2-option span { display: block; width: 100%; overflow-wrap: anywhere; }
#fdb-v2-builder .fdb-v2-option:hover { border-color: #b8bdc0; background: #fafafa; }
#fdb-v2-builder .fdb-v2-option.is-selected { border-color: var(--fdb-accent); background: #fff; box-shadow: inset 0 0 0 1px var(--fdb-accent); }
#fdb-v2-builder button:focus-visible { outline: 2px solid var(--fdb-accent); outline-offset: 3px; }
#fdb-v2-builder .fdb-v2-step-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 26px; }
#fdb-v2-builder .fdb-v2-step-nav button { padding: 11px 24px; font-size: 14px; line-height: 1.4; cursor: pointer; }
#fdb-v2-builder .fdb-v2-next { margin-left: auto; background: var(--fdb-accent); color: #fff; border: 1px solid var(--fdb-accent); }
#fdb-v2-builder .fdb-v2-next:disabled { background: #eee; border-color: #eee; color: #888; cursor: not-allowed; }
#fdb-v2-builder .fdb-v2-back { background: #fff; border: 1px solid var(--fdb-line); color: var(--fdb-ink); }
#fdb-v2-builder #fdb-v2-backing-section { margin-top: 24px; }

/* Side assets are pre-positioned on the same canvas; never mirror them. */
#fdb-v2-preview-panel-left, #fdb-v2-preview-panel-right {
    position: absolute; top: 0; left: 0; z-index: 6; pointer-events: none;
}
#fdb-v2-builder .fdb-v2-panel-side { margin: 20px 0; }
#fdb-v2-builder .fdb-v2-panel-side h4 { font-size: 15px; margin: 0 0 12px; }
#fdb-v2-builder .fdb-v2-panel-designs { --fdb-image-height: var(--fdb-large); margin: 16px 0; }
#fdb-v2-builder .fdb-v2-panel-note { font-size: 12px; color: #697077; }
#fdb-v2-builder .fdb-v2-panel-warning { padding: 12px; border-left: 3px solid var(--fdb-accent); background: #fff5f5; }

/* Side-panel tiers keep legible images without a long page of designs. */
#fdb-v2-builder .fdb-v2-scroller { min-width: 0; max-width: 100%; margin: 18px 0; }
#fdb-v2-builder .fdb-v2-scroller-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#fdb-v2-builder .fdb-v2-scroller-bar h5 { margin: 0 auto 0 0; }
#fdb-v2-builder .fdb-v2-scroller-bar button { border: 1px solid #aaa; border-radius: 0; background: white; color: #333; padding: 6px 10px; font-size: 14px; }
#fdb-v2-builder .fdb-v2-scroller-bar button:disabled { opacity: .35; }
#fdb-v2-builder .fdb-v2-scroll-row { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px; padding: 3px 3px 12px; scroll-snap-type: x proximity; }
#fdb-v2-builder .fdb-v2-scroll-row > .fdb-v2-option { flex: 0 0 130px; width: 130px; scroll-snap-align: start; }
#fdb-v2-builder .fdb-v2-panel-glass .fdb-v2-option img { width: 100%; height: 120px; object-fit: contain; }
#fdb-v2-builder .fdb-v2-scroll-row.is-expanded { flex-wrap: wrap; overflow: visible; }
#fdb-v2-preview-panel-glass-left, #fdb-v2-preview-panel-glass-right { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 5; pointer-events: none; }

#fdb-v2-builder .fdb-v2-cart-button { display: block; width: 100%; margin-top: 16px; padding: 14px 20px; background: #ad1c2c; color: #fff; border: 0; border-radius: 0; font-weight: 600; }
#fdb-v2-builder .fdb-v2-cart-button:disabled { opacity: .65; cursor: wait; }
#fdb-v2-cart-status { max-width: 360px; font-size: 14px; line-height: 1.5; }

/* Stable desktop columns and canvas: frame dimensions never resize the options column. */
@media (min-width: 1000px) {
    #fdb-v2-builder:not(.fdb-v2-touch) .fdb-v2-layout { grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); }
    #fdb-v2-builder:not(.fdb-v2-touch) .fdb-v2-preview { width: 100%; max-width: none; height: 50vh; }
    #fdb-v2-builder:not(.fdb-v2-touch) #fdb-v2-preview-door { height: 100%; width: 100%; max-width: none; object-fit: contain; }
    #fdb-v2-builder .fdb-v2-preview > img:not(#fdb-v2-preview-door) {
        width: 100%; height: 100%; max-width: none; object-fit: contain;
    }
    #fdb-v2-builder .fdb-v2-preview-placeholder { min-width: 240px; min-height: 50vh; }
}

/* Keep the desktop preview in view for the height of the builder. */
@media (min-width: 1000px) {
    #fdb-v2-builder,
    #fdb-v2-builder .fdb-v2-layout { overflow: visible; }
    #fdb-v2-builder #fdb-v2-preview-section {
        position: sticky !important;
        top: 140px;
        align-self: start;
        height: fit-content;
    }
}

/* Side tabs and three distinct option tiers. */
#fdb-v2-builder .fdb-v2-side-tabs { display:flex; gap:8px; margin:18px 0; }
#fdb-v2-builder .fdb-v2-side-tabs button { flex:1; padding:14px 12px; background:#fff; color:var(--fdb-ink); border:1px solid var(--fdb-line); text-align:left; }
#fdb-v2-builder .fdb-v2-side-tabs button[aria-selected="true"] { background:#faf0f1; border-bottom:3px solid var(--fdb-accent); }
#fdb-v2-builder .fdb-v2-side-tabs strong { display:block; font-size:14px; text-transform:uppercase; }
#fdb-v2-builder .fdb-v2-side-tabs span { display:block; font-size:12px; margin-top:6px; }
#fdb-v2-builder .fdb-v2-editing-side { font-size:16px; margin:18px 0; }
#fdb-v2-builder .fdb-v2-panel-side > h5,
#fdb-v2-builder .fdb-v2-panel-side .fdb-v2-scroller { border-top:1px solid var(--fdb-line); padding-top:16px; }
#fdb-v2-builder .fdb-v2-panel-types { grid-template-columns:repeat(4,minmax(0,1fr)); --fdb-image-height:80px; }
#fdb-v2-builder .fdb-v2-panel-designs { --fdb-image-height:115px; }
#fdb-v2-builder .fdb-v2-panel-glass > .fdb-v2-option { flex-basis:76px; width:76px; }
#fdb-v2-builder #fdb-v2-top-glass-options .fdb-v2-option img,
#fdb-v2-builder .fdb-v2-panel-glass .fdb-v2-option img { width:48px; height:48px; object-fit:contain; }
#fdb-v2-builder .fdb-v2-other-side { display:block; margin:20px 0 0 auto; padding:12px 18px; background:var(--fdb-accent); color:white; border:0; font-size:14px; }
#fdb-v2-builder .fdb-v2-other-side:disabled { background:#eee; color:#888; }

#fdb-v2-builder .fdb-v2-view-switch { display:flex; justify-content:center; gap:8px; }
#fdb-v2-builder .fdb-v2-view-switch button { padding:8px 14px; border:1px solid #ccc; background:white; color:var(--fdb-ink); font-size:14px; }
#fdb-v2-builder .fdb-v2-view-switch button[aria-pressed="true"] { background:var(--fdb-accent); color:white; border-color:var(--fdb-accent); }
#fdb-v2-builder #fdb-v2-view-label { text-align:center; font-size:12px; }
#fdb-v2-builder #fdb-v2-interior-door-colours img,
#fdb-v2-builder #fdb-v2-interior-frame-colours img { width:48px; height:48px; }

#fdb-v2-builder .fdb-v2-colour-tabs { display:flex; gap:8px; margin:12px 0; }
#fdb-v2-builder .fdb-v2-colour-tabs button { flex:1; padding:10px; border:1px solid #ccc; background:white; color:var(--fdb-ink); font-size:14px; }
#fdb-v2-builder .fdb-v2-colour-tabs button[aria-selected="true"] { background:var(--fdb-accent); border-color:var(--fdb-accent); color:white; }

/* Hardware overlays share the door canvas dimensions. */
#fdb-v2-builder #fdb-v2-preview-handle { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; }
#fdb-v2-builder #fdb-v2-handle-styles img,
#fdb-v2-builder #fdb-v2-handle-colours img { height: var(--fdb-medium); width: auto; max-width: 100%; object-fit: contain; }


#fdb-v2-builder #fdb-v2-preview-letterplate, #fdb-v2-builder #fdb-v2-preview-knob { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 8; pointer-events: none; }

/* Compact selection thumbnails make completed steps easy to recognise. */
#fdb-v2-builder .fdb-v2-step-toolbar { display:flex; justify-content:flex-end; margin-bottom:12px; }
#fdb-v2-builder .fdb-v2-expand-completed { padding:10px 14px; border:1px solid var(--fdb-line); background:#fff; color:var(--fdb-ink); font-size:13px; cursor:pointer; }
#fdb-v2-builder .fdb-v2-expand-completed:disabled { opacity:.5; cursor:not-allowed; }
#fdb-v2-builder .fdb-v2-step-thumbs { display:flex; flex-wrap:wrap; gap:12px; margin:4px 0; }
#fdb-v2-builder .fdb-v2-step-thumb { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:400; }
#fdb-v2-builder .fdb-v2-step-thumb img { display:block; width:36px; height:42px; max-width:36px; object-fit:contain; background:#fff; border:1px solid var(--fdb-line); padding:2px; }

/* Compact review headers: image beside text, with a separate completion mark. */
#fdb-v2-builder .fdb-v2-step-heading { padding:12px 14px; min-height:76px; gap:12px; }
#fdb-v2-builder .fdb-v2-step-thumbs { flex:0 0 auto; flex-wrap:nowrap; gap:8px; margin:0; }
#fdb-v2-builder .fdb-v2-step-thumb { flex-direction:column; gap:3px; line-height:1.2; }
#fdb-v2-builder .fdb-v2-step-thumb img { width:36px; height:42px; }
#fdb-v2-builder .fdb-v2-step-action { font-size:12px; font-weight:500; color:var(--fdb-accent); }
#fdb-v2-builder .fdb-v2-step-chevron { font-size:20px; color:var(--fdb-accent); }
#fdb-v2-builder .fdb-v2-step-heading:disabled .fdb-v2-step-action,
#fdb-v2-builder .fdb-v2-step-heading:disabled .fdb-v2-step-chevron { color:#81868b; }
#fdb-v2-builder .is-complete .fdb-v2-step-indicator {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%; background:#23834b; color:#fff; font-size:15px;
}
#fdb-v2-builder .is-current > h3 { background:#faf0f1; box-shadow:inset 3px 0 var(--fdb-accent); }
#fdb-v2-builder .fdb-v2-step-panel { padding:14px 14px 24px; }

/* A strong selected tab and an explicit label identify the side being edited. */
#fdb-v2-builder .fdb-v2-view-switch,
#fdb-v2-builder .fdb-v2-colour-tabs { gap:0; padding:4px; background:#e5e7e9; border:1px solid #c7cbce; }
#fdb-v2-builder .fdb-v2-view-switch button,
#fdb-v2-builder .fdb-v2-colour-tabs button { flex:1; background:transparent; border:2px solid transparent; color:#444b50; padding:11px 14px; font-weight:600; }
#fdb-v2-builder .fdb-v2-view-switch button[aria-pressed="true"],
#fdb-v2-builder .fdb-v2-colour-tabs button[aria-selected="true"] {
    background:var(--fdb-accent); border-color:var(--fdb-accent); color:#fff;
}
#fdb-v2-builder .fdb-v2-view-switch button[aria-pressed="true"]::before,
#fdb-v2-builder .fdb-v2-colour-tabs button[aria-selected="true"]::before { content:'✓ '; }
/* The selected tab communicates the view; retain the label for screen readers. */
#fdb-v2-builder #fdb-v2-view-label {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Item amounts are optional; the live supply-only total is always visible. */
#fdb-v2-builder .fdb-v2-section-price { font-size:12px; font-weight:600; color:#454d53; white-space:nowrap; margin-left:6px; }
#fdb-v2-builder .fdb-v2-live-price { display:flex; flex-direction:column; gap:6px; margin-top:20px; padding-top:16px; border-top:1px solid #ccd0d2; max-width:100%; }
#fdb-v2-builder .fdb-v2-live-price strong { font-size:24px; color:var(--fdb-ink); }
#fdb-v2-builder .fdb-v2-live-price span { font-size:13px; }
#fdb-v2-builder .fdb-v2-live-price small { font-size:11px; max-width:320px; color:#697077; }

/* Saved progress and the enquiry route share the existing square-edged controls. */
#fdb-v2-builder .fdb-v2-design-tools { margin: 0 0 24px; padding: 18px; border: 1px solid #ddd; }
#fdb-v2-builder .fdb-v2-design-tools summary { cursor: pointer; font-weight: 600; }
#fdb-v2-saved-designs { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; }
#fdb-v2-builder .fdb-v2-saved-card { flex: 0 0 220px; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; padding: 10px; border: 1px solid #ddd; }
#fdb-v2-builder .fdb-v2-saved-card img { width: 44px; height: 64px; object-fit: contain; }
#fdb-v2-builder .fdb-v2-saved-card span { font-size: 13px; }
#fdb-v2-builder .fdb-v2-design-tools button { border-radius: 0; font-size: 13px; padding: 8px 12px; }
#fdb-v2-builder .fdb-v2-save-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
#fdb-v2-design-name { max-width: 320px; }
#fdb-v2-builder .fdb-v2-quote-button { display: block; width: 100%; margin-top: 16px; padding: 14px; border-radius: 0; border: 1px solid #ad1c2c; background: #ad1c2c; color: white; font-weight: 600; }
#fdb-v2-builder .fdb-v2-cart-button { background: white; color: #ad1c2c; border: 1px solid #ad1c2c; }
#fdb-v2-quote-form { max-width: 360px; margin-top: 16px; }
#fdb-v2-quote-form label { display: block; margin: 10px 0; font-size: 14px; }
#fdb-v2-quote-form input, #fdb-v2-quote-form textarea { display: block; width: 100%; border-radius: 0; }
#fdb-v2-builder .fdb-v2-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#fdb-v2-quote-status, #fdb-v2-design-status { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }

#fdb-v2-builder .fdb-v2-glass-tabs { display:flex; gap:8px; margin:0 0 16px; }
#fdb-v2-builder .fdb-v2-glass-tabs button { flex:1; min-height:44px; padding:10px; border:1px solid #777; background:#f4f4f4; color:#30363a; font-size:14px; }
#fdb-v2-builder .fdb-v2-glass-tabs button[aria-selected="true"] { background:#494f53; color:white; }
#fdb-v2-builder .fdb-v2-glass-tabs button:disabled { opacity:.4; cursor:not-allowed; }

#fdb-v2-builder .fdb-v2-install-choices, #fdb-v2-builder .fdb-v2-postcode-row { display:flex; gap:10px; margin:14px 0; flex-wrap:wrap; }
#fdb-v2-builder .fdb-v2-install-choices button, #fdb-v2-builder .fdb-v2-postcode-row button { min-height:44px; padding:10px 16px; background:#fff; color:#30363a; border:1px solid #999; }
#fdb-v2-builder .fdb-v2-install-choices button[aria-pressed="true"] { color:white; background:var(--fdb-accent); border-color:var(--fdb-accent); }
#fdb-v2-builder .fdb-v2-postcode-row input { width:150px; min-height:44px; font-size:16px; text-transform:uppercase; }

/* Door colour tiers share the responsive swatch grid. */
#fdb-v2-builder .fdb-v2-colour-group-heading { grid-column: 1 / -1; margin: 12px 0 0; padding: 10px 0 4px; border-top: 1px solid #d9dcdf; font-size: 16px; font-weight: 600; color: #30363b; }
#fdb-v2-builder .fdb-v2-colour-group-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Compact frame choices; retain text for assistive technology and selected-step summaries. */
#fdb-v2-builder .fdb-v2-frame-types {
    --fdb-image-height: calc(var(--fdb-large) * .75);
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
#fdb-v2-builder .fdb-v2-frame-type { position: relative; gap: 0; }
#fdb-v2-builder .fdb-v2-frame-type > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Local house-photo fitting window, available on desktop and touch layouts. */
.fdb-v2-house-dialog { box-sizing:border-box; width:min(1100px,96vw); max-height:94dvh; padding:20px; border:0; border-radius:12px; overflow:auto; color:#24282b; background:#fff; }
.fdb-v2-house-dialog::backdrop { background:rgba(0,0,0,.7); }
.fdb-v2-house-dialog h2 { margin:0 0 12px; font-size:24px; }
.fdb-v2-house-controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.fdb-v2-house-controls button, .fdb-v2-house-controls select { min-height:44px; padding:8px 12px; }
.fdb-v2-house-dialog canvas { display:block; width:100%; height:auto; touch-action:none; }
.fdb-v2-house-dialog canvas:focus-visible { outline:3px solid #ad1c2c; outline-offset:2px; }

/* Loading covers sit over the full canvas without changing its dimensions. */
#fdb-v2-builder .fdb-v2-preview-loading {
    position:absolute; inset:0; z-index:50; display:flex;
    align-items:center; justify-content:center; gap:12px;
    background:rgba(232,235,237,.88); color:#343a40;
    font-size:15px; font-weight:600; text-align:center; padding:16px;
}
#fdb-v2-builder .fdb-v2-preview-loading[hidden] { display:none; }
.fdb-v2-loading-spinner {
    display:inline-block; width:22px; height:22px; flex:0 0 22px;
    border:3px solid #c8cdd1; border-top-color:#a91d2b;
    border-radius:50%; animation:fdb-v2-loading-spin .8s linear infinite;
}
@keyframes fdb-v2-loading-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
    .fdb-v2-loading-spinner { animation:none; }
}

/* One compact row; saved favourites and the name field open on demand. */
#fdb-v2-builder .fdb-v2-design-tools { padding:12px 16px; margin:0 0 20px; background:#eef0f1; border:0; border-bottom:1px solid #cdd2d5; }
#fdb-v2-builder .fdb-v2-design-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
#fdb-v2-builder .fdb-v2-design-toolbar h2 { margin:0 auto 0 0; font-size:20px; line-height:1.3; }
#fdb-v2-builder .fdb-v2-design-tools button { min-height:44px; padding:8px 12px; background:#fff; color:var(--fdb-ink); border:1px solid #cdd2d5; font-size:13px; line-height:1.3; white-space:normal; }
#fdb-v2-builder #fdb-v2-open-save, #fdb-v2-builder #fdb-v2-save-design { background:var(--fdb-accent); border-color:var(--fdb-accent); color:#fff; }
#fdb-v2-builder #fdb-v2-resume-previous { display:flex; align-items:center; gap:8px; }
#fdb-v2-resume-previous img { width:20px; height:30px; object-fit:contain; }
#fdb-v2-builder #fdb-v2-toolbar-steps .fdb-v2-step-toolbar { margin:0; }
#fdb-v2-design-status:empty, #fdb-v2-design-dialog-status:empty { display:none; }
#fdb-v2-design-status { margin:8px 0 0; }
#fdb-v2-design-dialog { width:min(560px, calc(100vw - 24px)); max-height:85dvh; overflow:auto; padding:20px; border:1px solid #cdd2d5; border-radius:8px; color:var(--fdb-ink); background:#fff; }
#fdb-v2-design-dialog::backdrop { background:rgba(0,0,0,.45); }
#fdb-v2-builder .fdb-v2-design-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#fdb-v2-builder .fdb-v2-design-dialog-header h2 { font-size:20px; margin:0; }
#fdb-v2-saved-designs { display:grid; gap:10px; overflow:visible; }
#fdb-v2-builder .fdb-v2-saved-card { grid-template-columns:40px minmax(0,1fr) auto auto; gap:8px; }
#fdb-v2-builder .fdb-v2-saved-card img { width:32px; height:48px; }
#fdb-v2-builder .fdb-v2-saved-card span { grid-column:2; overflow-wrap:anywhere; }
#fdb-v2-builder .fdb-v2-save-row { display:grid; gap:12px; }
#fdb-v2-design-name { width:100%; max-width:none; box-sizing:border-box; }
@media (max-width:480px) {
    #fdb-v2-builder .fdb-v2-saved-card { grid-template-columns:36px minmax(0,1fr); }
    #fdb-v2-builder .fdb-v2-saved-card button { grid-row:2; }
}

/* Neutral review headers; only the section being edited is green. */
#fdb-v2-builder .is-current > h3 { background:#f4f5f5; box-shadow:none; }
#fdb-v2-builder .fdb-v2-step-number,
#fdb-v2-builder .fdb-v2-step-action,
#fdb-v2-builder .fdb-v2-step-chevron { color:#596168; }
#fdb-v2-builder .is-active > h3 { background:#eaf5ed; box-shadow:inset 3px 0 #23834b; }
#fdb-v2-builder .is-active .fdb-v2-step-number,
#fdb-v2-builder .is-active .fdb-v2-step-action,
#fdb-v2-builder .is-active .fdb-v2-step-chevron { color:#1d7040; }

/* Keep options together instead of stretching small thumbnails across each row. */
#fdb-v2-builder .fdb-v2-options { grid-template-columns:repeat(auto-fill, minmax(0, 100px)); gap:10px 8px; justify-content:start; }
#fdb-v2-builder .fdb-v2-frame-types { grid-template-columns:repeat(auto-fill, minmax(0, 84px)); }
#fdb-v2-builder .fdb-v2-door-styles { --fdb-image-height:135px; grid-template-columns:repeat(auto-fill, minmax(0, 90px)); }
#fdb-v2-builder .fdb-v2-door-colours,
#fdb-v2-builder .fdb-v2-frame-colours { grid-template-columns:repeat(auto-fill, minmax(0, 66px)); gap:10px 6px; }
#fdb-v2-builder .fdb-v2-option { gap:5px; padding:5px 3px; min-height:44px; }
#fdb-v2-builder .fdb-v2-step-panel { padding:12px 12px 16px; }
#fdb-v2-builder .fdb-v2-step-nav { margin-top:16px; }
#fdb-v2-builder .fdb-v2-scroll-row { gap:8px; }

/* Linked side panels: compact cards identify the physical side and completion. */
#fdb-v2-builder .fdb-v2-panel-links { display:flex; flex-wrap:wrap; gap:12px 24px; margin:0 0 12px; padding:12px; background:#eef4ef; }
#fdb-v2-builder .fdb-v2-panel-links label { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; min-height:32px; cursor:pointer; }
#fdb-v2-builder .fdb-v2-panel-links input { width:20px; height:20px; accent-color:#23834b; }
#fdb-v2-builder .fdb-v2-side-tabs { gap:8px; }
#fdb-v2-builder .fdb-v2-side-tabs button { position:relative; display:grid; grid-template-columns:36px minmax(0,1fr) 22px; grid-template-rows:auto auto; align-items:center; column-gap:8px; padding:10px; border:1px solid #d7dcda; background:#fff; min-width:0; }
#fdb-v2-builder .fdb-v2-side-tabs button[aria-selected="true"] { background:#eaf5ed; border-color:#23834b; box-shadow:inset 0 -3px #23834b; }
#fdb-v2-builder .fdb-v2-side-tabs img { grid-column:1; grid-row:1 / 3; width:36px; height:48px; object-fit:contain; }
#fdb-v2-builder .fdb-v2-side-tabs strong { grid-column:2; font-size:14px; }
#fdb-v2-builder .fdb-v2-side-tabs span:not(.fdb-v2-panel-tick) { grid-column:2; font-size:12px; overflow-wrap:anywhere; }
#fdb-v2-builder .fdb-v2-side-tabs .fdb-v2-panel-tick { grid-column:3; grid-row:1 / 3; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#23834b; color:white; }
#fdb-v2-builder .fdb-v2-editing-side { margin:12px 0; font-size:15px; color:#1d7040; }
#fdb-v2-builder .fdb-v2-panel-side { margin:12px 0; }
#fdb-v2-builder .fdb-v2-panel-side h5 { font-size:16px; margin:8px 0; }
#fdb-v2-builder .fdb-v2-panel-side [role="status"]:empty,
#fdb-v2-builder #fdb-v2-panel-status:empty { display:none; }
#fdb-v2-builder .fdb-v2-needs-other-panel > .fdb-v2-step-panel > .fdb-v2-step-nav .fdb-v2-next { display:none; }

#fdb-v2-preview-top-glass { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:5; pointer-events:none; }

/* Compact toolbar disclosures. */
.fdb-v2-design-toolbar details { position:relative; }
.fdb-v2-design-toolbar summary, #fdb-v2-install-summary {
    cursor:pointer; padding:10px 12px; border:1px solid #cbd0d3; border-radius:4px;
    list-style:none; min-height:44px; font-size:14px; background:white;
}
.fdb-v2-install-dropdown, .fdb-v2-design-menu-items {
    position:absolute; top:calc(100% + 6px); right:0; z-index:100;
    width:340px; max-width:calc(100vw - 24px); background:white; border:1px solid #cbd0d3;
    border-radius:6px; padding:16px; box-shadow:0 8px 25px #0002;
}
.fdb-v2-design-menu-items { width:200px; display:grid; gap:6px; }
.fdb-v2-install-dropdown input { width:100%; min-width:0; }
.fdb-v2-install-dropdown .fdb-v2-postcode-row { display:flex; gap:6px; }
.fdb-v2-install-required > summary { animation:fdb-install-pulse 2.4s ease-in-out infinite; }
@keyframes fdb-install-pulse { 50% { background:#e0f3e6; box-shadow:0 0 0 3px #23834b35; } }
@media(prefers-reduced-motion:reduce) { .fdb-v2-install-required > summary { animation:none; background:#e0f3e6; } }
#fdb-v2-builder[data-install-ready="false"] .fdb-v2-controls { opacity:.45; }
#fdb-v2-builder .fdb-v2-house-button svg { vertical-align:middle; flex-shrink:0; }
#fdb-v2-builder.fdb-v2-touch .fdb-v2-touch-top.fdb-v2-has-install {
    grid-template-columns:auto minmax(0,1fr) auto auto; gap:4px; padding:6px;
}
#fdb-v2-builder.fdb-v2-touch #fdb-v2-install-toolbar { min-width:0; }
#fdb-v2-builder.fdb-v2-touch #fdb-v2-install-summary { font-size:11px; padding:8px 6px; }
#fdb-v2-builder.fdb-v2-touch .fdb-v2-install-dropdown {
    position:fixed; top:65px; left:8px; right:8px; width:auto;
    max-height:calc(var(--fdb-touch-height,100dvh) - 85px); overflow:auto; z-index:110;
}

#fdb-v2-builder #fdb-v2-install-toolbar .fdb-v2-install-choices {
    display:grid; grid-template-columns:1fr;
}
#fdb-v2-builder #fdb-v2-install-toolbar [data-fdb-install="fitted"] {
    font-weight:700; min-height:52px; border:2px solid #23834b; color:#176336; background:#eef8f1;
}
#fdb-v2-builder #fdb-v2-install-toolbar [data-fdb-install="fitted"][aria-pressed="true"] {
    background:#23834b; color:white;
}
#fdb-v2-builder #fdb-v2-install-toolbar [data-fdb-install="supply_only"] {
    min-height:44px; font-size:13px; border-color:#b8c0c3;
}
#fdb-v2-builder .fdb-v2-install-required > summary {
    border-color:#23834b; color:#176336; font-weight:600;
}

/* Installation is the first builder card, rather than a toolbar dropdown. */
#fdb-v2-builder .fdb-v2-options-column { min-width:0; }
#fdb-v2-builder .fdb-v2-install-first {
    border:1px solid #80bd96; border-radius:6px; background:#f3faf5; margin-bottom:18px;
}
#fdb-v2-builder .fdb-v2-install-first > summary {
    display:flex; align-items:center; gap:14px; padding:18px; border:0;
    background:transparent; color:#25342b; font-size:20px; font-weight:700; animation:none;
}
#fdb-v2-builder .fdb-v2-install-number {
    display:grid; place-items:center; background:#23834b; color:white;
    border-radius:50%; width:42px; height:42px; flex-shrink:0; font-size:18px;
}
#fdb-v2-builder .fdb-v2-install-edit { margin-left:auto; flex-shrink:0; }
#fdb-v2-builder .fdb-v2-install-first .fdb-v2-install-dropdown {
    position:static; width:auto; max-width:none; border:0; box-shadow:none;
    padding:0 20px 20px; background:transparent;
}
#fdb-v2-builder .fdb-v2-install-first .fdb-v2-install-choices button {
    display:flex; align-items:center; gap:14px; width:100%; text-align:left;
    padding:16px; border-radius:5px;
}
#fdb-v2-builder .fdb-v2-install-choices small { display:block; font-size:13px; font-weight:400; margin-top:4px; }
#fdb-v2-builder .fdb-v2-install-choices svg { flex-shrink:0; }
#fdb-v2-builder .fdb-v2-install-radio { margin-left:auto; width:20px; height:20px; border:2px solid currentColor; border-radius:50%; flex-shrink:0; }
#fdb-v2-builder [aria-pressed="true"] .fdb-v2-install-radio { background:currentColor; box-shadow:inset 0 0 0 3px #fff; }
#fdb-v2-builder #fdb-v2-install-confirm { width:100%; min-height:48px; background:#23834b; color:white; border:0; border-radius:5px; font-weight:600; }
#fdb-v2-builder #fdb-v2-install-confirm:disabled { opacity:.45; }
#fdb-v2-builder.fdb-v2-touch #fdb-v2-install-toolbar { display:none; }
#fdb-v2-builder.fdb-v2-touch.fdb-v2-install-screen { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
#fdb-v2-builder.fdb-v2-touch.fdb-v2-install-screen > .fdb-v2-layout,
#fdb-v2-builder.fdb-v2-touch.fdb-v2-install-screen > .fdb-v2-touch-drawer,
#fdb-v2-builder.fdb-v2-touch.fdb-v2-install-screen > .fdb-v2-touch-footer { display:none; }
#fdb-v2-builder.fdb-v2-touch.fdb-v2-install-screen #fdb-v2-install-toolbar {
    display:block; grid-row:2; grid-column:1; overflow:auto; min-height:0;
    margin:8px; overscroll-behavior:contain;
}
#fdb-v2-builder.fdb-v2-touch .fdb-v2-install-first .fdb-v2-install-dropdown {
    position:static; max-height:none; padding:0 14px calc(20px + env(safe-area-inset-bottom));
}
#fdb-v2-builder.fdb-v2-touch .fdb-v2-install-first > summary { padding:14px; font-size:18px; }

/* Consistent cards and selection states across builder steps. */
#fdb-v2-builder .fdb-v2-section {
    border:1px solid #d9e1dc; border-radius:6px; background:#fafcfb; margin-bottom:14px;
}
#fdb-v2-builder .fdb-v2-section.is-active {
    border-color:#80bd96; background:#f3faf5;
}
#fdb-v2-builder .fdb-v2-section > h3 { border-radius:5px 5px 0 0; }
#fdb-v2-builder .fdb-v2-step-heading { padding:14px 16px; }
#fdb-v2-builder .fdb-v2-step-heading .fdb-v2-step-number {
    display:grid; place-items:center; width:38px; height:38px; min-width:38px;
    border-radius:50%; background:#23834b; color:white; font-size:16px; font-weight:700;
}
#fdb-v2-builder .fdb-v2-step-heading:disabled .fdb-v2-step-number { background:#aeb7bd; }
#fdb-v2-builder .fdb-v2-step-heading:disabled { background:#f1f3f4; }
#fdb-v2-builder .fdb-v2-step-text > span:first-child { font-weight:700; }
#fdb-v2-builder .fdb-v2-step-panel { padding:12px 16px 16px; }
#fdb-v2-builder .fdb-v2-option {
    position:relative; border:1px solid #d9dfe2; border-radius:4px; background:white;
}
#fdb-v2-builder .fdb-v2-option.is-selected {
    border-color:#23834b; box-shadow:inset 0 0 0 1px #23834b; background:white;
}
#fdb-v2-builder .fdb-v2-option.is-selected::after {
    content:'✓'; position:absolute; top:2px; right:2px; display:grid; place-items:center;
    width:18px; height:18px; border-radius:50%; background:#23834b; color:white; font-size:12px;
}
#fdb-v2-builder .fdb-v2-option:disabled { border-color:#c6cdd0; opacity:.5; }
#fdb-v2-builder .fdb-v2-next { background:var(--fdb-accent); color:white; border-color:var(--fdb-accent); border-radius:4px; }
#fdb-v2-builder .is-complete .fdb-v2-next:not(:disabled) { background:#23834b; border-color:#23834b; }
#fdb-v2-builder .fdb-v2-option:focus-visible,
#fdb-v2-builder .fdb-v2-step-heading:focus-visible,
#fdb-v2-builder .fdb-v2-next:focus-visible { outline:3px solid #253c51; outline-offset:3px; }

/* Three image sizes; equal-height cards with room for full labels. */
#fdb-v2-builder .fdb-v2-options,
#fdb-v2-builder .fdb-v2-scroll-row {
    --fdb-image-height:80px; --fdb-card-width:104px; align-items:stretch; gap:10px 8px;
}
#fdb-v2-builder .fdb-v2-options {
    grid-template-columns:repeat(auto-fill,minmax(0,var(--fdb-card-width))); grid-auto-rows:auto;
}
#fdb-v2-builder :is(.fdb-v2-door-styles,.fdb-v2-frame-types,.fdb-v2-panel-types,.fdb-v2-panel-designs) {
    --fdb-image-height:120px; --fdb-card-width:104px;
}
#fdb-v2-builder :is(.fdb-v2-door-colours,.fdb-v2-frame-colours,.fdb-v2-panel-glass,
#fdb-v2-interior-door-colours,#fdb-v2-interior-frame-colours,#fdb-v2-glass-options,
#fdb-v2-backing-options,#fdb-v2-top-glass-options,#fdb-v2-hardware-finishes) {
    --fdb-image-height:48px; --fdb-card-width:68px;
}
#fdb-v2-builder .fdb-v2-options .fdb-v2-option,
#fdb-v2-builder .fdb-v2-scroll-row .fdb-v2-option {
    align-self:stretch; height:auto; font-size:11px; line-height:1.35; padding:5px 4px; gap:4px;
}
#fdb-v2-builder .fdb-v2-scroll-row > .fdb-v2-option {
    flex:0 0 var(--fdb-card-width); width:var(--fdb-card-width);
}
#fdb-v2-builder .fdb-v2-options .fdb-v2-option img,
#fdb-v2-builder .fdb-v2-scroll-row .fdb-v2-option img,
#fdb-v2-builder .fdb-v2-option .fdb-v2-none-icon {
    width:100%; max-width:100%; height:var(--fdb-image-height); object-fit:contain; flex-shrink:0;
}
#fdb-v2-builder .fdb-v2-option .fdb-v2-none-icon { color:#929da4; padding:12px; }
#fdb-v2-builder .fdb-v2-option > span:last-child {
    min-height:0; white-space:normal; overflow:visible; text-overflow:clip;
}
#fdb-v2-builder .fdb-v2-scroll-row.is-expanded {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(0,var(--fdb-card-width))); grid-auto-rows:auto;
}
#fdb-v2-builder .fdb-v2-scroll-row.is-expanded > .fdb-v2-option { width:100%; }

/* Content-sized heading rows and compact section spacing. Cards stretch only
   to the longest label in their own row, without reserving blank text lines. */
#fdb-v2-builder .fdb-v2-colour-group-heading {
    margin:6px 0 0; padding:8px 0 2px; line-height:1.3; align-self:start;
}
#fdb-v2-builder .fdb-v2-colour-group-heading:first-child { margin-top:0; padding-top:0; }
#fdb-v2-builder .fdb-v2-step-panel { padding:10px 12px 12px; }
#fdb-v2-builder .fdb-v2-step-panel > p,
#fdb-v2-builder .fdb-v2-step-panel > div > p { margin:6px 0 10px; }
#fdb-v2-builder .fdb-v2-step-nav { margin-top:14px; }
#fdb-v2-builder .fdb-v2-scroller { margin:10px 0; }

/* Desktop quote form: independent of the sticky door preview. */
#fdb-v2-builder .fdb-v2-quote-dialog {
    box-sizing: border-box; width: min(620px, calc(100vw - 32px));
    max-height: calc(100dvh - 40px); overflow-y: auto;
    margin: auto; padding: 28px; border: 1px solid #d9e2dc;
    border-radius: 14px; background: #fff; color: #303638;
    box-shadow: 0 20px 70px #0003; overscroll-behavior: contain;
}
#fdb-v2-builder .fdb-v2-quote-dialog::backdrop { background: #18231ecc; }
#fdb-v2-builder .fdb-v2-quote-dialog h2 { margin: 0 75px 16px 0; font-size: 25px; color: #28643c; }
#fdb-v2-builder .fdb-v2-quote-close { float: right; padding: 8px; border: 1px solid #d7dcda; border-radius: 6px; background: white; color: #303638; font-size: 14px; }
#fdb-v2-builder .fdb-v2-quote-dialog #fdb-v2-quote-form:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
#fdb-v2-builder .fdb-v2-quote-dialog label { display: block; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; }
#fdb-v2-builder .fdb-v2-quote-dialog input,
#fdb-v2-builder .fdb-v2-quote-dialog textarea { box-sizing: border-box; width: 100%; margin: 5px 0 0; padding: 10px 12px; border: 1px solid #cdd5d0; border-radius: 6px; background: white; color: #303638; font: inherit; font-weight: 400; }
#fdb-v2-builder .fdb-v2-quote-dialog input:focus,
#fdb-v2-builder .fdb-v2-quote-dialog textarea:focus { outline: 2px solid #39834d; outline-offset: 1px; }
#fdb-v2-builder .fdb-v2-quote-dialog form > p,
#fdb-v2-builder .fdb-v2-quote-dialog form > label:has(textarea),
#fdb-v2-builder .fdb-v2-quote-dialog form > button { grid-column: 1 / -1; margin: 0; }
#fdb-v2-builder .fdb-v2-quote-dialog form > p { font-size: 15px; line-height: 1.5; }
#fdb-v2-builder .fdb-v2-quote-dialog form > button { border-radius: 6px; padding: 13px 18px; font-size: 17px; }
#fdb-v2-builder .fdb-v2-quote-dialog #fdb-v2-quote-status { margin: 12px 0 0; }
@media (max-width: 540px) {
    #fdb-v2-builder .fdb-v2-quote-dialog #fdb-v2-quote-form:not([hidden]) { grid-template-columns: 1fr; }
}

/* Quote submission is visible above either responsive quote layout. */
#fdb-v2-builder .fdb-v2-quote-progress {
    box-sizing: border-box; width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px); overflow: auto; margin: auto;
    padding: 28px; border: 0; border-radius: 16px; background: #fff;
    color: #26332c; text-align: center; box-shadow: 0 16px 60px #0004;
}
#fdb-v2-builder .fdb-v2-quote-progress::backdrop { background: rgb(20 35 28 / 65%); }
#fdb-v2-builder .fdb-v2-quote-progress h2 { font-size: 24px; line-height: 1.25; margin: 16px 0; color: #287444; }
#fdb-v2-builder .fdb-v2-quote-progress p { font-size: 16px; line-height: 1.5; margin: 12px 0; }
#fdb-v2-builder .fdb-v2-quote-progress button { background: #287444; color: #fff; padding: 12px 28px; border: 0; border-radius: 6px; }
#fdb-v2-builder .fdb-v2-quote-spinner { display: inline-block; width: 42px; height: 42px; border: 4px solid #dcebe1; border-top-color: #287444; border-radius: 50%; animation: fdb-quote-spin 1s linear infinite; }
#fdb-v2-builder .fdb-v2-quote-progress [hidden] { display: none !important; }
@keyframes fdb-quote-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #fdb-v2-builder .fdb-v2-quote-spinner { animation: none; } }

/* Shared hardware finish and compact accessory tabs. */
#fdb-v2-builder .fdb-v2-hardware-part { border:0; padding:0; margin:0; }
#fdb-v2-builder #fdb-v2-handle-styles { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }
#fdb-v2-builder #fdb-v2-handle-styles .fdb-v2-option { display:flex; align-items:center; justify-content:center; gap:8px; width:auto!important; flex:0 0 auto!important; min-height:44px!important; height:auto!important; padding:10px 14px!important; }
#fdb-v2-builder #fdb-v2-handle-styles .fdb-v2-option span { min-height:0!important; margin:0; }
#fdb-v2-builder .fdb-v2-handle-style-icon { width:24px; height:24px; flex:none; }
#fdb-v2-builder .fdb-v2-hardware-part h4 { font-size:18px; margin:12px 0 8px; }
#fdb-v2-builder .fdb-v2-hardware-part p { font-size:14px; margin:8px 0; }

/* Hardware review prompts and compact visual hierarchy. */
#fdb-v2-builder #fdb-v2-hardware-section > .fdb-v2-step-panel { background:#fff; }
#fdb-v2-builder #fdb-v2-hardware-finishes { background:#f0f7f2; padding:12px; border-radius:8px; margin:8px 0 12px; }
#fdb-v2-builder #fdb-v2-handle-styles .fdb-v2-option {
    flex-direction:row!important; min-width:0!important; max-width:none; gap:8px; 
}
#fdb-v2-builder #fdb-v2-handle-styles .fdb-v2-option span {
    width:auto!important; height:auto!important; padding:0!important; font-size:13px; line-height:1.3;
}
#fdb-v2-builder #fdb-v2-hardware-section .fdb-v2-hardware-part h4 { font-size:17px; font-weight:600; margin:10px 0 6px; }
#fdb-v2-builder #fdb-v2-hardware-section .fdb-v2-hardware-part p { font-size:13px; line-height:1.4; margin:6px 0 10px; }
#fdb-v2-builder:not(.fdb-v2-touch) #fdb-v2-hardware-section .fdb-v2-options:not(#fdb-v2-handle-styles) { gap:8px; }
#fdb-v2-builder:not(.fdb-v2-touch) #fdb-v2-handle-colours .fdb-v2-option { width:108px!important; min-height:0!important; height:auto!important; padding:8px!important; }
#fdb-v2-builder:not(.fdb-v2-touch) #fdb-v2-handle-colours .fdb-v2-option img { height:88px!important; max-height:88px!important; object-fit:contain; }
#fdb-v2-builder:not(.fdb-v2-touch) #fdb-v2-handle-colours .fdb-v2-option span { font-size:12px; line-height:1.3; min-height:32px!important; margin-top:6px; }

/* Small layout refinements; retain the established colours. */
#fdb-v2-builder .fdb-v2-option > span {
    word-break:normal!important; overflow-wrap:normal!important; hyphens:none;
}
#fdb-v2-builder .fdb-v2-frame-colours .fdb-v2-option > span {
    font-size:12px; line-height:1.3;
}
#fdb-v2-builder:not(.fdb-v2-touch) #fdb-v2-handle-colours.is-expanded {
    display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
    max-width:600px;
}
#fdb-v2-builder:not(.fdb-v2-touch) #fdb-v2-handle-colours.is-expanded .fdb-v2-option {
    width:100%!important; min-width:0!important; max-width:none!important; box-sizing:border-box;
}
#fdb-v2-builder.fdb-v2-touch .fdb-v2-touch-next { white-space:normal; font-size:12px; line-height:1.25; }

/* Keep the handle comparison grid behind View all. */
#fdb-v2-builder:not(.fdb-v2-touch) #fdb-v2-handle-colours:not(.is-expanded) {
    display:flex!important; flex-wrap:nowrap!important; overflow-x:auto; max-width:100%;
}
#fdb-v2-builder:not(.fdb-v2-touch) #fdb-v2-handle-colours:not(.is-expanded) > .fdb-v2-option {
    flex:0 0 108px; width:108px!important;
}

/* Door/frame colour swatches: square cropped texture, edge-to-edge card image.
   Fractional desktop tracks absorb leftover width without changing card gaps. */
#fdb-v2-builder:not(.fdb-v2-touch) :is(#fdb-v2-door-colours, #fdb-v2-interior-door-colours, #fdb-v2-frame-colours, #fdb-v2-interior-frame-colours) {
    width:100%; max-width:none;
    grid-template-columns:repeat(auto-fill,minmax(var(--fdb-card-width,68px),1fr));
}
#fdb-v2-builder :is(#fdb-v2-door-colours, #fdb-v2-interior-door-colours, #fdb-v2-frame-colours, #fdb-v2-interior-frame-colours) .fdb-v2-option {
    padding:0!important; gap:0; min-width:0; overflow:hidden; justify-content:flex-start;
}
#fdb-v2-builder :is(#fdb-v2-door-colours, #fdb-v2-interior-door-colours, #fdb-v2-frame-colours, #fdb-v2-interior-frame-colours) .fdb-v2-option img {
    display:block; width:100%!important; max-width:100%!important;
    height:auto!important; min-height:0!important; max-height:none!important;
    aspect-ratio:1 / 1; object-fit:cover!important; object-position:center;
    padding:0; margin:0; flex:none;
}
#fdb-v2-builder :is(#fdb-v2-door-colours, #fdb-v2-interior-door-colours, #fdb-v2-frame-colours, #fdb-v2-interior-frame-colours) .fdb-v2-option > span:last-child {
    display:block; padding:5px 3px; margin:0; width:100%; box-sizing:border-box;
}

/* Locks need readable descriptions rather than narrow swatch cards. */
#fdb-v2-builder #fdb-v2-lock-options {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px; width:100%; max-width:none; align-items:stretch;
}
#fdb-v2-builder #fdb-v2-lock-options > .fdb-v2-option {
    display:grid; grid-template-columns:100px minmax(0,1fr);
    grid-template-rows:auto 1fr; gap:6px 14px; align-items:start;
    width:100%; max-width:none; min-width:0; height:auto; min-height:124px;
    padding:14px; box-sizing:border-box; text-align:left;
}
#fdb-v2-builder #fdb-v2-lock-options > .fdb-v2-option > img {
    grid-column:1; grid-row:1 / span 2; align-self:center;
    width:100%; height:100px; max-height:none; object-fit:contain; margin:0;
}
#fdb-v2-builder #fdb-v2-lock-options > .fdb-v2-option > span {
    grid-column:2; grid-row:1; font-size:16px; font-weight:700;
    line-height:1.35; padding:0 14px 0 0; margin:0; min-height:0;
}
#fdb-v2-builder #fdb-v2-lock-options > .fdb-v2-option > small {
    grid-column:2; grid-row:2; font-size:14px; line-height:1.5;
    white-space:normal; overflow-wrap:break-word; color:#454d53;
}
@media (max-width:767px) {
    #fdb-v2-builder #fdb-v2-lock-options { grid-template-columns:minmax(0,1fr); }
}

/* Separate accessories within the shared hardware group. */
#fdb-v2-builder #fdb-v2-hardware-finishes { background:transparent; padding:0; border-radius:0; }
#fdb-v2-builder .fdb-v2-hardware-colour-section,
#fdb-v2-builder .fdb-v2-hardware-part { margin:0 0 12px; border:1px solid #dce2df; border-radius:6px; background:#fff; overflow:hidden; }
#fdb-v2-builder .fdb-v2-hardware-colour-section { padding:12px; }
#fdb-v2-builder .fdb-v2-hardware-colour-section > h4 { margin:0 0 8px; font-size:16px; }
#fdb-v2-builder .fdb-v2-hardware-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:#f3f5f4; }
#fdb-v2-builder .fdb-v2-hardware-heading button { border:0; background:transparent; color:#27352d; padding:6px 0; text-align:left; white-space:normal; font-size:14px; }
#fdb-v2-builder .fdb-v2-hardware-heading > button:first-child { flex:1; font-weight:600; min-height:44px; }
#fdb-v2-builder .fdb-v2-hardware-heading > button:first-child::after { content:' ⌄'; }
#fdb-v2-builder .fdb-v2-hardware-heading > button[aria-expanded="true"]::after { content:' ⌃'; }
#fdb-v2-builder .fdb-v2-hardware-heading .fdb-v2-change-finish { display:flex; align-items:center; gap:7px; flex:none; font-size:12px; min-height:44px; }
#fdb-v2-builder .fdb-v2-change-finish img { width:26px; height:26px; object-fit:cover; border:1px solid #cbd3ce; border-radius:3px; }
#fdb-v2-builder .fdb-v2-hardware-heading button:focus-visible { outline:2px solid #25854e; outline-offset:2px; }
#fdb-v2-builder .fdb-v2-hardware-body { padding:12px; }
#fdb-v2-builder .fdb-v2-hardware-body[hidden],
#fdb-v2-builder .fdb-v2-hardware-colour-section[hidden] { display:none!important; }
#fdb-v2-builder #fdb-v2-handle-styles .fdb-v2-option { border-radius:7px; padding:9px 28px 9px 12px!important; }
#fdb-v2-builder #fdb-v2-handle-styles .fdb-v2-option.is-selected { background:#edf6f0!important; }
#fdb-v2-builder.fdb-v2-touch #fdb-v2-handle-styles { flex-wrap:nowrap; overflow-x:auto; }
#fdb-v2-builder.fdb-v2-touch .fdb-v2-hardware-heading { padding:6px 8px; }
#fdb-v2-builder.fdb-v2-touch .fdb-v2-hardware-body { padding:10px; }
#fdb-v2-builder.fdb-v2-touch .fdb-v2-hardware-heading > button:first-child { font-size:13px; }
#fdb-v2-builder.fdb-v2-touch .fdb-v2-change-finish span { max-width:95px; }

#fdb-v2-builder .fdb-v2-hardware-part[hidden] { display:none!important; }


/* Compact installation Step 1; fitted is the clear primary route. */
#fdb-v2-builder .fdb-v2-install-first { margin-bottom:12px; }
#fdb-v2-builder .fdb-v2-install-first > summary {
    gap:10px;
    padding:12px 14px;
    font-size:17px;
}
#fdb-v2-builder .fdb-v2-install-number {
    width:34px;
    height:34px;
    font-size:14px;
}
#fdb-v2-builder .fdb-v2-install-first .fdb-v2-install-dropdown {
    padding:0 14px 14px;
}
#fdb-v2-builder .fdb-v2-install-first .fdb-v2-install-dropdown > p {
    margin:5px 0 8px;
    font-size:13px;
}
#fdb-v2-builder .fdb-v2-install-first .fdb-v2-install-dropdown > label {
    font-size:13px;
}
#fdb-v2-builder .fdb-v2-install-first .fdb-v2-postcode-row {
    margin:7px 0;
}
#fdb-v2-builder .fdb-v2-install-first .fdb-v2-postcode-row input,
#fdb-v2-builder .fdb-v2-install-first .fdb-v2-postcode-row button {
    min-height:40px;
    padding:8px 12px;
}
#fdb-v2-builder .fdb-v2-install-first .fdb-v2-install-choices {
    gap:7px;
    margin:8px 0;
}
#fdb-v2-builder .fdb-v2-install-first .fdb-v2-install-choices button {
    padding:10px 12px;
}
#fdb-v2-builder .fdb-v2-install-first [data-fdb-install="fitted"] {
    min-height:58px !important;
    border:2px solid #23834b !important;
    background:#eaf6ee !important;
    color:#176336 !important;
    box-shadow:0 2px 7px rgba(35,131,75,.13);
}
#fdb-v2-builder .fdb-v2-install-first [data-fdb-install="fitted"] strong {
    font-size:17px;
}
#fdb-v2-builder .fdb-v2-install-first [data-fdb-install="fitted"][aria-pressed="true"] {
    background:#23834b !important;
    color:#fff !important;
    box-shadow:0 3px 9px rgba(35,131,75,.22);
}
#fdb-v2-builder .fdb-v2-install-first [data-fdb-install="supply_only"] {
    min-height:40px !important;
    padding:8px 12px;
    background:#fff !important;
    color:#4c555b !important;
    border:1px solid #cbd1d4 !important;
    box-shadow:none;
}
#fdb-v2-builder .fdb-v2-install-first [data-fdb-install="supply_only"] svg {
    width:27px;
    height:27px;
}
#fdb-v2-builder .fdb-v2-install-first [data-fdb-install="supply_only"] strong {
    font-size:13px;
}
#fdb-v2-builder .fdb-v2-install-first [data-fdb-install="supply_only"] small {
    font-size:11px;
}
#fdb-v2-builder .fdb-v2-install-first #fdb-v2-install-confirm {
    min-height:42px;
    margin-top:3px;
}


/* Supplier / Collection cards: keep the current card footprint, but let imagery
   use more of it and make the option title easier to scan. */
#fdb-v2-builder .fdb-v2-suppliers .fdb-v2-option,
#fdb-v2-builder .fdb-v2-collections .fdb-v2-option {
    padding: 6px !important;
    gap: 6px;
}
#fdb-v2-builder .fdb-v2-suppliers .fdb-v2-option img,
#fdb-v2-builder .fdb-v2-collections .fdb-v2-option img {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--fdb-image-height) !important;
    object-fit: cover;
    object-position: center;
    padding: 0 !important;
    margin: 0 !important;
}
#fdb-v2-builder .fdb-v2-suppliers .fdb-v2-option > span,
#fdb-v2-builder .fdb-v2-collections .fdb-v2-option > span {
    font-size: 16px;
    line-height: 1.3;
}


/* Four-part hardware UX: shared colour first, then Handle / Letterplate / Knob. */
#fdb-v2-builder .fdb-v2-hardware-heading-static {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
}
#fdb-v2-builder .fdb-v2-inline-finish-picker {
    display:flex; align-items:center; gap:9px; margin-left:auto;
}
#fdb-v2-builder .fdb-v2-inline-finish-label {
    font-size:12px; font-weight:600; white-space:nowrap; color:#4b555a;
}
#fdb-v2-builder .fdb-v2-inline-finish-swatches {
    display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:flex-end;
}
#fdb-v2-builder .fdb-v2-inline-finish-swatch {
    width:27px; height:27px; padding:2px; margin:0; border:1px solid #cfd5d8;
    background:#fff; cursor:pointer; box-sizing:border-box;
}
#fdb-v2-builder .fdb-v2-inline-finish-swatch img {
    display:block; width:100%; height:100%; object-fit:cover; margin:0; padding:0;
}
#fdb-v2-builder .fdb-v2-inline-finish-swatch.is-selected {
    border:2px solid var(--fdb-accent); box-shadow:0 0 0 1px #fff inset;
}
#fdb-v2-builder #fdb-v2-handle-styles {
    display:flex; align-items:flex-end; gap:0; border-bottom:1px solid #cfd5d8; margin:8px 0 18px;
}
#fdb-v2-builder #fdb-v2-handle-styles .fdb-v2-option.fdb-v2-handle-style-tab {
    width:auto!important; min-width:0!important; min-height:0!important; height:auto!important;
    padding:10px 18px!important; margin:0 0 -1px!important; gap:0!important;
    border:1px solid transparent!important; border-bottom:2px solid transparent!important;
    background:transparent!important; box-shadow:none!important; border-radius:0!important;
    font-size:14px; font-weight:600;
}
#fdb-v2-builder #fdb-v2-handle-styles .fdb-v2-option.fdb-v2-handle-style-tab.is-selected {
    color:var(--fdb-accent); border-bottom-color:var(--fdb-accent)!important; background:#fff!important;
}
#fdb-v2-builder #fdb-v2-handle-styles .fdb-v2-option.fdb-v2-handle-style-tab:hover {
    background:#f6f8f7!important;
}
@media (max-width:700px) {
    #fdb-v2-builder .fdb-v2-hardware-heading-static { align-items:flex-start; flex-direction:column; }
    #fdb-v2-builder .fdb-v2-inline-finish-picker { margin-left:0; width:100%; align-items:flex-start; flex-direction:column; }
    #fdb-v2-builder .fdb-v2-inline-finish-swatches { justify-content:flex-start; }
    #fdb-v2-builder #fdb-v2-handle-styles { overflow-x:auto; flex-wrap:nowrap; }
    #fdb-v2-builder #fdb-v2-handle-styles .fdb-v2-option.fdb-v2-handle-style-tab { white-space:nowrap; }
}