/* Bespoke rectangular ducting — product-page configurator + visualiser styles */
:root { --aa-rd-blue: #2959D3; --aa-rd-ink: #1b2733; --blue: #2959D3; }

.aa-rd-stage { width: 100%; }
.aa-rd-stage #svgbox svg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid #eef1f4; border-radius: 10px; }
.aa-rd-stage .views2d { display: flex; gap: 8px; margin-top: 12px; }
.aa-rd-stage .views2d > div { flex: 1; }
.aa-rd-stage .views2d svg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid #eef1f4; border-radius: 8px; }
.aa-rd-stage .views2d .vlabel { font-size: 11px; color: #566; margin-top: 3px; font-weight: 600; text-align: center; }
.aa-rd-stage .spec { margin-top: 10px; font-size: 13px; color: #445; line-height: 1.6; }
.aa-rd-stage .spec b { color: var(--aa-rd-ink); }
.aa-rd-note { font-size: 11px; color: #8a96a3; margin-top: 10px; }

.aa-rd-inputs { margin: 6px 0 16px; }
.aa-rd-h { font-size: 15px; margin: 0 0 10px; }
.aa-rd-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.aa-rd-grid .aa-rd-row { flex: 1 1 30%; min-width: 120px; }
.aa-rd-row { margin-bottom: 12px; }
.aa-rd-row > label { display: block; font-weight: 600; font-size: 12px; margin-bottom: 4px; }
.aa-rd-row input[type=number] { box-sizing: border-box; width: 100%; padding: 8px 9px; border: 1px solid #cdd5dd; border-radius: 7px; font-size: 14px; }

.aa-rd-seg { display: flex; border: 1px solid #cdd5dd; border-radius: 7px; overflow: hidden; }
.aa-rd-seg label { flex: 1; margin: 0; position: relative; }
.aa-rd-seg input { position: absolute; opacity: 0; pointer-events: none; }
.aa-rd-seg span { display: block; text-align: center; padding: 8px 6px; font-weight: 600; font-size: 12px; cursor: pointer; background: #fff; color: #566; }
.aa-rd-seg input:checked + span { background: var(--aa-rd-blue); color: #fff; }

.aa-rd-price { margin: 12px 0; padding: 12px 14px; background: #eef3ff; border: 1px solid #cfdcff; border-radius: 8px; font-weight: 600; color: var(--aa-rd-blue); font-size: 16px; }
.aa-rd-price.aa-rd-err { background: #fdecea; border-color: #f5c2bb; color: #b3261e; font-size: 13px; }
/* live price shown in the standard WC price slot */
.aa-rd-price-live.aa-rd-err { color: #b3261e; font-size: 14px; font-weight: 600; }
/* dim while recalculating so a stale price is never shown as final */
.aa-rd-price-live.aa-rd-updating { opacity: 0.4; transition: opacity 0.1s ease; }
/* form.cart is a flex-wrap row; the configurator block wasn't full-width, so the
   qty stepper sat beside it top-right and the Add to Basket button wrapped below,
   orphaned (audit 5 Jul 2026). Force the config to its own full row so quantity +
   button land together beneath it. Scoped: this CSS only loads on rect-duct pages. */
form.cart .aa-rd-inputs { flex: 0 0 100%; width: 100%; }
form.cart .quantity { float: none; margin: 0 12px 0 0; align-self: center; }
form.cart .single_add_to_cart_button { align-self: center; }