/* door configurator extras (layout itself is shared/ukt-cfg-layout.css) */
#uktDoor .ukt-opts h2{margin-top:0}
#uktDoor #askForm{margin-top:.8rem}
#uktDoor .ukt-parts-m table{width:100%;border-collapse:collapse;font-size:.88rem}
#uktDoor .ukt-parts-m td{padding:.3rem .25rem;border-top:1px solid var(--line);vertical-align:top}
#uktDoor .ukt-parts-m td.n{text-align:right;white-space:nowrap}
#uktDoor .ukt-parts-m tr.sub td{color:var(--muted);font-size:.82rem;border-top:0;padding-top:0}
#uktDoor .ukt-parts-m h2{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:1.2rem 0 .6rem}

/* r3: open / close the door (top-right of the 3D view; phones: bottom, centred) */
.ukt-cfg .ukt-doorops{position:absolute;right:.75rem;top:.75rem;display:flex;gap:.35rem;z-index:3}
.ukt-cfg .ukt-doorops button{font:inherit;font-size:.82rem;font-weight:700;padding:.45rem .8rem;border-radius:999px;border:1px solid var(--accent);background:rgba(255,253,248,.96);color:var(--accent);cursor:pointer}
.ukt-cfg .ukt-doorops button.on{background:var(--accent);color:var(--accent-ink)}
.ukt-cfg .ukt-doorops button:focus-visible{outline:3px solid #e0b84a;outline-offset:2px}
.ukt-cfg .ukt-doorops button[hidden]{display:none}
@media (max-width:860px){.ukt-cfg .ukt-doorops{top:auto;bottom:.5rem;right:.5rem;left:.5rem;justify-content:center}.ukt-cfg .ukt-doorops button{padding:.35rem .7rem;font-size:.8rem}}

/* r3: matching skirting & architrave */
.ukt-cfg .ukt-mould{margin-top:1rem}
.ukt-cfg .ukt-mould h3{font-size:.95rem;margin:.2rem 0 .5rem}
.ukt-cfg .ukt-mcols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.ukt-cfg .ukt-pbtn{display:inline-flex;flex-direction:column;align-items:center;gap:.25rem;min-width:5.6rem;padding:.45rem .5rem !important}
.ukt-cfg .ukt-pbtn .ukt-prof{width:4.6rem;height:1.6rem}
.ukt-cfg .ukt-pbtn .ukt-prof polygon{fill:#c79a62;stroke:#5a4126;stroke-width:1;vector-effect:non-scaling-stroke}
.ukt-cfg .ukt-pbtn.on .ukt-prof polygon{fill:#f2d7a8;stroke:#fff}
.ukt-cfg .ukt-pbtn span{font-size:.76rem;line-height:1.1;text-align:center}
.ukt-cfg .ukt-pbtn small{display:block;font-size:.68rem;color:#9b2c1d}
.ukt-cfg .ukt-pbtn:disabled{opacity:.55;cursor:not-allowed}
.ukt-cfg .ukt-row2 input{max-width:6.5rem;margin-bottom:.4rem}
.ukt-cfg .ukt-link{background:none;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem}
@media (max-width:860px){.ukt-cfg .ukt-mcols{grid-template-columns:1fr}}

/* r3 photo thumbnails */
.ukt-pbtn .ukt-pphoto{display:block;width:100%;height:64px;object-fit:contain;background:#fff;border-radius:4px}
.ukt-pbtn .ukt-psec{display:block;opacity:.85}
.ukt-ask{border-left:3px solid #c07a00}
.ukt-approx{font-size:12px}
/* r3e (James 19:19): drag hint as a small pill in the viewer's top-left corner, never over the door (desktop + mobile); fades after first drag */
.ukt-cfg #dragHint{left:.6rem;top:.6rem;transform:none}
.ukt-cfg #dragHint span{font-size:.72rem;padding:.3rem .6rem;background:rgba(32,36,30,.62)}
.ukt-cfg #dragHint .ukt-desk-only{font-style:normal}
@media (max-width:600px){.ukt-cfg #dragHint{left:.4rem;top:.3rem}.ukt-cfg #dragHint span{font-size:.66rem;padding:.2rem .5rem}}

/* port 16 Oct 2026 (Flow): tiles with plain names + shop sub-label, staff text behind ?debug=1, sale note, mobile order + Next bar */
#uktDoor .ukt-sub{margin:-.4rem 0 1rem;color:var(--muted)}
#uktDoor .ukt-btns button.ukt-tile{display:inline-flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.1rem}
#uktDoor .ukt-btns button.ukt-tile .ukt-tn{font-weight:700}
#uktDoor .ukt-btns button.ukt-tile .ukt-ts{font-size:.74rem;font-weight:400;opacity:.85}
#uktDoor .ukt-staff{display:none !important}
#uktDoor.ukt-debug .ukt-staff{display:block !important;border-left:3px solid #b3261e;padding-left:.4rem}
#uktDoor .ukt-staff[hidden]{display:none !important}
#uktDoor .ukt-bar-sale{display:inline-block;margin-top:.15rem;font-size:.78rem;font-weight:700;color:#8a1c12;background:#fde7e2;border-radius:4px;padding:.05rem .4rem}
#uktDoor .ukt-illus{position:absolute;left:.75rem;bottom:3.1rem;margin:0;font-size:.72rem;color:#5b655b;z-index:2;pointer-events:none}
#uktDoor .ukt-next{display:none}
#uktDoor #frameQtyField input,#uktDoor #archMField input{max-width:6.5rem}
@media (max-width:860px){
  #uktDoor .ukt-preview{display:contents}
  #uktDoor .ukt-stage{order:1;position:sticky;top:0;z-index:20}
  #uktDoor .ukt-opts{order:2}
  #uktDoor .ukt-mould{order:3;margin-top:0}
  #uktDoor .ukt-parts{order:4}
  #uktDoor .ukt-illus{bottom:auto;top:2.6rem;font-size:.66rem} /* phones: the view buttons sit at the top and Open door at the bottom, so the note goes under the buttons */
}
@media (max-width:600px){
  #uktDoor .ukt-bar .ukt-add{display:none}
  #uktDoor .ukt-bar .ukt-next{display:inline-block;padding:.65rem .9rem}
  #uktDoor .ukt-bar .ukt-next.ukt-add{display:inline-block}
}

/* ---- flow review 16 Oct 2026 (James): layout only ---- */
#uktDoor .ukt-grp{margin:0 0 .55rem}
#uktDoor .ukt-grp-h{font-size:.78rem;margin:.15rem 0 .3rem;color:#3c463c}
#uktDoor .ukt-grp-n{font-weight:700;text-transform:uppercase;letter-spacing:.04em}
#uktDoor .ukt-grp-s{color:#6a746a}
#uktDoor .ukt-grp-b{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.4rem}
#uktDoor .ukt-grp-b .ukt-tile{width:100%;margin:0}
#uktDoor .ukt-bar-msg{margin-top:.2rem;font-size:.85rem;padding:.25rem .55rem;border-radius:6px;display:inline-block}
#uktDoor .ukt-bar-msg.ok{background:#dff1e1;color:#1e5a2a}
#uktDoor .ukt-bar-msg.warn{background:#fbe6d9;color:#7a3311}
#uktDoor .ukt-bar-msg a{color:inherit;font-weight:700;margin-left:.3rem}
#uktDoor .ukt-bar-msg[hidden]{display:none}
/* desktop: nothing ends up under the sticky bar */
#uktDoor{padding-bottom:6.5rem}
@media (max-width:600px){
  .ukt-cfg #dragHint{left:.4rem;top:auto;bottom:.4rem}
  #uktDoor .ukt-illus{position:static;margin:.25rem .6rem 0;font-size:.66rem}
  #uktDoor .ukt-stage{height:56vh;min-height:300px} /* 1.3.4 (option C phone): was 30vh / 220px */
  #uktDoor .ukt-grp-b{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){#uktDoor.ukt-compact .ukt-stage{height:38vh;min-height:260px}} /* 1.3.4 (option C phone): was 180px */
#uktDoor .ukt-tiles > .ukt-grp{flex:1 1 100%;width:100%}
@media (max-width:600px){
  .ukt-cfg #dragHint{top:2.7rem;bottom:auto}
  #uktDoor .ukt-preview > .ukt-illus, #uktDoor .ukt-illus{order:1}
  #uktDoor .ukt-bar .ukt-next{font-size:.92rem;line-height:1.2}
}
@media (max-width:600px){
  /* drag hint: left edge, mid-height, wrapped, so it clears the tabs, the door and the Open door buttons */
  .ukt-cfg #dragHint{top:44%;bottom:auto;left:.3rem;max-width:5.4rem} /* 1.3.4: was 7.6rem; the taller phone viewer draws the door bigger (915 wide: 114 px from the stage edge), so the hint is narrower and drops "scroll or" (no scroll wheel on a phone) */
  .ukt-cfg #dragHint .ukt-desk-only{display:none}
  .ukt-cfg #dragHint span{white-space:normal;line-height:1.25;border-radius:10px}
}
/* ---- phone price bar (17 Oct 2026): two rows; prices never cut off, Next on one line ---- */
@media (max-width:600px){
  #uktDoor .ukt-bar-in{flex-wrap:wrap;row-gap:.35rem}
  #uktDoor .ukt-bar-price{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.55rem;row-gap:.15rem}
  #uktDoor .ukt-bar-sub{overflow:visible;text-overflow:clip;white-space:nowrap}
  #uktDoor .ukt-bar-sale,#uktDoor .ukt-bar-msg{margin-top:0}
  #uktDoor .ukt-bar .ukt-qty{flex:0 0 auto}
  #uktDoor .ukt-bar .ukt-next{flex:1 1 auto;min-width:0;white-space:nowrap;padding:.6rem .7rem;font-size:.95rem}
  #uktDoor{padding-bottom:9.5rem}
}
@media (max-width:374px){
  #uktDoor .ukt-bar .ukt-next{font-size:.88rem;padding:.6rem .55rem}
  #uktDoor .ukt-bar-now{font-size:1.05rem}
}
/* ---- add-on close-up bubble (17 Oct 2026) ---- */
#uktDoor .ukt-zoom{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:.45rem;padding:0;border:1px solid #c9cfc4;border-radius:50%;background:#fff;color:#2e5b34;cursor:pointer;vertical-align:middle}
#uktDoor .ukt-zoom:hover,#uktDoor .ukt-zoom:focus-visible{background:#eef4ec;border-color:#2e5b34}
#uktDoor .ukt-zoom[hidden]{display:none}
#uktDoor .ukt-bubble{position:absolute;right:.6rem;top:3.2rem;z-index:30;width:min(340px,calc(100% - 1.2rem));max-height:calc(100% - 4rem);overflow:auto;box-sizing:border-box;background:#fffdf8;border:1px solid #d8d2c4;border-radius:12px;box-shadow:0 10px 28px rgba(26,31,22,.22);padding:.55rem .7rem .6rem;text-align:left}
#uktDoor .ukt-bubble[hidden]{display:none}
#uktDoor .ukt-bubble-h{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;font-size:.92rem;line-height:1.3}
#uktDoor .ukt-bubble-x{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid #c9cfc4;background:#fff;font-size:1.35rem;line-height:1;cursor:pointer;color:#1f2a1f}
#uktDoor .ukt-bubble-x:hover,#uktDoor .ukt-bubble-x:focus-visible{background:#eef4ec;border-color:#2e5b34}
#uktDoor #bubbleCanvas{display:block;width:100%;margin:.35rem 0 .2rem;background:#f6f3ec;border-radius:8px}
#uktDoor .ukt-bubble-d{font-weight:700;font-size:.82rem;margin:.15rem 0}
#uktDoor .ukt-bubble-n{font-size:.76rem;color:#5a645a;margin:.15rem 0 .35rem}
#uktDoor .ukt-bubble-n.gap{color:#7a3311}
#uktDoor .ukt-bubble-ph{display:flex;gap:.5rem}
#uktDoor .ukt-bubble-ph figure{margin:0;font-size:.7rem;color:#5a645a;text-align:center}
#uktDoor .ukt-bubble-ph img,#uktDoor .ukt-bubble-sw{display:block;width:76px;height:52px;object-fit:cover;border-radius:6px;background-size:cover;background-position:center}
@media (max-width:600px){
  #uktDoor .ukt-bubble{position:fixed;left:.5rem;right:.5rem;top:auto;width:auto;bottom:calc(var(--ukt-bar-h,120px) + .5rem);max-height:calc(100vh - var(--ukt-bar-h,120px) - 1.5rem);z-index:60}
}
#uktDoor .ukt-lbl + .ukt-zoom{margin:-.2rem 0 .3rem}
/* ---- 1.3.4 (17 Oct 2026, James's focus pick): option B's tall desktop viewer and pale room; option C's taller phone viewer, no blur ---- */
@media (min-width:861px){
  #uktDoor .ukt-grid{grid-template-columns:minmax(420px,560px) minmax(340px,620px);justify-content:center}
  #uktDoor .ukt-stage{height:calc(100vh - var(--bar-h) - 2.5rem);max-height:900px;min-height:520px}
}
@media (min-width:861px) and (max-height:760px){#uktDoor .ukt-stage{min-height:440px}} /* short laptop screens: less of the stage under the price bar at first load */
#uktDoor .ukt-stage{background:linear-gradient(#f8f7f4,#f1efea)}
@media (min-width:601px) and (max-width:860px){#uktDoor .ukt-stage{height:56vh;min-height:300px}}
@media (max-width:860px){#uktDoor .ukt-stage{transition:height .25s ease}}
@media (prefers-reduced-motion:reduce){#uktDoor .ukt-stage{transition:none}}
/* 1.3.4 (Proof's 1.3.3 note): the phone bubble docks under the stage (top / max-height set by placeBubble) and stays compact */
@media (max-width:600px){
  #uktDoor .ukt-bubble{padding:.45rem .6rem .5rem}
  #uktDoor .ukt-bubble-h{font-size:.86rem}
  #uktDoor .ukt-bubble-x{width:32px;height:32px;font-size:1.2rem}
  #uktDoor .ukt-bubble-ph img,#uktDoor .ukt-bubble-sw{width:60px;height:40px}
  #uktDoor .ukt-bubble-n{margin:.1rem 0 .25rem}
}
/* 1.3.4 Proof FIX F2 (layout only): desktop viewer bottom band = [width label] [view buttons] [note]. The note moves under the view
   buttons (it used to sit just above them, where the width label lands), the buttons go up a little, and the auto-fit keeps 94 px clear
   at the bottom. Phones are unchanged (buttons on top, note under the viewer). */
@media (min-width:861px){
  #uktDoor .ukt-views{bottom:1.35rem}
  #uktDoor .ukt-illus{bottom:.3rem;left:.75rem;font-size:.68rem;line-height:1.1}
}
/* ---- 1.3.4 (Proof N1, James 20:45): a shallower price bar, one line on desktop; the viewer fits above it on first load ---- */
@media (min-width:861px){
  #uktDoor .ukt-bar-in{padding:.3rem 1.5rem;min-height:0;gap:.9rem}
  #uktDoor .ukt-bar-price{display:flex;flex-wrap:nowrap;align-items:baseline;column-gap:.7rem;white-space:nowrap;overflow:hidden}
  #uktDoor .ukt-bar-now{font-size:1.25rem;line-height:1.25}
  #uktDoor .ukt-bar-sub{overflow:visible}
  #uktDoor .ukt-bar-sale,#uktDoor .ukt-bar-msg{margin-top:0}
  #uktDoor .ukt-bar .ukt-qty button{height:2.4rem}
  #uktDoor .ukt-bar .ukt-btn.ukt-add{padding-top:.55rem;padding-bottom:.55rem}
  #uktDoor .ukt-stage{height:min(calc(100vh - var(--bar-h) - 2.5rem), var(--ukt-fit-h, 100vh));min-height:min(520px, var(--ukt-fit-h, 520px))}
}
@media (min-width:861px) and (max-height:760px){#uktDoor .ukt-stage{min-height:min(440px, var(--ukt-fit-h, 440px))}}
@media (max-width:860px){
  #uktDoor .ukt-stage{max-height:var(--ukt-fit-h, none)}
}
@media (max-width:600px){
  #uktDoor .ukt-bar-in{padding:.35rem .75rem;row-gap:.3rem}
  #uktDoor .ukt-stage{min-height:min(300px, var(--ukt-fit-h, 300px))}
  #uktDoor.ukt-compact .ukt-stage{min-height:min(260px, var(--ukt-fit-h, 260px))}
  #uktDoor .ukt-bar .ukt-qty button{width:2.75rem;height:2.75rem}
  #uktDoor .ukt-bar .ukt-qty input{min-height:2.75rem}
  #uktDoor .ukt-bar .ukt-next,#uktDoor .ukt-bar .ukt-btn.ukt-add{min-height:2.75rem}
}
/* ---- 1.3.4 (James 20:52): skirting length in metres ---- */
#uktDoor .ukt-skm input{width:7rem;font:inherit;font-size:1rem;padding:.45rem .55rem;border:1px solid #c9cfc4;border-radius:8px;min-height:44px;box-sizing:border-box}
#uktDoor .ukt-skm input[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 2px #fbe0dd}
#uktDoor .ukt-sko{display:inline-block;margin-left:.5rem;font-weight:700;color:#2e5b34}
#uktDoor #skErr{margin:.35rem 0 0;overflow-wrap:anywhere;word-break:break-word;max-width:100%} /* C2: a long refused link value wraps */
@media (max-width:600px){#uktDoor .ukt-skm input{width:100%;font-size:16px}#uktDoor .ukt-sko{display:block;margin:.35rem 0 0}} /* 16 px: no zoom-on-focus in iOS Safari */

/* ---- 1.3.4 viewer fit, option (c) (18 Oct 2026): tighter header above the desktop viewer, so the stage gets ~680 px at 1280×800
   while every viewer control stays above the slim bar. Phones / tablets (≤ 860 px) keep the old header: the disclosure stays open, no toggle. ---- */
#uktDoor .ukt-about > summary{display:none}
#uktDoor .ukt-about{margin:0}
@media (min-width:861px){
  #uktDoor .ukt-wrap{padding-top:.5rem}
  #uktDoor .ukt-head{display:flex;align-items:center;gap:.4rem 1.1rem;flex-wrap:wrap;margin:0 0 .5rem;position:relative;z-index:30}
  #uktDoor .ukt-head .ukt-brand{margin:0}
  #uktDoor .ukt-head .ukt-brand img{width:118px}
  #uktDoor .ukt-head h1{margin:0;font-size:1.35rem;line-height:1.2}
  #uktDoor .ukt-about{margin-left:auto;position:relative}
  #uktDoor .ukt-about > summary{display:inline-flex;align-items:center;gap:.4rem;list-style:none;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--accent);padding:.4rem .8rem;min-height:36px;box-sizing:border-box;border:1px solid var(--line);border-radius:999px;background:#fff;user-select:none}
  #uktDoor .ukt-about > summary::-webkit-details-marker{display:none}
  #uktDoor .ukt-about > summary::after{content:"";width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
  #uktDoor .ukt-about[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
  #uktDoor .ukt-about > summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* C4: #2f5d3a on the #f4f1ea header (was #e0b84a, ~1.9:1) */
  #uktDoor .ukt-about:not([open]) .ukt-sub{display:none} /* closed: hidden for sure (Chrome lays out closed <details> content) */
  #uktDoor .ukt-about .ukt-sub{position:absolute;right:0;top:calc(100% + .4rem);width:min(26rem,80vw);box-sizing:border-box;margin:0;padding:.75rem .9rem;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);color:var(--ink)}
}
@media (min-width:861px) and (prefers-reduced-motion:reduce){#uktDoor .ukt-about > summary::after{transition:none}}
/* 1.3.4 James round: bespoke width box (as the skirting length box) */
#uktDoor .ukt-bw{margin:.7rem 0 .2rem}
#uktDoor .ukt-bw[hidden]{display:none}
#uktDoor .ukt-lbl2{display:block;font-weight:600;font-size:.9rem;margin:0 0 .3rem}
#uktDoor .ukt-bwrow{display:inline-flex;align-items:center;gap:.4rem}
#uktDoor .ukt-bw input{width:7rem;font:inherit;font-size:1rem;padding:.45rem .55rem;border:1px solid #c9cfc4;border-radius:8px;min-height:44px;box-sizing:border-box}
#uktDoor .ukt-bw input[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 2px #fbe0dd}
#uktDoor #bwErr{margin:.35rem 0 0;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
#uktDoor #bwMsg{margin:.35rem 0 0}
@media (max-width:600px){#uktDoor .ukt-bw input{width:9rem;font-size:16px}}
/* 1.3.4 James round (Task 7): exploded view note; the dimension labels step aside while the parts are pulled apart (sizes are unchanged) */
#uktDoor .ukt-exnote{position:absolute;left:.75rem;top:2.9rem;margin:0;max-width:26rem;font-size:.78rem;line-height:1.3;background:rgba(255,253,248,.94);border:1px solid #d9d2c3;border-radius:8px;padding:.35rem .55rem;z-index:3;pointer-events:none;color:#2d3a2e}
#uktDoor .ukt-exploded .ukt-dim{visibility:hidden}
#uktDoor .ukt-exnote .ukt-excap{display:block;margin-top:.15rem;font-size:.68rem;line-height:1.25;color:#8a8577} /* 1.3.6: muted joint caption, exploded view only */
@media (max-width:600px){#uktDoor .ukt-exnote{top:auto;bottom:3.4rem;left:.5rem;right:.5rem;max-width:none;font-size:.72rem}}
/* 1.3.4 James round (Task 8): the magnifier circles become a labelled "Close-up" chip (same bubble). Focus ring #1f4d26 on white = 9.9:1; chip border #5f7a62 on white = 4.6:1 */
#uktDoor .ukt-zoom.ukt-chip{width:auto;height:auto;min-height:32px;gap:.3rem;padding:0 .7rem 0 .55rem;border-radius:999px;border:1px solid #5f7a62;font:inherit;font-size:.78rem;font-weight:600;line-height:1;color:#244a2a;white-space:nowrap}
#uktDoor .ukt-zoom.ukt-chip svg{flex:none}
#uktDoor .ukt-zoom.ukt-chip:focus-visible{outline:3px solid #1f4d26;outline-offset:2px}
#uktDoor .ukt-zoom.ukt-chip[aria-expanded="true"]{background:#e3eee1;border-color:#244a2a}
#uktDoor h3 .ukt-zoom.ukt-chip{font-size:.74rem;vertical-align:middle;margin-left:.5rem}
@media (max-width:600px),(pointer:coarse){#uktDoor .ukt-zoom.ukt-chip{min-height:44px;min-width:44px;padding:0 .8rem 0 .65rem;font-size:.8rem}#uktDoor h3 .ukt-zoom.ukt-chip{font-size:.8rem}}
/* one-time tip on the 3D view: top right under the Open door button(s) on desktop, above the bottom controls on phones; never over the view buttons */
#uktDoor .ukt-cuhint{position:absolute;right:.75rem;top:3.4rem;z-index:3;display:flex;align-items:center;gap:.25rem;max-width:15rem;background:rgba(32,36,30,.82);color:#fff;border-radius:999px;padding:.2rem .25rem .2rem .75rem;font-size:.74rem;line-height:1.25;transition:opacity .5s}
#uktDoor .ukt-cuhint[hidden]{display:none}
#uktDoor .ukt-cuhint.gone{opacity:0}
#uktDoor .ukt-cuhint button{flex:none;width:44px;height:44px;margin:-.35rem -.2rem -.35rem 0;border:0;border-radius:50%;background:transparent;color:#fff;font-size:1.05rem;line-height:1;cursor:pointer;padding:0}
#uktDoor .ukt-cuhint button:focus-visible{outline:3px solid #f0c75a;outline-offset:1px}
@media (max-width:600px){#uktDoor .ukt-cuhint{top:auto;bottom:3.4rem;right:.5rem;max-width:13rem;font-size:.7rem}#uktDoor .ukt-cuhint button{width:44px;height:44px}}
#uktDoor .ukt-exploded .ukt-cuhint{display:none}
/* 1.3.4 James round (Task 2): architrave Sets: tighter, even spacing; collapsible 'why' note */
#uktDoor #archField{margin-top:.35rem}
#uktDoor #archField .ukt-lbl{margin-bottom:.35rem}
#uktDoor .ukt-btns-sets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
#uktDoor #archHint{margin:.45rem 0 .2rem}
#uktDoor .ukt-warn{color:#7a3b00;font-weight:600}
#uktDoor .ukt-why{margin:.25rem 0 0;font-size:.82rem;color:#3d4a3e}
#uktDoor .ukt-why summary{cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;min-height:32px;font-weight:600;color:#244a2a;list-style:none;border-radius:6px;padding:0 .2rem}
#uktDoor .ukt-why summary::-webkit-details-marker{display:none}
#uktDoor .ukt-why summary::before{content:'';width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-right:.15rem}
#uktDoor .ukt-why[open] summary::before{transform:rotate(45deg)}
#uktDoor .ukt-why summary:focus-visible{outline:3px solid #1f4d26;outline-offset:2px}
#uktDoor .ukt-why p{margin:.2rem 0 0;padding:.45rem .6rem;background:#f4f1ea;border-radius:8px;line-height:1.4}
@media (max-width:600px),(pointer:coarse){#uktDoor .ukt-why summary{min-height:44px}}
@media (max-width:600px),(pointer:coarse){#uktDoor .ukt-btns-sets button{min-height:44px}}

/* J1 (18 Oct follow-up): the reason Add to basket is off while the width box shows a refused value */
#uktDoor .ukt-bar-why{margin-top:.2rem;font-size:.8rem;line-height:1.3;color:#7a3311;background:#fbe6d9;border-radius:6px;padding:.2rem .5rem;display:inline-block;max-width:24rem}
#uktDoor .ukt-bar-why[hidden]{display:none}
@media (max-width:600px){#uktDoor .ukt-bar-why{font-size:.74rem;margin-top:.1rem}}