:root{font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#20292c;background:#f3f4f2;--red:#c9002b;--small:.875rem;--body:1rem;--heading:1.5rem}*{box-sizing:border-box}body{margin:0;line-height:1.5}header{background:#fff;border-bottom:1px solid #ddd;padding:22px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:24px}.brand img{width:180px;height:auto}.brand span{border-left:1px solid #ccc;padding-left:24px;font-weight:bold;font-size:var(--small)}header small{display:block;color:#536166;font-size:var(--small)}main{max-width:1440px;margin:auto;padding:32px}h1,h2{font-size:var(--heading);line-height:1.3;margin:0 0 20px}h3{font-size:var(--body)}.intro{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:32px}.intro p{color:#4c5c61}.eyebrow{font-size:var(--small);font-weight:bold;letter-spacing:1px;color:var(--red)!important}.tip{line-height:2;border-left:3px solid var(--red);padding-left:24px;font-size:var(--body)}.customer{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-bottom:24px}.workspace{display:grid;grid-template-columns:1fr 1.35fr;gap:24px}.card{background:white;border:1px solid #dce0dc;border-radius:10px;padding:28px}.preview{align-self:start;position:sticky;top:20px}label{display:block;font-size:var(--body);font-weight:bold;margin-bottom:18px}input,select{display:block;border:1px solid #abb7b9;background:#fff;border-radius:5px;width:100%;min-height:48px;padding:12px;font:inherit;color:#20292c;margin-top:8px}input:focus,select:focus{outline:3px solid #b8c9ce;outline-offset:1px}input[readonly]{background:#f3f5f4;color:#47565c}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.hint,footer{font-size:var(--small);color:#4d5b60;line-height:1.6}.check{display:flex;gap:12px;align-items:center;font-weight:normal}.check input{width:22px;min-height:22px;height:22px;margin:0;flex-shrink:0}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}button{cursor:pointer;background:var(--red);color:#fff;border:1px solid var(--red);border-radius:5px;padding:12px 16px;min-height:48px;font:inherit;font-weight:bold}button.secondary{background:#fff;color:#374447;border-color:#abb7b9}button:hover{filter:brightness(.95)}button:disabled{opacity:.45;cursor:not-allowed}.row{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}.badge{font-size:var(--small);background:#f0f3f1;padding:8px;border-radius:4px}.row h2{margin-bottom:12px}#drawing svg{width:100%;height:auto;display:block}#metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px;background:#f3f5f4;border-radius:6px;font-size:var(--body)}#metrics strong{display:block;margin-top:6px}#errors,#warning,#feedback,#documentStatus{font-size:var(--body);line-height:1.6}#errors{color:#b60024}#warning{color:#805000}.order{margin-top:24px}.item{border-top:1px solid #e1e5e3;padding:20px 0}.item p{font-size:var(--body);color:#4d5b60}.item button{margin:4px 6px 0 0}.groupTitle{margin-top:28px;padding:12px;background:#f1f3f1;border-left:3px solid var(--red)}footer{text-align:center;padding:28px}#feedback{color:#246034}[hidden]{display:none!important}#printArea{display:none}.empty{padding:32px;text-align:center;color:#536166;background:#f7f8f6;margin:20px 0;border-radius:6px}table{border-collapse:collapse;width:100%;font-size:var(--body)}td,th{text-align:left;border-bottom:1px solid #ddd;padding:12px}#custom{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}#extraField{color:var(--red)}#extraField .hint{display:block;margin-top:8px;font-weight:normal}.printHead img{width:160px;height:auto}
@media(max-width:900px){header{padding:18px}.brand{gap:12px}.brand img{width:135px}.brand span{padding-left:12px}header>div:not(.brand){display:none}main{padding:24px 16px}.tip{display:none}.workspace{grid-template-columns:1fr}.customer{grid-template-columns:1fr;gap:0}.preview{position:static}.card{padding:20px}.grid{gap:12px}.actions button{flex-grow:1}#metrics{padding:14px;gap:12px}#metrics span{overflow-wrap:anywhere}}
@media(max-width:420px){.brand span{font-size:var(--small)}#metrics{grid-template-columns:1fr}#metrics span{display:flex;justify-content:space-between;gap:8px}#metrics br{display:none}#metrics strong{margin:0}.grid{grid-template-columns:1fr}#custom{grid-template-columns:1fr 1fr}}
@media print{@page{size:A4;margin:12mm}body{background:#fff;color:#111}header,main{display:none}#printArea{display:block}.printPage{break-before:page}.printPage:first-child{break-before:auto}.printHead{border-bottom:2px solid #c9002b;padding-bottom:10px;margin-bottom:16px}.printHead h1{font-size:24px}.printHead p{font-size:14px}.printCards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.printCard{border:1px solid #ccc;padding:12px;break-inside:avoid}.printCard svg{width:100%;height:auto}.printCard h3{font-size:16px}.printCard p{font-size:14px;line-height:1.5}svg{-webkit-print-color-adjust:exact;print-color-adjust:exact}table{font-size:14px}}

#feedback.error{color:#c9002b;font-weight:bold}#documentStatus{overflow-wrap:anywhere}
/* Service+ identity and the three-step order flow. */
:root{--red:#8c2332;--small:1rem;--body:1rem;--heading:1.5rem;background:#f4f4f3;color:#262626}body{line-height:1.55}header{padding:16px max(24px,calc((100vw - 1400px)/2));border-top:4px solid var(--red);gap:24px}header .brand{border:0}header .brand img{width:172px}.serviceLogo{width:164px;height:92px;object-fit:contain}header>span{color:#4c4c4c}.intro{position:relative;overflow:hidden;background:#fff;padding:28px 32px;margin-bottom:24px;border-bottom:1px solid #ddd}.intro>div:first-child{position:relative;z-index:1;max-width:75%}.intro h1{margin-bottom:12px}.intro p:last-child{margin-bottom:0}.introGraphic{position:absolute;right:-85px;top:-45px;width:340px;height:220px;background:url('assets/service-overlay.png') center/contain no-repeat}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:28px;background:#fff;border:1px solid #d8d8d8;border-radius:8px;overflow:hidden;scroll-margin-top:16px}.step{border:0;border-radius:0;background:#fff;color:#4c4c4c;font-weight:normal;min-height:68px;border-bottom:4px solid transparent;display:flex;align-items:center;justify-content:center;gap:10px}.step span{border:1px solid #999;border-radius:50%;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.step.active{color:var(--red);border-bottom-color:var(--red);font-weight:bold}.step.active span{background:var(--red);border-color:var(--red);color:#fff}.step:disabled{opacity:.65}.step+.step{border-left:1px solid #e3e3e3}.workspace{grid-template-columns:minmax(350px,.85fr) minmax(0,1.3fr)}.preview{min-width:0}.drawingScroll{overflow-x:auto}#drawing{min-width:520px;min-height:180px}#drawing svg{min-width:520px}#drawing:not(:has(svg)){min-width:0;padding:32px 12px;color:#535353}#metrics:empty,#holeSummary:empty,#sessionNotice:empty{display:none}.hint{font-size:16px;color:#505050}.badge{font-size:16px}.eyebrow{font-size:16px;letter-spacing:.6px}.holeList{display:flex;flex-wrap:wrap;gap:8px 18px}.holeList span{padding:5px 0}.extraHole{color:#b00020}#holeSummary{margin-top:20px;border-top:1px solid #ddd;padding-top:8px}.textButton{background:transparent;color:var(--red);border-color:transparent;padding-left:0;padding-right:0}.mobileHint{display:none}#flowStatus,#documentStatus.error,#feedback.error,#errors{color:#b00020;font-weight:bold}.exportCard{max-width:960px;margin:auto;padding:40px}.exportCard h2{margin-bottom:16px}footer{margin-top:24px;font-size:16px}footer p{margin:6px auto;max-width:900px}.reviewHead{margin-bottom:24px}.reviewHead p{margin:0}.reviewActions{position:sticky;bottom:0;padding:18px;background:#fff;border-top:1px solid #ccc;z-index:2;box-shadow:0 -3px 15px #00000009}#orderPreview .printPage{background:#fff;border:1px solid #ddd;margin-bottom:24px;padding:28px;border-radius:8px}#orderPreview .printBrands{display:flex;justify-content:space-between;align-items:center;gap:24px}#orderPreview .printBrands img:first-child{width:145px}#orderPreview .printBrands img:last-child{width:130px}#orderPreview .printHead{border-bottom:2px solid var(--red);margin-bottom:20px;padding-bottom:12px}#orderPreview .printHead h1{margin:16px 0 10px}#orderPreview .printCards{display:grid;grid-template-columns:1fr 1fr;gap:24px}#orderPreview .printCard{min-width:0;padding:14px;border:1px solid #ddd;border-radius:6px;overflow-wrap:anywhere}#orderPreview svg{width:100%;height:auto}#orderPreview p{overflow-wrap:anywhere}#orderPreview .printCard p{font-size:16px;line-height:1.8}#orderPreview table{font-size:16px}.printBrands{display:flex;align-items:center;justify-content:space-between}.printBrands img:last-child{width:110px}.printBrands img:first-child{width:145px}input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid #a95061;outline-offset:3px}#pdfFallback{background:#f5f5f4;padding:16px;border-radius:6px}a{color:var(--red)}.item button{font-size:16px}.item p{color:#333}.card{border-radius:8px}.preview p{margin-bottom:0}
@media(max-width:1000px){.workspace{grid-template-columns:1fr}.preview{position:static}header>span{display:none}}
@media(max-width:650px){main{padding:18px 12px}header{padding:10px 16px;gap:12px}header .brand img{width:132px}.serviceLogo{width:125px;height:72px}.intro{padding:22px 18px}.intro>div:first-child{max-width:100%}.introGraphic{opacity:.22;right:-140px}.steps{gap:0;margin-bottom:22px}.step{padding:12px 5px;gap:8px;flex-direction:column;font-size:16px;line-height:1.25;text-align:center}.step span{width:26px;height:26px}.card{padding:20px 16px}.grid{grid-template-columns:1fr 1fr}.grid label{min-width:0}input,select{padding:10px 8px}#metrics{grid-template-columns:1fr}#metrics span{display:flex;justify-content:space-between;gap:10px}#metrics br{display:none}#metrics strong{margin:0}.mobileHint{display:block;margin-top:8px}.actions{gap:10px}.actions button{width:100%}.actions .textButton{width:auto;padding:12px 0}#orderPreview .printCards{grid-template-columns:1fr}#orderPreview .printPage{padding:18px 12px}#orderPreview .printCard{padding:8px}#orderPreview .printBrands img:first-child{width:120px}#orderPreview .printBrands img:last-child{width:110px}#orderPreview th,#orderPreview td{padding:9px 5px}.reviewActions{position:static;margin-bottom:0}.exportCard{padding:24px 18px}#custom{grid-template-columns:1fr 1fr}}
@media(max-width:370px){.grid{grid-template-columns:1fr}.step{font-size:14px}.step span{font-size:16px}}
@media print{header,main{display:none!important}#printArea{display:block!important}.printHead{border-color:#8c2332}.printHead h1{font-size:20px}.printBrands img:last-child{width:100px}.printCard p{overflow-wrap:anywhere}.printCards{align-items:start}.printCard{break-inside:avoid}body{font-family:Arial,Helvetica,sans-serif}}

@font-face{font-family:'DejaVu Sans';src:url('assets/DejaVuSans.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'DejaVu Sans';src:url('assets/DejaVuSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root,body{font-family:'DejaVu Sans',sans-serif}svg text{font-family:'DejaVu Sans',sans-serif}#metrics{display:block}#metrics strong{display:inline;font-weight:400}#errors:empty,#feedback:empty{display:none}#errors{scroll-margin-top:24px;margin-top:18px}#add[data-invalid=true]{opacity:.7}.errorFlash{animation:errorPulse .7s ease-out 2}@keyframes errorPulse{0%,100%{box-shadow:none}45%{background:#ffe4e8;box-shadow:0 0 0 4px #b00020;color:#b00020}}@media(prefers-reduced-motion:reduce){.errorFlash{animation:none;outline:3px solid #b00020}}
.terms{margin-top:40px;border-top:1px solid #8c2332;padding-top:24px}.terms p{line-height:1.7;color:#505050}.printFoot{border-top:1.3px solid #8c2332;margin-top:30px;padding-top:8px}.printFoot p{font-size:13px!important;margin:3px 0!important;color:#505050}#orderPreview .printCards.single,.printCards.single{grid-template-columns:1fr}#orderPreview .printCards.single .printCard{max-width:760px;width:100%;margin:auto}#frameForm>.grid:first-of-type label{white-space:nowrap}@media print{body{font-family:'DejaVu Sans',sans-serif}.printFoot p{font-size:9px!important}.printCards.single .printCard{max-width:150mm;margin:auto}.printHead h1{font-size:18px}}

/* Revision 7: quieter diagram typography and clear invalid dimensions. */
input::placeholder{color:#777;opacity:1;font-weight:400}
.invalidDimension{border:2px solid #b00020;background:#fff5f6}
.preview>.hint{text-align:center}
.preview .badge,#metrics,.preview>.hint{font-size:16px}
.terms h2,.terms p,footer,footer p{font-size:13px}
.documentTerms{margin-top:28px;border-top:1px solid #8c2332;padding-top:12px}
.documentTerms h3{font-size:14px}
#orderPreview .documentTerms p,.documentTerms p{font-size:13px;line-height:1.6}
@media print{.documentTerms{break-inside:avoid}.documentTerms p{font-size:9px}}

/* Compact product header and step navigation, inspired by the approved reference. */
body{position:relative;isolation:isolate;background:#f5f5f5}
body::before{content:"";position:fixed;inset:120px 0 0;z-index:-1;background:url('assets/service-overlay.png') 85% 40%/min(1000px,95vw) auto no-repeat;opacity:.04;pointer-events:none}
.appHeader{border-top:0;border-bottom:3px solid #d20a28;padding:12px 24px;min-height:76px;gap:20px;justify-content:flex-start;background:white}
.appHeader .brand img{width:165px}.profileName{border-left:1px solid #ddd;padding-left:20px;color:#c9002b;font-size:20px;white-space:nowrap}.appHeader .appTitle{display:block!important;font-size:14px;color:#657075;border-left:1px solid #ddd;padding-left:20px}.headerTools{margin-left:auto;display:flex;align-items:center;gap:24px}.appHeader .serviceLogo{width:100px;height:48px}.languageSwitch{display:flex;border:1px solid #ddd;border-radius:4px;overflow:hidden}.languageSwitch button{min-height:30px;padding:4px 10px;font-size:12px;border:0;border-radius:0;background:white;color:#54616a}.languageSwitch button[aria-pressed=true]{background:#c9002b;color:#fff}
body>.steps{display:flex;justify-content:flex-start;margin:0;border:0;border-bottom:1px solid #ddd;border-radius:0;padding:0 24px;position:relative;background:#fff}
body>.steps .step{min-height:50px;padding:10px 22px;font-size:14px;border-bottom-width:3px;gap:8px}body>.steps .step+.step{border-left:0}body>.steps .step span{width:22px;height:22px;font-size:12px}body>.steps .step.active{color:var(--button-red1);border-bottom-color:var(--button-red1)}body>.steps .step.active span{background:var(--button-red1);border-color:var(--button-red1)}
main{padding-top:24px}.customer label{font-size:var(--body)}.customer{gap:20px;margin-bottom:20px}.preview{top:18px}.card{border-radius:6px}
@media(max-width:800px){.appHeader{padding:10px 16px;gap:12px;flex-wrap:wrap}.appHeader .brand img{width:130px}.profileName{font-size:17px;padding-left:12px}.appHeader .appTitle{order:3;flex-basis:100%;border:0;padding:0;font-size:13px}.headerTools{gap:12px}.appHeader .serviceLogo{width:80px;height:40px}body>.steps{padding:0 8px}body>.steps .step{flex:1;padding:10px 7px;font-size:13px;flex-direction:row}}
@media(max-width:480px){.appHeader .brand img{width:112px}.profileName{font-size:15px}.headerTools{gap:8px}.appHeader .serviceLogo{width:64px;height:34px}.languageSwitch button{padding:4px 7px}.appHeader{gap:8px}body>.steps .step{font-size:12px;gap:5px}}
@media print{body::before,body>.steps{display:none!important}}

.appHeader>.headerTools{display:flex}

/* Revision 12: consolidated warnings and compact supporting text. */
#warning{color:#b00020;font-weight:700;margin-top:16px}#warning:empty{display:none}
#ackWrap{margin:12px 0 0;padding:14px;border:2px solid #b00020;border-radius:6px;background:#fff5f6;color:#b00020;font-size:14px;line-height:1.4}#ackWrap input{accent-color:#b00020}#ackWrap:not(.needsConfirmation){background:#fff;border-color:#bbb;color:#333}
.terms{margin-top:18px;padding-top:12px}.terms h2{font-size:13px;margin:0 0 6px}.terms p{font-size:12px;line-height:1.4;margin:0}footer{padding:10px 0;margin-top:8px}footer p{font-size:12px;line-height:1.4;margin:3px auto}
#orderPreview .printCards{grid-template-columns:1fr}#orderPreview .printCard{width:100%;max-width:860px;margin:auto}#orderPreview .documentTerms p{font-size:12px;line-height:1.4}.documentTerms{margin-top:16px;padding-top:8px}.documentTerms h3{margin:0 0 6px}.documentTerms p{margin:0}.printFoot p{margin:3px 0;line-height:1.35}
@media print{.printCards{display:block}.printCards.single .printCard{max-width:none;width:100%}.printCard svg{max-height:175mm;width:100%}.printFoot p{font-size:8px}.documentTerms p{font-size:9px;line-height:1.35}}

/* Revision 13: accessories, measured infill and targeted validation. */
.errorLink{background:none;border:0;padding:0;text-align:left;color:#b00020;font:inherit;text-decoration:underline;cursor:pointer}.invalidDimension{border:2px solid #b00020!important;background:#fff3f5!important}.steps .step.completed span{background:#24824b!important;border-color:#24824b!important;color:white!important}
.hingeBox{border:1px solid #d5dadd;border-radius:6px;padding:14px;margin:20px 0}.hingeBox legend{font-size:14px;font-weight:bold;padding:0 5px}.hingeBox .hint{font-size:13px;line-height:1.5}.drawingSet{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);align-items:center;gap:8px}.drawingSet>div{min-width:0}.drawingSet svg{display:block;width:100%;height:auto;min-width:0!important}#drawing .drawingSet{min-width:520px}#orderPreview .printCard{position:relative}#orderPreview .printCard h3{padding-right:100px}.quantityBadge{font-size:26px;font-weight:bold;text-align:right;color:#20292c;margin:0 0 4px}.pairNote{font-weight:bold;color:#8c2332}.accessoryNote{border-top:1px solid #ddd;padding-top:10px}.printCard .drawingSet{margin:8px 0}.printCard .glassDrawing{padding-bottom:18px}#orderPreview .printCard p{line-height:1.45}.printCard .quantityBadge{margin-top:-5px}#orderPreview td:nth-child(2){max-width:420px}.hingeBox [hidden]{display:none}
@media print{.drawingSet{display:grid!important;grid-template-columns:1.8fr 1fr}.drawingSet svg{max-height:none!important}.quantityBadge{font-size:24px}.accessoryNote{font-size:10px!important}.printCard h3{font-size:14px}.printCard p{font-size:11px}.printCard .drawingSet{max-height:135mm}.printCard .drawingSet svg{max-height:135mm!important}}

.printCard{position:relative}.printCard .quantityBadge{position:absolute;right:14px;top:14px;margin:0}.printCard h3{padding-right:115px}.giftNote{font-size:12px!important;color:#555}

/* Häfele brand button states, validated 30 October 2026. */
:root{--button-red1:#d20a28;--button-red2:#8c2332;--button-grey1:#969696;--button-grey2:#5a5a5a}
body button:not(.errorLink):not(.step):not(.secondary):not(.textButton):not([data-lang]):not(.numberStep){background:var(--button-red1)!important;color:#fff!important;border-color:var(--button-red1)!important;filter:none!important;transition:background-color .15s ease,border-color .15s ease}
body button:not(.errorLink):not(.step):not(.secondary):not(.textButton):not([data-lang]):not(.numberStep):hover:not(:disabled){background:var(--button-red2)!important;border-color:var(--button-red2)!important}
body button#add[data-editing="true"]{background:var(--button-grey1)!important;border-color:var(--button-grey1)!important}
body button#add[data-editing="true"]:hover:not(:disabled){background:var(--button-grey2)!important;border-color:var(--button-grey2)!important}
body button:not(.errorLink):not(.step):not(.secondary):not(.textButton):not([data-lang]):not(.numberStep):focus-visible{outline:3px solid var(--button-red2);outline-offset:3px}
.languageSwitch button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #fff}
body button.textButton{padding-left:16px;padding-right:16px}
@media(prefers-reduced-motion:reduce){body button{transition:none}}

/* Larger frame, with the infill drawing kept alongside. */
.drawingSet{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
@media print{.drawingSet{grid-template-columns:1.8fr 1fr}.printCard .drawingSet,.printCard .drawingSet svg{max-height:150mm!important}}

.hingeConfirmation{border-top:1px solid #ddd;padding-top:12px;margin:12px 0 0;font-size:14px;font-weight:bold;color:#333;line-height:1.5}

/* Original Häfele typography and delete glyph; icon asset supplied from hafele.ro. */
:root,body{font-family:Arial,'Helvetica Neue','Noto Sans JP','Noto Sans SC',sans-serif;--red:#d20a28;--success:#24824b}
input,button,select,textarea{font-family:inherit}
svg text{font-family:Arial,'Helvetica Neue','Noto Sans JP','Noto Sans SC',sans-serif}
@font-face{font-family:'complete-icon-set';src:url('assets/complete-icon-set.woff') format('woff');font-weight:normal;font-style:normal;font-display:block}
.font-icon{display:inline-block;vertical-align:middle;font-style:normal}
.font-icon-set-icn-024-2-delete::before{content:'\76';font-family:'complete-icon-set'!important;font-style:normal;font-weight:normal}
.u-outer-right-10{margin-right:10px!important}
#documentStatus.success{color:var(--success);font-weight:700}
.includedAccessories{font-size:12px;line-height:1.4;color:#505050;border-top:1px solid #ddd;padding-top:10px}
.printCard .includedAccessories{border-top:0;padding-top:0}
#orderPreview .printFoot,#orderPreview .documentTerms{display:none}
#orderPreview .includedAccessories{font-size:12px}
.pageMeta{display:flex;justify-content:space-between;gap:16px}
.symmetryNote{font-size:14px;color:#505050}
@media print{body,svg text{font-family:Arial,'Helvetica Neue',sans-serif}.includedAccessories{font-size:8px}.pageMeta{display:flex;justify-content:space-between}}

.profileName{color:var(--button-red1)}

/* Clear the draft with the original Häfele text-link treatment. */
body button#clearDraft{background:transparent;color:var(--button-red1);border:0;box-shadow:none;padding-left:0;padding-right:0;filter:none}
body button#clearDraft:hover:not(:disabled){background:transparent;color:var(--button-red2);filter:none}
body button#clearDraft .font-icon{color:inherit}

/* Secondary actions stay neutral; red fill is reserved for primary actions. */
body button.secondary{background:#fff;color:#374447;border-color:#abb7b9;filter:none}
body button.secondary:hover:not(:disabled){background:#f5f5f5;color:var(--button-grey2);border-color:var(--button-grey2);filter:none}
body button.textButton{background:transparent;color:var(--button-red1);border-color:transparent;filter:none}
body button.textButton:hover:not(:disabled){background:transparent;color:var(--button-red2);filter:none}
body button.deleteButton{border:0;box-shadow:none;padding-left:0;padding-right:0}
.languageSwitch button{background:#fff;color:#54616a;filter:none}
.languageSwitch button[aria-pressed=true]{background:var(--button-red1);color:#fff}
.languageSwitch button:hover:not(:disabled){background:#f5f5f5;color:var(--button-grey2);filter:none}
.languageSwitch button[aria-pressed=true]:hover{background:var(--button-red2);color:#fff}
body>.steps button.step{background:#fff;filter:none}

/* v18: compact hinge section, inset select arrows and consistent number controls. */
.hingeBox{border:0;border-radius:0;padding:0;margin:22px 0}
.hingeBox h3{font-size:var(--body);font-weight:bold;line-height:1.55;color:var(--button-red2);margin:0 0 10px}
.hingeBox .check{margin-bottom:8px}
.hingeBox .hint{font-size:14px;line-height:1.5;margin:0 0 14px}
.check input{accent-color:#278044}
.check:has(input:checked){background:#e9f5ec;border-radius:5px;box-shadow:0 0 0 6px #e9f5ec}
.check:has(input:disabled){color:#68706b}
select{appearance:none;-webkit-appearance:none;padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%235A5A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.numberControl{display:flex;align-items:stretch;min-width:0;margin-top:8px}
.numberControl input{min-width:0;flex:1;width:0;margin:0;border-radius:0;text-align:center;appearance:textfield;-moz-appearance:textfield}
.numberControl input::-webkit-inner-spin-button,.numberControl input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
body button.numberStep{flex:0 0 40px;min-height:48px;padding:0;border:1px solid #abb7b9;background:#f5f5f5;color:#5a5a5a;font-size:22px;line-height:1;font-weight:normal;filter:none;border-radius:0}
body button.numberStep:first-child{border-right:0;border-radius:5px 0 0 5px}
body button.numberStep:last-child{border-left:0;border-radius:0 5px 5px 0}
body button.numberStep:hover:not(:disabled){background:#e7e7e7;color:#262626;filter:none}
body button.numberStep:disabled{opacity:1;color:#a5a5a5;background:#f8f8f8}
.numberControl.isReadonly .numberStep{display:none}
.numberControl.isReadonly input{border-radius:5px}
@media(max-width:650px){select{padding-right:46px}body button.numberStep{flex-basis:36px}}

/* Compact field spacing and right-aligned draft clearing. */
label>input:not([type=checkbox]),label>select,label>.numberControl{margin-top:4px}
#frameForm>.actions #clearDraft{margin-left:auto;flex-grow:0;width:auto;text-align:right}

/* v21: the same flush, rounded focus ring for all form fields. */
:root{--field-focus:#a95061;--field-error:#b00020}
.numberControl{border-radius:5px}
input:not([type=checkbox]):focus,select:focus,textarea:focus,.numberControl:focus-within{outline:none;box-shadow:0 0 0 2px var(--field-focus)}
input:not([type=checkbox]).invalidDimension,select.invalidDimension,textarea.invalidDimension{border:1px solid #abb7b9!important;box-shadow:0 0 0 2px var(--field-error)}
.numberControl:has(input.invalidDimension){outline:none;box-shadow:0 0 0 2px var(--field-error)}
.numberControl input:focus,.numberControl input.invalidDimension,.numberControl button.numberStep:focus-visible{outline:none;box-shadow:none}
.numberControl:has(input.errorFlash){animation:numberControlPulse .7s ease-out 2}
.numberControl input.errorFlash{animation:none;box-shadow:none;outline:none}
@keyframes numberControlPulse{0%,100%{box-shadow:0 0 0 2px var(--field-error)}45%{box-shadow:0 0 0 4px var(--field-error)}}
@media(prefers-reduced-motion:reduce){.numberControl:has(input.errorFlash){animation:none;outline:none;box-shadow:0 0 0 2px var(--field-error)}}

/* v23: compact orders, consistent action spacing and Häfele grey edit actions. */
.order{margin-top:16px;padding:18px 24px}
.order h2{margin-bottom:8px}
.order .empty{padding:12px 16px;margin:8px 0;line-height:1.4}
.order .groupTitle{margin:14px 0 4px;padding:8px 12px}
.order .item{padding:12px 0}
.order .item p{margin:4px 0;line-height:1.4}
.itemActions,.order>.actions{display:flex;flex-wrap:wrap;align-items:center;gap:5mm}
.itemActions{margin-top:8px}
.order>.actions{margin-top:12px}
/* v25: separate frame actions from actions for the full order. */
.order:has(#items>.item)>.actions{border-top:3px solid #d6d6d6;padding-top:16px;margin-top:8px}
#side:disabled{background-color:#f3f5f4;color:#68706b;cursor:not-allowed}
.order .itemActions button{margin:0}
body button[data-action=edit],body button#nextColor{background:var(--button-grey1);border-color:var(--button-grey1);color:#fff;filter:none}
body button[data-action=edit]:hover:not(:disabled),body button#nextColor:hover:not(:disabled){background:var(--button-grey2);border-color:var(--button-grey2);color:#fff;filter:none}
#flowStatus:empty{display:none}
main{padding-bottom:16px}
.terms{margin-top:12px;padding-top:8px}
.terms p{line-height:1.3}
footer{margin-top:4px;padding:6px 0}
footer p{margin:2px auto;line-height:1.3}

/* Preview and print use the same compact vector drawing and white paper. */
.drawingSet,#orderPreview .drawingSet{display:block}
.drawingSet svg{width:100%;height:auto}
#orderPreview .printPage{padding:18px 22px;margin-bottom:16px}
#orderPreview .printHead{padding-bottom:8px;margin-bottom:12px}
#orderPreview .printBrands{height:46px;gap:16px}
#orderPreview .printBrands img:first-child{width:140px;height:auto}
#orderPreview .printBrands img:last-child{width:100px;height:44px;object-fit:contain}
#orderPreview .printHead h1{margin:8px 0 6px;font-size:22px}
#orderPreview .printHead p,#orderPreview .printPage>p{margin:4px 0;line-height:1.35}
#orderPreview .printCard{padding:12px}
#orderPreview .printCard h3{margin:0 0 6px}
#orderPreview .printCard p{margin:4px 0;line-height:1.35}
#orderPreview .printCard .drawingSet{margin:8px 0}
#orderPreview .printPage>h2{margin:10px 0 8px;font-size:20px}
#orderPreview td,#orderPreview th{padding:7px 10px;line-height:1.3}
@media(max-width:650px){.order{padding:16px}.order>.actions{gap:5mm}#orderPreview .printPage{padding:14px 12px}}
@media print{
 html,body,#printArea,#printArea .printPage,#printArea .printHead,#printArea .printCard,#printArea .printFoot,#printArea .includedAccessories,#printArea .documentTerms{background:#fff!important;background-image:none!important;box-shadow:none!important}
 #printArea .printPage{border:0;padding:0}
 #printArea .drawingSet{display:block!important;margin:6px 0}
 #printArea .drawingSet svg{width:100%;height:auto;max-height:none!important}
 #printArea .printHead{padding-bottom:6px;margin-bottom:10px}
 #printArea .printHead h1{margin:6px 0;font-size:18px}
 #printArea .printHead p,#printArea .printCard p,#printArea .printPage>p{margin:4px 0;line-height:1.3}
 #printArea .printBrands{height:40px}
 #printArea .printBrands img:last-child{width:85px;height:40px;object-fit:contain}
 #printArea .printCard h3{margin:0 0 5px}
 #printArea .printCard{background:#fff!important;border:0;padding:6px 0}
 #printArea td,#printArea th{padding:6px 8px;line-height:1.25}
 #printArea .printFoot{margin-top:10px;padding-top:5px}
 #printArea .includedAccessories{margin:6px 0;padding-top:5px}
}