/* Illustrated brand margin; device counts keep their existing calculation. */
.house-margin{padding:18px 24px;background:#f2efe7;border-bottom:1px solid var(--line);display:grid;grid-template-columns:90px minmax(0,1fr);gap:24px;align-items:center}
.house-margin>.trajkot-home-logo{width:90px;height:auto;filter:brightness(0) opacity(.82)}
.house-art{display:none}
.house-margin #device-limit-banner{min-width:0;width:100%}
.house-margin .device-budget{padding:0;margin:0;border:0;background:none}
.house-margin .device-budget-line{display:flex;gap:4px 12px;align-items:baseline}
.house-margin .device-budget-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;flex:1 0 100%;color:var(--ink)}
.house-margin .device-budget-line>strong{font-family:Georgia,serif;font-size:25px;font-weight:400;color:var(--ink);line-height:1.3}
.house-margin .device-budget-left{font-size:12px;margin-left:auto}
.device-budget-track{height:6px;border-radius:6px;background:#deddd3;overflow:hidden;margin:10px 0 12px}
.device-budget-track>span{display:block;height:100%;background:var(--olive);border-radius:inherit;transition:width .25s ease}
.over-limit .device-budget-track>span{background:var(--red)}
.house-margin .device-budget summary{display:flex;align-items:center;gap:7px;width:fit-content;list-style:none;font-size:13px;min-height:30px;color:var(--muted)}
.house-margin .device-budget summary::-webkit-details-marker{display:none}
.house-margin .device-budget-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:4px 10px}
.house-margin .device-budget-actions details{min-width:0}
.house-margin .device-budget-actions details[open]{flex-basis:100%}
.device-budget-existing-note{font-size:13px;line-height:1.5;color:var(--muted);margin:4px 0 12px}
.sidebar .restart-form{font-family:var(--config-font);font-weight:400;letter-spacing:normal;display:block;min-height:30px;padding:4px 0;border:0;background:none;color:var(--muted);font-size:13px;line-height:1.4;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.sidebar .restart-form:hover{color:var(--red)}
.sidebar .restart-form:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.budget-info{display:inline-grid;place-items:center;border:1px solid #a6ac96;border-radius:50%;width:18px;height:18px;font:italic 13px Georgia,serif;color:var(--olive)}
.house-margin details[open] summary{color:var(--ink)}
.house-margin .device-budget-details{font-size:13px;border-top:1px solid var(--line);padding-top:8px}
/* Keep the opaque white pencil images blended directly against the page,
   without a nested blend group that would preserve white rectangles. */
.guide-tip .tip-illustration{mix-blend-mode:normal;isolation:auto;background:transparent}
.guide-tip .tip-illustration img,.guide-tip .tip-socket-sketch{mix-blend-mode:multiply;isolation:auto;background:transparent}
.sidebar{grid-template-columns:minmax(0,1fr)}
@media(min-width:1200px){
 :root{--house-margin-width:clamp(270px,24vw,380px)}
 .app{padding-left:var(--house-margin-width)}
 .house-margin{position:fixed;inset:0 auto 0 0;width:var(--house-margin-width);height:100dvh;z-index:46;display:flex;flex-direction:column;gap:0;padding:30px 0 26px;border:0;border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;background:#f3f0e8}
 .house-margin>.trajkot-home-logo{width:125px;flex:none;margin:0 0 12px}
 .house-art{display:block;flex:1 1 auto;min-height:170px;width:100%;position:relative;overflow:hidden}
 .house-art img{display:block;width:100%;height:100%;position:absolute;object-fit:cover;object-position:48% 53%;mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 90%,transparent)}
 .house-margin #device-limit-banner{flex:none;padding:18px 28px 0}
 .house-margin .device-budget-line>strong{font-size:32px}
 .house-margin .device-budget-label{margin-bottom:8px}
 .house-margin .device-budget-left{font-size:13px}
 .device-budget-track{height:7px;margin-top:13px}
 .sidebar{padding:20px 32px}
 .main{padding:28px 32px 70px}
}
@media(max-width:599px){
 .house-margin{padding:14px 18px;grid-template-columns:65px minmax(0,1fr);gap:18px}
 .house-margin>.trajkot-home-logo{width:65px}
 .house-margin .device-budget-label{font-size:12px;letter-spacing:.05em}
 .house-margin .device-budget-line>strong{font-size:23px}
 .house-margin .device-budget-left{font-size:12px}
 .device-budget-track{margin:6px 0}
}
@media(prefers-reduced-motion:reduce){.device-budget-track>span{transition:none}}
/* Right-hand step tiles and a non-overlapping mobile workbench. */
@media(min-width:901px){
 :root{--step-rail-width:210px}
 .app{padding-right:var(--step-rail-width)}
 .sidebar{position:fixed;inset:0 0 0 auto;width:var(--step-rail-width);height:100dvh;padding:28px 16px;display:flex;flex-direction:column;align-items:stretch;gap:22px;border:0;border-left:1px solid var(--line);background-color:#f2efe7;background-image:linear-gradient(145deg,transparent 45%,#8b806712),repeating-linear-gradient(132deg,#7d735503 0px,#7d735503 1px,transparent 1px,transparent 4px);backdrop-filter:none;overflow:hidden}
 .header-meta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
 .header-title{font-size:12px;line-height:1.6;letter-spacing:.09em}
 .header-stage{text-align:left;font-size:13px;pointer-events:none}
 .sidebar .steps{display:flex;flex:1;min-height:0;flex-direction:column;gap:8px;overflow-y:auto;overflow-x:hidden;padding:2px 3px 8px;scrollbar-width:thin}
 .sidebar .stepnav{flex:0 0 auto;width:100%;min-width:0;max-width:none;min-height:48px;padding:11px 10px;gap:9px;border:1px solid #d9d6ca;border-radius:5px;background:#fffefa66;font-size:13px}
 .sidebar .stepnav>span:last-child{max-width:none}
 .sidebar .stepnav:after{display:none}
 .sidebar .stepnum{flex:none}
 .sidebar .stepnav:hover:not(:disabled){background:#fffefa;border-color:#a5ad96}
 .sidebar .stepnav.active{background:#e9eddf;border-color:var(--olive);box-shadow:inset 2px 0 var(--olive)}
 .sidebar .stepnav.completed{background:#f8f7f066}
 .main{padding-left:24px;padding-right:24px}
 .topbar{margin-bottom:28px}
}
@media(min-width:1200px){
 :root{--house-margin-width:clamp(240px,20vw,340px)}
}
@media(max-width:900px){
 .sidebar{position:static;top:auto;z-index:auto;backdrop-filter:none}
 .actions{position:static;bottom:auto;z-index:auto;box-shadow:none;backdrop-filter:none;background:transparent}
 /* The catalogue scrolls below the live frame; both orientations stay visible. */
 .visual-workbench .assembly-stage,.visual-workbench .assembly-stage:has(.pencil-frame.vertical){position:sticky;top:0;z-index:20;align-self:stretch;box-shadow:0 4px 14px #30322e16;padding:10px}
 .visual-workbench{gap:0}
 .assembly-stage .frame-preview.pencil-frame:not(.vertical){width:min(100%,calc(min(180px,24svh) * var(--frame-ratio)));min-width:0;max-width:100%}
 .assembly-stage .frame-preview.pencil-frame.vertical{width:min(100%,calc(min(240px,31svh) * var(--frame-ratio)));min-width:0;max-width:100%}
 .visual-workbench .mobile-catalog{position:relative;max-height:43svh;min-height:180px;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;padding-bottom:4px}
 .mobile-category-panel .sketch-card{min-height:180px;flex-basis:128px;max-width:128px}
 .mobile-category-panel .sketch-art{height:70px;width:70px}
 .mobile-category-panel .sketch-art.half{width:35px}
 .assembly-stage .picked-status{margin-bottom:0}
 .assembly-stage .frame-error:empty{display:none}
}
/* One type family, matching the device-budget label throughout the interface. */
:root{--config-font:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
body,button,input,select,textarea,h1,h2,h3,h4,.design-title,.design-title>span,.design-series-card strong,.summarybox h3,.price,.house-margin .device-budget-line>strong{font-family:var(--config-font)}
h1,.design-title{font-weight:400;letter-spacing:-.025em}
.header-title,.section-title,.design-eyebrow,.kicker{letter-spacing:.12em;text-transform:uppercase}
@media(min-width:901px){
 :root{--step-rail-width:clamp(250px,20vw,340px)}
 .sidebar{padding:28px 22px}
 .sidebar .stepnav{padding:13px 14px;min-height:52px;font-size:14px;gap:12px}
}

/* Supplied product photographs in the additional equipment appearance picker. */
.appearance-choice.has-options{grid-column:1/-1}
.appearance-models{grid-template-columns:repeat(3,minmax(0,1fr))}
.appearance-model{text-align:center;padding:20px 14px}
.appearance-model-image{display:block;width:100%;height:190px;object-fit:contain;margin:0 auto 18px;mix-blend-mode:multiply}
.appearance-model strong{display:block;padding:0}
.appearance-model p{font-size:14px;color:var(--muted);margin:8px 0 0}
@media(max-width:600px){.appearance-models{grid-template-columns:1fr}.appearance-model-image{height:170px}}
/* A mechanism belongs to each ordinary key, independently of its engraving. */
/* One compact builder; the three catalogue drawings always stay half-width. */
.regular-key-builder{grid-column:1/-1;min-width:0;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:10px}
.regular-key-sizes{display:flex;gap:6px;min-width:0;padding:0;margin:0 0 12px;border:0}
.regular-key-sizes legend{font-size:12px;color:var(--muted);padding:0;margin-bottom:7px}
.regular-key-sizes label{position:relative;flex:1;min-width:0;cursor:pointer}
.regular-key-sizes input{position:absolute;opacity:0;width:1px;height:1px}
.regular-key-sizes label>span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 3px;border:1px solid var(--line);border-radius:4px;transition:background .15s,border-color .15s}
.regular-key-sizes b{font-size:14px;font-weight:600}
.regular-key-sizes small{font-size:11px;color:var(--muted);white-space:nowrap}
.regular-key-sizes input:checked+span{border-color:var(--olive);background:#eef0e6}
.regular-key-sizes input:focus-visible+span{outline:2px solid var(--olive);outline-offset:3px}
.regular-key-designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.regular-key-designs>.sketch-card{width:100%;max-width:none;min-height:0;padding:7px 2px;gap:6px;border-color:transparent;background:transparent;box-shadow:none;touch-action:pan-x pan-y}
.regular-key-designs>.sketch-card:disabled{opacity:.7;cursor:default}
.regular-key-designs>.sketch-card:hover:not(:disabled),.regular-key-designs>.sketch-card.picked{border-color:var(--olive);background:#f0f2e9;box-shadow:none}
.regular-key-designs .sketch-card .sketch-art.half{width:28px;height:56px;flex:none}
.regular-key-designs .sketch-label{font-size:11px;line-height:1.35;white-space:nowrap;overflow-wrap:normal}
.regular-key-builder .mechanism-required{min-height:36px}
.mechanism-survey{min-width:0;border:0;border-top:1px solid var(--line);padding:8px 0 0;margin:10px 0 0}
.mechanism-survey legend{padding:0 3px;font-size:12px;color:var(--muted)}
.mechanism-choice{display:grid;grid-template-columns:minmax(0,1fr) 26px;gap:3px 4px;align-items:center;min-height:34px}
.mechanism-choice>label{display:flex;gap:6px;align-items:center;font-size:13px;line-height:1.4;cursor:pointer;min-width:0;min-height:32px}
.mechanism-choice input{width:14px;height:14px;flex:none;margin:0;accent-color:var(--olive)}
.mechanism-choice b{font-weight:600;color:var(--olive)}
.mechanism-choice .extra-tooltip{display:contents}
.mechanism-choice .extra-info{width:25px;height:25px;min-width:25px;font-size:14px}
/* In-flow explanations remain readable inside the scrolling mobile catalogue. */
.mechanism-choice .extra-description{position:static;grid-column:1/-1;width:100%;font-size:13px;padding:10px;margin:3px 0 8px;box-shadow:none}
.mechanism-required{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin:8px 0 0}
.mechanism-badge{position:absolute;right:3px;top:3px;z-index:4;display:grid;place-items:center;min-width:17px;height:18px;padding:0 3px;border:1px solid #a6ad97;border-radius:3px;background:#fffefae8;color:var(--ink);font:600 12px/1 var(--config-font);pointer-events:none}
.mechanism-missing{border-color:var(--red);color:var(--red)}
.assembly-stage .regular-key .remove-art{left:-3px;right:auto;top:auto;bottom:-5px}
.saved-set-preview .mechanism-badge{top:1px;right:1px;min-width:12px;height:14px;padding:0 2px;font-size:10px}
.saved-set-mechanisms{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 12px}
.saved-set-mechanisms summary{cursor:pointer;color:var(--olive)}
.saved-set-mechanisms ul{list-style:none;margin:8px 0 0;padding:0}
.saved-set-mechanisms li+li{margin-top:6px}
.mechanism-repairs{margin:18px 0;padding:16px;border-left:2px solid var(--olive);background:#f0f2e9}
.mechanism-repairs h4{margin:0;font-size:16px}
.mechanism-repairs p{font-size:14px}
.mechanism-repairs label{display:block;font-size:14px;margin:12px 0}
.mechanism-repairs select{display:block;margin-top:5px;max-width:100%;width:100%}
@media(max-width:900px){
 .mobile-category-panel>.regular-key-builder{flex:1 0 100%;max-width:100%;scroll-snap-align:start;padding:10px}
 .mobile-category-panel .regular-key-designs>.sketch-card{max-width:none;min-height:0;gap:6px}
 .mobile-category-panel .regular-key-designs .sketch-art.half{width:30px;height:60px}
 .mobile-category-panel .regular-key-designs .sketch-label{font-size:12px}
 .regular-key-builder .mechanism-choice{min-height:40px}
 .regular-key-builder .mechanism-choice>label{min-height:40px}
}


/* Heating options: water, electric and cooling pairs; details stack vertically. */
.heat-options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.heat-options-grid>.heat-section{margin:0;min-width:0}
.heat-options-grid .heat-choice{padding:18px;align-items:flex-start}
.heat-options-grid .heat-choice input{margin-top:3px}
.heat-options-grid .heat-details{padding:0 18px 18px}
.heat-options-grid .heat-details .grid{grid-template-columns:minmax(0,1fr);gap:0}
.heat-options-grid .heat-details .field{padding:14px 0;margin:0}
.heat-options-grid .heat-answers{flex-direction:column;align-items:stretch;gap:0}
.heat-options-grid .heat-install .heat-choice{padding:12px 0}
.heat-options-grid .heat-install{margin-top:16px}
@media(max-width:700px){.heat-options-grid{grid-template-columns:1fr;gap:12px}}

.classic-switch-question{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 26px}
.classic-switch-question h3{margin:0;min-height:0;font-weight:550;line-height:1.5;font-size:16px}
.classic-switch-answers{display:flex;gap:22px;flex:none}
.classic-switch-answers label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:15px}
@media(max-width:900px){
 .visual-workbench,.visual-workbench .mobile-catalog{overflow-anchor:none}
 .visual-workbench .mobile-catalog{height:43svh}
}
@media(max-width:600px){.classic-switch-question{align-items:flex-start;flex-direction:column;gap:8px}}

/* Room planning: paired questions, a neighbouring allocation summary, then full-width sets. */
.room-planning-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin:0 0 28px;align-items:start}
.room-step-one,.room-step-two{min-width:0}
.room-planning-grid .room-step-heading{margin:0 0 18px;font-size:20px;line-height:1.4}
.room-step-one .room-questions{grid-template-columns:minmax(0,1fr);gap:12px;margin:0}
.room-step-one .room-question{padding:16px;min-width:0}
.room-step-one .room-question h3{min-height:0;font-size:15px;line-height:1.45}
.room-step-one .compact-count{flex-direction:column;align-items:flex-start;gap:6px;margin:14px 0 0;text-align:left}
.room-step-one .compact-count>label{font-size:13px}
.room-step-one .counter{gap:0}
.room-step-one .counter button{width:32px;height:40px;min-height:40px}
.room-step-one .counter input{width:44px!important;height:40px;min-height:40px}
.room-step-one .classic-switch-question{margin:0;gap:14px}
.room-step-one .classic-switch-question h3{margin:0;font-size:15px}
.room-step-one .classic-switch-wide{grid-column:1/-1}
.room-step-one .classic-switch-tile{flex-direction:column;align-items:flex-start;justify-content:space-between}
.room-step-one .classic-switch-answers{gap:18px;flex-wrap:wrap}
.room-step-two{border-top:1px solid var(--line);padding-top:24px}
.room-step-two .allocation-panel{margin:0 0 18px;border:0;border-radius:5px;background:#f1f0e8;padding:16px}
.room-step-two .allocation-panel>strong{display:block;font-size:14px;line-height:1.5;margin-bottom:7px}
.room-step-two .allocation-row{flex-wrap:wrap;gap:3px 10px;line-height:1.5}
.room-step-two .allocation-row>span{flex:1 1 150px;min-width:0}
.room-step-two .allocation-row>strong{white-space:nowrap;color:var(--olive);font-size:13px}
.room-step-two .allocation-error>strong{color:var(--red)}
.room-step-two .btn{width:100%}
.room-step-two>.help{font-size:13px}
@media(min-width:600px){.room-step-one .room-questions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:901px){
 .room-planning-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px}
 .room-step-two{border-top:0;border-left:1px solid var(--line);padding:0 0 0 22px}
}

/* Real Touch View photographs and a colour choice after adding a screen. */
.touch-view-photo{display:block;width:100%;height:190px;object-fit:contain;margin:18px 0 20px;border-radius:3px}
.touch-view-colors{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:18px 0 0;min-width:0}
.touch-view-colors legend{font-size:13px;color:var(--muted);padding:0;margin-bottom:9px}
.touch-color-choice{position:relative;flex:1;min-width:105px;cursor:pointer}
.touch-color-choice input{position:absolute;opacity:0;width:1px;height:1px}
.touch-color-choice>span{display:flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:9px 10px;border:1px solid var(--line);border-radius:4px;font-size:14px;transition:background .15s,border-color .15s}
.touch-color-choice input:checked+span{background:#eef0e6;border-color:var(--olive)}
.touch-color-choice input:focus-visible+span{outline:2px solid var(--olive);outline-offset:3px}
.touch-color-swatch{width:15px;height:15px;border:1px solid #b9bbaf;border-radius:50%;flex:none}
.touch-color-swatch.black{background:#292a2b;border-color:#292a2b}
.touch-color-swatch.white{background:#fffefa}
@media(max-width:599px){.touch-view-photo{height:170px}}

/* Account links share the restart action, rather than a separate host toolbar. */
.trajkot-home-logo{display:block;line-height:0;border-radius:3px}.trajkot-home-logo .logo{display:block;width:100%;height:auto;margin:0}.trajkot-home-logo:focus-visible{outline:2px solid var(--olive);outline-offset:5px}
.header-account-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;min-width:0;width:100%}.header-account-actions .restart-form{white-space:nowrap}
.sidebar .account-nav-link[hidden]{display:none}
.screen[data-step=intro][data-customer-greeting]:before{content:attr(data-customer-greeting);text-transform:none;letter-spacing:.02em;overflow-wrap:anywhere}